Adding dev tool for simplified development

setting canonicals to mermaid.ai/open-source

.build/common.ts

@@ -33,6 +33,11 @@ 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',

.changeset/beige-peas-shave.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/mermaid-zenuml': patch
----
-
-Fixed a critical bug that the ZenUML diagram is not rendered.

.changeset/brave-baths-behave.md

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

.changeset/brave-memes-flash.md

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

.changeset/busy-clocks-melt.md

@@ -1,6 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
-'mermaid': patch
----
-
-feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration

.changeset/busy-mirrors-try.md

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

.changeset/chatty-insects-dream.md

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

.changeset/chatty-lemons-stick.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

.changeset/chilly-words-march.md

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

.changeset/cold-sites-accept.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Position the edge label in state diagram correctly relative to the edge

.changeset/curly-apes-prove.md

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

.changeset/empty-clouds-cry.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Apply correct dateFormat in Gantt chart to show only day when specified

.changeset/fuzzy-pears-cough.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'

.changeset/gold-spiders-join.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape

.changeset/good-weeks-tickle.md

@@ -1,7 +0,0 @@
----
-'mermaid': patch
----
-
-fix: sanitize icon labels and icon SVGs
-
-Resolves CVE-2025-54880 reported by @fourcube

.changeset/large-mirrors-cheer.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Update casing of ID in requirement diagram

.changeset/lazy-brooms-battle.md

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

.changeset/lemon-masks-unite.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Added support for per link curve styling in flowchart diagram using edge ids

.changeset/light-flowers-judge.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Make flowchart elk detector regex match less greedy

.changeset/loud-results-melt.md

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

.changeset/lovely-queens-own.md

@@ -1,8 +0,0 @@
----
-'mermaid': patch
----
-
-fix(block): overflowing blocks no longer affect later lines
-
-This may change the layout of block diagrams that have overflowing lines
-(i.e. block diagrams that use up more columns that the `columns` specifier).

.changeset/ninety-roses-turn.md

@@ -1,7 +0,0 @@
----
-'mermaid': patch
----
-
-fix: log warning for blocks exceeding column width
-
-This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.

.changeset/rare-women-fly.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Add escaped class literal name on namespace

.changeset/red-zebras-happen.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Allow equals sign in sequenceDiagram labels

.changeset/seven-papayas-film.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-Add validation for negative values in pie charts:
-
-Prevents crashes during parsing by validating values post-parsing.
-
-Provides clearer, user-friendly error messages for invalid negative inputs.

.changeset/short-seals-sort.md

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

.changeset/silver-eyes-build.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: migrate to class-based ArchitectureDB implementation

.changeset/six-planets-rescue.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: node border style for handdrawn shapes

.changeset/slow-lemons-know.md

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

.changeset/smart-humans-cover.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Update flowchart direction TD's behavior to be the same as TB

.changeset/spicy-ties-see.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
----
-
-Make elk not force node model order, but strongly consider it instead

.changeset/strong-dryers-pay.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: correctly render non-directional lines for '---' in block diagrams

