chore: modified the file structure to implement the new way of antlr parsing

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.build/antlr-cli.ts

@@ -0,0 +1,92 @@
+/* eslint-disable no-console */
+
+import { exec } from 'node:child_process';
+import { promisify } from 'node:util';
+import { resolve, dirname } from 'node:path';
+import { readFile, mkdir, access } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+
+const execAsync = promisify(exec);
+
+interface AntlrGrammarConfig {
+  id: string;
+  grammar: string;
+  outputDir: string;
+  language: string;
+  generateVisitor?: boolean;
+  generateListener?: boolean;
+}
+
+interface AntlrConfig {
+  projectName: string;
+  grammars: AntlrGrammarConfig[];
+  mode: string;
+}
+
+export async function generateFromConfig(configFile: string): Promise<void> {
+  const configPath = resolve(configFile);
+
+  if (!existsSync(configPath)) {
+    throw new Error(`ANTLR config file not found: ${configPath}`);
+  }
+
+  const configContent = await readFile(configPath, 'utf-8');
+  const config: AntlrConfig = JSON.parse(configContent);
+
+  const configDir = dirname(configPath);
+
+  for (const grammarConfig of config.grammars) {
+    await generateGrammar(grammarConfig, configDir);
+  }
+}
+
+async function generateGrammar(grammarConfig: AntlrGrammarConfig, baseDir: string): Promise<void> {
+  const grammarFile = resolve(baseDir, grammarConfig.grammar);
+  const outputDir = resolve(baseDir, grammarConfig.outputDir);
+
+  // Check if grammar file exists
+  try {
+    await access(grammarFile);
+  } catch {
+    throw new Error(`Grammar file not found: ${grammarFile}`);
+  }
+
+  // Ensure output directory exists
+  await mkdir(outputDir, { recursive: true });
+
+  // Build ANTLR command arguments
+
+  // eslint-disable-next-line @cspell/spellchecker
+  const args = ['antlr-ng', `-Dlanguage=${grammarConfig.language}`];
+
+  if (grammarConfig.generateVisitor) {
+    args.push('--generate-visitor');
+  }
+
+  if (grammarConfig.generateListener) {
+    args.push('--generate-listener');
+  }
+
+  args.push('-o', `"${outputDir}"`, `"${grammarFile}"`);
+
+  const command = `npx ${args.join(' ')}`;
+
+  try {
+    await execAsync(command);
+    console.log(`Generated ANTLR files for ${grammarConfig.id}`);
+  } catch (error) {
+    console.error(`Failed to generate ANTLR files for ${grammarConfig.id}:`);
+    throw error;
+  }
+}
+
+// CLI interface
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const configFile = process.argv[2] || './packages/parser/antlr-config.json';
+  try {
+    await generateFromConfig(configFile);
+    console.log('ANTLR generation completed successfully!');
+  } catch (error) {
+    console.error('ANTLR generation failed:', error.message);
+  }
+}

.build/generateAntlr.ts

@@ -0,0 +1,5 @@
+import { generateFromConfig } from './antlr-cli.js';
+
+export async function generateAntlr() {
+  await generateFromConfig('./packages/parser/antlr-config.json');
+}

.build/jsonSchema.ts

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

.changeset/brave-baths-behave.md

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

.changeset/brave-memes-flash.md

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

.changeset/busy-mirrors-try.md

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

.changeset/chatty-insects-dream.md

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

.changeset/chilly-words-march.md

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

.changeset/curly-apes-prove.md

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

.changeset/deep-pumas-run.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Fix mindmap rendering in docs and apply tidytree layout

.changeset/four-eyes-wish.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Ensure edge label color is applied when using classDef with edge IDs

.changeset/lazy-brooms-battle.md

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

.changeset/moody-fans-try.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Resolve gantt chart crash due to invalid array length

.changeset/proud-colts-smell.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add IDs in architecture diagrams

.changeset/revert-marked-dependency.md

@@ -0,0 +1,9 @@
+---
+'mermaid': patch
+---
+
+chore: revert marked dependency from ^15.0.7 to ^16.0.0
+
+- Reverted marked package version to ^16.0.0 for better compatibility
+- This is a dependency update that maintains API compatibility
+- All tests pass with the updated version

