update topbar content

.build/common.ts

@@ -33,14 +33,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  'mermaid-layout-tidy-tree': {
-    name: 'mermaid-layout-tidy-tree',
-    packageName: 'mermaid-layout-tidy-tree',
-    file: 'index.ts',
-  },
-  examples: {
-    name: 'mermaid-examples',
-    packageName: 'examples',
-    file: 'index.ts',
-  },
 } as const satisfies Record<string, PackageOptions>;

.build/jsonSchema.ts

@@ -27,7 +27,6 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'block',
   'packet',
   'architecture',
-  'radar',
 ] as const;
 
 /**

.build/types.ts

@@ -10,16 +10,13 @@ const buildType = (packageName: string) => {
       console.log(out.toString());
     }
   } catch (e) {
+    console.error(e);
     if (e.stdout.length > 0) {
       console.error(e.stdout.toString());
     }
     if (e.stderr.length > 0) {
       console.error(e.stderr.toString());
     }
-    // Exit the build process if we are in CI
-    if (process.env.CI) {
-      throw new Error(`Failed to build types for ${packageName}`);
-    }
   }
 };
 

.changeset/brave-baths-behave.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Prevent HTML tags from being escaped in sandbox label rendering

.changeset/brave-memes-flash.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Support edge animation in hand drawn look

.changeset/busy-mirrors-try.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Resolved parsing error where direction TD was not recognized within subgraphs

.changeset/chatty-insects-dream.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles

.changeset/chilly-words-march.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Correct viewBox casing and make SVGs responsive

.changeset/curly-apes-prove.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Improve participant parsing and prevent recursive loops on invalid syntax

.changeset/lazy-brooms-battle.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-feat: add alias support for new participant syntax of sequence diagrams

.changeset/loud-results-melt.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add half-arrowheads (solid & stick) and central connection support

.changeset/short-seals-sort.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: allow to put notes in namespaces on classDiagram

.changeset/slow-lemons-know.md

@@ -1,5 +0,0 @@
----
-'@mermaid': patch
----
-
-fix: Mindmap breaking in ELK layout

.changeset/sweet-games-build.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names

.changeset/ten-plums-bet.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Support ComponentQueue_Ext to prevent parsing error

.changeset/tricky-rivers-stand.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype

.changeset/wide-lines-trade.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11

.cspell/code-terms.txt

@@ -1,5 +1,3 @@
-!viewbox
-# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript
@@ -49,13 +47,13 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
-eslint
 flatmap
 forwardable
 frontmatter
 funs
 gantt
 GENERICTYPE
+getBoundarys
 grammr
 graphtype
 halign
@@ -90,7 +88,6 @@ NODIR
 NSTR
 outdir
 Qcontrolx
-QSTR
 reinit
 rels
 reqs

.cspell/contributors.txt

@@ -2,11 +2,8 @@
 Ashish Jain
 cpettitt
 Dong Cai
-fourcube
-knsv
-Knut Sveidqvist
 Nikolay Rozhkov
 Peng Xiao
 Per Brolin
-Sidharth Vinod
 subhash-halder
+Vinod Sidharth

.cspell/libraries.txt

@@ -26,7 +26,6 @@ dompurify
 elkjs
 fcose
 fontawesome
-Fonticons
 Forgejo
 Foswiki
 Gitea
@@ -64,7 +63,6 @@ rscratch
 shiki
 Slidev
 sparkline
-speccharts
 sphinxcontrib
 ssim
 stylis

.cspell/mermaid-terms.txt

@@ -5,20 +5,19 @@ bmatrix
 braintree
 catmull
 compositTitleSize
-cose
 curv
 doublecircle
-elem
 elems
 gantt
 gitgraph
 gzipped
 handDrawn
 kanban
+knsv
+Knut
 marginx
 marginy
 Markdownish
-mermaidchart
 mermaidjs
 mindmap
 mindmaps
@@ -36,6 +35,7 @@ sandboxed
 siebling
 statediagram
 substate
+Sveidqvist
 unfixable
 Viewbox
 viewports

.cspell/misc-terms.txt

@@ -1,5 +1,4 @@
 BRANDES
-Buzan
 circo
 handDrawn
 KOEPF

.esbuild/build.ts

@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { mkdir, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
@@ -31,27 +31,6 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       // mermaid.js
       { ...iifeOptions },
       // mermaid.min.js
-      { ...iifeOptions, minify: true, metafile: shouldVisualize },
-      // mermaid.tiny.min.js
-      {
-        ...iifeOptions,
-        minify: true,
-        includeLargeFeatures: false,
-        metafile: shouldVisualize,
-        sourcemap: false,
-      }
-    );
-  }
-  if (entryName === 'mermaid-zenuml') {
-    const iifeOptions: MermaidBuildOptions = {
-      ...commonOptions,
-      format: 'iife',
-      globalName: 'mermaid-zenuml',
-    };
-    buildConfigs.push(
-      // mermaid-zenuml.js
-      { ...iifeOptions },
-      // mermaid-zenuml.min.js
       { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
@@ -78,21 +57,6 @@ const handler = (e) => {
   process.exit(1);
 };
 
-const buildTinyMermaid = async () => {
-  await mkdir('./packages/tiny/dist', { recursive: true });
-  await rename(
-    './packages/mermaid/dist/mermaid.tiny.min.js',
-    './packages/tiny/dist/mermaid.tiny.js'
-  );
-  // Copy version from mermaid's package.json to tiny's package.json
-  const mermaidPkg = JSON.parse(await readFile('./packages/mermaid/package.json', 'utf8'));
-  const tinyPkg = JSON.parse(await readFile('./packages/tiny/package.json', 'utf8'));
-  tinyPkg.version = mermaidPkg.version;
-
-  await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
-  await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
-};
-
 const main = async () => {
   await generateLangium();
   await mkdir('stats', { recursive: true });
@@ -101,7 +65,6 @@ const main = async () => {
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }
-  await buildTinyMermaid();
 };
 
 void main();

.esbuild/dev-explorer/ARCHITECTURE.md

@@ -1,53 +0,0 @@
-# Dev Explorer frontend: architecture + debugging notes
-
-## Root cause of the “CSS changes do nothing” problem
-
-The page loads `/dev/styles.css`, but **document-level CSS does not apply through a shadow DOM boundary**.
-
-Historically, `dev-explorer-app` was a `LitElement` using Lit’s default `shadowRoot`, while the rest of the UI used light DOM. That meant:
-
-- The browser showed the _right classes_ (`card`, `card-folder`, `card-file`) in Elements panel.
-- `/dev/styles.css` was clearly being served/updated.
-- Yet computed styles for `.card` looked like UA defaults because the selector never matched across the shadow root.
-
-Fix: make `dev-explorer-app` light DOM too (`createRenderRoot() { return this; }`), so `/dev/styles.css` reliably styles the whole UI.
-
-## Debugging traps (and fast detection)
-
-- **Shadow DOM trap**
-  - Symptom: “CSS is loaded but doesn’t apply”, especially for simple class selectors.
-  - Fast check:
-    - DevTools console: `document.querySelector('dev-explorer-app')?.shadowRoot`
-      - If non-null, global CSS won’t style inside it.
-    - Or: right-click an element you expect styled → “Reveal in Elements” → see if it’s under `#shadow-root`.
-
-- **“Light DOM child inside shadow DOM parent” trap**
-  - Even if a child component uses `createRenderRoot() { return this; }`,
-    if it’s _rendered inside the parent’s shadow root_, it’s still effectively in shadow for document styles.
-
-- **Dev loop trap (CSS-only changes don’t trigger reload)**
-  - The server watches TypeScript bundle inputs + `.mmd` files; static `/dev/styles.css` previously didn’t emit SSE reload events.
-  - That makes CSS changes look flaky unless you manually refresh.
-  - Fix: watch `.esbuild/dev-explorer/public/**/*` and emit SSE on changes.
-
-- **Caching trap (less common here, but real)**
-  - If a query param is constant (`?v=3`) and you don’t reload, the browser can keep a cached stylesheet.
-  - Fast check: DevTools → Network → disable cache + hard reload; or check “(from disk cache)” on the CSS request.
-
-## Styling strategy recommendation (pragmatic)
-
-For a dev-only explorer, keep it simple:
-
-- **Light DOM everywhere**
-- **One stylesheet**: `.esbuild/dev-explorer/public/styles.css` served as `/dev/styles.css`
-- **Scoped selectors** under `dev-explorer-app` to avoid generic class collisions (`.header`, `.content`, etc.)
-
-If you later _want_ Shadow DOM isolation, do it deliberately:
-
-- Put UI styles in Lit `static styles` or adopt a `CSSStyleSheet` into `this.renderRoot.adoptedStyleSheets`.
-- Avoid relying on document CSS selectors for component internals.
-
-## Shoelace integration notes
-
-- Current setup is correct for dev: `setBasePath('/dev/vendor/shoelace')` and `registerIconLibrary(...)`.
-- Prefer theming via CSS variables (Shoelace tokens) rather than overriding internal parts everywhere.

.esbuild/dev-explorer/console-panel.ts

@@ -1,187 +0,0 @@
-import { LitElement, html } from 'lit';
-
-import '@shoelace-style/shoelace/dist/components/input/input.js';
-
-export type LogLevel = 'info' | 'warn' | 'error';
-
-export type LogEntry = {
-  ts: number;
-  level: LogLevel;
-  message: string;
-};
-
-function formatTs(ts: number) {
-  const d = new Date(ts);
-  return (
-    d.toLocaleTimeString(undefined, { hour12: false }) +
-    '.' +
-    String(d.getMilliseconds()).padStart(3, '0')
-  );
-}
-
-function levelVariant(level: LogLevel) {
-  switch (level) {
-    case 'error':
-      return 'danger';
-    case 'warn':
-      return 'warning';
-    default:
-      return 'neutral';
-  }
-}
-
-type DisplayLevel = 'debug' | LogLevel;
-
-function displayLevel(entry: LogEntry): DisplayLevel {
-  // Mermaid often emits debug lines through console.log/info with a marker.
-  if (entry.message.includes(': DEBUG :')) return 'debug';
-  return entry.level;
-}
-
-function displayVariant(level: DisplayLevel) {
-  switch (level) {
-    case 'error':
-      return 'danger';
-    case 'warn':
-      return 'warning';
-    case 'debug':
-      return 'success';
-    default:
-      return 'neutral';
-  }
-}
-
-export class DevConsolePanel extends LitElement {
-  static properties = {
-    logs: { state: true },
-    showInfo: { state: true },
-    showWarn: { state: true },
-    showError: { state: true },
-    showDebug: { state: true },
-    filterText: { state: true },
-  };
-
-  declare logs: LogEntry[];
-  declare showInfo: boolean;
-  declare showWarn: boolean;
-  declare showError: boolean;
-  declare showDebug: boolean;
-  declare filterText: string;
-
-  constructor() {
-    super();
-    this.logs = [];
-    this.showInfo = true;
-    this.showWarn = true;
-    this.showError = true;
-    this.showDebug = true;
-    this.filterText = '';
-  }
-
-  createRenderRoot() {
-    return this;
-  }
-
-  clear() {
-    this.logs = [];
-  }
-
-  append(entry: LogEntry) {
-    this.logs = [...this.logs, entry];
-  }
-
-  async copyVisible() {
-    const visible = this.filteredLogs();
-    const text = visible
-      .map((l) => `[${formatTs(l.ts)}] ${l.level.toUpperCase()} ${l.message}`)
-      .join('\n');
-    await navigator.clipboard.writeText(text);
-  }
-
-  filteredLogs() {
-    const q = this.filterText.trim().toLowerCase();
-    return this.logs.filter((l) => {
-      const isDebugLine = l.message.includes(': DEBUG :');
-      // Treat debug-marked lines as their own independent toggle, since Mermaid often routes them through
-      // console.log/info with a marker rather than a distinct "debug" level.
-      if (isDebugLine && !this.showDebug) return false;
-
-      if (!isDebugLine) {
-        const levelOk =
-          l.level === 'info' ? this.showInfo : l.level === 'warn' ? this.showWarn : this.showError;
-        if (!levelOk) return false;
-      }
-
-      if (!q) return true;
-      return l.message.toLowerCase().includes(q);
-    });
-  }
-
-  render() {
-    const visible = this.filteredLogs();
-    return html`
-      <div class="console">
-        <div class="console-toolbar">
-          <div class="spacer"></div>
-          <sl-input
-            size="small"
-            placeholder="filter…"
-            clearable
-            value=${this.filterText}
-            @sl-input=${(e: any) => (this.filterText = e.target.value ?? '')}
-          ></sl-input>
-          <sl-checkbox
-            size="small"
-            ?checked=${this.showDebug}
-            @sl-change=${(e: any) => (this.showDebug = e.target.checked)}
-            >debug</sl-checkbox
-          >
-          <sl-checkbox
-            size="small"
-            ?checked=${this.showInfo}
-            @sl-change=${(e: any) => (this.showInfo = e.target.checked)}
-            >info</sl-checkbox
-          >
-          <sl-checkbox
-            size="small"
-            ?checked=${this.showWarn}
-            @sl-change=${(e: any) => (this.showWarn = e.target.checked)}
-            >warn</sl-checkbox
-          >
-          <sl-checkbox
-            size="small"
-            ?checked=${this.showError}
-            @sl-change=${(e: any) => (this.showError = e.target.checked)}
-            >error</sl-checkbox
-          >
-          <sl-button size="small" variant="default" @click=${() => void this.copyVisible()}>
-            <sl-icon slot="prefix" name="clipboard"></sl-icon>
-            Copy
-          </sl-button>
-          <sl-button size="small" variant="default" @click=${() => this.clear()}>
-            <sl-icon slot="prefix" name="trash"></sl-icon>
-            Clear
-          </sl-button>
-        </div>
-        <div class="console-body">
-          ${visible.length === 0
-            ? html`<div class="empty">No logs yet.</div>`
-            : visible.map((l) => {
-                const lvl = displayLevel(l);
-                return html`
-                  <div class="logline">
-                    <div class="logmeta">
-                      <sl-badge variant=${displayVariant(lvl)}>${lvl}</sl-badge>
-                      <span class="path">${formatTs(l.ts)}</span>
-                    </div>
-                    <div>${l.message}</div>
-                  </div>
-                `;
-              })}
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('dev-console-panel', DevConsolePanel);

.esbuild/dev-explorer/diagram-viewer.ts

@@ -1,551 +0,0 @@
-import { LitElement, html, nothing } from 'lit';
-
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/select/select.js';
-import '@shoelace-style/shoelace/dist/components/option/option.js';
-import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
-import '@shoelace-style/shoelace/dist/components/split-panel/split-panel.js';
-
-import './console-panel';
-import type { LogEntry, LogLevel } from './console-panel';
-
-type MermaidIife = {
-  initialize: (config: Record<string, unknown>) => void | Promise<void>;
-  render: (
-    id: string,
-    text: string,
-    container?: Element
-  ) => Promise<{ svg: string; bindFunctions?: (el: Element) => void }>;
-};
-
-declare global {
-  interface Window {
-    mermaid?: MermaidIife;
-    mermaidReady?: Promise<MermaidIife>;
-  }
-}
-
-function stringifyArgs(args: unknown[]) {
-  // Mermaid's internal logger frequently uses console formatting like:
-  //   console.log('%c...message...', 'color: lightgreen', ...)
-  // For the log panel we want the human text, not the formatting tokens/styles.
-  let normalized = [...args];
-  if (typeof normalized[0] === 'string') {
-    const fmt = normalized[0];
-    const cssCount = (fmt.match(/%c/g) ?? []).length;
-    if (cssCount > 0) {
-      normalized[0] = fmt.replaceAll('%c', '');
-      // Drop the corresponding CSS args that follow the format string.
-      normalized.splice(1, cssCount);
-    }
-  }
-
-  return normalized
-    .map((a) => {
-      if (typeof a === 'string') return a;
-      if (a instanceof Error) return a.stack ?? a.message;
-      try {
-        return JSON.stringify(a);
-      } catch {
-        return String(a);
-      }
-    })
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-}
-
-type MermaidTheme = 'default' | 'dark' | 'forest' | 'neutral' | 'base';
-type MermaidLayout = 'dagre' | 'elk';
-type MermaidLogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
-
-const DEFAULT_THEME: MermaidTheme = 'default';
-const DEFAULT_LAYOUT: MermaidLayout = 'dagre';
-const DEFAULT_MERMAID_LOG_LEVEL: MermaidLogLevel = 'warn';
-
-function readUrlParam(name: string) {
-  try {
-    return new URL(window.location.href).searchParams.get(name);
-  } catch {
-    return null;
-  }
-}
-
-function setUrlParams(pairs: Record<string, string | null | undefined>) {
-  const url = new URL(window.location.href);
-  for (const [k, v] of Object.entries(pairs)) {
-    if (!v) url.searchParams.delete(k);
-    else url.searchParams.set(k, v);
-  }
-  history.replaceState(null, '', url);
-}
-
-function readStorage(key: string) {
-  try {
-    return localStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-
-function writeStorage(key: string, value: string) {
-  try {
-    localStorage.setItem(key, value);
-  } catch {
-    // ignore
-  }
-}
-
-function isTheme(v: unknown): v is MermaidTheme {
-  return v === 'default' || v === 'dark' || v === 'forest' || v === 'neutral' || v === 'base';
-}
-
-function isLayout(v: unknown): v is MermaidLayout {
-  return v === 'dagre' || v === 'elk';
-}
-
-function isMermaidLogLevel(v: unknown): v is MermaidLogLevel {
-  return (
-    v === 'trace' || v === 'debug' || v === 'info' || v === 'warn' || v === 'error' || v === 'fatal'
-  );
-}
-
-function normalizeLayout(v: unknown): MermaidLayout | null {
-  // Back-compat:
-  // - older UI used `renderer=dagre-d3|dagre-wrapper|elk`
-  // - new UI uses `layout=dagre|elk`
-  if (v === 'dagre' || v === 'elk') return v;
-  if (v === 'dagre-d3' || v === 'dagre-wrapper') return 'dagre';
-  return null;
-}
-
-function parseBoolean(v: unknown): boolean | null {
-  if (typeof v !== 'string') return null;
-  const s = v.trim().toLowerCase();
-  if (['1', 'true', 'yes', 'on'].includes(s)) return true;
-  if (['0', 'false', 'no', 'off'].includes(s)) return false;
-  return null;
-}
-
-export class DevDiagramViewer extends LitElement {
-  static properties = {
-    filePath: { type: String },
-    sseToken: { type: Number },
-    theme: { state: true },
-    layout: { state: true },
-    mermaidLogLevel: { state: true },
-    useMaxWidth: { state: true },
-    loading: { state: true },
-    error: { state: true },
-    source: { state: true },
-    svg: { state: true },
-  };
-
-  declare filePath: string;
-  declare sseToken: number;
-  declare theme: MermaidTheme;
-  declare layout: MermaidLayout;
-  declare mermaidLogLevel: MermaidLogLevel;
-  declare useMaxWidth: boolean;
-  declare loading: boolean;
-  declare error: string;
-  declare source: string;
-  declare svg: string;
-
-  #renderSeq = 0;
-  #consolePatched = false;
-  #originalConsole?: {
-    log: typeof console.log;
-    info: typeof console.info;
-    debug: typeof console.debug;
-    warn: typeof console.warn;
-    error: typeof console.error;
-  };
-
-  constructor() {
-    super();
-    const themeParam = readUrlParam('theme');
-    const layoutParam = readUrlParam('layout');
-    const rendererParam = readUrlParam('renderer'); // legacy
-    const logParam = readUrlParam('logLevel');
-    const useMaxWidthParam = readUrlParam('useMaxWidth');
-
-    const storedTheme = readStorage('devExplorer.viewer.theme');
-    const storedLayout = readStorage('devExplorer.viewer.layout');
-    const storedRenderer = readStorage('devExplorer.viewer.renderer'); // legacy
-    const storedLog = readStorage('devExplorer.viewer.logLevel');
-    const storedUseMaxWidth = readStorage('devExplorer.viewer.useMaxWidth');
-
-    this.theme = isTheme(themeParam)
-      ? themeParam
-      : isTheme(storedTheme)
-        ? storedTheme
-        : DEFAULT_THEME;
-    this.layout =
-      normalizeLayout(layoutParam) ??
-      normalizeLayout(rendererParam) ??
-      normalizeLayout(storedLayout) ??
-      normalizeLayout(storedRenderer) ??
-      DEFAULT_LAYOUT;
-    this.mermaidLogLevel = isMermaidLogLevel(logParam)
-      ? logParam
-      : isMermaidLogLevel(storedLog)
-        ? storedLog
-        : DEFAULT_MERMAID_LOG_LEVEL;
-
-    this.useMaxWidth = parseBoolean(useMaxWidthParam) ?? parseBoolean(storedUseMaxWidth) ?? true;
-
-    this.filePath = '';
-    this.sseToken = 0;
-    this.loading = true;
-    this.error = '';
-    this.source = '';
-    this.svg = '';
-  }
-
-  createRenderRoot() {
-    return this;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.#installConsoleCapture();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#restoreConsoleCapture();
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has('filePath')) {
-      void this.#loadAndRender();
-    } else if (changed.has('sseToken')) {
-      // On rebuild events, re-fetch + re-render the currently open diagram.
-      if (this.filePath) void this.#loadAndRender();
-    } else if (
-      changed.has('theme') ||
-      changed.has('layout') ||
-      changed.has('mermaidLogLevel') ||
-      changed.has('useMaxWidth')
-    ) {
-      // Re-render the currently loaded diagram with the new config without refetching.
-      if (this.source) void this.#renderCurrentSource();
-    }
-  }
-
-  #back() {
-    this.dispatchEvent(new CustomEvent('back', { bubbles: true, composed: true }));
-  }
-
-  #persistSettings() {
-    writeStorage('devExplorer.viewer.theme', this.theme);
-    writeStorage('devExplorer.viewer.layout', this.layout);
-    writeStorage('devExplorer.viewer.logLevel', this.mermaidLogLevel);
-    writeStorage('devExplorer.viewer.useMaxWidth', String(this.useMaxWidth));
-    setUrlParams({
-      theme: this.theme,
-      layout: this.layout,
-      renderer: null, // drop legacy param
-      logLevel: this.mermaidLogLevel,
-      useMaxWidth: this.useMaxWidth ? '1' : '0',
-    });
-  }
-
-  #syncConsolePanelFilters() {
-    const panel = this.querySelector('dev-console-panel') as any;
-    if (!panel) return;
-    // This is intentionally opinionated: less noise by default as logLevel increases.
-    if (
-      this.mermaidLogLevel === 'trace' ||
-      this.mermaidLogLevel === 'debug' ||
-      this.mermaidLogLevel === 'info'
-    ) {
-      panel.showInfo = true;
-      panel.showWarn = true;
-      panel.showError = true;
-      return;
-    }
-    if (this.mermaidLogLevel === 'warn') {
-      panel.showInfo = false;
-      panel.showWarn = true;
-      panel.showError = true;
-      return;
-    }
-    // error / fatal
-    panel.showInfo = false;
-    panel.showWarn = false;
-    panel.showError = true;
-  }
-
-  #appendLog(entry: LogEntry) {
-    const panel = this.querySelector('dev-console-panel') as any;
-    panel?.append?.(entry);
-  }
-
-  #installConsoleCapture() {
-    if (this.#consolePatched) return;
-    this.#consolePatched = true;
-
-    this.#originalConsole = {
-      log: console.log,
-      info: console.info,
-      debug: console.debug,
-      warn: console.warn,
-      error: console.error,
-    };
-
-    const capture = (level: LogLevel, args: unknown[]) => {
-      this.#appendLog({
-        ts: Date.now(),
-        level,
-        message: stringifyArgs(args),
-      });
-    };
-
-    // Mermaid uses its own logger which routes to console.info/debug/warn/error.
-    // Capture those too (map debug/info/log -> panel "info").
-    console.log = (...args) => {
-      capture('info', args);
-      this.#originalConsole!.log.apply(console, args as any);
-    };
-    console.info = (...args) => {
-      capture('info', args);
-      this.#originalConsole!.info.apply(console, args as any);
-    };
-    console.debug = (...args) => {
-      capture('info', args);
-      this.#originalConsole!.debug.apply(console, args as any);
-    };
-    console.warn = (...args) => {
-      capture('warn', args);
-      this.#originalConsole!.warn.apply(console, args as any);
-    };
-    console.error = (...args) => {
-      capture('error', args);
-      this.#originalConsole!.error.apply(console, args as any);
-    };
-  }
-
-  #restoreConsoleCapture() {
-    if (!this.#consolePatched) return;
-    this.#consolePatched = false;
-    if (!this.#originalConsole) return;
-    console.log = this.#originalConsole.log;
-    console.info = this.#originalConsole.info;
-    console.debug = this.#originalConsole.debug;
-    console.warn = this.#originalConsole.warn;
-    console.error = this.#originalConsole.error;
-    this.#originalConsole = undefined;
-  }
-
-  #clearLogs() {
-    const panel = this.querySelector('dev-console-panel') as any;
-    panel?.clear?.();
-  }
-
-  async #fetchSource() {
-    const url = new URL('/dev/api/file', window.location.origin);
-    url.searchParams.set('path', this.filePath);
-    const res = await fetch(url);
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    return await res.text();
-  }
-
-  async #loadAndRender() {
-    const seq = ++this.#renderSeq;
-    this.loading = true;
-    this.error = '';
-    this.svg = '';
-    this.#clearLogs();
-    this.#syncConsolePanelFilters();
-
-    try {
-      const source = await this.#fetchSource();
-      if (seq !== this.#renderSeq) return;
-      this.source = source;
-      await this.#renderMermaid(source);
-    } catch (e) {
-      this.error = e instanceof Error ? e.message : String(e);
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  async #renderCurrentSource() {
-    const seq = ++this.#renderSeq;
-    this.loading = true;
-    this.error = '';
-    this.svg = '';
-    this.#clearLogs();
-    this.#syncConsolePanelFilters();
-    try {
-      const source = this.source;
-      if (!source) return;
-      if (seq !== this.#renderSeq) return;
-      await this.#renderMermaid(source);
-    } catch (e) {
-      this.error = e instanceof Error ? e.message : String(e);
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  async #renderMermaid(text: string) {
-    const m = (await window.mermaidReady?.catch(() => undefined)) ?? window.mermaid;
-    if (!m) {
-      throw new Error(
-        'window.mermaid is not available (did /mermaid.esm.mjs load and did the bootstrap set window.mermaid?)'
-      );
-    }
-
-    const initConfig = {
-      startOnLoad: false,
-      securityLevel: 'strict',
-      theme: this.theme,
-      layout: this.layout,
-      logLevel: this.mermaidLogLevel,
-      flowchart: {
-        useMaxWidth: this.useMaxWidth,
-      },
-    };
-
-    // Debugging aid: log exactly what we are about to initialize/render with.
-    // Do it *before* initialize so detector issues can be correlated.
-    const previewLimit = 4000;
-    const preview =
-      text.length > previewLimit
-        ? `${text.slice(0, previewLimit)}\n… (${text.length - previewLimit} more chars)`
-        : text;
-    console.log('[dev-explorer] mermaid.initialize config:', initConfig);
-    console.log('[dev-explorer] diagram source preview:\n' + preview);
-
-    // Keep it deterministic-ish between reloads.
-    await m.initialize(initConfig);
-
-    const id = `dev-explorer-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-    const { svg, bindFunctions } = await m.render(id, text);
-    this.svg = svg;
-    // Allow mermaid to attach event handlers (e.g. links).
-    await this.updateComplete;
-    // If the page ever ended up scrolled down due to a previous oversized render, snap back to top.
-    // (We intentionally removed vertical scrollbars in the viewer.)
-    try {
-      window.scrollTo(0, 0);
-    } catch {
-      // ignore
-    }
-    const container = this.querySelector('.diagram-inner');
-    if (container && bindFunctions) bindFunctions(container);
-  }
-
-  render() {
-    return html`
-      <div class="header">
-        <sl-button size="small" variant="default" @click=${() => this.#back()}>
-          <sl-icon slot="prefix" name="arrow-left"></sl-icon>
-          Back
-        </sl-button>
-        <div style="min-width: 0;">
-          <div class="title">Diagram</div>
-          <div class="path">${this.filePath}</div>
-        </div>
-        <div class="spacer"></div>
-        <div class="viewer-controls">
-          <div class="control">
-            <span class="label">Theme</span>
-            <sl-select
-              size="small"
-              value=${this.theme}
-              @sl-change=${(e: any) => {
-                const v = e.target?.value;
-                if (isTheme(v)) {
-                  this.theme = v;
-                  this.#persistSettings();
-                }
-              }}
-            >
-              <sl-option value="default">default</sl-option>
-              <sl-option value="dark">dark</sl-option>
-              <sl-option value="forest">forest</sl-option>
-              <sl-option value="neutral">neutral</sl-option>
-              <sl-option value="base">base</sl-option>
-            </sl-select>
-          </div>
-
-          <div class="control">
-            <span class="label">Layout</span>
-            <sl-select
-              size="small"
-              value=${this.layout}
-              @sl-change=${(e: any) => {
-                const v = e.target?.value;
-                if (isLayout(v)) {
-                  this.layout = v;
-                  this.#persistSettings();
-                }
-              }}
-            >
-              <sl-option value="dagre">dagre</sl-option>
-              <sl-option value="elk">elk</sl-option>
-            </sl-select>
-          </div>
-
-          <div class="control">
-            <span class="label">Log</span>
-            <sl-select
-              size="small"
-              value=${this.mermaidLogLevel}
-              @sl-change=${(e: any) => {
-                const v = e.target?.value;
-                if (isMermaidLogLevel(v)) {
-                  this.mermaidLogLevel = v;
-                  this.#persistSettings();
-                  this.#syncConsolePanelFilters();
-                }
-              }}
-            >
-              <sl-option value="trace">trace</sl-option>
-              <sl-option value="debug">debug</sl-option>
-              <sl-option value="info">info</sl-option>
-              <sl-option value="warn">warn</sl-option>
-              <sl-option value="error">error</sl-option>
-              <sl-option value="fatal">fatal</sl-option>
-            </sl-select>
-          </div>
-
-          <div class="control">
-            <sl-checkbox
-              size="small"
-              ?checked=${this.useMaxWidth}
-              @sl-change=${(e: any) => {
-                this.useMaxWidth = Boolean(e.target?.checked);
-                this.#persistSettings();
-              }}
-              >useMaxWidth</sl-checkbox
-            >
-          </div>
-        </div>
-        ${this.loading ? html`<div class="subtle">rendering…</div>` : nothing}
-      </div>
-
-      ${this.error
-        ? html`<div class="empty">Error: <span class="path">${this.error}</span></div>`
-        : nothing}
-
-      <div class="content">
-        <sl-split-panel position="75" style="height: 100%;">
-          <div slot="start" class="diagram">
-            <div class="diagram-inner" data-theme=${this.theme} .innerHTML=${this.svg}></div>
-          </div>
-          <div slot="end" style="height: 100%;">
-            <dev-console-panel></dev-console-panel>
-          </div>
-        </sl-split-panel>
-      </div>
-    `;
-  }
-}
-
-customElements.define('dev-diagram-viewer', DevDiagramViewer);

.esbuild/dev-explorer/explorer-app.ts

@@ -1,143 +0,0 @@
-import { LitElement, html, nothing } from 'lit';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
-import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
-
-import '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.js';
-import '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.js';
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/split-panel/split-panel.js';
-import '@shoelace-style/shoelace/dist/components/badge/badge.js';
-import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
-
-import './file-explorer';
-import './diagram-viewer';
-
-type ViewMode = 'explorer' | 'viewer';
-
-function getInitialStateFromUrl() {
-  const url = new URL(window.location.href);
-  const dir = url.searchParams.get('path') ?? '';
-  const file = url.searchParams.get('file') ?? '';
-  return { dir, file };
-}
-
-function setUrlState({ dir, file }: { dir: string; file: string }) {
-  const url = new URL(window.location.href);
-  url.searchParams.delete('path');
-  url.searchParams.delete('file');
-  if (dir) url.searchParams.set('path', dir);
-  if (file) url.searchParams.set('file', file);
-  history.replaceState(null, '', url);
-}
-
-export class DevExplorerApp extends LitElement {
-  static properties = {
-    mode: { state: true },
-    dirPath: { state: true },
-    lastDirPath: { state: true },
-    filePath: { state: true },
-    sseToken: { state: true },
-  };
-
-  declare mode: ViewMode;
-  declare dirPath: string;
-  declare lastDirPath: string;
-  declare filePath: string;
-  declare sseToken: number;
-
-  #events?: EventSource;
-
-  constructor() {
-    super();
-    const { dir, file } = getInitialStateFromUrl();
-    this.dirPath = dir;
-    this.lastDirPath = dir;
-    this.filePath = file;
-    this.mode = file ? 'viewer' : 'explorer';
-    this.sseToken = 0;
-
-    setBasePath('/dev/vendor/shoelace');
-    registerIconLibrary('default', {
-      resolver: (name) => `/dev/vendor/shoelace/assets/icons/${name}.svg`,
-    });
-  }
-
-  createRenderRoot() {
-    // Use light DOM so document-level CSS (public/styles.css => /dev/styles.css) applies to the UI.
-    // Without this, Lit's default shadow root will block global selectors like `.list` / `button.card`.
-    return this;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.#events = new EventSource('/events');
-    this.#events.onmessage = () => {
-      this.sseToken++;
-    };
-
-    window.addEventListener('popstate', this.#onPopState);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#events?.close();
-    window.removeEventListener('popstate', this.#onPopState);
-  }
-
-  #onPopState = () => {
-    const { dir, file } = getInitialStateFromUrl();
-    this.dirPath = dir;
-    this.lastDirPath = dir;
-    this.filePath = file;
-    this.mode = file ? 'viewer' : 'explorer';
-  };
-
-  #goToDir = (dir: string) => {
-    this.dirPath = dir;
-    this.lastDirPath = dir;
-    this.mode = 'explorer';
-    this.filePath = '';
-    setUrlState({ dir, file: '' });
-  };
-
-  #openFile = (filePath: string) => {
-    this.filePath = filePath;
-    this.mode = 'viewer';
-    setUrlState({ dir: this.lastDirPath, file: filePath });
-  };
-
-  #backToExplorer = () => {
-    this.mode = 'explorer';
-    this.filePath = '';
-    setUrlState({ dir: this.lastDirPath, file: '' });
-  };
-
-  render() {
-    return html`
-      <div class="app">
-        ${this.mode === 'explorer'
-          ? html`
-              <dev-file-explorer
-                .path=${this.dirPath}
-                .sseToken=${this.sseToken}
-                @navigate=${(e: CustomEvent<{ path: string }>) => this.#goToDir(e.detail.path)}
-                @open-file=${(e: CustomEvent<{ path: string }>) => this.#openFile(e.detail.path)}
-              ></dev-file-explorer>
-            `
-          : nothing}
-        ${this.mode === 'viewer'
-          ? html`
-              <dev-diagram-viewer
-                .filePath=${this.filePath}
-                .sseToken=${this.sseToken}
-                @back=${this.#backToExplorer}
-              ></dev-diagram-viewer>
-            `
-          : nothing}
-      </div>
-    `;
-  }
-}
-
-customElements.define('dev-explorer-app', DevExplorerApp);

.esbuild/dev-explorer/file-explorer.ts

@@ -1,182 +0,0 @@
-import { LitElement, html, nothing } from 'lit';
-
-type Entry = {
-  name: string;
-  kind: 'dir' | 'file';
-  path: string;
-};
-
-type FilesResponse = {
-  root: string;
-  path: string;
-  entries: Entry[];
-};
-
-function dirname(posixPath: string) {
-  const p = posixPath.replaceAll('\\', '/').replace(/\/+$/, '');
-  if (!p) return '';
-  const idx = p.lastIndexOf('/');
-  if (idx <= 0) return '';
-  return p.slice(0, idx);
-}
-
-function pathSegments(posixPath: string) {
-  const p = posixPath.replaceAll('\\', '/').replace(/^\/+/, '').replace(/\/+$/, '');
-  if (!p) return [];
-  return p.split('/').filter(Boolean);
-}
-
-export class DevFileExplorer extends LitElement {
-  static properties = {
-    path: { type: String },
-    sseToken: { type: Number },
-    loading: { state: true },
-    error: { state: true },
-    root: { state: true },
-    entries: { state: true },
-  };
-
-  declare path: string;
-  declare sseToken: number;
-  declare loading: boolean;
-  declare error: string;
-  declare root: string;
-  declare entries: Entry[];
-
-  constructor() {
-    super();
-    this.path = '';
-    this.sseToken = 0;
-    this.loading = true;
-    this.error = '';
-    this.root = '';
-    this.entries = [];
-  }
-
-  createRenderRoot() {
-    // Use light DOM so global CSS in public/styles.css applies.
-    return this;
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has('path') || changed.has('sseToken')) {
-      void this.#load();
-    }
-  }
-
-  async #load() {
-    this.loading = true;
-    this.error = '';
-    try {
-      const url = new URL('/dev/api/files', window.location.origin);
-      if (this.path) url.searchParams.set('path', this.path);
-      const res = await fetch(url);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const json = (await res.json()) as FilesResponse;
-      this.root = json.root ?? '';
-      this.entries = json.entries ?? [];
-    } catch (e) {
-      this.error = e instanceof Error ? e.message : String(e);
-      this.entries = [];
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  #emitNavigate(nextPath: string) {
-    this.dispatchEvent(
-      new CustomEvent('navigate', { detail: { path: nextPath }, bubbles: true, composed: true })
-    );
-  }
-
-  #emitOpenFile(filePath: string) {
-    this.dispatchEvent(
-      new CustomEvent('open-file', { detail: { path: filePath }, bubbles: true, composed: true })
-    );
-  }
-
-  #onActivate(kind: Entry['kind'], entryPath: string) {
-    if (kind === 'dir') {
-      this.#emitNavigate(entryPath);
-    } else {
-      this.#emitOpenFile(entryPath);
-    }
-  }
-
-  render() {
-    const segments = pathSegments(this.path);
-    const itemLabel = this.entries.length === 1 ? 'item' : 'items';
-
-    return html`
-      <div class="header">
-        <div style="min-width: 0;">
-          <div class="title">Dev Explorer</div>
-          <div class="subtle">
-            root:
-            <span class="path">${this.root || 'cypress/platform/dev-diagrams'}</span>
-          </div>
-          <div style="margin-top: 6px;">
-            <sl-breadcrumb>
-              <sl-breadcrumb-item @click=${() => this.#emitNavigate('')}>root</sl-breadcrumb-item>
-              ${segments.map((seg, idx) => {
-                const to = segments.slice(0, idx + 1).join('/');
-                return html`<sl-breadcrumb-item @click=${() => this.#emitNavigate(to)}
-                  >${seg}</sl-breadcrumb-item
-                >`;
-              })}
-            </sl-breadcrumb>
-          </div>
-        </div>
-        <div class="spacer"></div>
-        <div class="subtle">
-          ${this.loading ? 'loading…' : html`<span>${this.entries.length} ${itemLabel}</span>`}
-        </div>
-        <sl-button
-          size="small"
-          variant="default"
-          ?disabled=${!this.path}
-          @click=${() => this.#emitNavigate(dirname(this.path))}
-        >
-          <sl-icon slot="prefix" name="arrow-left"></sl-icon>
-          Up
-        </sl-button>
-      </div>
-
-      <div class="content">
-        ${this.error
-          ? html`<div class="empty">Error: <span class="path">${this.error}</span></div>`
-          : nothing}
-        ${!this.error && !this.loading && this.entries.length === 0
-          ? html`<div class="empty">No folders or <span class="path">.mmd</span> files here.</div>`
-          : nothing}
-
-        <div class="list">
-          ${this.entries.map((e) => {
-            const icon = e.kind === 'dir' ? 'folder-fill' : 'file-earmark-code';
-            const cardClass = e.kind === 'dir' ? 'card card-folder' : 'card card-file';
-            const click =
-              e.kind === 'dir'
-                ? () => this.#emitNavigate(e.path)
-                : () => this.#emitOpenFile(e.path);
-            const onKeyDown = (ev: KeyboardEvent) => {
-              if (ev.key === 'Enter' || ev.key === ' ') {
-                ev.preventDefault();
-                this.#onActivate(e.kind, e.path);
-              }
-            };
-            return html`
-              <button class=${cardClass} type="button" @click=${click} @keydown=${onKeyDown}>
-                <div class="card-inner">
-                  <sl-icon class="card-icon" name=${icon}></sl-icon>
-                  <div class="card-title">${e.name}</div>
-                </div>
-              </button>
-            `;
-          })}
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('dev-file-explorer', DevFileExplorer);

.esbuild/dev-explorer/public/index.html

@@ -1,39 +0,0 @@
-<!doctype html>
-<html lang="en" class="sl-theme-dark">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Mermaid Dev Explorer</title>
-
-    <link rel="stylesheet" href="/dev/vendor/shoelace/themes/dark.css" />
-    <link rel="stylesheet" href="/dev/styles.css?v=6" />
-  </head>
-  <body>
-    <!-- Mermaid ESM + ELK layout loaders (required for `layout: 'elk'`) -->
-    <script type="module">
-      // Expose a single async hook so the app can reliably await Mermaid "activation".
-      // This avoids races where the UI calls initialize/render before layouts/diagrams are ready.
-      window.mermaidReady = (async () => {
-        try {
-          const [{ default: mermaid }, { default: layouts }] = await Promise.all([
-            import('/mermaid.esm.mjs'),
-            import('/mermaid-layout-elk.esm.mjs'),
-          ]);
-
-          mermaid.registerLayoutLoaders(layouts);
-
-          // Keep the rest of the dev explorer simple: expose mermaid on window for the Lit components.
-          window.mermaid = mermaid;
-          return mermaid;
-        } catch (err) {
-          console.error('[dev-explorer] Failed to initialize mermaid (ESM + elk loaders).', err);
-          throw err;
-        }
-      })();
-    </script>
-
-    <dev-explorer-app></dev-explorer-app>
-
-    <script type="module" src="/dev/assets/explorer-app.js?v=6"></script>
-  </body>
-</html>

.esbuild/dev-explorer/public/styles.css

@@ -1,359 +0,0 @@
-/* Dev Explorer tokens. Keep on :root so the page background picks them up too. */
-:root {
-  --app-bg: #0b1020;
-  --app-fg: #e8eefc;
-  --panel-bg: #0f1733;
-  --muted: rgba(232, 238, 252, 0.75);
-  --border: rgba(232, 238, 252, 0.12);
-  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  background: var(--app-bg);
-  color: var(--app-fg);
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  /* Keep the page from becoming scrollable when components accidentally overflow. */
-  overflow: hidden;
-}
-
-a {
-  color: inherit;
-}
-
-/* Scope app-level layout rules to avoid generic class collisions. */
-dev-explorer-app {
-  display: block;
-  height: 100%;
-}
-
-dev-explorer-app .app {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Let the top-level view components actually fill the available vertical space. */
-dev-explorer-app dev-file-explorer,
-dev-explorer-app dev-diagram-viewer {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-dev-explorer-app .header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel-bg);
-}
-
-dev-explorer-app .viewer-controls {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  margin-right: 8px;
-}
-
-dev-explorer-app .viewer-controls .control {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-dev-explorer-app .viewer-controls .label {
-  font-size: 12px;
-  color: var(--muted);
-  user-select: none;
-}
-
-dev-explorer-app .viewer-controls sl-select {
-  width: 140px;
-}
-
-dev-explorer-app .header .spacer {
-  flex: 1;
-}
-
-dev-explorer-app .title {
-  font-weight: 600;
-  letter-spacing: 0.2px;
-}
-
-dev-explorer-app .subtle {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-dev-explorer-app .content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* Diagram view should behave like a full-height canvas; avoid nested scrollbars. */
-dev-explorer-app dev-diagram-viewer .content {
-  overflow: hidden;
-}
-
-/* Shoelace split panel: ensure slot content can't overflow and push itself off-screen. */
-dev-explorer-app sl-split-panel {
-  height: 100%;
-  overflow: hidden;
-}
-
-dev-explorer-app sl-split-panel::part(base) {
-  height: 100%;
-  overflow: hidden;
-}
-
-dev-explorer-app sl-split-panel::part(start),
-dev-explorer-app sl-split-panel::part(end) {
-  overflow: hidden;
-  min-height: 0;
-}
-
-dev-explorer-app .list {
-  padding: 24px;
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fill, 260px);
-}
-
-/* Card base - use button element */
-dev-explorer-app button.card {
-  all: unset;
-  box-sizing: border-box;
-  width: 260px;
-  height: 200px;
-  border-radius: 20px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* Folder card style */
-dev-explorer-app button.card.card-folder {
-  background: linear-gradient(160deg, #1a3052 0%, #0d1a2d 100%);
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    0 2px 8px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-dev-explorer-app button.card.card-folder:hover {
-  transform: translateY(-6px) scale(1.02);
-  box-shadow:
-    0 16px 48px rgba(0, 0, 0, 0.5),
-    0 4px 12px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.12);
-}
-
-/* File card style */
-dev-explorer-app button.card.card-file {
-  background: linear-gradient(160deg, #1e2d4a 0%, #111827 100%);
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    0 2px 8px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06);
-}
-
-dev-explorer-app button.card.card-file:hover {
-  transform: translateY(-6px) scale(1.02);
-  box-shadow:
-    0 16px 48px rgba(0, 0, 0, 0.5),
-    0 4px 12px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-dev-explorer-app button.card:focus-visible {
-  outline: 3px solid rgba(96, 165, 250, 0.7);
-  outline-offset: 4px;
-}
-
-/* Subtle border overlay */
-dev-explorer-app button.card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  pointer-events: none;
-}
-
-dev-explorer-app .card-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  padding: 24px;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-/* Icon styling */
-dev-explorer-app .card-icon {
-  font-size: 56px !important;
-  width: 56px;
-  height: 56px;
-}
-
-dev-explorer-app button.card.card-folder .card-icon {
-  color: #f59e0b;
-  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.4));
-}
-
-dev-explorer-app button.card.card-file .card-icon {
-  color: #3b82f6;
-  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.35));
-}
-
-/* Title styling */
-dev-explorer-app .card-title {
-  font-size: 12px;
-  font-family: var(--mono);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 230px;
-  color: rgba(255, 255, 255, 0.85);
-  line-height: 1.4;
-  text-align: center;
-}
-
-dev-explorer-app .row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.02);
-}
-
-dev-explorer-app .row:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-
-dev-explorer-app .row sl-icon {
-  font-size: 16px;
-}
-
-dev-explorer-app .path {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-dev-explorer-app .diagram {
-  height: 100%;
-  overflow: hidden;
-  padding: 12px;
-  box-sizing: border-box;
-}
-
-dev-explorer-app .diagram-inner {
-  /* Canvas background behind the rendered SVG (theme-dependent). */
-  background: #fff;
-  color: #111;
-  border-radius: 10px;
-  padding: 12px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-/* Fit the rendered SVG within the available pane (no scrollbars). */
-dev-explorer-app .diagram-inner > svg {
-  width: auto;
-  height: auto;
-  max-width: 100% !important;
-  max-height: 100% !important;
-}
-
-dev-explorer-app .diagram-inner[data-theme='dark'] {
-  background: #0b1020;
-  color: #e8eefc;
-}
-
-dev-explorer-app .console {
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--border);
-  background: var(--panel-bg);
-}
-
-dev-explorer-app .spacer {
-  flex: 1;
-}
-
-dev-explorer-app .console-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-dev-explorer-app .console-toolbar sl-input {
-  width: 260px;
-}
-
-dev-explorer-app .console-body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 10px 12px;
-}
-
-dev-explorer-app .logline {
-  font-family: var(--mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin: 0 0 8px 0;
-  line-height: 1.35;
-}
-
-dev-explorer-app .logmeta {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-dev-explorer-app .empty {
-  padding: 18px 12px;
-  color: var(--muted);
-  font-size: 13px;
-}
-
-dev-explorer-app sl-breadcrumb::part(base) {
-  font-size: 12px;
-}
-
-

.esbuild/server.ts

@@ -2,17 +2,12 @@
 import chokidar from 'chokidar';
 import cors from 'cors';
 import { context } from 'esbuild';
-import { promises as fs } from 'fs';
 import type { Request, Response } from 'express';
 import express from 'express';
-import path, { resolve } from 'path';
-import { fileURLToPath } from 'url';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import { defaultOptions, getBuildConfig } from './util.js';
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-
 const configs = Object.values(packageOptions).map(({ packageName }) =>
   getBuildConfig({
     ...defaultOptions,
@@ -23,7 +18,7 @@ const configs = Object.values(packageOptions).map(({ packageName }) =>
 );
 const mermaidIIFEConfig = getBuildConfig({
   ...defaultOptions,
-  minify: true,
+  minify: false,
   core: false,
   options: packageOptions.mermaid,
   format: 'iife',
@@ -89,81 +84,6 @@ function sendEventsToAll() {
   clients.forEach(({ response }) => response.write(`data: ${Date.now()}\n\n`));
 }
 
-interface DevExplorerEntry {
-  name: string;
-  kind: 'dir' | 'file';
-  path: string; // posix-style, relative to root
-}
-
-const devExplorerRootAbs = resolve(
-  process.cwd(),
-  process.env.MERMAID_DEV_EXPLORER_ROOT ?? 'cypress/platform/dev-diagrams'
-);
-
-function toPosixPath(p: string) {
-  return p.split(path.sep).join('/');
-}
-
-function resolveWithinDevExplorerRoot(requestedPath: unknown) {
-  const requested = typeof requestedPath === 'string' ? requestedPath : '';
-  if (requested.includes('\0')) {
-    throw new Error('Invalid path');
-  }
-
-  // Normalize slashes and avoid weird absolute-path cases.
-  const cleaned = requested.replaceAll('\\', '/').replace(/^\/+/, '');
-  const absPath = resolve(devExplorerRootAbs, cleaned);
-  const rel = path.relative(devExplorerRootAbs, absPath);
-
-  // Prevent traversal above root.
-  if (rel.startsWith('..') || path.isAbsolute(rel)) {
-    throw new Error('Path escapes configured root');
-  }
-
-  return { absPath, relPath: toPosixPath(rel) };
-}
-
-async function createDevExplorerBundle() {
-  const devExplorerDir = resolve(__dirname, 'dev-explorer');
-  const entryPoint = resolve(devExplorerDir, 'explorer-app.ts');
-  const outDir = resolve(devExplorerDir, 'dist');
-
-  try {
-    const devExplorerCtx = await context({
-      absWorkingDir: process.cwd(),
-      entryPoints: [entryPoint],
-      bundle: true,
-      format: 'esm',
-      target: 'es2020',
-      sourcemap: true,
-      outdir: outDir,
-      logLevel: 'info',
-      plugins: [
-        {
-          name: 'dev-explorer-reload',
-          setup(build) {
-            build.onEnd(() => {
-              sendEventsToAll();
-            });
-          },
-        },
-      ],
-    });
-
-    await devExplorerCtx.watch();
-    await devExplorerCtx.rebuild();
-  } catch (err) {
-    console.error(
-      [
-        'Dev Explorer bundle build failed.',
-        'Install dependencies: pnpm add -D lit @shoelace-style/shoelace',
-        'Then restart the dev server.',
-      ].join('\n')
-    );
-    console.error(err);
-  }
-}
-
 async function createServer() {
   await generateLangium();
   handleFileChange();
@@ -186,117 +106,8 @@ async function createServer() {
       handleFileChange();
     });
 
-  // Rebuild the dev-explorer client bundle on changes (and emit SSE so the browser reloads).
-  await createDevExplorerBundle();
-
-  // Emit SSE when Dev Explorer static assets change (e.g. public/styles.css),
-  // otherwise CSS-only changes can look "ignored" unless the user manually refreshes.
-  chokidar
-    .watch(['.esbuild/dev-explorer/public/**/*'], {
-      ignoreInitial: true,
-      ignored: [/node_modules/, /dist/, /docs/, /coverage/],
-    })
-    .on('all', (event, changedPath) => {
-      if (!['add', 'change', 'unlink'].includes(event)) {
-        return;
-      }
-      console.log(`[dev-explorer] ${event}: ${changedPath}`);
-      sendEventsToAll();
-    });
-
-  // Emit SSE when .mmd files inside the configured explorer root change.
-  chokidar
-    .watch('**/*.mmd', {
-      cwd: devExplorerRootAbs,
-      ignoreInitial: true,
-    })
-    .on('all', (event, changedPath) => {
-      if (!['add', 'change', 'unlink'].includes(event)) {
-        return;
-      }
-      console.log(`[dev-explorer] ${event}: ${changedPath}`);
-      sendEventsToAll();
-    });
-
   app.use(cors());
   app.get('/events', eventsHandler);
-
-  // --- Dev Explorer API + UI -------------------------------------------------
-  const devExplorerDir = resolve(__dirname, 'dev-explorer');
-  const devExplorerPublicDir = resolve(devExplorerDir, 'public');
-  const devExplorerDistDir = resolve(devExplorerDir, 'dist');
-
-  // Shoelace assets (theme css + icons). Safe: only mounted in dev server.
-  app.use(
-    '/dev/vendor/shoelace',
-    express.static(resolve(process.cwd(), 'node_modules/@shoelace-style/shoelace/dist'))
-  );
-
-  app.get('/dev/api/files', async (req, res) => {
-    try {
-      const { absPath, relPath } = resolveWithinDevExplorerRoot(req.query.path);
-      const stats = await fs.stat(absPath);
-      if (!stats.isDirectory()) {
-        res.status(400).json({ error: 'Not a directory' });
-        return;
-      }
-
-      const dirEntries = await fs.readdir(absPath, { withFileTypes: true });
-      const entries = dirEntries
-        .filter((d) => d.isDirectory() || (d.isFile() && d.name.endsWith('.mmd')))
-        .map<DevExplorerEntry>((d) => ({
-          name: d.name,
-          kind: d.isDirectory() ? 'dir' : 'file',
-          path: toPosixPath(path.join(relPath, d.name)),
-        }))
-        .sort((a, b) => {
-          if (a.kind !== b.kind) {
-            return a.kind === 'dir' ? -1 : 1;
-          }
-          return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
-        });
-
-      res.json({
-        root: toPosixPath(path.relative(process.cwd(), devExplorerRootAbs)),
-        path: relPath === '' ? '' : relPath,
-        entries,
-      });
-    } catch (_e) {
-      res.status(400).json({ error: 'Invalid path' });
-    }
-  });
-
-  app.get('/dev/api/file', async (req, res) => {
-    try {
-      const { absPath, relPath } = resolveWithinDevExplorerRoot(req.query.path);
-      if (!absPath.endsWith('.mmd')) {
-        res.status(400).send('Only .mmd files are allowed');
-        return;
-      }
-      const stats = await fs.stat(absPath);
-      if (!stats.isFile()) {
-        res.status(400).send('Not a file');
-        return;
-      }
-      const content = await fs.readFile(absPath, 'utf-8');
-      res.type('text/plain').send(content);
-      // Optional: include relPath for debugging.
-      void relPath;
-    } catch (_e) {
-      res.status(400).send('Invalid path');
-    }
-  });
-
-  // Static assets for the dev-explorer UI.
-  app.use('/dev/assets', express.static(devExplorerDistDir));
-  // Serve `/dev/` (and `/dev`) from public/, including index.html.
-  app.use(
-    '/dev',
-    express.static(devExplorerPublicDir, {
-      index: ['index.html'],
-    })
-  );
-
   for (const { packageName } of Object.values(packageOptions)) {
     app.use(express.static(`./packages/${packageName}/dist`));
   }

.esbuild/util.ts

@@ -14,7 +14,6 @@ export interface MermaidBuildOptions extends BuildOptions {
   metafile: boolean;
   format: 'esm' | 'iife';
   options: PackageOptions;
-  includeLargeFeatures: boolean;
 }
 
 export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
@@ -22,7 +21,6 @@ export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'>
   metafile: false,
   core: false,
   format: 'esm',
-  includeLargeFeatures: true,
 } as const;
 
 const buildOptions = (override: BuildOptions): BuildOptions => {
@@ -41,18 +39,12 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
   };
 };
 
-const getFileName = (
-  fileName: string,
-  { core, format, minify, includeLargeFeatures }: MermaidBuildOptions
-) => {
+const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
   if (core) {
     fileName += '.core';
   } else if (format === 'esm') {
     fileName += '.esm';
   }
-  if (!includeLargeFeatures) {
-    fileName += '.tiny';
-  }
   if (minify) {
     fileName += '.min';
   }
@@ -62,36 +54,31 @@ const getFileName = (
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   const {
     core,
+    metafile,
     format,
+    minify,
     options: { name, file, packageName },
-    globalName = 'mermaid',
-    includeLargeFeatures,
-    ...rest
   } = options;
-
   const external: string[] = ['require', 'fs', 'path'];
   const outFileName = getFileName(name, options);
-  const { dependencies, version } = JSON.parse(
-    readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
-  );
   const output: BuildOptions = buildOptions({
-    ...rest,
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,
     },
-    globalName,
+    metafile,
+    minify,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
-      // This needs to be stringified for esbuild
-      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
-      'injected.version': `'${version}'`,
       'import.meta.vitest': 'undefined',
     },
   });
 
   if (core) {
+    const { dependencies } = JSON.parse(
+      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
+    );
     // Core build is used to generate file without bundled dependencies.
     // This is used by downstream projects to bundle dependencies themselves.
     // Ignore dependencies and any dependencies of dependencies
@@ -102,12 +89,11 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   if (format === 'iife') {
     output.format = 'iife';
     output.splitting = false;
-    const originalGlobalName = output.globalName ?? 'mermaid';
-    output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
+    output.globalName = '__esbuild_esm_mermaid';
     // Workaround for removing the .default access in esbuild IIFE.
     // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
     output.footer = {
-      js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.default;`,
+      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
     };
     output.outExtension = { '.js': '.js' };
   } else {

.github/ISSUE_TEMPLATE/theme_proposal.yml

@@ -29,7 +29,7 @@ body:
       label: Colors
       description: |-
         A detailed list of the different colour values to use.
-        See the [list of currently used variable names](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
+        A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
       placeholder: |-
         - background: #f4f4f4
         - primaryColor: #fff4dd

.github/lychee.toml

@@ -46,21 +46,11 @@ exclude = [
 # Drupal 403
 "https://(www.)?drupal.org",
 
-# Phbpp 403
-"https://(www.)?phpbb.com",
-
-# Swimm returns 404, even though the link is valid
+# Swimm returns 404, eventhough the link is valid
 "https://docs.swimm.io",
 
-# Certificate Error
-"https://noteshub.app",
-
 # Timeout
-"https://huehive.co",
-"https://foswiki.org",
-"https://www.gnu.org",
-"https://redmine.org",
-"https://mermaid-preview.com"
+"https://huehive.co"
 ]
 
 # Exclude all private IPs from checking.

.github/stale.yml

@@ -15,5 +15,5 @@ markComment: >
   If you are still interested in this issue and it is still relevant you can comment to revive it.
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: >
-  This issue has been automatically closed due to a lack of activity. 
+  This issue has been been automatically closed due to a lack of activity. 
   This is done to maintain a clean list of issues that the community is interested in developing.

.github/workflows/autofix.yml

@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main

.github/workflows/codeql.yml

@@ -26,8 +26,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript', 'actions']
-        # CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        language: ['javascript']
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
@@ -36,7 +36,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -48,7 +48,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10

.github/workflows/e2e-applitools.yml

@@ -23,6 +23,9 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
@@ -42,18 +45,16 @@ jobs:
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
+        run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
           APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
-        uses: wei/curl@012398a392d02480afa2720780031f8621d5f94c
-        with:
-          args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
 
       - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -11,7 +11,6 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 permissions:
   contents: write
-  pull-requests: write
 
 jobs:
   timings:
@@ -27,12 +26,11 @@ jobs:
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
-
       - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           install: false
@@ -46,25 +44,15 @@ jobs:
           SPLIT: 1
           SPLIT_INDEX: 0
           SPLIT_FILE: 'cypress/timings.json'
-
-      - name: Compare timings
-        id: compare
-        run: |
-          OUTPUT=$(pnpm tsx scripts/compare-timings.ts)
-          echo "$OUTPUT" >> $GITHUB_STEP_SUMMARY
-
-          echo "output<<EOF" >> $GITHUB_OUTPUT
-          echo "$OUTPUT" >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
-
-      - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@0979079bc20c05bbbb590a56c21c4e2b1d1f1bbe
+      - name: Commit changes
+        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
         with:
-          add-paths: |
-            cypress/timings.json
-          commit-message: 'chore: update E2E timings'
-          branch: update-timings
+          add: 'cypress/timings.json'
+          author_name: 'github-actions[bot]'
+          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
+          message: 'chore: update E2E timings'
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          branch: release-promotion
           title: Update E2E Timings
-          body: ${{ steps.compare.outputs.output }}
-          delete-branch: true
-          sign-commits: true

.github/workflows/e2e.yml

@@ -45,7 +45,7 @@ jobs:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -59,7 +59,7 @@ jobs:
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           # just perform install
           runTests: false
@@ -95,13 +95,13 @@ jobs:
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
 
@@ -117,7 +117,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           install: false

.github/workflows/link-checker.yml

@@ -32,7 +32,7 @@ jobs:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Restore lychee cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}

.github/workflows/pr-labeler.yml

@@ -29,29 +29,3 @@ jobs:
           disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Add "Sponsored by MermaidChart" label
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const prNumber = context.payload.pull_request.number;
-            const { data: commits } = await github.rest.pulls.listCommits({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-
-            const isSponsored = commits.every(
-              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
-            );
-
-            if (isSponsored) {
-              console.log('PR is sponsored. Adding label.');
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: prNumber,
-                labels: ['Sponsored by MermaidChart'],
-              });
-            }

.github/workflows/release.yml

@@ -36,10 +36,11 @@ jobs:
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
         with:
           version: pnpm changeset:version
           publish: pnpm changeset:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true

.github/workflows/scorecard.yml

@@ -20,18 +20,18 @@ jobs:
         with:
           persist-credentials: false
       - name: Run analysis
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
         with:
           results_file: results.sarif
           results_format: sarif
           publish_results: true
       - name: Upload artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
         with:
           name: SARIF file
           path: results.sarif
           retention-days: 5
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
         with:
           sarif_file: results.sarif

.github/workflows/update-browserlist.yml

@@ -19,7 +19,7 @@ jobs:
           message: 'chore: update browsers list'
           push: false
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
+        uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
         with:
           branch: update-browserslist
           title: Update Browserslist

.github/workflows/validate-lockfile.yml

@@ -1,90 +0,0 @@
-name: Validate pnpm-lock.yaml
-
-on:
-  pull_request_target:
-    paths:
-      - 'pnpm-lock.yaml'
-      - '**/package.json'
-      - '.github/workflows/validate-lockfile.yml'
-
-jobs:
-  validate-lockfile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-
-      - name: Validate pnpm-lock.yaml entries
-        id: validate # give this step an ID so we can reference its outputs
-        run: |
-          issues=()
-
-          # 1) No tarball references
-          if grep -qF 'tarball:' pnpm-lock.yaml; then
-            issues+=("• Tarball references found (forbidden)")
-          fi
-
-          # 2) No unwanted vitepress paths
-          if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
-            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
-          fi
-
-          # 3) Lockfile only changes when package.json changes
-          git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
-          if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
-            issues+=("• pnpm-lock.yaml changed without any package.json modification")
-          fi
-
-          # If any issues, output them and fail
-          if [ ${#issues[@]} -gt 0 ]; then
-            # Use the new GITHUB_OUTPUT approach to set a multiline output
-            {
-              echo "errors<<EOF"
-              printf '%s\n' "${issues[@]}"
-              echo "EOF"
-            } >> $GITHUB_OUTPUT
-            exit 1
-          fi
-
-      - name: Find existing lockfile validation comment
-        if: always()
-        uses: peter-evans/find-comment@v3
-        id: find-comment
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: 'Lockfile Validation Failed'
-
-      - name: Comment on PR if validation failed
-        if: failure()
-        uses: peter-evans/create-or-update-comment@v5
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-id: ${{ steps.find-comment.outputs.comment-id }}
-          edit-mode: replace
-          body: |
-            ❌ **Lockfile Validation Failed**
-
-            The following issue(s) were detected:
-            ${{ steps.validate.outputs.errors }}
-
-            Please address these and push an update.
-
-            _Posted automatically by GitHub Actions_
-
-      - name: Delete comment if validation passed
-        if: success() && steps.find-comment.outputs.comment-id != ''
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            await github.rest.issues.deleteComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              comment_id: ${{ steps.find-comment.outputs.comment-id }},
-            });

.gitignore

@@ -4,7 +4,6 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
-.instructions/
 
 dist
 v8-compile-cache-0

.vite/build.ts

@@ -78,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     define: {
       'import.meta.vitest': 'undefined',
-      'injected.includeLargeFeatures': 'true',
-      'injected.version': `'0.0.0'`,
     },
     resolve: {
       extensions: [],

CHANGELOG.md

@@ -1 +0,0 @@
-./packages/mermaid/CHANGELOG.md

Dockerfile

@@ -5,7 +5,7 @@ USER 0:0
 RUN corepack enable \
     && corepack enable pnpm
 
-RUN apk add --no-cache git~=2.43 \
+RUN apk add --no-cache git~=2.43.4 \
     && git config --add --system safe.directory /mermaid
 
 ENV NODE_OPTIONS="--max_old_space_size=8192"

README.md

@@ -44,7 +44,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## Table of content
 
@@ -95,6 +95,10 @@ In our release process we rely heavily on visual regression tests using [applito
 
 <!-- </Main description> -->
 
+## Mermaid AI Bot
+
+[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
+
 ## Examples
 
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
@@ -447,7 +451,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
-_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
+_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
 

README.zh-CN.md

@@ -43,13 +43,13 @@ Mermaid
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## 关于 Mermaid
 
 <!-- <Main description>   -->
 
-Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
+Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
 
 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
 

__mocks__/d3.ts

@@ -0,0 +1,13 @@
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+
+export const select = function () {
+  return new MockedD3();
+};
+
+export const selectAll = function () {
+  return new MockedD3();
+};
+
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';

cypress.config.ts

@@ -1,8 +1,8 @@
 import eyesPlugin from '@applitools/eyes-cypress';
 import { registerArgosTask } from '@argos-ci/cypress/task';
-import coverage from '@cypress/code-coverage/task.js';
+import coverage from '@cypress/code-coverage/task';
 import { defineConfig } from 'cypress';
-import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 import cypressSplit from 'cypress-split';
 
 export default eyesPlugin(
@@ -26,10 +26,7 @@ export default eyesPlugin(
         config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            // Enable upload to Argos only when it runs on CI.
-            uploadToArgos: !!process.env.CI,
-          });
+          registerArgosTask(on, config);
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/helpers/util.ts

@@ -6,7 +6,6 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
-  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -15,7 +14,7 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-export const utf8ToB64 = (str: string): string => {
+const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
@@ -23,7 +22,7 @@ const batchId: string =
   'mermaid-batch-' +
   (Cypress.env('useAppli')
     ? Date.now().toString()
-    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
+    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
   graphStr: string | string[],
@@ -62,7 +61,9 @@ export const imgSnapshotTest = (
     sequence: {
       ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -91,33 +92,20 @@ export const renderGraph = (
 
 export const openURLAndVerifyRendering = (
   url: string,
-  { screenshot = true, ...options }: CypressMermaidConfig,
+  options: CypressMermaidConfig,
   validation?: any
 ): void => {
   const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
 
-  // Handle sandbox mode where SVG is inside an iframe
-  if (options.securityLevel === 'sandbox') {
-    cy.get('iframe').should('be.visible');
-    if (validation) {
-      cy.get('iframe').should(validation);
-    }
-  } else {
-    cy.get('svg').should('be.visible');
-    // cspell:ignore viewbox
-    cy.get('svg').should('not.have.attr', 'viewbox');
-
-    if (validation) {
-      cy.get('svg').should(validation);
-    }
+  if (validation) {
+    cy.get('svg').should(validation);
   }
 
-  if (screenshot) {
-    verifyScreenshot(name);
-  }
+  verifyScreenshot(name);
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/other/configuration.spec.js

@@ -69,9 +69,7 @@ describe('Configuration', () => {
           .and('include', 'url(#');
       });
     });
-    // This has been broken for a long time, but something about the Cypress environment was
-    // rewriting the URL to be relative, causing the test to incorrectly pass.
-    it.skip('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
+    it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -98,12 +96,12 @@ describe('Configuration', () => {
     it('should handle arrowMarkerAbsolute set to true', () => {
       renderGraph(
         `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-    `,
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
         {
           arrowMarkerAbsolute: true,
         }
@@ -113,6 +111,7 @@ describe('Configuration', () => {
         cy.get('path')
           .first()
           .should('have.attr', 'marker-end')
+          .should('exist')
           .and('include', 'url(http://localhost');
       });
     });

cypress/integration/other/interaction.spec.js

@@ -20,7 +20,7 @@ describe('Interaction', () => {
     });
 
     it('Graph: should handle a click on a node with a bound url', () => {
-      // When there is a URL, `cy.contains()` selects the `a` tag instead of the `span` tag. The .node is a child of `a`, so we have to use `find()` instead of `parent`.
+      // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
       cy.contains('URLTest1').find('.node').click();
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/empty.html');
@@ -146,7 +146,7 @@ describe('Interaction', () => {
     });
   });
 
-  describe('Interaction - security level other, misspelling', () => {
+  describe('Interaction - security level other, missspelling', () => {
     beforeEach(() => {
       cy.visit('http://localhost:9000/click_security_other.html');
     });

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
@@ -141,37 +141,4 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-
-  it('should sanitize icon labels in architecture diagrams', () => {
-    const str = JSON.stringify({
-      code: `architecture-beta
-    group api(cloud)[API]
-    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize katex blocks', () => {
-    const str = JSON.stringify({
-      code: `sequenceDiagram
-    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
-    A->>John: Hello John, how are you?`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize labels', () => {
-    const str = JSON.stringify({
-      code: `erDiagram
-    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
-    `,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });

cypress/integration/rendering/architecture.spec.ts

@@ -19,25 +19,6 @@ describe.skip('architecture diagram', () => {
             `
     );
   });
-  it('should render a simple architecture diagram with titleAndAccessibilities', () => {
-    imgSnapshotTest(
-      `architecture-beta
-          title Simple Architecture Diagram
-          accTitle: Accessibility Title
-          accDescr: Accessibility Description
-          group api(cloud)[API]
-
-          service db(database)[Database] in api
-          service disk1(disk)[Storage] in api
-          service disk2(disk)[Storage] in api
-          service server(server)[Server] in api
-
-          db:L -- R:server
-          disk1:T -- B:server
-          disk2:T -- B:db
-      `
-    );
-  });
   it('should render an architecture diagram with groups within groups', () => {
     imgSnapshotTest(
       `architecture-beta
@@ -191,7 +172,7 @@ describe.skip('architecture diagram', () => {
     );
   });
 
-  it('should render an architecture diagram with a reasonable height', () => {
+  it('should render an architecture diagram with a resonable height', () => {
     imgSnapshotTest(
       `architecture-beta
               group federated(cloud)[Federated Environment]

cypress/integration/rendering/block.spec.js

@@ -14,9 +14,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL2: should handle columns statement in sub-blocks', () => {
+  it('BL2: should handle colums statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   id1["Hello"]
   block
     columns 3
@@ -30,9 +30,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
+  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     columns 1
     id1
@@ -46,9 +46,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
+  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     columns 1
@@ -66,9 +66,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
+  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
 
   it('BL6: should handle block arrows and spece statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     columns 3
     space:3
     ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
 
   it('BL7: should handle different types of edges', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       A space:5
       A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
 
   it('BL8: should handle sub-blocks without columns statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 2
       C A B
       block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
 
   it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
 
   it('BL10: should handle edges from composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
 
   it('BL11: should handle edges to composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
 
   it('BL12: edges should handle labels', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A
       space
       A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
 
   it('BL13: should handle block arrows in different directions', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       space blockArrowId1<["down"]>(down) space
       blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
 
   it('BL14: should style statements and class statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A
     B
     classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
 
   it('BL15: width alignment - D and E should share available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     D
     E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
 
   it('BL16: width alignment - C should be as wide as the composite block', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     A("This is the text")
     B
@@ -236,9 +236,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: width alignment - blocks should be equal in width', () => {
+  it('BL17: width alignment - blocks shold be equal in width', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A("This is the text")
     B
     C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
 
   it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
 
   it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A>"rect_left_inv_arrow"]
     B{"diamond"}
     C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
 
   it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A(["stadium"])
       `,
       {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
 
   it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A[/"lean right"/]
     B[\"lean left"\]
     C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
 
   it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
 
   it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A("rounded"):2
       B:2
       C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
 
   it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       block:2
         A
       end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
 
   it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
         columns 3
         space
         middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
   });
   it('BL26: space and an edge', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 5
     A space B
     A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
   });
   it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
     a["A wide one"] b:2 c:2 d
       `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
   });
   it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
 
   it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -384,28 +384,4 @@ describe('Block diagram', () => {
       {}
     );
   });
-
-  it('BL30: block should overflow if too wide for columns', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 2
-  fit:2
-  overflow:3
-  short:1
-  also_overflow:2
-`,
-      {}
-    );
-  });
-
-  it('BL31: edge without arrow syntax should render with no arrowheads', () => {
-    imgSnapshotTest(
-      `block-beta
-  a
-  b
-  a --- b
-`,
-      {}
-    );
-  });
 });

cypress/integration/rendering/c4.spec.js

@@ -114,28 +114,4 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('C4.6 should render C4Context diagram with ComponentQueue_Ext', () => {
-    imgSnapshotTest(
-      `
-      C4Context
-      title System Context diagram with ComponentQueue_Ext
-
-      Enterprise_Boundary(b0, "BankBoundary0") {
-          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-
-          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-          Enterprise_Boundary(b1, "BankBoundary") {
-            ComponentQueue_Ext(msgQueue, "Message Queue", "RabbitMQ", "External message queue system for processing banking transactions")
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-          }
-        }
-
-      BiRel(customerA, SystemAA, "Uses")
-      Rel(SystemAA, msgQueue, "Sends messages to")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -562,20 +562,6 @@ class C13["With Città foreign language"]
       `
     );
   });
-  it('should add notes in namespaces', function () {
-    imgSnapshotTest(
-      `
-      classDiagram
-      note "This is a outer note"
-      note for C1 "This is a outer note for C1"
-      namespace Namespace1 {
-        note "This is a inner note"
-        note for C1 "This is a inner note for C1"
-        class C1
-      }
-      `
-    );
-  });
   it('should render a simple class diagram with no members', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/classDiagram-v3.spec.js

@@ -709,20 +709,6 @@ class C13["With Città foreign language"]
       `
     );
   });
-  it('should add notes in namespaces', function () {
-    imgSnapshotTest(
-      `
-      classDiagram
-      note "This is a outer note"
-      note for C1 "This is a outer note for C1"
-      namespace Namespace1 {
-        note "This is a inner note"
-        note for C1 "This is a inner note for C1"
-        class C1
-      }
-      `
-    );
-  });
   it('should render a simple class diagram with no members', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/classDiagram.spec.js

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
       namespace testingNamespace {
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -495,47 +495,4 @@ describe('Class diagram', () => {
       cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
     });
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        classDiagram
-          class Person {
-            +String name
-            -Int id
-            #double age
-            +Text demographicProfile
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  it('should handle backticks for namespace and class names', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-          namespace \`A::B\` {
-              class \`IPC::Sender\`
-          }
-          RenderProcessHost --|> \`IPC::Sender\`
-      `,
-      {}
-    );
-    it('should handle an empty class body with empty braces', () => {
-      imgSnapshotTest(
-        ` classDiagram
-        class FooBase~T~ {}
-    class Bar {
-        +Zip
-        +Zap()
-    }
-    FooBase <|-- Ba
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -354,107 +354,4 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          p[Photograph] {
-            varchar(12) jobId
-            date dateCreated
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  describe('Special characters and numbers syntax', () => {
-    it('should render ER diagram with numeric entity names', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          1 ||--|| ORDER : places
-          ORDER ||--|{ 2 : contains
-          2 ||--o{ 3.5 : references
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render ER diagram with "u" character in entity names and cardinality', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          CUSTOMER ||--|| u : has
-          u ||--|| ORDER : places
-          PROJECT u--o{ TEAM_MEMBER : "parent"
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render ER diagram with decimal numbers in relationships', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          2.5 ||--|| 1.5 : has
-          CUSTOMER ||--o{ 3.14 : references
-          1.0 ||--|{ ORDER : contains
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render ER diagram with numeric entity names and attributes', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          1 {
-            string name
-            int value
-          }
-          1 ||--|| ORDER : places
-          ORDER {
-            float price
-            string description
-          }
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render complex ER diagram with mixed special entity names', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          CUSTOMER ||--o{ 1 : places
-          1 ||--|{ u : contains
-          1.5
-          u ||--|| 2.5 : processes
-          2.5 {
-            string id
-            float value
-          }
-          u {
-            varchar(50) name
-            int count
-          }
-        `,
-        { logLevel: 1 }
-      );
-    });
-    it('should render ER diagram with standalone numeric entities', () => {
-      imgSnapshotTest(
-        `erDiagram
-         PRODUCT ||--o{ ORDER-ITEM : has
-         1.5
-         u
-         1
-        `,
-        { logLevel: 1 }
-      );
-    });
-  });
 });

cypress/integration/rendering/flowchart-elk.spec.js

@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380, 15);
+      verifyNumber(maxWidthValue, 380);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380, 15);
+      verifyNumber(width, 380);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
       `flowchart-elk TB
   internet
   nat
-  router
+  routeur
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  router
+  routeur
   nat
     subgraph subnet1
       compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
       lb2
     end
   end
-  internet --> router
-  router --> subnet1 & subnet2
+  internet --> routeur
+  routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63-elk: title on subgraphs should be themeable', () => {
+  it('63-elk: title on subgraphs should be themable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -1053,21 +1053,6 @@ flowchart LR
       });
     });
   });
-
-  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
-    imgSnapshotTest(
-      `---
-config:
-  layout: elk
----
-      flowchart TB
-        a --> a1 & a2 & a3 & a4
-        b --> b1 & b2
-        b2 --> b3
-        b1 --> b4
-      `
-    );
-  });
 });
 
 describe('Title and arrow styling #4813', () => {

cypress/integration/rendering/flowchart-handDrawn.spec.js

@@ -1029,19 +1029,4 @@ graph TD
       }
     );
   });
-
-  it('FDH49: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { look: 'handDrawn', screenshot: false }
-    );
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
 });

cypress/integration/rendering/flowchart-icon.spec.js

@@ -1,28 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-const themes = ['default', 'forest', 'dark', 'base', 'neutral'];
-
-describe('when rendering flowchart with icons', () => {
-  for (const theme of themes) {
-    it(`should render icons from fontawesome library on theme ${theme}`, () => {
-      imgSnapshotTest(
-        `flowchart TD
-            A("fab:fa-twitter Twitter") --> B("fab:fa-facebook Facebook")
-            B --> C("fa:fa-coffee Coffee")
-            C --> D("fa:fa-car Car")
-            D --> E("fab:fa-github GitHub")
-        `,
-        { theme }
-      );
-    });
-
-    it(`should render registered icons on theme ${theme}`, () => {
-      imgSnapshotTest(
-        `flowchart TD
-            A("fa:fa-bell Bell") 
-        `,
-        { theme }
-      );
-    });
-  }
-});

cypress/integration/rendering/flowchart-v2.spec.js

@@ -79,18 +79,6 @@ describe('Flowchart v2', () => {
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('6a: should render complex HTML in labels with sandbox security', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-      `,
-      { securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
-    );
-  });
   it('7: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
       `flowchart TD
@@ -111,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05);
+      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -130,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(440 * 0.95, 440 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -210,13 +198,13 @@ describe('Flowchart v2', () => {
       `flowchart TB
   internet
   nat
-  router
+  routeur
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  router
+  routeur
   nat
     subgraph subnet1
       compute1
@@ -227,8 +215,8 @@ describe('Flowchart v2', () => {
       lb2
     end
   end
-  internet --> router
-  router --> subnet1 & subnet2
+  internet --> routeur
+  routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -445,7 +433,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63: title on subgraphs should be themeable', () => {
+  it('63: title on subgraphs should be themable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -711,7 +699,7 @@ A --> B
       { flowchart: { titleTopMargin: 10 } }
     );
   });
-  it('3192: It should be possible to render flowcharts with invisible edges', () => {
+  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
     imgSnapshotTest(
       `---
 title: Simple flowchart with invisible edges
@@ -1088,11 +1076,11 @@ end
       );
     });
   });
-  describe('New @ syntax for node metadata edge cases', () => {
+  describe('New @ sytax for node metadata edge cases', () => {
     it('should be possible to use @  syntax to add labels on multi nodes', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
+       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}
         `,
         {}
       );
@@ -1100,7 +1088,7 @@ end
     it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}   
+       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}   
         `,
         {}
       );
@@ -1109,8 +1097,8 @@ end
       imgSnapshotTest(
         `flowchart TB
        n2["label for n2"]
-       n4@{ label: "label for n4"}
-       n5@{ label: "label for n5"}  
+       n4@{ label: "labe for n4"}
+       n5@{ label: "labe for n5"}  
         `,
         {}
       );
@@ -1125,90 +1113,4 @@ end
       );
     });
   });
-  describe('Flowchart Node Shape Rendering', () => {
-    it('should render a stadium-shaped node', () => {
-      imgSnapshotTest(
-        `flowchart TB
-          A(["Start"]) --> n1["Untitled Node"]
-          A --> n2["Untitled Node"]
-        `,
-        {}
-      );
-    });
-    it('should render a diamond-shaped node using shape config', () => {
-      imgSnapshotTest(
-        `flowchart BT
-          n2["Untitled Node"] --> n1["Diamond"]
-          n1@{ shape: diam}
-        `,
-        {}
-      );
-    });
-    it('should render a rounded rectangle and a normal rectangle', () => {
-      imgSnapshotTest(
-        `flowchart BT
-        n2["Untitled Node"] --> n1["Rounded Rectangle"]
-        n3["Untitled Node"] --> n1
-        n1@{ shape: rounded}
-        n3@{ shape: rect}
-    `,
-        {}
-      );
-    });
-  });
-
-  it('6617: Per Link Curve Styling using edge Ids', () => {
-    imgSnapshotTest(
-      `flowchart TD
-      A e1@-->B e5@--> E
-      E e7@--> D
-      B e3@-->D
-      A e2@-->C e4@-->D
-      C e6@--> F
-      F e8@--> D
-      e1@{ curve: natural }
-      e2@{ curve: stepAfter }
-      e3@{ curve: monotoneY }
-      e4@{ curve: bumpY }
-      e5@{ curve: linear }
-      e6@{ curve: catmullRom }
-      e7@{ curve: cardinal }
-      `
-    );
-  });
-
-  describe('when rendering unsuported markdown', () => {
-    const graph = `flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-      `;
-
-    it('should render raw strings', () => {
-      imgSnapshotTest(graph);
-    });
-
-    it('should render raw strings with htmlLabels: false', () => {
-      imgSnapshotTest(graph, { htmlLabels: false });
-    });
-  });
-
-  it('V2 - 17: should apply class def colour to edge label', () => {
-    imgSnapshotTest(
-      ` graph LR
-    id1(Start) link@-- "Label" -->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-
-class id2 myClass
-classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
-class link myClass
-`
-    );
-  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -774,21 +774,6 @@ describe('Graph', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
-  it('40: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { screenshot: false }
-    );
-    // Verify animation classes are applied to both edges
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
       `
@@ -949,58 +934,4 @@ graph TD
       }
     );
   });
-  it('68: should honor subgraph direction when inheritDir is false', () => {
-    imgSnapshotTest(
-      `
-      %%{init: {"flowchart": { "inheritDir": false }}}%%
-      flowchart TB
-        direction LR
-        subgraph A
-          direction TB
-          a --> b
-        end
-        subgraph B
-          c --> d
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
-
-  it('69: should inherit global direction when inheritDir is true', () => {
-    imgSnapshotTest(
-      `
-      %%{init: {"flowchart": { "inheritDir": true }}}%%
-      flowchart TB
-        direction LR
-        subgraph A
-          direction TB
-          a --> b
-        end
-        subgraph B
-          c --> d
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
-
-  it('70: should render a subgraph with direction TD', () => {
-    imgSnapshotTest(
-      `
-      flowchart LR
-        subgraph A
-          direction TD
-          a --> b
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
+  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
       gantt
@@ -358,23 +358,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram with a vert tag', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   ss
-        axisFormat   %Ss
-
-        section Section
-        A task           : a1, 00, 6s
-        Milestone     : vert, 01,
-        section Another
-        Task in sec      : 06, 3s
-        another task     : 3s
-      `
-    );
-  });
   it('should render a gantt diagram with tick is 2 milliseconds', () => {
     imgSnapshotTest(
       `
@@ -565,18 +548,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render only the day when using dateFormat D', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      title Test
-      dateFormat D
-      A :a, 1, 1d
-    `,
-      {}
-    );
-  });
-
   // TODO: fix it
   //
   // This test is skipped deliberately
@@ -602,7 +573,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram excluding friday and saturday', () => {
+  it('should render a gantt diagram exculding friday and saturday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -613,7 +584,7 @@ describe('Gantt diagram', () => {
       A task :a1, 2024-02-28, 10d`
     );
   });
-  it('should render a gantt diagram excluding saturday and sunday', () => {
+  it('should render a gantt diagram exculding saturday and sunday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -659,49 +630,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    2025-07-07
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend saturday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-  it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend friday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
   it("should render when there's a semicolon in the title", () => {
     imgSnapshotTest(
       `
@@ -743,7 +671,7 @@ describe('Gantt diagram', () => {
       title Gantt Digram
       dateFormat  YYYY-MM-DD
       section Section
-      ;A task with a semicolon           :a1, 2014-01-01, 30d
+      ;A task with a semiclon           :a1, 2014-01-01, 30d
       Another task     :after a1  , 20d
       section Another
       Task in sec      :2014-01-12  , 12d
@@ -803,64 +731,4 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should handle numeric timestamps with dateFormat x', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat x
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
-  it('should handle numeric timestamps with dateFormat X', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat X
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
-  it('should handle seconds-only format with tickInterval (issue #5496)', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     tickInterval 1second
-     dateFormat ss
-     axisFormat %s
-
-     section Network Request
-     RTT : rtt, 0, 20
-    `,
-      {}
-    );
-  });
-  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Schedule
-     dateFormat YYYY-MM-DD
-     tickInterval 1week
-     axisFormat %m-%d
-
-     section Vacation
-     London : 2024-12-01, 7d
-     London : 202-12-01, 7d
-    `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -11,7 +11,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('2: should render a simple gitgraph with commit on main branch with id', () => {
+  it('2: should render a simple gitgraph with commit on main branch with Id', () => {
     imgSnapshotTest(
       `gitGraph
        commit id: "One"
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
       `
       gitGraph
       checkout main
-      %% Make sure to manually set the id of all commits, for consistent visual tests
+      %% Make sure to manually set the ID of all commits, for consistent visual tests
       commit id: "1-abcdefg"
       checkout main
       branch branch1
@@ -343,7 +343,7 @@ gitGraph
       {}
     );
   });
-  it('16: should render a simple gitgraph with commit on main branch with id | Vertical Branch', () => {
+  it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
     imgSnapshotTest(
       `gitGraph TB:
        commit id: "One"
@@ -585,7 +585,7 @@ gitGraph
       `
       gitGraph TB:
       checkout main
-      %% Make sure to manually set the id of all commits, for consistent visual tests
+      %% Make sure to manually set the ID of all commits, for consistent visual tests
       commit id: "1-abcdefg"
       checkout main
       branch branch1
@@ -1024,7 +1024,7 @@ gitGraph TB:
         {}
       );
     });
-    it('51: should render a simple gitgraph with commit on main branch with id | Vertical Branch - Bottom-to-top', () => {
+    it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
       imgSnapshotTest(
         `gitGraph BT:
          commit id: "One"
@@ -1266,7 +1266,7 @@ gitGraph TB:
         `
         gitGraph BT:
         checkout main
-        %% Make sure to manually set the id of all commits, for consistent visual tests
+        %% Make sure to manually set the ID of all commits, for consistent visual tests
         commit id: "1-abcdefg"
         checkout main
         branch branch1
@@ -1491,7 +1491,7 @@ gitGraph TB:
         `
         gitGraph
         switch main
-        %% Make sure to manually set the id of all commits, for consistent visual tests
+        %% Make sure to manually set the ID of all commits, for consistent visual tests
         commit id: "1-abcdefg"
         switch main
         branch branch1

cypress/integration/rendering/journey.spec.js

@@ -63,199 +63,4 @@ section Checkout from website
       { journey: { useMaxWidth: false } }
     );
   });
-
-  it('should initialize with a left margin of 150px for user journeys', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 320
-      ---
-      journey
-        title User Journey Example
-        section Onboarding
-            Sign Up: 5:
-            Browse Features: 3:
-            Use Core Functionality: 4:
-        section Engagement
-            Browse Features: 3
-            Use Core Functionality: 4
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    let diagramStartX;
-
-    cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
-      diagramStartX = parseFloat($diagram.attr('x'));
-      expect(diagramStartX).to.be.closeTo(150, 2);
-    });
-  });
-
-  it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
-    renderGraph(
-      `journey
-      title  Web hook life cycle
-      section Darkoob
-        Make preBuilt:5: Darkoob user
-        register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is  maintained
-        Map slug to a Prebuilt Job:5: Darkoob user
-      section External Service
-        set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
-        listen to the events : 5 :  External Service
-        call darkoob endpoint : 5 : External Service
-      section Darkoob
-        check for inputs : 5 : DarkoobAPI
-        run the prebuilt job : 5 : DarkoobAPI
-        `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    let LabelEndX, diagramStartX;
-
-    // Get right edge of the legend
-    cy.contains('tspan', 'Darkoob userf').then((textBox) => {
-      const bbox = textBox[0].getBBox();
-      LabelEndX = bbox.x + bbox.width;
-    });
-
-    // Get left edge of the diagram
-    cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
-      diagramStartX = parseFloat(rect.attr('x'));
-    });
-
-    // Assert right edge of the diagram is greater than or equal to the right edge of the label
-    cy.then(() => {
-      expect(diagramStartX).to.be.gte(LabelEndX);
-    });
-  });
-
-  it('should wrap a single long word with hyphenation', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 100
-      ---
-      journey
-        title Long Word Test
-        section Test
-          VeryLongWord: 5: Supercalifragilisticexpialidocious
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    // Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
-    cy.get('tspan').then((tspans) => {
-      const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
-      return expect(hasHyphen).to.be.true;
-    });
-  });
-
-  it('should wrap text on whitespace without adding hyphens', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 200
-      ---
-      journey
-        title Whitespace Test
-        section Test
-          TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    // Verify that none of the text spans end with a hyphen.
-    cy.get('tspan').each(($el) => {
-      const text = $el.text();
-      expect(text.trim()).not.to.match(/-$/);
-    });
-  });
-
-  it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 320
-      ---
-      journey
-        title User Journey Example
-        section Onboarding
-            Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
-            Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
-            Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
-        section Engagement
-            Browse Features: 3
-            Use Core Functionality: 4
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    let diagramStartX, maxLineWidth;
-
-    // Get the diagram's left edge x-coordinate
-    cy.contains('foreignobject', 'Sign Up')
-      .then(($diagram) => {
-        diagramStartX = parseFloat($diagram.attr('x'));
-      })
-      .then(() => {
-        cy.get('text.legend').then(($lines) => {
-          // Check that there are multiple lines
-          expect($lines.length).to.be.equal(9);
-
-          // Check that all lines are under the maxLabelWidth
-          $lines.each((index, el) => {
-            const bbox = el.getBBox();
-            expect(bbox.width).to.be.lte(320);
-            maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
-          });
-
-          /** The expected margin between the diagram and the legend is 150px, as defined by
-           *  conf.leftMargin in user-journey-config.js
-           */
-          expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
-        });
-      });
-  });
-
-  it('should correctly render the user journey diagram title with the specified styling', () => {
-    renderGraph(
-      `---
-config:
-  journey:
-    titleColor: "#2900A5"
-    titleFontFamily: "Times New Roman"
-    titleFontSize: "5rem"
----
-
-journey
-    title User Journey Example
-    section Onboarding
-        Sign Up: 5: John, Shahir
-        Complete Profile: 4: John
-    section Engagement
-        Browse Features: 3: John
-        Use Core Functionality: 4: John
-    section Retention
-        Revisit Application: 5: John
-        Invite Friends: 3: John
-
-        size: 2rem
-    `
-    );
-
-    cy.get('text').contains('User Journey Example').as('title');
-    cy.get('@title').then(($title) => {
-      expect($title).to.have.attr('fill', '#2900A5');
-      expect($title).to.have.attr('font-family', 'Times New Roman');
-      expect($title).to.have.attr('font-size', '5rem');
-    });
-  });
 });

cypress/integration/rendering/kanban.spec.ts

@@ -62,7 +62,7 @@ describe('Kanban diagram', () => {
       {}
     );
   });
-  it('6: should handle assignments', () => {
+  it('6: should handle assigments', () => {
     imgSnapshotTest(
       `kanban
   id1[Todo]
@@ -118,7 +118,7 @@ kanban
     docs[Create Documentation]
     docs[Create Blog about the new diagram]
   id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
     id8[Design grammar]@{ assigned: 'knsv' }
   id9[Ready for deploy]
   id10[Ready for test]

cypress/integration/rendering/mindmap-tidy-tree.spec.js

@@ -1,79 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Mindmap Tidy Tree', () => {
-  it('1-tidy-tree: should render a simple mindmap without children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      `
-    );
-  });
-  it('2-tidy-tree: should render a simple mindmap', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      `
-    );
-  });
-  it('3-tidy-tree: should render a  mindmap with different shapes', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-      `
-    );
-  });
-  it('4-tidy-tree: should render a mindmap with children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-       mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      `
-    );
-  });
-});

cypress/integration/rendering/mindmap.spec.ts

@@ -146,7 +146,7 @@ root
       shouldHaveRoot
     );
   });
-  it('text should wrap with icon', () => {
+  it('text shouhld wrap with icon', () => {
     imgSnapshotTest(
       `mindmap
 root
@@ -159,10 +159,12 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root[
       The root
-    ]`,
+    ]
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -170,10 +172,12 @@ root
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root((
       The root
-    ))`,
+    ))
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -181,10 +185,12 @@ root
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root(
       The root
-    )`,
+    )
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -192,8 +198,10 @@ root
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -201,10 +209,12 @@ root
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
-    child2`,
+    child2
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -212,11 +222,13 @@ root
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
       child2
-      child3`,
+      child3
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -228,48 +240,9 @@ root
         `mindmap
     id1[\`**Start** with
     a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
-      );
-    });
-  });
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        ` mindmap
-          root
-            Photograph
-              Waterfall
-              Landscape
-            Geography
-              Mountains
-              Rocks`,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-  describe('Level 2 nodes exceeding 11', () => {
-    it('should render all Level 2 nodes correctly when there are more than 11', () => {
-      imgSnapshotTest(
-        `mindmap
-root
-  Node1
-  Node2
-  Node3
-  Node4
-  Node5
-  Node6
-  Node7
-  Node8
-  Node9
-  Node10
-  Node11
-  Node12
-  Node13
-  Node14
-  Node15`,
-        {},
-        undefined,
-        shouldHaveRoot
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`
       );
     });
   });

cypress/integration/rendering/packet.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('packet structure', () => {
-  it('should render a simple packet-beta diagram', () => {
+  it('should render a simple packet diagram', () => {
     imgSnapshotTest(
       `packet-beta
   title Hello world
@@ -10,18 +10,9 @@ describe('packet structure', () => {
     );
   });
 
-  it('should render a simple packet diagram', () => {
-    imgSnapshotTest(
-      `packet
-  title Hello world
-  0-10: "hello"
-`
-    );
-  });
-
   it('should render a simple packet diagram without ranges', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
   0: "h"
   1: "i"
 `
@@ -30,7 +21,7 @@ describe('packet structure', () => {
 
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -61,7 +52,7 @@ describe('packet structure', () => {
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"

cypress/integration/rendering/pie.spec.ts

@@ -64,7 +64,7 @@ describe('pie chart', () => {
     });
   });
 
-  it('should render a pie diagram when textPosition is set', () => {
+  it('should render a pie diagram when textPosition is setted', () => {
     imgSnapshotTest(
       `pie
         "Dogs": 50
@@ -82,13 +82,4 @@ describe('pie chart', () => {
       `
     );
   });
-  it('should render pie slices only for non-zero values but shows all legends', () => {
-    imgSnapshotTest(
-      `   pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 1
-      `
-    );
-  });
 });

cypress/integration/rendering/quadrantChart.spec.js

@@ -45,7 +45,7 @@ describe('Quadrant Chart', () => {
       {}
     );
   });
-  it('should able to render y-axis on right side', () => {
+  it('should able to render y-axix on right side', () => {
     imgSnapshotTest(
       `
   %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
@@ -61,7 +61,7 @@ describe('Quadrant Chart', () => {
       {}
     );
   });
-  it('should able to render x-axis on bottom', () => {
+  it('should able to render x-axix on bottom', () => {
     imgSnapshotTest(
       `
   %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
@@ -77,7 +77,7 @@ describe('Quadrant Chart', () => {
       {}
     );
   });
-  it('should able to render x-axis on bottom and y-axis on right', () => {
+  it('should able to render x-axix on bottom and y-axis on right', () => {
     imgSnapshotTest(
       `
   %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%

cypress/integration/rendering/radar.spec.js

@@ -1,79 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-describe('radar structure', () => {
-  it('should render a simple radar diagram', () => {
-    imgSnapshotTest(
-      `radar-beta
-                title Best Radar Ever
-                axis A, B, C
-                curve c1{1, 2, 3}
-            `
-    );
-  });
-
-  it('should render a radar diagram with multiple curves', () => {
-    imgSnapshotTest(
-      `radar-beta
-                title Best Radar Ever
-                axis A, B, C
-                curve c1{1, 2, 3}
-                curve c2{2, 3, 1}
-            `
-    );
-  });
-
-  it('should render a complex radar diagram', () => {
-    imgSnapshotTest(
-      `radar-beta 
-                title My favorite ninjas
-                axis Agility, Speed, Strength
-                axis Stam["Stamina"] , Intel["Intelligence"]
-
-                curve Ninja1["Naruto Uzumaki"]{
-                    Agility 2, Speed 2,
-                    Strength 3, Stam 5,
-                    Intel 0
-                }
-                curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
-                curve Ninja3 {3, 2, 1, 5, 4}
-
-                showLegend true
-                ticks 3
-                max 8
-                min 0
-                graticule polygon
-            `
-    );
-    cy.get('svg').should((svg) => {
-      expect(svg).to.have.length(1);
-    });
-  });
-
-  it('should render radar diagram with config override', () => {
-    imgSnapshotTest(
-      `radar-beta
-                title Best Radar Ever
-                axis A,B,C
-                curve mycurve{1,2,3}`,
-      { radar: { marginTop: 100, axisScaleFactor: 0.5 } }
-    );
-  });
-
-  it('should parse radar diagram with theme override', () => {
-    imgSnapshotTest(
-      `radar-beta
-                axis A,B,C
-                curve mycurve{1,2,3}`,
-      { theme: 'base', themeVariables: { fontSize: 80, cScale0: '#FF0000' } }
-    );
-  });
-
-  it('should handle radar diagram with radar style override', () => {
-    imgSnapshotTest(
-      `radar-beta
-                axis A,B,C
-                curve mycurve{1,2,3}`,
-      { theme: 'base', themeVariables: { radar: { axisColor: '#FF0000' } } }
-    );
-  });
-});

cypress/integration/rendering/sankey.spec.ts

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
   describe('when given a linkColor', function () {
     this.beforeAll(() => {
       cy.wrap(
-        `sankey
+        `sankey-beta
       a,b,10
       `
       ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
     this.beforeAll(() => {
       cy.wrap(
         `
-        sankey
+        sankey-beta
         
         a,b,8
         b,c,8

cypress/integration/rendering/sequencediagram-v2.spec.js

@@ -1,969 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
-
-const looks = ['classic'];
-const participantTypes = [
-  { type: 'participant', display: 'participant' },
-  { type: 'actor', display: 'actor' },
-  { type: 'boundary', display: 'boundary' },
-  { type: 'control', display: 'control' },
-  { type: 'entity', display: 'entity' },
-  { type: 'database', display: 'database' },
-  { type: 'collections', display: 'collections' },
-  { type: 'queue', display: 'queue' },
-];
-
-const restrictedTypes = ['boundary', 'control', 'entity', 'database', 'collections', 'queue'];
-
-const interactionTypes = ['->>', '-->>', '->', '-->', '-x', '--x', '->>+', '-->>+'];
-
-const notePositions = ['left of', 'right of', 'over'];
-
-function getParticipantLine(name, type, alias) {
-  if (restrictedTypes.includes(type)) {
-    return `  participant ${name}@{ "type" : "${type}" }\n`;
-  } else if (alias) {
-    return `  participant ${name}@{ "type" : "${type}" } \n`;
-  } else {
-    return `  participant ${name}@{ "type" : "${type}" }\n`;
-  }
-}
-
-looks.forEach((look) => {
-  describe(`Sequence Diagram Tests - ${look} look`, () => {
-    it('should render all participant types', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.forEach((pt, index) => {
-        const name = `${pt.display}${index}`;
-        diagramCode += getParticipantLine(name, pt.type);
-      });
-      for (let i = 0; i < participantTypes.length - 1; i++) {
-        diagramCode += `  ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
-      }
-      imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } });
-    });
-
-    it('should render all interaction types', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += getParticipantLine('A', 'actor');
-      diagramCode += getParticipantLine('B', 'boundary');
-      interactionTypes.forEach((interaction, index) => {
-        diagramCode += `  A ${interaction} B: ${interaction} message ${index}\n`;
-      });
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render participant creation and destruction', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.forEach((pt, index) => {
-        const name = `${pt.display}${index}`;
-        diagramCode += getParticipantLine('A', pt.type);
-        diagramCode += getParticipantLine('B', pt.type);
-        diagramCode += `  create participant ${name}@{ "type" : "${pt.type}" }\n`;
-        diagramCode += `  A ->> ${name}: Hello ${pt.display}\n`;
-        if (index % 2 === 0) {
-          diagramCode += `  destroy ${name}\n`;
-        }
-      });
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render notes in all positions', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += getParticipantLine('A', 'actor');
-      diagramCode += getParticipantLine('B', 'boundary');
-      notePositions.forEach((position, index) => {
-        diagramCode += `  Note ${position} A: Note ${position} ${index}\n`;
-      });
-      diagramCode += `  A ->> B: Message with notes\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render parallel interactions', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 4).forEach((pt, index) => {
-        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
-      });
-      diagramCode += `  par Parallel actions\n`;
-      for (let i = 0; i < 3; i += 2) {
-        diagramCode += `    ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
-        if (i < participantTypes.length - 2) {
-          diagramCode += `    and\n`;
-        }
-      }
-      diagramCode += `  end\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render alternative flows', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += getParticipantLine('A', 'actor');
-      diagramCode += getParticipantLine('B', 'boundary');
-      diagramCode += `  alt Successful case\n`;
-      diagramCode += `    A ->> B: Request\n`;
-      diagramCode += `    B -->> A: Success\n`;
-      diagramCode += `  else Failure case\n`;
-      diagramCode += `    A ->> B: Request\n`;
-      diagramCode += `    B --x A: Failure\n`;
-      diagramCode += `  end\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render loops', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 3).forEach((pt, index) => {
-        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
-      });
-      diagramCode += `  loop For each participant\n`;
-      for (let i = 0; i < 3; i++) {
-        diagramCode += `    ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Message ${i}\n`;
-      }
-      diagramCode += `  end\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render boxes around groups', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += `  box Group 1\n`;
-      participantTypes.slice(0, 3).forEach((pt, index) => {
-        diagramCode += `    ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
-      });
-      diagramCode += `  end\n`;
-      diagramCode += `  box rgb(200,220,255) Group 2\n`;
-      participantTypes.slice(3, 6).forEach((pt, index) => {
-        diagramCode += `    ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
-      });
-      diagramCode += `  end\n`;
-      diagramCode += `  ${participantTypes[0].display}0 ->> ${participantTypes[3].display}0: Cross-group message\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render with different font settings', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 3).forEach((pt, index) => {
-        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
-      });
-      diagramCode += `  ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Regular message\n`;
-      diagramCode += `  Note right of ${participantTypes[1].display}1: Regular note\n`;
-      imgSnapshotTest(diagramCode, {
-        look,
-        sequence: {
-          actorFontFamily: 'courier',
-          actorFontSize: 14,
-          messageFontFamily: 'Arial',
-          messageFontSize: 12,
-          noteFontFamily: 'times',
-          noteFontSize: 16,
-          noteAlign: 'left',
-        },
-      });
-    });
-  });
-});
-
-// Additional tests for specific combinations
-describe('Sequence Diagram Special Cases', () => {
-  it('should render complex sequence with all features', () => {
-    const diagramCode = `
-      sequenceDiagram
-        box rgb(200,220,255) Authentication
-          actor User
-          participant LoginUI@{ "type": "boundary" }
-          participant AuthService@{ "type": "control" }
-          participant UserDB@{ "type": "database" }
-        end
-
-        box rgb(200,255,220) Order Processing
-          participant Order@{ "type": "entity" }
-          participant OrderQueue@{ "type": "queue" }
-          participant AuditLogs@{ "type": "collections" }
-        end
-        
-        User ->> LoginUI: Enter credentials
-        LoginUI ->> AuthService: Validate
-        AuthService ->> UserDB: Query user
-        UserDB -->> AuthService: User data
-        alt Valid credentials
-          AuthService -->> LoginUI: Success
-          LoginUI -->> User: Welcome
-          
-          par Place order
-            User ->> Order: New order
-            Order ->> OrderQueue: Process
-            and
-            Order ->> AuditLogs: Record
-          end
-          
-          loop Until confirmed
-            OrderQueue ->> Order: Update status
-            Order -->> User: Notification
-          end
-        else Invalid credentials
-          AuthService --x LoginUI: Failure
-          LoginUI --x User: Retry
-        end
-    `;
-    imgSnapshotTest(diagramCode, {});
-  });
-
-  it('should render with wrapped messages and notes', () => {
-    const diagramCode = `
-      sequenceDiagram
-        participant A
-        participant B
-        
-        A ->> B: This is a very long message that should wrap properly in the diagram rendering
-        Note over A,B: This is a very long note that should also wrap properly when rendered in the diagram
-        
-        par Wrapped parallel
-          A ->> B: Parallel message 1<br>with explicit line break
-          and
-          B ->> A: Parallel message 2<br>with explicit line break
-        end
-        
-        loop Wrapped loop
-          Note right of B: This is a long note<br>in a loop
-          A ->> B: Message in loop
-        end
-    `;
-    imgSnapshotTest(diagramCode, { sequence: { wrap: true } });
-  });
-  describe('Sequence Diagram Rendering with Different Participant Types', () => {
-    it('should render a sequence diagram with various participant types', () => {
-      imgSnapshotTest(
-        `
-        sequenceDiagram
-          participant User@{ "type": "actor" }
-          participant AuthService@{ "type": "control" }
-          participant UI@{ "type": "boundary" }
-          participant OrderController@{ "type": "control" }
-          participant Product@{ "type": "entity" }
-          participant MongoDB@{ "type": "database" }
-          participant Products@{ "type": "collections" }
-          participant OrderQueue@{ "type": "queue" }
-          User ->> UI: Login request
-          UI ->> AuthService: Validate credentials
-          AuthService -->> UI: Authentication token
-          UI ->> OrderController: Place order
-          OrderController ->> Product: Check availability
-          Product -->> OrderController: Available
-          OrderController ->> MongoDB: Save order
-          MongoDB -->> OrderController: Order saved
-          OrderController ->> OrderQueue: Process payment
-          OrderQueue -->> User: Order confirmation
-      `
-      );
-    });
-
-    it('should render participant creation and destruction with different types', () => {
-      imgSnapshotTest(`
-      sequenceDiagram
-          participant Alice@{ "type" : "boundary" }
-          Alice->>Bob: Hello Bob, how are you ?
-          Bob->>Alice: Fine, thank you. And you?
-          create participant Carl@{ "type" : "control" }
-          Alice->>Carl: Hi Carl!
-          create actor D as Donald
-          Carl->>D: Hi!
-          destroy Carl
-          Alice-xCarl: We are too many
-          destroy Bob
-          Bob->>Alice: I agree
-      `);
-    });
-
-    it('should handle complex interactions between different participant types', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-        box rgb(200,220,255) Authentication
-          participant User@{ "type": "actor" }
-          participant LoginUI@{ "type": "boundary" }
-          participant AuthService@{ "type": "control" }
-          participant UserDB@{ "type": "database" }
-        end
-
-        box rgb(200,255,220) Order Processing
-          participant Order@{ "type": "entity" }
-          participant OrderQueue@{ "type": "queue" }
-          participant AuditLogs@{ "type": "collections" }
-        end
-
-        User ->> LoginUI: Enter credentials
-        LoginUI ->> AuthService: Validate
-        AuthService ->> UserDB: Query user
-        UserDB -->> AuthService: User data
-
-        alt Valid credentials
-          AuthService -->> LoginUI: Success
-          LoginUI -->> User: Welcome
-
-          par Place order
-            User ->> Order: New order
-            Order ->> OrderQueue: Process
-            and
-            Order ->> AuditLogs: Record
-          end
-
-          loop Until confirmed
-            OrderQueue ->> Order: Update status
-            Order -->> User: Notification
-          end
-        else Invalid credentials
-          AuthService --x LoginUI: Failure
-          LoginUI --x User: Retry
-        end
-      `,
-        { sequence: { useMaxWidth: false } }
-      );
-    });
-
-    it('should render parallel processes with different participant types', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-        participant Customer@{ "type": "actor" }
-        participant Frontend@{ "type": "participant" }
-        participant PaymentService@{ "type": "boundary" }
-        participant InventoryManager@{ "type": "control" }
-        participant Order@{ "type": "entity" }
-        participant OrdersDB@{ "type": "database" }
-        participant NotificationQueue@{ "type": "queue" }
-
-        Customer ->> Frontend: Place order
-        Frontend ->> Order: Create order
-        par Parallel Processing
-          Order ->> PaymentService: Process payment
-          and
-          Order ->> InventoryManager: Reserve items
-        end
-        PaymentService -->> Order: Payment confirmed
-        InventoryManager -->> Order: Items reserved
-        Order ->> OrdersDB: Save finalized order
-        OrdersDB -->> Order: Order saved
-        Order ->> NotificationQueue: Send confirmation
-        NotificationQueue -->> Customer: Order confirmation
-      `
-      );
-    });
-  });
-  it('should render different participant types with notes and loops', () => {
-    imgSnapshotTest(
-      `
-    sequenceDiagram
-    actor Admin
-    participant Dashboard
-    participant AuthService@{ "type" : "boundary" }
-    participant UserManager@{ "type" : "control" }
-    participant UserProfile@{ "type" : "entity" }
-    participant UserDB@{ "type" : "database" }
-    participant Logs@{ "type" : "database" }
-    
-    Admin ->> Dashboard: Open user management
-    loop Authentication check
-      Dashboard ->> AuthService: Verify admin rights
-      AuthService ->> Dashboard: Access granted
-    end
-    Dashboard ->> UserManager: List users
-    UserManager ->> UserDB: Query users
-    UserDB ->> UserManager: Return user data
-    Note right of UserDB: Encrypted data<br/>requires decryption
-    UserManager ->> UserProfile: Format profiles
-    UserProfile ->> UserManager: Formatted data
-    UserManager ->> Dashboard: Display users
-    Dashboard ->> Logs: Record access
-    Logs ->> Admin: Audit trail
-    `
-    );
-  });
-
-  it('should render different participant types with alternative flows', () => {
-    imgSnapshotTest(
-      `
-    sequenceDiagram
-      actor Client
-      participant MobileApp
-      participant CloudService@{ "type" : "boundary" }
-      participant DataProcessor@{ "type" : "control" }
-      participant Transaction@{ "type" : "entity" }
-      participant TransactionsDB@{ "type" : "database" }
-      participant EventBus@{ "type" : "queue" }
-      
-      Client ->> MobileApp: Initiate transaction
-      MobileApp ->> CloudService: Authenticate
-      alt Authentication successful
-        CloudService -->> MobileApp: Auth token
-        MobileApp ->> DataProcessor: Process data
-        DataProcessor ->> Transaction: Create transaction
-        Transaction ->> TransactionsDB: Save record
-        TransactionsDB -->> Transaction: Confirmation
-        Transaction ->> EventBus: Publish event
-        EventBus -->> Client: Notification
-      else Authentication failed
-        CloudService -->> MobileApp: Error
-        MobileApp -->> Client: Show error
-      end
-    `
-    );
-  });
-
-  it('should render different participant types with wrapping text', () => {
-    imgSnapshotTest(
-      `
-  sequenceDiagram
-      participant B@{ "type" : "boundary" }
-      participant C@{ "type" : "control" }
-      participant E@{ "type" : "entity" }
-      participant DB@{ "type" : "database" }
-      participant COL@{ "type" : "collections" }
-      participant Q@{ "type" : "queue" }
-    
-      FE ->> B: Another long message<br/>with explicit<br/>line breaks
-      B -->> FE: Response message that is also quite long and needs to wrap
-      FE ->> C: Process data
-      C ->> E: Validate
-      E -->> C: Validation result
-      C ->> DB: Save
-      DB -->> C: Save result
-      C ->> COL: Log
-      COL -->> Q: Forward
-      Q -->> LongNameUser: Final response with confirmation of all actions taken
-    `,
-      { sequence: { wrap: true } }
-    );
-  });
-
-  describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => {
-    it('should render long notes left of boundary', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-        participant Alice@{ "type" : "boundary" }
-        actor Bob
-        Alice->>Bob: Hola
-        Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-        Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long notes left of control', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "control" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render long notes right of entity', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "entity" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long notes right of database', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "database" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render long notes over collections', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "collections" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long notes over queue', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "queue" }
-      actor Bob
-      Alice->>Bob: Hola
-      Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render notes over actor and boundary', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      actor Alice
-      participant Charlie@{ "type" : "boundary" }
-      note over Alice: Some note
-      note over Charlie: Other note
-    `,
-        {}
-      );
-    });
-
-    it('should render long messages from database to collections', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "database" }
-      participant Bob@{ "type" : "collections" }
-      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long messages from control to entity', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "control" }
-      participant Bob@{ "type" : "entity" }
-      Alice->>Bob:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      Bob->>Alice: I'm short though
-    `,
-        {}
-      );
-    });
-
-    it('should render long messages from queue to boundary', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      participant Alice@{ "type" : "queue" }
-      participant Bob@{ "type" : "boundary" }
-      Alice->>Bob: I'm short
-      Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-    `,
-        {}
-      );
-    });
-
-    it('should render wrapped long messages from actor to database', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      actor Alice
-      participant Bob@{ "type" : "database" }
-      Alice->>Bob: I'm short
-      Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-    `,
-        {}
-      );
-    });
-  });
-
-  describe('svg size', () => {
-    it('should render a sequence diagram when useMaxWidth is true (default)', () => {
-      renderGraph(
-        `
-      sequenceDiagram
-        actor Alice
-        participant Bob@{ "type" : "boundary" }
-        participant John@{ "type" : "control" }
-        Alice ->> Bob: Hello Bob, how are you?
-        Bob-->>John: How about you John?
-        Bob--x Alice: I am good thanks!
-        Bob-x John: I am good thanks!
-        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-        Bob-->Alice: Checking with John...
-        alt either this
-          Alice->>John: Yes
-        else or this
-          Alice->>John: No
-        else or this will happen
-          Alice->John: Maybe
-        end
-        par this happens in parallel
-          Alice -->> Bob: Parallel message 1
-        and
-          Alice -->> John: Parallel message 2
-        end
-      `,
-        { sequence: { useMaxWidth: true } }
-      );
-      cy.get('svg').should((svg) => {
-        expect(svg).to.have.attr('width', '100%');
-        const style = svg.attr('style');
-        expect(style).to.match(/^max-width: [\d.]+px;$/);
-        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-        expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
-      });
-    });
-
-    it('should render a sequence diagram when useMaxWidth is false', () => {
-      renderGraph(
-        `
-      sequenceDiagram
-        actor Alice
-        participant Bob@{ "type" : "boundary" }
-        participant John@{ "type" : "control" }
-        Alice ->> Bob: Hello Bob, how are you?
-        Bob-->>John: How about you John?
-        Bob--x Alice: I am good thanks!
-        Bob-x John: I am good thanks!
-        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-        Bob-->Alice: Checking with John...
-        alt either this
-          Alice->>John: Yes
-        else or this
-          Alice->>John: No
-        else or this will happen
-          Alice->John: Maybe
-        end
-        par this happens in parallel
-          Alice -->> Bob: Parallel message 1
-        and
-          Alice -->> John: Parallel message 2
-        end
-      `,
-        { sequence: { useMaxWidth: false } }
-      );
-      cy.get('svg').should((svg) => {
-        const width = parseFloat(svg.attr('width'));
-        expect(width).to.be.within(820 * 0.95, 820 * 1.05);
-        expect(svg).to.not.have.attr('style');
-      });
-    });
-
-    describe('Central Connection Rendering Tests', () => {
-      it('should render central connection circles on actor vertical lines', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        participant Charlie
-        Alice ()->>() Bob: Central connection
-        Bob ()-->> Charlie: Reverse central connection
-        Charlie ()<<-->>() Alice: Dual central connection`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections with different arrow types', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        Alice ()->>() Bob: Solid open arrow
-        Alice ()-->>() Bob: Dotted open arrow
-        Alice ()-x() Bob: Solid cross
-        Alice ()--x() Bob: Dotted cross
-        Alice ()->() Bob: Solid arrow`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections with bidirectional arrows', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        Alice ()<<->>() Bob: Bidirectional solid
-        Alice ()<<-->>() Bob: Bidirectional dotted`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections with activations', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        participant Charlie
-        Alice ()->>() Bob: Activate Bob
-        activate Bob
-        Bob ()-->> Charlie: Message to Charlie
-        Bob ()->>() Alice: Response to Alice
-        deactivate Bob`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections mixed with normal messages', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        participant Charlie
-        Alice ->> Bob: Normal message
-        Bob ()->>() Charlie: Central connection
-        Charlie -->> Alice: Normal dotted message
-        Alice ()<<-->>() Bob: Dual central connection
-        Bob -x Charlie: Normal cross message`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections with notes', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        participant Charlie
-        Alice ()->>() Bob: Central connection
-        Note over Alice,Bob: Central connection note
-        Bob ()-->> Charlie: Reverse central connection
-        Note right of Charlie: Response note
-        Charlie ()<<-->>() Alice: Dual central connection`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections with loops and alternatives', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-        participant Alice
-        participant Bob
-        participant Charlie
-        loop Every minute
-            Alice ()->>() Bob: Central heartbeat
-            Bob ()-->> Charlie: Forward heartbeat
-        end
-        alt Success
-            Charlie ()<<-->>() Alice: Success response
-        else Failure
-            Charlie ()-x() Alice: Failure response
-        end`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render central connections with different participant types', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant Alice
-          actor Bob
-          participant Charlie@{"type":"boundary"}
-          participant David@{"type":"control"}
-          participant Eve@{"type":"entity"}
-          Alice ()->>() Bob: To actor
-          Bob ()-->> Charlie: To boundary
-          Charlie ()->>() David: To control
-          David ()<<-->>() Eve: To entity
-          Eve ()-x() Alice: Back to participant`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-    });
-
-    describe('Participant Stereotypes with Aliases', () => {
-      it('should render participants with stereotypes and aliases', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "type" : "boundary" } as Public API
-          participant Auth@{ "type" : "control" } as Auth Controller
-          participant DB@{ "type" : "database" } as User Database
-          participant Cache@{ "type" : "entity" } as Cache Layer
-          API ->> Auth: Authenticate request
-          Auth ->> DB: Query user
-          DB -->> Auth: User data
-          Auth ->> Cache: Store session
-          Cache -->> Auth: Confirmed
-          Auth -->> API: Token`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render actors with stereotypes and aliases', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          actor U@{ "type" : "actor" } as End User
-          actor A@{ "type" : "boundary" } as API Gateway
-          actor S@{ "type" : "control" } as Service Layer
-          actor D@{ "type" : "database" } as Data Store
-          U ->> A: Send request
-          A ->> S: Process
-          S ->> D: Persist
-          D -->> S: Success
-          S -->> A: Response
-          A -->> U: Result`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render mixed participants and actors with stereotypes and aliases', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          actor Client@{ "type" : "actor" } AS Mobile Client
-          participant Gateway@{ "type" : "boundary" } as API Gateway
-          participant OrderSvc@{ "type" : "control" } as Order Service
-          participant Queue@{ "type" : "queue" } as Message Queue
-          participant DB@{ "type" : "database" } as Order Database
-          participant Logs@{ "type" : "collections" } as Audit Logs
-          Client ->> Gateway: Place order
-          Gateway ->> OrderSvc: Validate order
-          OrderSvc ->> Queue: Queue for processing  as well
-          OrderSvc ->> DB: Save order
-          OrderSvc ->> Logs: Log transaction
-          Queue -->> OrderSvc: Processing started AS Well
-          DB -->> OrderSvc: Order saved
-          Logs -->> OrderSvc: Logged
-          OrderSvc -->> Gateway: Order confirmed
-          Gateway -->> Client: Confirmation`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render stereotypes with aliases in boxes', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          box rgb(200,220,255) Frontend Layer
-            actor User@{ "type" : "actor" } as End User
-            participant UI@{ "type" : "boundary" } as User Interface
-          end
-          box rgb(255,220,200) Backend Layer
-            participant API@{ "type" : "boundary" } as REST API
-            participant Svc@{ "type" : "control" } as Business Logic
-          end
-          box rgb(220,255,200) Data Layer
-            participant DB@{ "type" : "database" } as Primary DB
-            participant Cache@{ "type" : "entity" } as Cache Store
-          end
-          User ->> UI: Click button
-          UI ->> API: HTTP request
-          API ->> Svc: Process
-          Svc ->> Cache: Check cache
-          Cache -->> Svc: Cache miss
-          Svc ->> DB: Query data
-          DB -->> Svc: Data
-          Svc ->> Cache: Update cache
-          Svc -->> API: Response
-          API -->> UI: Data
-          UI -->> User: Display`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render stereotypes with aliases and complex interactions', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant Web@{ "type" : "boundary" } as Web Portal
-          participant Auth@{ "type" : "control" } as Auth Service
-          participant UserDB@{ "type" : "database" } as User DB
-          participant Queue@{ "type" : "queue" } as Event Queue
-          participant Audit@{ "type" : "collections" } as Audit Trail
-          Web ->> Auth: Login request
-          activate Auth
-          Auth ->> UserDB: Verify credentials
-          activate UserDB
-          UserDB -->> Auth: User found
-          deactivate UserDB
-          alt Valid credentials
-            Auth ->> Queue: Publish login event
-            Auth ->> Audit: Log success
-            par Parallel processing
-              Queue -->> Auth: Event queued
-              and
-              Audit -->> Auth: Logged
-            end
-            Auth -->> Web: Success token
-          else Invalid credentials
-            Auth ->> Audit: Log failure
-            Audit -->> Auth: Logged
-            Auth --x Web: Access denied
-          end
-          deactivate Auth
-          Note over Web,Audit: All interactions logged`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-    });
-
-    describe('Participant Inline Alias in Config', () => {
-      it('should render participants with inline alias in config object', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "type" : "boundary", "alias": "Public API" }
-          participant Auth@{ "type" : "control", "alias": "Auth Service" }
-          participant DB@{ "type" : "database", "alias": "User DB" }
-          API ->> Auth: Login request
-          Auth ->> DB: Query user
-          DB -->> Auth: User data
-          Auth -->> API: Token`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render actors with inline alias in config object', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          actor U@{ "type" : "actor", "alias": "End User" }
-          actor G@{ "type" : "boundary", "alias": "Gateway" }
-          actor S@{ "type" : "control", "alias": "Service" }
-          U ->> G: Request
-          G ->> S: Process
-          S -->> G: Response
-          G -->> U: Result`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should handle mixed inline and external alias syntax', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant A@{ "type" : "boundary", "alias": "Service A" }
-          participant B@{ "type" : "control" } as Service B
-          participant C@{ "type" : "database" }
-          A ->> B: Request
-          B ->> C: Query
-          C -->> B: Data
-          B -->> A: Response`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should prioritize external alias over inline alias', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
-          participant DB@{ "type" : "database", "alias": "Internal DB" } AS External DB
-          API ->> DB: Query
-          DB -->> API: Result`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render inline alias with only alias field (no type)', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "alias": "Public API" }
-          participant Auth@{ "alias": "Auth Service" }
-          API ->> Auth: Request
-          Auth -->> API: Response`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-    });
-  });
-});

cypress/integration/rendering/sequencediagram.spec.js

@@ -893,17 +893,6 @@ describe('Sequence diagram', () => {
         }
       );
     });
-
-    it('should handle bidirectional arrows with autonumber', () => {
-      imgSnapshotTest(`
-       sequenceDiagram
-       autonumber
-       participant A
-       participant B
-       A<<->>B: This is a bidirectional message
-       A->B: This is a normal message`);
-    });
-
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
       //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(
@@ -1053,167 +1042,4 @@ describe('Sequence diagram', () => {
       ]);
     });
   });
-  describe('render new arrow type', () => {
-    it('should render Solid half arrow top', () => {
-      imgSnapshotTest(
-        `
-    sequenceDiagram
-      Alice -|\\  John: Hello John, how are you? 
-      Alice-|\\  John: Hi Alice, I can hear you!
-      Alice -|\\  John: Test
-      `
-      );
-    });
-    it('should render Solid half arrow bottom', () => {
-      imgSnapshotTest(
-        `
-    sequenceDiagram
-      Alice-|/John: Hello John, how are you?
-      Alice-|/John: Hi Alice, I can hear you!
-      Alice-|/John: Test
-      `
-      );
-    });
-
-    it('should render Stick half arrow top ', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice-\\\\John: Hello John, how are you?
-      Alice-\\\\John: Hi Alice, I can hear you!
-      Alice-\\\\John: Test
-      `
-      );
-    });
-    it('should render Stick half arrow bottom ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice-//John: Hello John, how are you?
-      Alice-//John: Hi Alice, I can hear you!
-      Alice-//John: Test
-      `
-      );
-    });
-    it('should render Solid half arrow top reverse ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice/|-John: Hello Alice, how are you?
-      Alice/|-John: Hi Alice, I can hear you!
-      Alice/|-John: Test
-
-      `
-      );
-    });
-
-    it('should render Solid half arrow bottom reverse ', () => {
-      imgSnapshotTest(
-        `sequenceDiagram
-        Alice \\|- John: Hello Alice, how are you?
-        Alice \\|- John: Hi Alice, I can hear you!
-        Alice \\|- John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top reverse ', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      Alice //-John: Hello Alice, how are you?
-      Alice //-John: Hi Alice, I can hear you!
-      Alice //-John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom reverse ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice \\\\-John: Hello Alice, how are you?
-      Alice \\\\-John: Hi Alice, I can hear you!
-      Alice \\\\-John: Test`
-      );
-    });
-
-    it('should render Solid half arrow top dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice --|\\John: Hello John, how are you?
-      Alice --|\\John: Hi Alice, I can hear you!
-      Alice --|\\John: Test`
-      );
-    });
-
-    it('should render Solid half arrow bottom dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice --|/John: Hello John, how are you?
-      Alice --|/John: Hi Alice, I can hear you!
-      Alice --|/John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice--\\\\John: Hello John, how are you?
-      Alice--\\\\John: Hi Alice, I can hear you!
-      Alice--\\\\John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice--//John: Hello John, how are you?
-      Alice--//John: Hi Alice, I can hear you!
-      Alice--//John: Test`
-      );
-    });
-
-    it('should render Solid half arrow top reverse dotted', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice/|--John: Hello Alice, how are you?
-      Alice/|--John: Hi Alice, I can hear you!
-      Alice/|--John: Test`
-      );
-    });
-
-    it('should render Solid half arrow bottom reverse dotted', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice\\|--John: Hello Alice, how are you?
-      Alice\\|--John: Hi Alice, I can hear you!
-      Alice\\|--John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top reverse dotted ', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice//--John: Hello Alice, how are you?
-      Alice//--John: Hi Alice, I can hear you!
-      Alice//--John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom reverse dotted ', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice\\\\--John: Hello Alice, how are you?
-      Alice\\\\--John: Hi Alice, I can hear you!
-      Alice\\\\--John: Test`
-      );
-    });
-  });
 });

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -138,8 +138,8 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
     stateDiagram-v2
-    State1: This a single line description
-    State2: This a multi line description
+    State1: This a a single line description
+    State2: This a a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2
@@ -345,7 +345,7 @@ stateDiagram
       }
     );
   });
-  it('v2 width of compound state should grow with title if title is wider', () => {
+  it('v2 width of compond state should grow with title if title is wider', () => {
     imgSnapshotTest(
       `
 stateDiagram-v2
@@ -402,8 +402,8 @@ stateDiagram-v2
       `
 stateDiagram-v2
     MyState
-    note left of MyState : I am a lefty
-    note right of MyState : I am a righty
+    note left of MyState : I am a leftie
+    note right of MyState : I am a rightie
     `,
       {
         logLevel: 0,
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should let styles take precedence over classes', () => {
+    it(' should let styles take preceedence over classes', () => {
       imgSnapshotTest(
         `
 stateDiagram-v2
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should allow styles to take effect in subgraphs', () => {
+    it(' should allow styles to take effect in stubgraphs', () => {
       imgSnapshotTest(
         `
   stateDiagram
@@ -602,231 +602,6 @@ State1 --> [*]
       --
       55
   }
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly', () => {
-    imgSnapshotTest(
-      `---
-title: On The Way To Something Something DarkSide
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly with multiple transitions', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple Transitions
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-State9_____________ --> State8_____________   : Transition12____
-`,
-      {}
-    );
-  });
-
-  it('should render edge labels correctly with multiple states', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple States
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-   state State10_____________
-   {
-      c10
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State3_____________   : Transition2_____
-State3_____________ --> State4_____________   : Transition3_____
-State4_____________ --> State5_____________   : Transition4_____
-State5_____________ --> State6_____________   : Transition5_____
-State6_____________ --> State7_____________   : Transition6_____
-State7_____________ --> State8_____________   : Transition7_____
-State8_____________ --> State9_____________   : Transition8_____
-State9_____________ --> State10_____________   : Transition9_____
 `,
       {}
     );

cypress/integration/rendering/stateDiagram.spec.js

@@ -129,8 +129,8 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
     stateDiagram
-    State1: This a single line description
-    State2: This a multi line description
+    State1: This a a single line description
+    State2: This a a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2

cypress/integration/rendering/timeline.spec.ts

@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
     title History of Social Media Platform
     2002 : LinkedIn
     2004 : Facebook : Google
-    2005 : YouTube
+    2005 : Youtube
     2006 : Twitter
       `,
       {}
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
         section Stone Age
           7600 BC : Britain's oldest known house was built in Orkney, Scotland
           6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
-        section Bronze Age
+        section Broze Age
           2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
                   : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
       `,
       {}
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -161,68 +161,4 @@ describe('Timeline diagram', () => {
       {}
     );
   });
-
-  it('11: should render timeline with many stacked events and proper timeline line length', () => {
-    imgSnapshotTest(
-      `timeline
-        title Medical Device Lifecycle
-        section Pre-Development
-          Quality Management System : Regulatory Compliance : Risk Management
-        section Development
-          Management Responsibility : Planning Activities : Human Resources
-          Resource Management : Management Reviews : Infrastructure
-        section Post-Development
-          Product Realization Activities : Planning Activities : Customer-related Processes
-          Post-Production Activities : Feedback : Complaints : Adverse Events
-                                    : Research and Development : Purchasing Activities
-                                    : Production Activities : Installation Activities
-                                    : Servicing Activities : Post-Market Surveillance
-      `,
-      {}
-    );
-  });
-
-  it('12: should render timeline with proper vertical line lengths for all columns', () => {
-    imgSnapshotTest(
-      `---
-config:
-    theme: base
-    themeVariables:
-        fontFamily: Fira Sans
-        fontSize: 17px
-        cScale0: '#b3cde0'
-        cScale1: '#f49090'
-        cScale2: '#85d5b8'
----
-
-timeline
-    title Medical Device Lifecycle
-    section Planning
-        Quality Management System (4): Regulatory Compliance (4.1.1)
-            : Risk Management (4.1.2)
-        Management Resposibility (5): Planning Activities (5.4)
-            : Management Reviews (5.6)
-         Resource Management (6): Human Resources (6.2)
-            : Infrastructure (6.3)
-    section Realization
-        Research and Development (7.3): RnD Planning (7.3.2)
-            : Inputs (7.3.3)
-            : Outputs (7.3.4)
-            : Review (7.3.5)
-            : Verification (7.3.6)
-            : Validation (7.3.7)
-        Purchasing (7.4): Purchasing Process (7.4.1)
-            : Purchasing Information (7.4.2)
-        Production (7.5): Production Activities (7.5.1)
-            : Production Feedback (8.2.1)
-        Installation (7.5.3): Installation Activities (7.5.3)
-        Servicing (7.5.4): Servicing Activities (7.5.4)
-    section Post-Production
-        Post-Market Activities (8): Feedback (8.2.1)
-            : Complaints (8.2.2)
-            : Adverse Events (8.2.3)
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/treemap.spec.ts

@@ -1,471 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Treemap Diagram', () => {
-  it('1: should render a basic treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('2: should render a hierarchical treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's"
-            "Shirts": 10
-            "Pants": 15
-        "Women's"
-            "Dresses": 20
-            "Skirts": 10
-      `,
-      {}
-    );
-  });
-
-  it('3: should render a treemap with styling using classDef', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('4: should handle long text that wraps', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main Category"
-    "This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
-    "Short item": 20
-      `,
-      {}
-    );
-  });
-
-  it('5: should render with a forest theme', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: forest
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('6: should handle multiple levels of nesting', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Level 1"
-    "Level 2A"
-        "Level 3A": 10
-        "Level 3B": 15
-    "Level 2B"
-        "Level 3C": 20
-        "Level 3D"
-            "Level 4A": 5
-            "Level 4B": 5
-      `,
-      {}
-    );
-  });
-
-  it('7: should handle classDef with multiple styles', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5:::secondary
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
-      `,
-      {}
-    );
-  });
-
-  it('8: should handle dollar value formatting with thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$0,0"
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-      `,
-      {}
-    );
-  });
-
-  it('8a: should handle percentage formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".1%"
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-      `,
-      {}
-    );
-  });
-
-  it('8b: should handle decimal formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2f"
----
-treemap-beta
-"Metrics"
-    "Conversion Rate": 0.0567
-    "Bounce Rate": 0.6723
-    "Click-through Rate": 0.1289
-    "Engagement": 0.4521
-      `,
-      {}
-    );
-  });
-
-  it('8c: should handle dollar sign with decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$.2f"
----
-treemap-beta
-"Product Prices"
-    "Basic": 19.99
-    "Standard": 49.99
-    "Premium": 99.99
-    "Enterprise": 199.99
-      `,
-      {}
-    );
-  });
-
-  it('8d: should handle dollar sign with thousands separator and decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.2f"
----
-treemap-beta
-"Revenue"
-    "Q1": 1250345.75
-    "Q2": 1645789.25
-    "Q3": 1845123.50
-    "Q4": 2145678.75
-      `,
-      {}
-    );
-  });
-
-  it('8e: should handle simple thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ","
----
-treemap-beta
-"User Counts"
-    "Active Users": 1250345
-    "New Signups": 45789
-    "Churned": 12350
-    "Converted": 78975
-      `,
-      {}
-    );
-  });
-
-  it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.0f"
----
-treemap-beta
-"Sales by Region"
-    "North": 1234567
-    "South": 7654321
-    "East": 4567890
-    "West": 9876543
-      `,
-      {}
-    );
-  });
-
-  it('8g: should handle scientific notation format', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2e"
----
-treemap-beta
-"Scientific Values"
-    "Value 1": 1234567
-    "Value 2": 0.0000123
-    "Value 3": 1000000000
-      `,
-      {}
-    );
-  });
-
-  it('9: should handle a complex example with multiple features', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: dark
-  treemap:
-    valueFormat: "$0,0"
----
-treemap-beta
-"Company Budget"
-    "Engineering":::engineering
-        "Frontend": 300000
-        "Backend": 400000
-        "DevOps": 200000
-    "Marketing":::marketing
-        "Digital": 250000
-        "Print": 100000
-        "Events": 150000
-    "Sales":::sales
-        "Direct": 500000
-        "Channel": 300000
-
-classDef engineering fill:#6b9bc3,stroke:#333;
-classDef marketing fill:#c36b9b,stroke:#333;
-classDef sales fill:#c3a66b,stroke:#333;
-      `,
-      {}
-    );
-  });
-
-  it('10: should render the example from documentation', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      "Section 1"
-          "Leaf 1.1": 12
-          "Section 1.2":::class1
-            "Leaf 1.2.1": 12
-      "Section 2"
-          "Leaf 2.1": 20:::class1
-          "Leaf 2.2": 25
-          "Leaf 2.3": 12
-
-      classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('11: should handle comments', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      %% This is a comment
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      %% Another comment
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('12: should apply classDef fill color to leaf nodes', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Root"
-    "Item A": 30:::redClass
-    "Item B": 20
-    "Item C": 25:::blueClass
-
-classDef redClass fill:#ff0000;
-classDef blueClass fill:#0000ff;
-      `,
-      {}
-    );
-  });
-
-  it('13: should apply classDef stroke styles to sections', () => {
-    imgSnapshotTest(
-      `treemap-beta
-      %% This is a comment
-      "Category A":::thickBorder
-          "Item A1": 10
-          "Item A2": 20
-      %% Another comment
-      "Category B":::dashedBorder
-          "Item B1": 15
-          "Item B2": 25
-
-classDef thickBorder stroke:red,stroke-width:8px;
-classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px;
-      `,
-      {}
-    );
-  });
-
-  it('14: should apply classDef color to text labels', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Products"
-    "Electronics":::whiteText
-        "Phones": 40
-        "Laptops": 30
-    "Furniture":::darkText
-        "Chairs": 25
-        "Tables": 20
-
-classDef whiteText fill:#2c3e50,color:#ffffff;
-classDef darkText fill:#ecf0f1,color:#000000;
-      `,
-      {}
-    );
-  });
-
-  it('15: should apply multiple classDef properties simultaneously', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Budget"
-    "Critical":::critical
-        "Server Costs": 50000
-        "Salaries": 80000
-    "Normal":::normal
-        "Office Supplies": 5000
-        "Marketing": 15000
-classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px;
-classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px;
-      `,
-      {}
-    );
-  });
-
-  it('16: should handle classDef on nested sections and leaves', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Company"
-    "Engineering":::engSection
-        "Frontend": 30:::highlight
-        "Backend": 40
-        "DevOps": 20:::highlight
-    "Sales"
-        "Direct": 35
-        "Channel": 25:::highlight
-
-classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px;
-classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
-      `,
-      {}
-    );
-  });
-
-  /*
-  it.skip('17: should render a treemap with title', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      title Treemap with Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('13: should render a treemap with accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('14: should render a treemap with title and accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap
-      title Treemap with Title and Accessibility
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  */
-});