.changeset/strong-laws-confess.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks
-
-Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature
-that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`,
-fallback to the raw markdown text.

.changeset/sweet-games-build.md

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

.changeset/ten-plums-bet.md

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

.changeset/tidy-weeks-play.md

@@ -1,7 +0,0 @@
----
-'mermaid': patch
----
-
-fix: sanitize KATEX blocks
-
-Resolves CVE-2025-54881 reported by @fourcube

.changeset/tricky-rivers-stand.md

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

.changeset/vast-buses-see.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Update packet diagram to use new class-based database structure

.changeset/wide-lines-trade.md

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

.cspell/code-terms.txt

@@ -1,3 +1,5 @@
+!viewbox
+# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript

.cspell/contributors.txt

@@ -2,6 +2,7 @@
 Ashish Jain
 cpettitt
 Dong Cai
+fourcube
 knsv
 Knut Sveidqvist
 Nikolay Rozhkov

.cspell/libraries.txt

@@ -24,7 +24,6 @@ Doctave
 DokuWiki
 dompurify
 elkjs
-eslintcache
 fcose
 fontawesome
 Fonticons
@@ -65,6 +64,7 @@ rscratch
 shiki
 Slidev
 sparkline
+speccharts
 sphinxcontrib
 ssim
 stylis

.cspell/mermaid-terms.txt

@@ -5,8 +5,10 @@ bmatrix
 braintree
 catmull
 compositTitleSize
+cose
 curv
 doublecircle
+elem
 elems
 gantt
 gitgraph

.cspell/misc-terms.txt

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

.esbuild/dev-explorer/ARCHITECTURE.md

@@ -0,0 +1,53 @@
+# 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

@@ -0,0 +1,187 @@
+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

@@ -0,0 +1,551 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,182 @@
+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

@@ -0,0 +1,39 @@
+<!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

@@ -0,0 +1,359 @@
+/* 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,12 +2,17 @@
 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,
@@ -18,7 +23,7 @@ const configs = Object.values(packageOptions).map(({ packageName }) =>
 );
 const mermaidIIFEConfig = getBuildConfig({
   ...defaultOptions,
-  minify: false,
+  minify: true,
   core: false,
   options: packageOptions.mermaid,
   format: 'iife',
@@ -84,6 +89,81 @@ 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();
@@ -106,8 +186,117 @@ 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

@@ -71,6 +71,9 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
 
   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}`),
@@ -82,15 +85,13 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
       // This needs to be stringified for esbuild
-      includeLargeFeatures: `${includeLargeFeatures}`,
+      '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

.github/lychee.toml

@@ -59,6 +59,7 @@ exclude = [
 "https://huehive.co",
 "https://foswiki.org",
 "https://www.gnu.org",
+"https://redmine.org",
 "https://mermaid-preview.com"
 ]
 

.github/workflows/codeql.yml

@@ -26,8 +26,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        language: ['javascript', 'actions']
+        # CodeQL supports [ 'actions', '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@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
         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@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
 
       # ℹ️ 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@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21

.github/workflows/e2e-applitools.yml

@@ -23,9 +23,6 @@ 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
@@ -56,7 +53,7 @@ jobs:
           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@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -27,12 +27,12 @@ jobs:
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
         with:
           runTests: false
 
       - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
         id: cypress
         with:
           install: false
@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858
+        uses: peter-evans/create-pull-request@0979079bc20c05bbbb590a56c21c4e2b1d1f1bbe
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/e2e.yml

@@ -45,7 +45,7 @@ jobs:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
         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@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
         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@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
         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@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
         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@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}

.github/workflows/lint.yml

@@ -40,14 +40,6 @@ jobs:
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-      - name: Setup ESLint cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
-        with:
-          path: .eslintcache
-          key: ${{ runner.os }}-eslint-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-eslint-
-
       - name: Run Linting
         shell: bash
         run: |

.github/workflows/release.yml

@@ -36,11 +36,10 @@ jobs:
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
+        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
         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@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
         with:
           results_file: results.sarif
           results_format: sarif
           publish_results: true
       - name: Upload artifact
-        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: SARIF file
           path: results.sarif
           retention-days: 5
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
         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@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
         with:
           branch: update-browserslist
           title: Update Browserslist

.github/workflows/validate-lockfile.yml

@@ -1,7 +1,7 @@
 name: Validate pnpm-lock.yaml
 
 on:
-  pull_request:
+  pull_request_target:
     paths:
       - 'pnpm-lock.yaml'
       - '**/package.json'
@@ -15,13 +15,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.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
@@ -35,7 +30,7 @@ jobs:
 
           # 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.")
+            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
@@ -55,16 +50,41 @@ jobs:
             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@v4
+        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,6 +4,7 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
+.instructions/
 
 dist
 v8-compile-cache-0

.lintstagedrc.mjs

@@ -7,6 +7,5 @@ export default {
     'prettier --write',
   ],
   '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'],
-  '**/*.md': ['pnpm cspell'],
   '**/*.jison': ['pnpm -w run lint:jison'],
 };

