chore: save eslintcache to speedup linting

.build/common.ts

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

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

.changeset/brave-baths-behave.md

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

.changeset/brave-memes-flash.md

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

.changeset/busy-clocks-melt.md

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

.changeset/busy-mirrors-try.md

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

.changeset/chatty-insects-dream.md

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

.changeset/chatty-lemons-stick.md

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

.changeset/chilly-words-march.md

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

.changeset/cold-sites-accept.md

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

.changeset/curly-apes-prove.md

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

.changeset/empty-clouds-cry.md

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

.changeset/fuzzy-pears-cough.md

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

.changeset/gold-spiders-join.md

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

.changeset/good-weeks-tickle.md

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

.changeset/large-mirrors-cheer.md

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

.changeset/lazy-brooms-battle.md

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

.changeset/lemon-masks-unite.md

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

.changeset/light-flowers-judge.md

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

.changeset/loud-results-melt.md

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

.changeset/lovely-queens-own.md

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

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

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

.changeset/red-zebras-happen.md

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

.changeset/seven-papayas-film.md

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

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

.changeset/silver-eyes-build.md

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

.changeset/six-planets-rescue.md

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

.changeset/slow-lemons-know.md

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

.changeset/smart-humans-cover.md

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

.changeset/spicy-ties-see.md

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

.changeset/strong-dryers-pay.md

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

.changeset/strong-laws-confess.md

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

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

.changeset/ten-plums-bet.md

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

.changeset/tidy-weeks-play.md

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

.changeset/tricky-rivers-stand.md

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

.changeset/vast-buses-see.md

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

.changeset/wide-lines-trade.md

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

.cspell/code-terms.txt

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

.cspell/contributors.txt

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

.cspell/libraries.txt

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

.cspell/mermaid-terms.txt

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

.cspell/misc-terms.txt

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

.esbuild/dev-explorer/ARCHITECTURE.md

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

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

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

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

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

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

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

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

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

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

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

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

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

.esbuild/server.ts

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

.esbuild/util.ts

@@ -71,9 +71,6 @@ 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}`),
@@ -85,13 +82,15 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
       // This needs to be stringified for esbuild
-      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
-      'injected.version': `'${version}'`,
+      includeLargeFeatures: `${includeLargeFeatures}`,
       '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,7 +59,6 @@ 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', 'actions']
-        # CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        language: ['javascript']
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
@@ -36,7 +36,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -48,7 +48,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10

.github/workflows/e2e-applitools.yml

@@ -23,6 +23,9 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
@@ -53,7 +56,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@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -27,12 +27,12 @@ jobs:
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
 
       - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           install: false
@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@0979079bc20c05bbbb590a56c21c4e2b1d1f1bbe
+        uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858
         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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -59,7 +59,7 @@ jobs:
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           # just perform install
           runTests: false
@@ -95,13 +95,13 @@ jobs:
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
 
@@ -117,7 +117,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           install: false

.github/workflows/link-checker.yml

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

.github/workflows/lint.yml

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

.github/workflows/scorecard.yml

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

.github/workflows/update-browserlist.yml

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

.github/workflows/validate-lockfile.yml

@@ -1,7 +1,7 @@
 name: Validate pnpm-lock.yaml
 
 on:
-  pull_request_target:
+  pull_request:
     paths:
       - 'pnpm-lock.yaml'
       - '**/package.json'
@@ -15,8 +15,13 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Validate pnpm-lock.yaml entries
         id: validate # give this step an ID so we can reference its outputs
@@ -30,7 +35,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
@@ -50,41 +55,16 @@ 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@v5
+        uses: peter-evans/create-or-update-comment@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.pull_request.number }}
-          comment-id: ${{ steps.find-comment.outputs.comment-id }}
-          edit-mode: replace
           body: |
-            ❌ **Lockfile Validation Failed**
-
             The following issue(s) were detected:
             ${{ steps.validate.outputs.errors }}
 
             Please address these and push an update.
 
             _Posted automatically by GitHub Actions_
-
-      - name: Delete comment if validation passed
-        if: success() && steps.find-comment.outputs.comment-id != ''
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            await github.rest.issues.deleteComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              comment_id: ${{ steps.find-comment.outputs.comment-id }},
-            });

.gitignore

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

.lintstagedrc.mjs

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

.vite/build.ts

@@ -78,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     define: {
       'import.meta.vitest': 'undefined',
-      'injected.includeLargeFeatures': 'true',
-      'injected.version': `'0.0.0'`,
     },
     resolve: {
       extensions: [],
@@ -96,6 +94,10 @@ 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 \
+RUN apk add --no-cache git~=2.43.4 \
     && git config --add --system safe.directory /mermaid
 
 ENV NODE_OPTIONS="--max_old_space_size=8192"

cypress/helpers/util.ts

@@ -6,7 +6,6 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
-  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -91,33 +90,20 @@ export const renderGraph = (
 
 export const openURLAndVerifyRendering = (
   url: string,
-  { screenshot = true, ...options }: CypressMermaidConfig,
+  options: CypressMermaidConfig,
   validation?: any
 ): void => {
   const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
 
-  // Handle sandbox mode where SVG is inside an iframe
-  if (options.securityLevel === 'sandbox') {
-    cy.get('iframe').should('be.visible');
-    if (validation) {
-      cy.get('iframe').should(validation);
-    }
-  } else {
-    cy.get('svg').should('be.visible');
-    // cspell:ignore viewbox
-    cy.get('svg').should('not.have.attr', 'viewbox');
-
-    if (validation) {
-      cy.get('svg').should(validation);
-    }
+  if (validation) {
+    cy.get('svg').should(validation);
   }
 
-  if (screenshot) {
-    verifyScreenshot(name);
-  }
+  verifyScreenshot(name);
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/other/configuration.spec.js

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

cypress/integration/rendering/c4.spec.js

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

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

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

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

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

cypress/integration/rendering/classDiagram.spec.js

@@ -524,18 +524,5 @@ 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,92 +369,4 @@ 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, 15);
+      verifyNumber(maxWidthValue, 380);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380, 15);
+      verifyNumber(width, 380);
       expect(svg).to.not.have.attr('style');
     });
   });

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

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

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

@@ -79,18 +79,6 @@ describe('Flowchart v2', () => {
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('6a: should render complex HTML in labels with sandbox security', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-      `,
-      { securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
-    );
-  });
   it('7: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
       `flowchart TD
@@ -1198,17 +1186,4 @@ 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,21 +774,6 @@ describe('Graph', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
-  it('40: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { screenshot: false }
-    );
-    // Verify animation classes are applied to both edges
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
       `
@@ -988,19 +973,4 @@ 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,64 +803,4 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should handle numeric timestamps with dateFormat x', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat x
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
-  it('should handle numeric timestamps with dateFormat X', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat X
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
-  it('should handle seconds-only format with tickInterval (issue #5496)', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     tickInterval 1second
-     dateFormat ss
-     axisFormat %s
-
-     section Network Request
-     RTT : rtt, 0, 20
-    `,
-      {}
-    );
-  });
-  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Schedule
-     dateFormat YYYY-MM-DD
-     tickInterval 1week
-     axisFormat %m-%d
-
-     section Vacation
-     London : 2024-12-01, 7d
-     London : 202-12-01, 7d
-    `,
-      {}
-    );
-  });
 });

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

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

cypress/integration/rendering/mindmap.spec.ts

@@ -159,10 +159,12 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root[
       The root
-    ]`,
+    ]
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -170,10 +172,12 @@ root
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root((
       The root
-    ))`,
+    ))
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -181,10 +185,12 @@ root
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root(
       The root
-    )`,
+    )
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -192,8 +198,10 @@ root
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -201,10 +209,12 @@ root
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
-    child2`,
+    child2
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -212,11 +222,13 @@ root
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
       child2
-      child3`,
+      child3
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -228,50 +240,28 @@ root
         `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

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

cypress/integration/rendering/sequencediagram.spec.js

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

cypress/integration/rendering/treemap.spec.ts

@@ -327,97 +327,8 @@ 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('17: should render a treemap with title', () => {
+  it.skip('12: should render a treemap with title', () => {
     imgSnapshotTest(
       `
     treemap-beta

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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