cypress/integration/rendering/xyChart.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('XY Chart', () => {
-  it('should render the simplest possible xy-beta chart', () => {
+  it('should render the simplest possible chart', () => {
     imgSnapshotTest(
       `
       xychart-beta
@@ -10,19 +10,10 @@ describe('XY Chart', () => {
       {}
     );
   });
-  it('should render the simplest possible xy chart', () => {
-    imgSnapshotTest(
-      `
-      xychart
-        line [10, 30, 20]
-      `,
-      {}
-    );
-  });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -35,7 +26,7 @@ describe('XY Chart', () => {
   it('Should render a chart without title', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -47,7 +38,7 @@ describe('XY Chart', () => {
   it('y-axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -59,7 +50,7 @@ describe('XY Chart', () => {
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -70,7 +61,7 @@ describe('XY Chart', () => {
   it('x axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -81,7 +72,7 @@ describe('XY Chart', () => {
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         line [23, 46, 77, 34]
         line [45, 32, 33, 12]
         bar [87, 54, 99, 85]
@@ -95,7 +86,7 @@ describe('XY Chart', () => {
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         y-axis -2.4 --> 3.5
         line [+1.3, .6, 2.4, -.34]
       `,
@@ -113,7 +104,7 @@ describe('XY Chart', () => {
           height: 20
           plotReservedSpacePercent: 100
       ---
-      xychart
+      xychart-beta
         line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -139,7 +130,7 @@ describe('XY Chart', () => {
             showTick: false
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -149,7 +140,7 @@ describe('XY Chart', () => {
     imgSnapshotTest(
       `
       %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -188,9 +179,8 @@ describe('XY Chart', () => {
             axisLineWidth: 5
           chartOrientation: horizontal
           plotReservedSpacePercent: 60
-          showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -211,7 +201,7 @@ describe('XY Chart', () => {
           yAxis:
             showTitle: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -232,7 +222,7 @@ describe('XY Chart', () => {
           yAxis:
             showLabel: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -253,7 +243,7 @@ describe('XY Chart', () => {
           yAxis:
             showTick: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -274,7 +264,7 @@ describe('XY Chart', () => {
           yAxis:
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -303,7 +293,7 @@ describe('XY Chart', () => {
             xAxisLineColor: "#87ceeb"
             plotColorPalette: "#008000, #faba63"
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -316,7 +306,7 @@ describe('XY Chart', () => {
   it('should use the correct distances between data points', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis 0 --> 2
         line [0, 1, 0, 1]
         bar [1, 0, 1, 0]
@@ -325,516 +315,4 @@ describe('XY Chart', () => {
     );
     cy.get('svg');
   });
-
-  it('should render vertical bar chart with labels', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    xychart
-      title "Sales Revenue"
-      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-      y-axis "Revenue (in $)" 4000 --> 11000
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render horizontal bar chart with labels', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    xychart
-      title "Sales Revenue"
-      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-      y-axis "Revenue (in $)" 4000 --> 11000
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render vertical bar chart without labels by default', () => {
-    imgSnapshotTest(
-      `
-    xychart
-      title "Sales Revenue"
-      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-      y-axis "Revenue (in $)" 4000 --> 11000
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render horizontal bar chart without labels by default', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        chartOrientation: horizontal
-    ---
-    xychart
-      title "Sales Revenue"
-      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-      y-axis "Revenue (in $)" 4000 --> 11000
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render multiple bar plots vertically with labels correctly', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-      xychart
-        title "Multiple Bar Plots"
-        x-axis Categories [A, B, C]
-        y-axis "Values" 0 --> 100
-        bar [10, 50, 90]
-      `,
-      {}
-    );
-  });
-
-  it('should render multiple bar plots horizontally with labels correctly', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-      xychart
-        title "Multiple Bar Plots"
-        x-axis Categories [A, B, C]
-        y-axis "Values" 0 --> 100
-        bar [10, 50, 90]
-      `,
-      {}
-    );
-  });
-
-  it('should render a single bar with label for a vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-      xychart
-        title "Single Bar Chart"
-        x-axis Categories [A]
-        y-axis "Value" 0 --> 100
-        bar [75]
-      `,
-      {}
-    );
-  });
-
-  it('should render a single bar with label for a horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-      xychart
-        title "Single Bar Chart"
-        x-axis Categories [A]
-        y-axis "Value" 0 --> 100
-        bar [75]
-      `,
-      {}
-    );
-  });
-
-  it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-      xychart
-        title "Decimal and Negative Values"
-        x-axis Categories [A, B, C]
-        y-axis -10 --> 10
-        bar [ -2.5, 0.75, 5.1 ]
-      `,
-      {}
-    );
-  });
-
-  it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-      xychart
-        title "Decimal and Negative Values"
-        x-axis Categories [A, B, C]
-        y-axis -10 --> 10
-        bar [ -2.5, 0.75, 5.1 ]
-      `,
-      {}
-    );
-  });
-
-  it('should render data labels within each bar in the vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    xychart
-            title "Sales Revenue"
-            x-axis Months [jan,b,c]
-            y-axis "Revenue (in $)" 4000 --> 12000
-            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              5
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
-
-  it('should render data labels within each bar in the horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    xychart
-            title "Sales Revenue"
-            x-axis Months [jan,b,c]
-            y-axis "Revenue (in $)" 4000 --> 12000
-            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              5
-            );
-          });
-      });
-    });
-  });
-
-  it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
-    imgSnapshotTest(
-      `
-      ---
-      config:
-        xyChart:
-          showDataLabel: true
-      ---
-      xychart
-        title "Sales Revenue"
-        x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
-        y-axis "Revenue (in $)" 4000 --> 12000
-        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              5
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
-
-  it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    xychart
-      title "Sales Revenue"
-      x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
-      y-axis "Revenue (in $)" 4000 --> 12000
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              5
-            );
-          });
-      });
-    });
-  });
-
-  it('should render data labels correctly for a bar in the vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    xychart
-            title "Sales Revenue"
-            x-axis Months [jan]
-            y-axis "Revenue (in $)" 3000 --> 12000
-            bar [4000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              5
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
-
-  it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    xychart
-            title "Sales Revenue"
-            x-axis Months [jan]
-            y-axis "Revenue (in $)" 3000 --> 12000
-            bar [4000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              5
-            );
-          });
-      });
-    });
-  });
 });

cypress/platform/ashish2.html

@@ -60,7 +60,7 @@
     <pre id="diagram" class="mermaid2">
  timeline
         title My day
-        section Section with no tasks
+        section section with no tasks
         section Go to work at the dog office
           1930 : first step : second step is a long step
                : third step
@@ -70,18 +70,18 @@
           1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
           1970 : Green Revolution comes to india
         section Another section with no tasks
-          I am a very, very big task
-          I am not so big task
+          I am a big big big tasks
+          I am not so big tasks
     </pre>
     <pre id="diagram" class="mermaid">
  timeline
         title MermaidChart 2023 Timeline
         section 2023 Q1 <br> Release Personal Tier
-          Bullet 1 : sub-point 1a : sub-point 1b
+          Buttet 1 : sub-point 1a : sub-point 1b
                : sub-point 1c
           Bullet 2 : sub-point 2a : sub-point 2b
         section 2023 Q2 <br> Release XYZ Tier
-          Bullet 3 : sub-point <br> 3a : sub-point 3b
+          Buttet 3 : sub-point <br> 3a : sub-point 3b
                : sub-point 3c
           Bullet 4 : sub-point 4a : sub-point 4b
 
@@ -93,7 +93,7 @@
         section Stone Age
           7600 BC : Britain's oldest known house was built in Orkney, Scotland
           6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
-        section Bronze Age
+        section Broze Age
           2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
                : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
@@ -106,7 +106,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google : Pixar
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram
@@ -122,7 +122,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google : Pixar
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram
@@ -139,7 +139,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -152,7 +152,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram

cypress/platform/class.html

@@ -37,7 +37,7 @@
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawal(amount) int
+        +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
 
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
           +String owner
           +BigDecimal balance
           +deposit(amount) bool
-          +withdrawal(amount) int
+          +withdrawl(amount) int
         }
           Class01~T~ <|-- AveryLongClass : Cool
           Class03~T~ *-- Class04~T~

cypress/platform/click_security_other.html

@@ -77,7 +77,7 @@
 
         document.getElementsByTagName('body')[0].appendChild(div);
       }
-      mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', logLevel: 1 });
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
     </script>
   </body>
 </html>

cypress/platform/current.html

@@ -31,7 +31,7 @@
         flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px">
-        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
         overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
         though
       </div>
@@ -61,9 +61,9 @@
       #quot;elit#quot;."}}
     </div>
     <div class="mermaid2" style="width: 50%; height: 50%">
-      flowchart TB internet nat router lb1 lb2 compute1 compute2 subgraph project router nat
-      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> router
-      router --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
+      flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
+      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
+      routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
     </div>
     <div class="mermaid2" style="width: 50%; height: 50%">
       flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]

cypress/platform/darshan.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Pie chart demos</h1>
-    <pre class="mermaid">
-     pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : -60.67
-        "rats" : 40.12
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/dev-diagrams/knsv/knsv2-01-sequence.mmd

@@ -1,16 +0,0 @@
-sequenceDiagram
-actor Alice
-participant John@{ "type": "boundary" }
-participant P1@{ "type": "control" } as New Control
-participant P2@{ "type": "entity" } as New Entity
-participant P3@{ "type": "database" } as New Database
-Alice->>+John: Hello John, how are you?
-John->>P1: new msg
-P1->>P2: new msg
-P2->>P3: new msg
-Alice->>+John: John, can you hear me?
-P3->>P2: new msg
-P2->>P1: new msg
-John-->>-Alice: Hi Alice, I can hear you!
-P1->>John: new msg
-John-->>-Alice: I feel great!

cypress/platform/dev-diagrams/knsv/knsv2-02-treemap.mmd

@@ -1,9 +0,0 @@
-treemap
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12

cypress/platform/dev-diagrams/knsv/knsv2-03-radar.mmd

@@ -1,11 +0,0 @@
-      ---
-title: "Grades"
----
-radar-beta
-  axis m["Math"], s["Science"], e["English"]
-  axis h["History"], g["Geography"], a["Art"]
-  curve a["Alice"]{85, 90, 80, 70, 75, 90}
-  curve b["Bob"]{70, 75, 85, 80, 90, 85}
-
-  max 100
-  min 0

cypress/platform/dev-diagrams/knsv/knsv2-04-flowchart-lr-animation.mmd

@@ -1,11 +0,0 @@
-flowchart LR
-A["A"] e1@==> B["B"]
-A L_A_n1_0@--> n1["C"]
-B L_B_n2_0@==> n2["D"]
-n1 L_n1_n2_0@--> n2
-
-
-e1@{ animate: true }
-L_A_n1_0@{ animation: slow }
-L_B_n2_0@{ animation: slow }
-L_n1_n2_0@{ animation: fast }

cypress/platform/dev-diagrams/knsv/knsv2-05-flowchart-lr-animation.mmd

@@ -1,3 +0,0 @@
-flowchart LR
-A e1@==> B
-e1@{ animate: true }

cypress/platform/dev-diagrams/knsv/knsv2-06-flowchart-elk-ogdc-tb-subgraphs.mmd

@@ -1,18 +0,0 @@
----
-config:
-  layout: ogdc
----
-flowchart-elk TB
-c1-->a2
-subgraph one
-a1-->a2
-end
-subgraph two
-b1-->b2
-end
-subgraph three
-c1-->c2
-end
-one --> two
-three --> two
-two --> c2