.vite/build.ts

@@ -78,6 +78,8 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     define: {
       'import.meta.vitest': 'undefined',
+      'injected.includeLargeFeatures': 'true',
+      'injected.version': `'0.0.0'`,
     },
     resolve: {
       extensions: [],
@@ -94,10 +96,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       }),
       ...visualizerOptions(packageName, core),
     ],
-    define: {
-      // Needs to be string
-      includeLargeFeatures: 'true',
-    },
   };
 
   if (watch && config.build) {

Dockerfile

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

cypress/helpers/util.ts

@@ -6,6 +6,7 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
+  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -90,20 +91,33 @@ export const renderGraph = (
 
 export const openURLAndVerifyRendering = (
   url: string,
-  options: CypressMermaidConfig,
+  { screenshot = true, ...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');
 
-  if (validation) {
-    cy.get('svg').should(validation);
+  // 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);
+    }
   }
 
-  verifyScreenshot(name);
+  if (screenshot) {
+    verifyScreenshot(name);
+  }
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/other/configuration.spec.js

@@ -98,12 +98,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,8 +113,7 @@ describe('Configuration', () => {
         cy.get('path')
           .first()
           .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(http\\:\\/\\/localhost');
+          .and('include', 'url(http://localhost');
       });
     });
     it('should not taint the initial configuration when using multiple directives', () => {

cypress/integration/rendering/c4.spec.js

@@ -114,4 +114,28 @@ 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,6 +562,20 @@ 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,6 +709,20 @@ 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

@@ -524,5 +524,18 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    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

@@ -369,4 +369,92 @@ ORDER ||--|{ LINE-ITEM : contains
       );
     });
   });
+
+  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);
+      verifyNumber(maxWidthValue, 380, 15);
     });
   });
   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);
+      verifyNumber(width, 380, 15);
       expect(svg).to.not.have.attr('style');
     });
   });

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

@@ -1029,4 +1029,19 @@ 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-v2.spec.js

@@ -79,6 +79,18 @@ 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
@@ -1186,4 +1198,17 @@ end
       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,6 +774,21 @@ 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(
       `
@@ -973,4 +988,19 @@ graph TD
       }
     );
   });
+
+  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

@@ -803,4 +803,64 @@ 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/mindmap-tidy-tree.spec.js

@@ -0,0 +1,79 @@
+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

@@ -159,12 +159,10 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `
-mindmap
+      `mindmap
     root[
       The root
-    ]
-      `,
+    ]`,
       {},
       undefined,
       shouldHaveRoot
@@ -172,12 +170,10 @@ mindmap
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `
-mindmap
+      `mindmap
     root((
       The root
-    ))
-      `,
+    ))`,
       {},
       undefined,
       shouldHaveRoot
@@ -185,12 +181,10 @@ mindmap
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `
-mindmap
+      `mindmap
     root(
       The root
-    )
-      `,
+    )`,
       {},
       undefined,
       shouldHaveRoot
@@ -198,10 +192,8 @@ mindmap
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `
-mindmap
-  The root
-      `,
+      `mindmap
+  The root`,
       {},
       undefined,
       shouldHaveRoot
@@ -209,12 +201,10 @@ mindmap
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `
-mindmap
+      `mindmap
   The root
     child1
-    child2
-      `,
+    child2`,
       {},
       undefined,
       shouldHaveRoot
@@ -222,13 +212,11 @@ mindmap
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `
-mindmap
+      `mindmap
   The root
     child1
       child2
-      child3
-      `,
+      child3`,
       {},
       undefined,
       shouldHaveRoot
@@ -240,28 +228,50 @@ mindmap
         `mindmap
     id1[\`**Start** with
     a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it
-Word!\`]
-`
+      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
+        ` mindmap
           root
             Photograph
               Waterfall
               Landscape
             Geography
               Mountains
-              Rocks
-        `,
+              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
+      );
+    });
+  });
   /* The end */
 });

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

@@ -0,0 +1,969 @@
+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,6 +893,17 @@ 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(
@@ -1042,4 +1053,167 @@ 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/treemap.spec.ts

@@ -327,8 +327,97 @@ classDef sales fill:#c3a66b,stroke:#333;
       {}
     );
   });
+
+  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('12: should render a treemap with title', () => {
+  it.skip('17: should render a treemap with title', () => {
     imgSnapshotTest(
       `
     treemap-beta

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,11 @@
+      ---
+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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,18 @@
+---
+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

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

@@ -0,0 +1,17 @@
+---
+config:
+  layout: elk
+---
+flowchart TB
+
+  process_C
+subgraph container_Alpha
+  subgraph process_B
+    pppB
+  end
+  subgraph process_A
+    pppA
+  end
+  process_B-->|via_AWSBatch|container_Beta
+  process_A-->|messages|container_Beta
+end

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

@@ -0,0 +1,18 @@
+---
+config:
+  layout: elk
+---
+flowchart TB
+subgraph container_Beta
+  process_C
+end
+subgraph container_Alpha
+  subgraph process_B
+    pppB
+  end
+  subgraph process_A
+    pppA
+  end
+  process_B-->|via_AWSBatch|container_Beta
+  process_A-->|messages|container_Beta
+end

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

@@ -0,0 +1,10 @@
+---
+config:
+  layout: elk
+---
+flowchart TB
+subgraph container_Beta
+  process_C
+end
+
+  process_B-->|via_AWSBatch|container_Beta

cypress/platform/dev-diagrams/knsv/knsv2-10-class-elk.mmd

@@ -0,0 +1,31 @@
+---
+config:
+  layout: elk
+---
+classDiagram
+note "I love this diagram!\nDo you love it?"
+Class01 <|-- AveryLongClass : Cool
+<<interface>> Class01
+Class03 "1" *-- "*" Class04
+Class05 "1" o-- "many" Class06
+Class07 "1" .. "*" Class08
+Class09 "1" --> "*" C2 : Where am i?
+Class09 "*" --* "*" C3
+Class09 "1" --|> "1" Class07
+Class12 <|.. Class08
+Class11 ..>Class12
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class01 : -int privateChimp
+Class01 : +int publicGorilla
+Class01 : #int protectedMarmoset
+Class08 <--> C2: Cool label
+class Class10 {
+  <<service>>
+  int id
+  test()
+}
+note for Class10 "Cool class\nI said it's very cool class!"

cypress/platform/dev-diagrams/knsv/knsv2-11-requirement-elk.mmd

@@ -0,0 +1,17 @@
+---
+config:
+  layout: elk
+---
+requirementDiagram
+  requirement test_req {
+  id: 1
+  text: the test text.
+  risk: high
+  verifymethod: test
+  }
+
+  element test_entity {
+  type: simulation
+  }
+
+  test_entity - satisfies -> test_req

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

@@ -0,0 +1,21 @@
+---
+config:
+  layout: elk
+---
+flowchart-elk TB
+internet
+nat
+router
+compute1
+
+subgraph project
+router
+nat
+  subgraph subnet1
+    compute1
+  end
+end
+
+%% router --> subnet1
+subnet1  --> nat
+%% nat --> internet

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

@@ -0,0 +1,27 @@
+---
+config:
+  layout: elk
+---
+flowchart-elk 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

cypress/platform/dev-diagrams/knsv/knsv2-14-flowchart-elk-tb.mmd

@@ -0,0 +1,14 @@
+---
+config:
+  layout: elk
+  elk:
+    mergeEdges: false
+    forceNodeModelOrder: false
+    considerModelOrder: NONE
+
+---
+            flowchart TB
+              a --> a1 & a2 & a3 & a4
+              b --> b1 & b2
+              b2 --> b3
+              b1 --> b4

cypress/platform/dev-diagrams/knsv/knsv2-15-flowchart-elk-lr-shapes.mmd

@@ -0,0 +1,11 @@
+---
+config:
+  layout: elk
+  flowchart:
+    curve: rounded
+---
+flowchart LR
+    I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
+    I --> D & D
+    D@{ shape: question}
+    I@{ shape: question}