.changeset/short-seals-sort.md

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

.changeset/ten-plums-bet.md

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

.changeset/tricky-rivers-stand.md

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

.changeset/wide-lines-trade.md

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

.cspell/code-terms.txt

@@ -1,5 +1,3 @@
-!viewbox
-# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript
@@ -145,6 +143,9 @@ typeof
 typestr
 unshift
 urlsafe
+usecase
+Usecase
+USECASE
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/libraries.txt

@@ -64,7 +64,6 @@ rscratch
 shiki
 Slidev
 sparkline
-speccharts
 sphinxcontrib
 ssim
 stylis

.esbuild/build.ts

@@ -4,6 +4,7 @@ import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
 import { defaultOptions, getBuildConfig } from './util.js';
+import { generateAntlr } from '../.build/generateAntlr.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
@@ -95,6 +96,7 @@ const buildTinyMermaid = async () => {
 
 const main = async () => {
   await generateLangium();
+  await generateAntlr();
   await mkdir('stats', { recursive: true });
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
   // it should build `parser` before `mermaid` because it's a dependency

.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,13 @@
 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 { execSync } from 'child_process';
 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 +19,7 @@ const configs = Object.values(packageOptions).map(({ packageName }) =>
 );
 const mermaidIIFEConfig = getBuildConfig({
   ...defaultOptions,
-  minify: true,
+  minify: false,
   core: false,
   options: packageOptions.mermaid,
   format: 'iife',
@@ -69,6 +65,28 @@ function eventsHandler(request: Request, response: Response) {
 }
 
 let timeoutID: NodeJS.Timeout | undefined = undefined;
+let isGeneratingAntlr = false;
+
+/**
+ * Generate ANTLR parser files from grammar files
+ */
+function generateAntlr(): void {
+  if (isGeneratingAntlr) {
+    console.log('⏳ ANTLR generation already in progress, skipping...');
+    return;
+  }
+
+  try {
+    isGeneratingAntlr = true;
+    console.log('🎯 ANTLR: Generating parser files...');
+    execSync('tsx scripts/antlr-generate.mts', { stdio: 'inherit' });
+    console.log('✅ ANTLR: Parser files generated successfully\n');
+  } catch (error) {
+    console.error('❌ ANTLR: Failed to generate parser files:', error);
+  } finally {
+    isGeneratingAntlr = false;
+  }
+}
 
 /**
  * Debounce file change events to avoid rebuilding multiple times.
@@ -89,87 +107,12 @@ 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();
   const app = express();
   chokidar
-    .watch('**/src/**/*.{js,ts,langium,yaml,json}', {
+    .watch('**/src/**/*.{js,ts,g4,langium,yaml,json}', {
       ignoreInitial: true,
       ignored: [/node_modules/, /dist/, /docs/, /coverage/],
     })
@@ -183,120 +126,14 @@ async function createServer() {
       if (path.endsWith('.langium')) {
         await generateLangium();
       }
+      if (path.endsWith('.g4')) {
+        generateAntlr();
+      }
       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/workflows/e2e-timings.yml

@@ -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@915d841dae6a4f191bb78faf61a257411d7be4d2
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/release.yml

@@ -42,4 +42,5 @@ jobs:
           publish: pnpm changeset:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true

.github/workflows/scorecard.yml

@@ -20,7 +20,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Run analysis
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
         with:
           results_file: results.sarif
           results_format: 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@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
         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
@@ -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

@@ -51,5 +51,8 @@ demos/dev/**
 tsx-0/**
 vite.config.ts.timestamp-*
 
-# autogenereated by langium-cli
+# autogenereated by langium-cli and antlr-cli
 generated/
+
+# autogenereated by antlr-cli
+.antlr/

.vite/build.ts

@@ -10,6 +10,7 @@ import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template
 import istanbul from 'vite-plugin-istanbul';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
+import { generateAntlr } from '../.build/generateAntlr.js';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
@@ -78,8 +79,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 +95,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       }),
       ...visualizerOptions(packageName, core),
     ],
+    define: {
+      // Needs to be string
+      includeLargeFeatures: 'true',
+    },
   };
 
   if (watch && config.build) {
@@ -121,6 +124,7 @@ const main = async () => {
 };
 
 await generateLangium();
+await generateAntlr();
 
 if (watch) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));

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/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/erDiagram.spec.js

@@ -445,7 +445,7 @@ ORDER ||--|{ LINE-ITEM : contains
         { logLevel: 1 }
       );
     });
-    it('should render ER diagram with standalone numeric entities', () => {
+    it('should render ER diagram with numeric entity names and attributes', () => {
       imgSnapshotTest(
         `erDiagram
          PRODUCT ||--o{ ORDER-ITEM : has

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

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

@@ -833,34 +833,4 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  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.spec.ts

@@ -247,31 +247,5 @@ root
       );
     });
   });
-  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

@@ -776,194 +776,5 @@ describe('Sequence Diagram Special Cases', () => {
         );
       });
     });
-
-    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/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/integration/rendering/usecase.spec.ts

@@ -0,0 +1,425 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+describe('Usecase diagram', () => {
+  it('should render a simple usecase diagram with actors and use cases', () => {
+    imgSnapshotTest(
+      `
+      usecase
+        actor User
+        actor Admin
+        User --> Login
+        Admin --> "Manage Users"
+        User --> "View Profile"
+      `
+    );
+  });
+
+  it('should render usecase diagram with quoted actor names', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "Customer Service"
+        actor "System Administrator"
+        "Customer Service" --> "Handle Tickets"
+        "System Administrator" --> "Manage System"
+      `
+    );
+  });
+
+  it('should render usecase diagram with different arrow types', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        actor Admin
+        User --> Login
+        Admin <-- Logout
+        User -- "View Data"
+      `
+    );
+  });
+
+  it('should render usecase diagram with edge labels', () => {
+    imgSnapshotTest(
+      `usecase
+        actor Developer
+        actor Manager
+        Developer --important--> "Write Code"
+        Manager --review--> "Code Review"
+        Developer --urgent--> Manager
+      `
+    );
+  });
+
+  it('should render usecase diagram with node ID syntax', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        User --> a(Login)
+        User --> b("View Profile")
+        User --> c("Update Settings")
+      `
+    );
+  });
+
+  it('should render usecase diagram with comma-separated actors', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "Customer Service", "Technical Support", "Sales Team"
+        actor SystemAdmin
+        "Customer Service" --> "Handle Tickets"
+        "Technical Support" --> "Resolve Issues"
+        "Sales Team" --> "Process Orders"
+        SystemAdmin --> "Manage System"
+      `
+    );
+  });
+
+  it('should render usecase diagram with actor metadata', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User@{ "type" : "primary", "icon" : "user" }
+        actor Admin@{ "type" : "secondary", "icon" : "admin" }
+        actor System@{ "type" : "hollow", "icon" : "system" }
+        User --> Login
+        Admin --> "Manage Users"
+        System --> "Process Data"
+      `
+    );
+  });
+
+  it('should render usecase diagram with system boundaries (rect type)', () => {
+    imgSnapshotTest(
+      `usecase
+        actor Admin, User
+        systemBoundary "Authentication"
+          Login
+          Logout
+          "Reset Password"
+        end
+        "Authentication"@{ type: rect }
+        Admin --> Login
+        User --> Login
+        User --> "Reset Password"
+      `
+    );
+  });
+
+  it('should render usecase diagram with system boundaries (package type)', () => {
+    imgSnapshotTest(
+      `usecase
+        actor Admin, User
+        systemBoundary "Authentication"
+          Login
+          Logout
+          "Reset Password"
+        end
+        "Authentication"@{ type: package }
+        Admin --> Login
+        User --> Login
+        User --> "Reset Password"
+      `
+    );
+  });
+
+  it('should render complex usecase diagram with all features', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "Customer Service"@{ "type" : "primary", "icon" : "user" }
+        actor "System Admin"@{ "type" : "secondary", "icon" : "admin" }
+        actor "Database"@{ "type" : "hollow", "icon" : "database" }
+
+        systemBoundary "Customer Support System"
+          "Handle Tickets"
+          "View Customer Info"
+        end
+        "Customer Support System"@{ type: package }
+
+        systemBoundary "Administration"
+          "User Management"
+          "System Config"
+        end
+
+        "Customer Service" --priority--> "Handle Tickets"
+        "Customer Service" --> "View Customer Info"
+        "System Admin" --manage--> "User Management"
+        "System Admin" --> "System Config"
+        "Database" <-- "Handle Tickets"
+        "Database" <-- "View Customer Info"
+        "Database" <-- "User Management"
+      `
+    );
+  });
+
+  it('should render usecase diagram with actor-to-actor relationships', () => {
+    imgSnapshotTest(
+      `usecase
+        actor Manager
+        actor Developer
+        actor Tester
+        
+        Manager --supervises--> Developer
+        Manager --coordinates--> Tester
+        Developer --collaborates--> Tester
+        
+        Developer --> "Write Code"
+        Tester --> "Test Code"
+        Manager --> "Review Progress"
+      `
+    );
+  });
+
+  it('should render usecase diagram with mixed relationship types', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        actor Admin
+        
+        User --> "Basic Login"
+        Admin --> "Advanced Login"
+        User --includes--> "View Profile"
+        Admin --extends--> "Manage Profiles"
+        
+        "Basic Login" <-- "Advanced Login"
+      `
+    );
+  });
+
+  it('should render usecase diagram with long labels and text wrapping', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "Customer Service Representative"
+        actor "System Administrator with Extended Privileges"
+        
+        "Customer Service Representative" --Process--> "Handle Complex Customer Support Tickets"
+        "System Administrator with Extended Privileges" --> "Manage System Configuration and User Permissions"
+      `
+    );
+  });
+
+  it('should render usecase diagram with special characters in names', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "User@Company.com"
+        actor "Admin (Level-1)"        
+        "User@Company.com" --> a("Login & Authenticate")
+        "Admin (Level-1)" --> b("Manage Users & Permissions")
+      `
+    );
+  });
+
+  it('should render usecase diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `usecase
+        actor User
+        actor Admin
+        User --> Login
+        Admin --> "Manage System"
+        User --> "View Profile"
+      `,
+      { usecase: { 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;$/);
+    });
+  });
+
+  it('should render usecase diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `usecase
+        actor User
+        actor Admin
+        User --> Login
+        Admin --> "Manage System"
+      `,
+      { usecase: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      const width = parseFloat(svg.attr('width'));
+      expect(width).to.be.greaterThan(200);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
+
+  it('should render empty usecase diagram', () => {
+    imgSnapshotTest(`usecase`);
+  });
+
+  it('should render usecase diagram with only actors', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        actor Admin
+        actor Guest
+      `
+    );
+  });
+
+  it('should render usecase diagram with implicit use case creation', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        User --> Login
+        User --> Register
+        User --> "Forgot Password"
+      `
+    );
+  });
+
+  it('should render usecase diagram with nested system boundaries', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        actor Admin
+
+        systemBoundary "Main System"
+          Login
+          Logout
+          "Create User"
+          "Delete User"
+        end
+
+        User --> Login
+        User --> Logout
+        Admin --> "Create User"
+        Admin --> "Delete User"
+      `
+    );
+  });
+
+  it('should render usecase diagram with multiple edge labels on same relationship', () => {
+    imgSnapshotTest(
+      `usecase
+        actor Developer
+        actor Manager
+
+        Developer --"code review"--> Manager
+        Developer --"status update"--> Manager
+        Manager --"feedback"--> Developer
+        Manager --"approval"--> Developer
+      `
+    );
+  });
+
+  it('should render usecase diagram with various actor icon types', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User@{ "icon": "user" }
+        actor Admin@{ "icon": "admin" }
+        actor Database@{ "icon": "database" }
+        actor API@{ "icon": "api" }
+        actor Mobile@{ "icon": "mobile" }
+        actor Web@{ "icon": "web" }
+
+        User --> "Access System"
+        Admin --> "Manage System"
+        Database --> "Store Data"
+        API --> "Provide Services"
+        Mobile --> "Mobile Access"
+        Web --> "Web Access"
+      `
+    );
+  });
+
+  it('should render usecase diagram with mixed arrow directions and labels', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        actor System
+        actor Admin
+
+        User --request--> System
+        System --response--> User
+        System <--monitor-- Admin
+        Admin --configure--> System
+        User -- "direct access" -- Admin
+      `
+    );
+  });
+
+  it('should render usecase diagram with boundary-less use cases', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User
+        actor Admin
+
+        systemBoundary "Secure Area"
+          "Admin Panel"
+          "User Management"
+        end
+
+        User --> "Public Login"
+        User --> "Guest Access"
+        Admin --> "Public Login"
+        Admin --> "Admin Panel"
+        Admin --> "User Management"
+      `
+    );
+  });
+
+  it('should render usecase diagram with complex metadata combinations', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "Primary User"@{ "type": "primary", "icon": "user", "fillColor": "lightblue" }
+        actor "Secondary User"@{ "type": "secondary", "icon": "client", "strokeColor": "red" }
+        actor "System Service"@{ "type": "hollow", "icon": "service", "strokeWidth": "3" }
+
+        "Primary User" --"high priority"--> a("Critical Process")
+        "Secondary User" --"low priority"--> b("Background Task")
+        "System Service" --"automated"--> c("System Maintenance")
+      `
+    );
+  });
+
+  it('should render usecase diagram with Unicode characters', () => {
+    imgSnapshotTest(
+      `usecase
+        actor "用户"@{ "icon": "user" }
+        actor "管理员"@{ "icon": "admin" }
+
+        "用户" --"登录"--> "系统访问"
+        "管理员" --"管理"--> "用户管理"
+        "用户" --> "数据查看"
+      `
+    );
+  });
+
+  it('should render large usecase diagram with many elements', () => {
+    imgSnapshotTest(
+      `usecase
+        actor User1, User2, User3, User4
+        actor Admin1, Admin2
+        actor System1@{ "icon": "system" }
+        actor System2@{ "icon": "database" }
+
+        systemBoundary "Module A"
+          "Feature A1"
+          "Feature A2"
+          "Admin A1"
+        end
+        "Module A"@{ type: package }
+
+        systemBoundary "Module B"
+          "Feature B1"
+          "Feature B2"
+          "Admin B1"
+        end
+
+        User1 --> "Feature A1"
+        User2 --> "Feature A2"
+        Admin1 --> "Admin A1"
+        User3 --> "Feature B1"
+        User4 --> "Feature B2"
+        Admin2 --> "Admin B1"
+
+        System1 <-- "Feature A1"
+        System1 <-- "Feature B1"
+        System2 <-- "Admin A1"
+        System2 <-- "Admin B1"
+
+        User1 --"collaborates"--> User2
+        Admin1 --"supervises"--> Admin2
+      `
+    );
+  });
+});

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}

cypress/platform/dev-diagrams/knsv/knsv2-16-mindmap-tidy-tree.mmd

@@ -1,21 +0,0 @@
----
-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
-    Pen and paper
-    Mermaid

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

@@ -1,11 +0,0 @@
----
-config:
-  layout: elk
-  flowchart:
-    curve: linear
----
-flowchart LR
-    A[A] --> B[B]
-    A[A] --- B([C])
-    A@{ shape: diamond}
-    %%B@{ shape: diamond}

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

@@ -1,11 +0,0 @@
----
-config:
-  layout: elk
-  flowchart:
-    curve: linear
----
-flowchart LR
-    A[A] -- Mermaid js --> B[B]
-    A[A] -- Mermaid js --- B[B]
-    A@{ shape: diamond}
-    B@{ shape: diamond}

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

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

cypress/platform/dev-diagrams/knsv/knsv2-20-flowchart-elk-lr-shapes-node-placement.mmd

@@ -1,14 +0,0 @@
----
-config:
-  layout: elk
-  flowchart:
-    curve: rounded
-  elk:
-    nodePlacementStrategy: NETWORK_SIMPLEX
----
-flowchart LR
-    D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-    D --> I & I
-    a["a"]
-    D@{ shape: trap-b}
-    I@{ shape: lean-l}

cypress/platform/dev-diagrams/knsv/knsv2-21-flowchart-elk-lr-subgraphs.mmd

@@ -1,11 +0,0 @@
----
-config:
-  layout: elk
-
----
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C["Evaluate"]
- %% end
-
-    B --> C

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

@@ -1,10 +0,0 @@
----
-config:
-  layout: elk
-  flowchart:
-    //curve: linear
----
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-A{A} --> B((Bo boo)) & B & B & B

cypress/platform/dev-diagrams/knsv/knsv2-23-flowchart-elk-lr-subgraphs.mmd

@@ -1,18 +0,0 @@
----
-config:
-  layout: elk
-  theme: default
-  look: classic
----
-flowchart LR
- subgraph s1["APA"]
-        D{"Use the editor"}
-  end
- subgraph S2["S2"]
-        s1
-        I>"fa:fa-code Text"]
-        E["E"]
-  end
-    D -- Mermaid js --> I
-    D --> I & E
-    E --> I

cypress/platform/dev-diagrams/knsv/knsv2-24-flowchart-elk-lr-subgraphs.mmd

@@ -1,23 +0,0 @@
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end

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

@@ -1,11 +0,0 @@
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I

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

@@ -1,36 +0,0 @@
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}

cypress/platform/dev-diagrams/knsv/knsv2-27-flowchart-elk-lr-subgraphs.mmd

@@ -1,10 +0,0 @@
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-  end
-    n1 -- One --> n2

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

@@ -1,6 +0,0 @@
----
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C

cypress/platform/dev-diagrams/knsv/knsv2-29-flowchart-elk-lr-subgraphs.mmd

@@ -1,9 +0,0 @@
----
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
-    end

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

@@ -1,14 +0,0 @@
----
-config:
-  layout: elk
----
-flowchart LR
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    %% C@{ shape: hexagon}

cypress/platform/dev-diagrams/knsv/knsv2-31-kanban-tickets.mmd

@@ -1,16 +0,0 @@
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
----
-kanban
-  Backlog
-    task1[📝 Define project requirements]@{ ticket: a101 }
-  To Do
-    task2[🔍 Research technologies]@{ ticket: a102 }
-  Review
-    task4[🔍 Code review for login feature]@{ ticket: a104 }
-  Done
-    task5[✅ Deploy initial version]@{ ticket: a105 }
-  In Progress
-    task3[💻 Develop login feature]@{ ticket: 103 }

cypress/platform/dev-diagrams/knsv/knsv2-32-flowchart-lr-icons-shapes.mmd

@@ -1,2 +0,0 @@
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }

cypress/platform/dev-diagrams/knsv/knsv2-33-flowchart-lr-icons-shapes.mmd

@@ -1,3 +0,0 @@
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
-style A fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-34-flowchart-lr-icons-shapes.mmd

@@ -1,4 +0,0 @@
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-35-flowchart-lr-icons-shapes.mmd

@@ -1,2 +0,0 @@
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }

cypress/platform/dev-diagrams/knsv/knsv2-36-flowchart-lr-icons-shapes.mmd

@@ -1,2 +0,0 @@
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }

cypress/platform/dev-diagrams/knsv/knsv2-37-flowchart-lr-icons-shapes.mmd

@@ -1,3 +0,0 @@
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
-style A fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-38-flowchart-lr-icons-shapes.mmd

@@ -1,4 +0,0 @@
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-39-flowchart-lr-icons-shapes.mmd

@@ -1,2 +0,0 @@
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }

cypress/platform/dev-diagrams/knsv/knsv2-40-flowchart-lr-icons-shapes.mmd

@@ -1,2 +0,0 @@
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }

cypress/platform/dev-diagrams/knsv/knsv2-41-flowchart-lr-icons-shapes.mmd

@@ -1,3 +0,0 @@
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
-style A fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-42-flowchart-lr-icons-shapes.mmd

@@ -1,4 +0,0 @@
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-43-flowchart-lr-icons-shapes.mmd

@@ -1,4 +0,0 @@
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
-  A:::AClass
-  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-44-flowchart-lr-icons-shapes.mmd

@@ -1,3 +0,0 @@
-flowchart LR
-  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
-  style A fill:#f9f,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/knsv/knsv2-45-kanban-tickets.mmd

@@ -1,3 +0,0 @@
-kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }

cypress/platform/dev-diagrams/knsv/knsv2-46-kanban-tickets.mmd

@@ -1,24 +0,0 @@
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
-    # sectionWidth: 300
----
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]

cypress/platform/dev-diagrams/knsv/test.mmd

@@ -1,9 +0,0 @@
-flowchart TD
-      B("B: Investigate how SOX2 is implicated in endothelial to mesenchymal transition and how expression affects the migration of GBM cells")
-      B --> D["D: Investigate and isolate migratory glioblastoma with regards to phenotype"] & E["E: Investigate the effect of SOX2 on EMT in GBM"] & F["F: Investigate the effect of SOX2 downregulation on migratory/invasive phenotype in the in vitro model and the effect on metastasis formation in the in vivo model"]
-
-      L("L: Expression of markers for stemness, EMT and invasion pattern")
-      D -- RNA Sequencing --> L
-      E -- "Lentiviral-mediated RNA interference" --> J("J:Sox2 Knock-Down")
-      J --> O("O: Up/downregulation of stemness markers") & P("P: Up/downregulation of EMT markers")
-      F -- Transwell/Wound Healing Assay --> K("K: In Vitro m")

cypress/platform/knsv2.html

@@ -105,77 +105,49 @@
   </head>
 
   <body>
-    <div class="grid grid-cols-2 gap-4">
-      <pre id="diagram4" class="mermaid">
-      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!
-  </pre
-      >
-      <pre id="diagram4" class="mermaid">
-      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
-
-          </pre
-      >
-      <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid">
       ---
-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
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
-      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 }
-
-    </pre
-      >
-    </div>
-
-    <pre id="diagram4" class="mermaid2">
-      flowchart LR
-      A e1@==> B
-      e1@{ animate: true }
+      config:
+        layout: elk
+      ---
+      mindmap
+      root((mindmap))
+        Origins
+          Long history
+          ::icon(fa fa-book)
+          Popularisation
+            British popular psychology author Tony Buzan
+        Research
+          On effectiveness&lt;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
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      flowchart
+       aid0
+  </pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      mindmap
+      aid0
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: ogdc
@@ -197,7 +169,7 @@ radar-beta
 
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -218,7 +190,7 @@ radar-beta
 
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -240,7 +212,7 @@ radar-beta
 
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -255,7 +227,7 @@ radar-beta
 
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -289,7 +261,7 @@ radar-beta
       note for Class10 "Cool class\nI said it's very cool class!"
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -309,7 +281,7 @@ radar-beta
         test_entity - satisfies -> test_req
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -333,7 +305,7 @@ radar-beta
       %% nat --> internet
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -363,7 +335,7 @@ radar-beta
       subnet1 & subnet2 --> nat --> internet
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -379,7 +351,19 @@ config:
               b2 --> b3
               b1 --> b4</pre
     >
-    <pre id="diagram5" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
+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
+
+    </pre>
+    <pre id="diagram5" class="mermaid">
       ---
       config:
         layout: elk
@@ -393,7 +377,7 @@ config:
           I@{ shape: question}
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: tidy-tree
@@ -417,7 +401,7 @@ config:
           Mermaid
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -431,7 +415,7 @@ config:
           %%B@{ shape: diamond}
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -445,7 +429,7 @@ config:
           B@{ shape: diamond}
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -458,7 +442,7 @@ config:
           D@{ shape: question}
           I@{ shape: question}
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -474,7 +458,7 @@ config:
           D@{ shape: trap-b}
           I@{ shape: lean-l}
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -487,7 +471,7 @@ flowchart LR
 
     B --> C
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -500,7 +484,7 @@ flowchart LR
 A{A} --> B((Bo boo)) & B & B & B
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       ---
       config:
         layout: elk
@@ -520,7 +504,7 @@ A{A} --> B((Bo boo)) & B & B & B
           D --> I & E
           E --> I
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -545,7 +529,7 @@ config:
       end
       end
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -558,7 +542,7 @@ config:
       D-->I
       D-->I
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -597,7 +581,7 @@ flowchart LR
     n8@{ shape: rect}
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -613,7 +597,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -622,7 +606,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -634,7 +618,7 @@ flowchart LR
     end
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -652,7 +636,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   kanban:
@@ -671,81 +655,81 @@ kanban
     task3[💻 Develop login feature]@{ ticket: 103 }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   kanban:
@@ -816,7 +800,7 @@ kanban
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
-        layout: 'dagre',
+        layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },