[ { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n test:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@v1\n with:\n bun-version: latest\n\n - name: Install dependencies\n run: bun install\n\n - name: Run tests\n run: bun test\n\n - name: Type check\n run: bun x tsc --noEmit\n" }, { "path": ".github/workflows/publish.yml", "content": "name: Publish to npm\n\non:\n release:\n types: [published]\n\njobs:\n publish:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@v1\n with:\n bun-version: latest\n\n - name: Setup Node.js (for npm publish)\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n registry-url: 'https://registry.npmjs.org'\n\n - name: Install dependencies\n run: bun install\n\n - name: Run tests\n run: bun test\n\n - name: Publish to npm\n run: npm publish --access public\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".gitignore", "content": "# Dependencies\nnode_modules/\n\n# Build output\ndist/\nsite/\n*.tsbuildinfo\n\n# Generated files\nindex.html\n\n# IDE\n.idea/\n.vscode/\n*.swp\n*.swo\n.DS_Store\n\n# Logs\n*.log\nnpm-debug.log*\n\n# Environment\n.env\n.env.local\n.env.*.local\n\n# Test coverage\ncoverage/\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2026 Craft Docs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "
\n\n# beautiful-mermaid\n\n**Render Mermaid diagrams as beautiful SVGs or ASCII art**\n\nUltra-fast, fully themeable, zero DOM dependencies. Built for the AI era.\n\n![beautiful-mermaid sequence diagram example](hero.png)\n\n[![npm version](https://img.shields.io/npm/v/beautiful-mermaid.svg)](https://www.npmjs.com/package/beautiful-mermaid)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n[**Live Demo & Samples**](https://agents.craft.do/mermaid)\n\n**[→ Use it live in Craft Agents](https://agents.craft.do)**\n\n
\n\n---\n\n## Why We Built This\n\nDiagrams are essential for AI-assisted programming. When you're working with an AI coding assistant, being able to visualize data flows, state machines, and system architecture—directly in your terminal or chat interface—makes complex concepts instantly graspable.\n\n[Mermaid](https://mermaid.js.org/) is the de facto standard for text-based diagrams. It's brilliant. But the default renderer has problems:\n\n- **Aesthetics** — Might be personal preference, but wished they looked more professional\n- **Complex theming** — Customizing colors requires wrestling with CSS classes\n- **No terminal output** — Can't render to ASCII for CLI tools\n- **Heavy dependencies** — Pulls in a lot of code for simple diagrams\n\nWe built `beautiful-mermaid` at [Craft](https://craft.do) to power diagrams in [Craft Agents](https://agents.craft.do). It's fast, beautiful, and works everywhere—from rich UIs to plain terminals.\n\n\nThe ASCII rendering engine is based on [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii) by Alexander Grooff. We ported it from Go to TypeScript and extended it. Thank you Alexander for the excellent foundation! (And inspiration that this was possible.)\n\n## Features\n\n- **6 diagram types** — Flowcharts, State, Sequence, Class, ER, and XY Charts (bar, line, combined)\n- **Dual output** — SVG for rich UIs, ASCII/Unicode for terminals\n- **Synchronous rendering** — No async, no flash. Works with React `useMemo()`\n- **15 built-in themes** — And dead simple to add your own\n- **Full Shiki compatibility** — Use any VS Code theme directly\n- **Live theme switching** — CSS custom properties, no re-render needed\n- **Mono mode** — Beautiful diagrams from just 2 colors\n- **Zero DOM dependencies** — Pure TypeScript, works everywhere\n- **Ultra-fast** — Renders 100+ diagrams in under 500ms\n\n## Installation\n\n```bash\nnpm install beautiful-mermaid\n# or\nbun add beautiful-mermaid\n# or\npnpm add beautiful-mermaid\n```\n\n## Quick Start\n\n### SVG Output\n\n```typescript\nimport { renderMermaidSVG } from 'beautiful-mermaid'\n\nconst svg = renderMermaidSVG(`\n graph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Action]\n B -->|No| D[End]\n`)\n```\n\nRendering is **fully synchronous** — no `await`, no promises. The ELK.js layout engine runs synchronously via a FakeWorker bypass, so you get your SVG string instantly.\n\nNeed async? Use `renderMermaidSVGAsync()` — same output, returns a `Promise`.\n\n### ASCII Output\n\n```typescript\nimport { renderMermaidASCII } from 'beautiful-mermaid'\n\nconst ascii = renderMermaidASCII(`graph LR; A --> B --> C`)\n```\n\n```\n┌───┐ ┌───┐ ┌───┐\n│ │ │ │ │ │\n│ A │────►│ B │────►│ C │\n│ │ │ │ │ │\n└───┘ └───┘ └───┘\n```\n\n---\n\n## React Integration\n\nBecause rendering is synchronous, you can use `useMemo()` for zero-flash diagram rendering:\n\n```tsx\nimport { renderMermaidSVG } from 'beautiful-mermaid'\n\nfunction MermaidDiagram({ code }: { code: string }) {\n const { svg, error } = React.useMemo(() => {\n try {\n return {\n svg: renderMermaidSVG(code, {\n bg: 'var(--background)',\n fg: 'var(--foreground)',\n transparent: true,\n }),\n error: null,\n }\n } catch (err) {\n return { svg: null, error: err instanceof Error ? err : new Error(String(err)) }\n }\n }, [code])\n\n if (error) return 
{error.message}
\n return
\n}\n```\n\n**Why this works well:**\n- **No flash** — SVG is computed synchronously during render, not in a useEffect\n- **CSS variables** — Pass `var(--background)` etc. instead of hex colors. The SVG inherits from your app's CSS, so theme switches apply instantly without re-rendering\n- **Memoized** — Only re-renders when `code` changes\n\n---\n\n## Theming\n\nThe theming system is the heart of `beautiful-mermaid`. It's designed to be both powerful and dead simple.\n\n### The Two-Color Foundation\n\nEvery diagram needs just two colors: **background** (`bg`) and **foreground** (`fg`). That's it. From these two colors, the entire diagram is derived using `color-mix()`:\n\n```typescript\nconst svg = renderMermaidSVG(diagram, {\n bg: '#1a1b26', // Background\n fg: '#a9b1d6', // Foreground\n})\n```\n\nThis is **Mono Mode**—a coherent, beautiful diagram from just two colors. The system automatically derives:\n\n| Element | Derivation |\n|---------|------------|\n| Text | `--fg` at 100% |\n| Secondary text | `--fg` at 60% into `--bg` |\n| Edge labels | `--fg` at 40% into `--bg` |\n| Faint text | `--fg` at 25% into `--bg` |\n| Connectors | `--fg` at 50% into `--bg` |\n| Arrow heads | `--fg` at 85% into `--bg` |\n| Node fill | `--fg` at 3% into `--bg` |\n| Group header | `--fg` at 5% into `--bg` |\n| Inner strokes | `--fg` at 12% into `--bg` |\n| Node stroke | `--fg` at 20% into `--bg` |\n\n### Enriched Mode\n\nFor richer themes, you can provide optional \"enrichment\" colors that override specific derivations:\n\n```typescript\nconst svg = renderMermaidSVG(diagram, {\n bg: '#1a1b26',\n fg: '#a9b1d6',\n // Optional enrichment:\n line: '#3d59a1', // Edge/connector color\n accent: '#7aa2f7', // Arrow heads, highlights\n muted: '#565f89', // Secondary text, labels\n surface: '#292e42', // Node fill tint\n border: '#3d59a1', // Node stroke\n})\n```\n\nIf an enrichment color isn't provided, it falls back to the `color-mix()` derivation. This means you can provide just the colors you care about.\n\n### CSS Custom Properties = Live Switching\n\nAll colors are CSS custom properties on the `` element. This means you can switch themes instantly without re-rendering:\n\n```javascript\n// Switch theme by updating CSS variables\nsvg.style.setProperty('--bg', '#282a36')\nsvg.style.setProperty('--fg', '#f8f8f2')\n// The entire diagram updates immediately\n```\n\nFor React apps, pass CSS variable references instead of hex values:\n\n```typescript\nconst svg = renderMermaidSVG(diagram, {\n bg: 'var(--background)',\n fg: 'var(--foreground)',\n accent: 'var(--accent)',\n transparent: true,\n})\n// Theme switches apply automatically via CSS cascade — no re-render needed\n```\n\n### Built-in Themes\n\n15 carefully curated themes ship out of the box:\n\n| Theme | Type | Background | Accent |\n|-------|------|------------|--------|\n| `zinc-light` | Light | `#FFFFFF` | Derived |\n| `zinc-dark` | Dark | `#18181B` | Derived |\n| `tokyo-night` | Dark | `#1a1b26` | `#7aa2f7` |\n| `tokyo-night-storm` | Dark | `#24283b` | `#7aa2f7` |\n| `tokyo-night-light` | Light | `#d5d6db` | `#34548a` |\n| `catppuccin-mocha` | Dark | `#1e1e2e` | `#cba6f7` |\n| `catppuccin-latte` | Light | `#eff1f5` | `#8839ef` |\n| `nord` | Dark | `#2e3440` | `#88c0d0` |\n| `nord-light` | Light | `#eceff4` | `#5e81ac` |\n| `dracula` | Dark | `#282a36` | `#bd93f9` |\n| `github-light` | Light | `#ffffff` | `#0969da` |\n| `github-dark` | Dark | `#0d1117` | `#4493f8` |\n| `solarized-light` | Light | `#fdf6e3` | `#268bd2` |\n| `solarized-dark` | Dark | `#002b36` | `#268bd2` |\n| `one-dark` | Dark | `#282c34` | `#c678dd` |\n\n```typescript\nimport { renderMermaidSVG, THEMES } from 'beautiful-mermaid'\n\nconst svg = renderMermaidSVG(diagram, THEMES['tokyo-night'])\n```\n\n### Adding Your Own Theme\n\nCreating a theme is trivial. At minimum, just provide `bg` and `fg`:\n\n```typescript\nconst myTheme = {\n bg: '#0f0f0f',\n fg: '#e0e0e0',\n}\n\nconst svg = renderMermaidSVG(diagram, myTheme)\n```\n\nWant richer colors? Add any of the optional enrichments:\n\n```typescript\nconst myRichTheme = {\n bg: '#0f0f0f',\n fg: '#e0e0e0',\n accent: '#ff6b6b', // Pop of color for arrows\n muted: '#666666', // Subdued labels\n}\n```\n\n### Full Shiki Compatibility\n\nUse **any VS Code theme** directly via Shiki integration. This gives you access to hundreds of community themes:\n\n```typescript\nimport { getSingletonHighlighter } from 'shiki'\nimport { renderMermaidSVG, fromShikiTheme } from 'beautiful-mermaid'\n\n// Load any theme from Shiki's registry\nconst highlighter = await getSingletonHighlighter({\n themes: ['vitesse-dark', 'rose-pine', 'material-theme-darker']\n})\n\n// Extract diagram colors from the theme\nconst colors = fromShikiTheme(highlighter.getTheme('vitesse-dark'))\n\nconst svg = renderMermaidSVG(diagram, colors)\n```\n\nThe `fromShikiTheme()` function intelligently maps VS Code editor colors to diagram roles:\n\n| Editor Color | Diagram Role |\n|--------------|--------------|\n| `editor.background` | `bg` |\n| `editor.foreground` | `fg` |\n| `editorLineNumber.foreground` | `line` |\n| `focusBorder` / keyword token | `accent` |\n| comment token | `muted` |\n| `editor.selectionBackground` | `surface` |\n| `editorWidget.border` | `border` |\n\n---\n\n## Supported Diagrams\n\n### Flowcharts\n\n```\ngraph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Process]\n B -->|No| D[End]\n C --> D\n```\n\nAll directions supported: `TD` (top-down), `LR` (left-right), `BT` (bottom-top), `RL` (right-left).\n\n### State Diagrams\n\n```\nstateDiagram-v2\n [*] --> Idle\n Idle --> Processing: start\n Processing --> Complete: done\n Complete --> [*]\n```\n\n### Sequence Diagrams\n\n```\nsequenceDiagram\n Alice->>Bob: Hello Bob!\n Bob-->>Alice: Hi Alice!\n Alice->>Bob: How are you?\n Bob-->>Alice: Great, thanks!\n```\n\n### Class Diagrams\n\n```\nclassDiagram\n Animal <|-- Duck\n Animal <|-- Fish\n Animal: +int age\n Animal: +String gender\n Animal: +isMammal() bool\n Duck: +String beakColor\n Duck: +swim()\n Duck: +quack()\n```\n\n### ER Diagrams\n\n```\nerDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : \"is in\"\n```\n\n### Inline Edge Styling\n\nUse `linkStyle` to override edge colors and stroke widths — just like [Mermaid's linkStyle](https://mermaid.js.org/syntax/flowchart.html#styling-links):\n\n```\ngraph TD\n A --> B --> C\n linkStyle 0 stroke:#ff0000,stroke-width:2px\n linkStyle default stroke:#888888\n```\n\n| Syntax | Effect |\n| ------------------------------- | -------------------------------------- |\n| `linkStyle 0 stroke:#f00` | Style a single edge by index (0-based) |\n| `linkStyle 0,2 stroke:#f00` | Style multiple edges at once |\n| `linkStyle default stroke:#888` | Default style applied to all edges |\n\nIndex-specific styles override the default. Supported properties: `stroke`, `stroke-width`.\n\nWorks in both flowcharts and state diagrams.\n\n### XY Charts\n\nBar charts, line charts, and combinations — using Mermaid's `xychart-beta` syntax.\n\n**Bar chart:**\n\n```\nxychart-beta\n title \"Monthly Revenue\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n y-axis \"Revenue ($K)\" 0 --> 500\n bar [180, 250, 310, 280, 350, 420]\n```\n\n**Line chart:**\n\n```\nxychart-beta\n title \"User Growth\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n line [1200, 1800, 2500, 3100, 3800, 4500]\n```\n\n**Combined bar + line:**\n\n```\nxychart-beta\n title \"Sales with Trend\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n bar [300, 380, 280, 450, 350, 520]\n line [300, 330, 320, 353, 352, 395]\n```\n\n**Horizontal orientation:**\n\n```\nxychart-beta horizontal\n title \"Language Popularity\"\n x-axis [Python, JavaScript, Java, Go, Rust]\n bar [30, 25, 20, 12, 8]\n```\n\n**Axis configuration:**\n\n- Categorical x-axis: `x-axis [A, B, C]`\n- Numeric x-axis range: `x-axis 0 --> 100`\n- Axis titles: `x-axis \"Category\" [A, B, C]`\n- Y-axis range: `y-axis \"Score\" 0 --> 100`\n\n**Multi-series:** Add multiple `bar` and/or `line` declarations. Each series gets a distinct color from a monochromatic palette derived from the theme's accent color.\n\n### XY Chart Styling\n\nThe chart renderer follows a clean, minimal design philosophy inspired by Apple and Craft:\n\n- **Dot grid** — A subtle dot pattern fills the plot area instead of traditional solid grid lines\n- **Rounded bars** — All bar corners are rounded for a modern, polished look\n- **Smooth curves** — Line series use natural cubic spline interpolation, producing mathematically smooth curves through all data points (not straight segments or staircase steps)\n- **Floating labels** — No visible axis lines or tick marks; labels float freely for a clutter-free aesthetic\n- **Drop-shadow lines** — Each line series has a subtle shadow beneath it for depth\n- **Monochromatic palette** — Series 0 uses the theme's accent color; additional series get darker/lighter shades of the same hue with subtle hue drift, adapting automatically to light or dark backgrounds\n- **Interactive tooltips** — When rendered with `interactive: true`, hovering over bars or data points shows value tooltips. Multi-line tooltips appear when multiple series share an x-position\n- **Sparse line dots** — Lines with 12 or fewer data points show data point dots by default for readability\n- **Full theme support** — All 15 built-in themes (and custom themes) apply to charts. The accent color drives the entire series color palette\n- **Live theme switching** — Chart series colors are CSS custom properties (`--xychart-color-N`), so theme changes apply instantly without re-rendering\n\n---\n\n## ASCII Output\n\nFor terminal environments, CLI tools, or anywhere you need plain text, render to ASCII or Unicode box-drawing characters:\n\n```typescript\nimport { renderMermaidASCII } from 'beautiful-mermaid'\n\n// Unicode mode (default) — prettier box drawing\nconst unicode = renderMermaidASCII(`graph LR; A --> B`)\n\n// Pure ASCII mode — maximum compatibility\nconst ascii = renderMermaidASCII(`graph LR; A --> B`, { useAscii: true })\n```\n\n**Unicode output:**\n```\n┌───┐ ┌───┐\n│ │ │ │\n│ A │────►│ B │\n│ │ │ │\n└───┘ └───┘\n```\n\n**ASCII output:**\n```\n+---+ +---+\n| | | |\n| A |---->| B |\n| | | |\n+---+ +---+\n```\n\n### ASCII Options\n\n```typescript\nrenderMermaidASCII(diagram, {\n useAscii: false, // true = ASCII, false = Unicode (default)\n paddingX: 5, // Horizontal spacing between nodes\n paddingY: 5, // Vertical spacing between nodes\n boxBorderPadding: 1, // Padding inside node boxes\n colorMode: 'auto', // 'none' | 'auto' | 'ansi16' | 'ansi256' | 'truecolor' | 'html'\n theme: { ... }, // Partial — override default colors\n})\n```\n\n### ASCII XY Charts\n\nXY charts render to ASCII with dedicated chart-drawing characters:\n\n- **Bar charts** — `█` blocks (Unicode) or `#` (ASCII mode)\n- **Line charts** — Staircase routing with rounded corners: `╭╮╰╯│─` (Unicode) or `+|-` (ASCII)\n- **Multi-series** — Each series gets a distinct ANSI color from the theme's accent palette\n- **Legends** — Automatically shown when multiple series are present\n- **Horizontal charts** — Fully supported with categories on the y-axis\n\n---\n\n## API Reference\n\n### `renderMermaidSVG(text, options?): string`\n\nRender a Mermaid diagram to SVG. Synchronous. Auto-detects diagram type.\n\n**Parameters:**\n- `text` — Mermaid source code\n- `options` — Optional `RenderOptions` object\n\n**RenderOptions:**\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `bg` | `string` | `#FFFFFF` | Background color (or CSS variable) |\n| `fg` | `string` | `#27272A` | Foreground color (or CSS variable) |\n| `line` | `string?` | — | Edge/connector color |\n| `accent` | `string?` | — | Arrow heads, highlights |\n| `muted` | `string?` | — | Secondary text, labels |\n| `surface` | `string?` | — | Node fill tint |\n| `border` | `string?` | — | Node stroke color |\n| `font` | `string` | `Inter` | Font family |\n| `transparent` | `boolean` | `false` | Render with transparent background |\n| `padding` | `number` | `40` | Canvas padding in px |\n| `nodeSpacing` | `number` | `24` | Horizontal spacing between sibling nodes |\n| `layerSpacing` | `number` | `40` | Vertical spacing between layers |\n| `componentSpacing` | `number` | `24` | Spacing between disconnected components |\n| `thoroughness` | `number` | `3` | Crossing minimization trials (1-7, higher = better but slower) |\n| `interactive` | `boolean` | `false` | Enable hover tooltips on XY chart bars and data points |\n\n**XY Charts:** Diagrams starting with `xychart-beta` are auto-detected — no separate function needed. The `accent` color option drives the chart series color palette.\n\n### `renderMermaidSVGAsync(text, options?): Promise`\n\nAsync version of `renderMermaidSVG()`. Same output, returns a `Promise`. Useful in async server handlers or data loaders.\n\n### `renderMermaidASCII(text, options?): string`\n\nRender a Mermaid diagram to ASCII/Unicode text. Synchronous.\n\n**AsciiRenderOptions:**\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `useAscii` | `boolean` | `false` | Use ASCII instead of Unicode |\n| `paddingX` | `number` | `5` | Horizontal node spacing |\n| `paddingY` | `number` | `5` | Vertical node spacing |\n| `boxBorderPadding` | `number` | `1` | Inner box padding |\n| `colorMode` | `string` | `'auto'` | `'none'`, `'auto'`, `'ansi16'`, `'ansi256'`, `'truecolor'`, or `'html'` |\n| `theme` | `Partial` | — | Override default colors for ASCII output |\n\n### `parseMermaid(text): MermaidGraph`\n\nParse Mermaid source into a structured graph object (for custom processing).\n\n### `fromShikiTheme(theme): DiagramColors`\n\nExtract diagram colors from a Shiki theme object.\n\n### `THEMES: Record`\n\nObject containing all 15 built-in themes.\n\n### `DEFAULTS: { bg: string, fg: string }`\n\nDefault colors (`#FFFFFF` / `#27272A`).\n\n---\n\n## Attribution\n\nThe ASCII rendering engine is based on [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii) by Alexander Grooff. We ported it from Go to TypeScript and extended it with:\n\n- Sequence diagram support\n- Class diagram support\n- ER diagram support\n- Unicode box-drawing characters\n- Configurable spacing and padding\n\nThank you Alexander for the excellent foundation!\n\n---\n\n## License\n\nMIT — see [LICENSE](LICENSE) for details.\n\n---\n\n
\n\nBuilt with care by the team at [Craft](https://craft.do)\n\n
\n" }, { "path": "bench.ts", "content": "/**\n * Performance benchmark for beautiful-mermaid.\n *\n * Runs all sample definitions through both renderers (SVG + ASCII) in Bun\n * and prints a table with per-sample timing and aggregate stats.\n *\n * Usage: bun run packages/mermaid/bench.ts\n */\n\nimport { samples } from './samples-data.ts'\nimport { renderMermaid } from './src/index.ts'\nimport { renderMermaidAscii } from './src/ascii/index.ts'\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface Result {\n index: number\n title: string\n category: string\n svgMs: number\n asciiMs: number\n svgError: string | null\n asciiError: string | null\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/** Pad/truncate a string to exactly `width` characters, right-aligned if numeric. */\nfunction col(value: string, width: number, align: 'left' | 'right' = 'left'): string {\n const truncated = value.length > width ? value.slice(0, width - 1) + '\\u2026' : value\n return align === 'right' ? truncated.padStart(width) : truncated.padEnd(width)\n}\n\nfunction fmtMs(ms: number): string {\n return ms.toFixed(1)\n}\n\n// ============================================================================\n// Main\n// ============================================================================\n\nconst results: Result[] = []\nconst totalStart = performance.now()\n\nconsole.log(`\\nbeautiful-mermaid — Benchmark (${samples.length} samples)`)\nconsole.log('═'.repeat(90))\nconsole.log(\n `${col('#', 4, 'right')} ${col('Title', 38)} ${col('Category', 15)} ${col('SVG (ms)', 10, 'right')} ${col('ASCII (ms)', 10, 'right')} ${col('Total', 10, 'right')}`,\n)\nconsole.log('─'.repeat(90))\n\nfor (let i = 0; i < samples.length; i++) {\n const sample = samples[i]!\n const category = sample.category ?? 'Other'\n let svgMs = 0\n let asciiMs = 0\n let svgError: string | null = null\n let asciiError: string | null = null\n\n // Render SVG (async — uses dagre layout for flowcharts/state/class/ER)\n try {\n const t0 = performance.now()\n await renderMermaid(sample.source, sample.options)\n svgMs = performance.now() - t0\n } catch (err) {\n svgError = String(err)\n svgMs = -1\n }\n\n // Render ASCII (sync — custom text layout, no dagre)\n try {\n const t0 = performance.now()\n renderMermaidAscii(sample.source)\n asciiMs = performance.now() - t0\n } catch (err) {\n asciiError = String(err)\n asciiMs = -1\n }\n\n const totalMs = (svgMs >= 0 ? svgMs : 0) + (asciiMs >= 0 ? asciiMs : 0)\n\n results.push({ index: i, title: sample.title, category, svgMs, asciiMs, svgError, asciiError })\n\n // Print row\n const svgStr = svgMs >= 0 ? fmtMs(svgMs) : 'ERR'\n const asciiStr = asciiMs >= 0 ? fmtMs(asciiMs) : 'N/A'\n console.log(\n `${col(String(i + 1), 4, 'right')} ${col(sample.title, 38)} ${col(category, 15)} ${col(svgStr, 10, 'right')} ${col(asciiStr, 10, 'right')} ${col(fmtMs(totalMs), 10, 'right')}`,\n )\n}\n\nconst totalElapsed = performance.now() - totalStart\n\n// ============================================================================\n// Aggregates\n// ============================================================================\n\nconsole.log('═'.repeat(90))\n\nconst svgTimes = results.filter(r => r.svgMs >= 0).map(r => r.svgMs)\nconst asciiTimes = results.filter(r => r.asciiMs >= 0).map(r => r.asciiMs)\nconst svgTotal = svgTimes.reduce((a, b) => a + b, 0)\nconst asciiTotal = asciiTimes.reduce((a, b) => a + b, 0)\n\nconsole.log(`Total: ${fmtMs(totalElapsed)}ms (SVG: ${fmtMs(svgTotal)}ms, ASCII: ${fmtMs(asciiTotal)}ms)`)\nconsole.log(`Average: ${fmtMs((svgTotal + asciiTotal) / results.length)}ms per sample`)\n\n// Find slowest SVG and ASCII\nif (svgTimes.length > 0) {\n const slowestSvg = results.filter(r => r.svgMs >= 0).sort((a, b) => b.svgMs - a.svgMs)[0]!\n console.log(`Slowest SVG: #${slowestSvg.index + 1} ${slowestSvg.title} (${fmtMs(slowestSvg.svgMs)}ms)`)\n}\nif (asciiTimes.length > 0) {\n const slowestAscii = results.filter(r => r.asciiMs >= 0).sort((a, b) => b.asciiMs - a.asciiMs)[0]!\n console.log(`Slowest ASCII: #${slowestAscii.index + 1} ${slowestAscii.title} (${fmtMs(slowestAscii.asciiMs)}ms)`)\n}\n\n// Report errors\nconst svgErrors = results.filter(r => r.svgError)\nconst asciiErrors = results.filter(r => r.asciiError)\nif (svgErrors.length > 0) {\n console.log(`\\nSVG errors (${svgErrors.length}):`)\n for (const r of svgErrors) {\n console.log(` #${r.index + 1} ${r.title}: ${r.svgError}`)\n }\n}\nif (asciiErrors.length > 0) {\n console.log(`\\nASCII unsupported (${asciiErrors.length}):`)\n for (const r of asciiErrors) {\n console.log(` #${r.index + 1} ${r.title}`)\n }\n}\n\n// Category breakdown\nconsole.log('\\n── By Category ──')\nconst catMap = new Map()\nfor (const r of results) {\n if (!catMap.has(r.category)) catMap.set(r.category, [])\n catMap.get(r.category)!.push(r)\n}\nfor (const [cat, catResults] of catMap) {\n const catSvg = catResults.filter(r => r.svgMs >= 0).reduce((a, r) => a + r.svgMs, 0)\n const catAscii = catResults.filter(r => r.asciiMs >= 0).reduce((a, r) => a + r.asciiMs, 0)\n console.log(` ${col(cat, 16)} ${col(String(catResults.length), 3, 'right')} samples SVG: ${col(fmtMs(catSvg), 8, 'right')}ms ASCII: ${col(fmtMs(catAscii), 8, 'right')}ms Total: ${col(fmtMs(catSvg + catAscii), 8, 'right')}ms`)\n}\n\nconsole.log()\n" }, { "path": "dev.ts", "content": "/**\n * Development server with live reload for mermaid samples.\n *\n * Usage: bun run packages/mermaid/dev.ts\n *\n * - Runs `index.ts` to generate index.html on startup\n * - Watches `src/` and `index.ts` for file changes\n * - On change, rebuilds index.html and notifies browsers via SSE\n * - Serves index.html with an injected live-reload script\n *\n * This avoids manually re-running the build and refreshing the browser —\n * just save a file and the page updates automatically.\n */\n\nimport { watch } from 'fs'\nimport { join } from 'path'\n\nconst PORT = 3456\nconst ROOT = import.meta.dir\n\n// ============================================================================\n// Build management\n// ============================================================================\n\nlet building = false\nconst sseClients = new Set()\n\nasync function rebuild(): Promise {\n if (building) return\n building = true\n console.log('\\x1b[36m[dev]\\x1b[0m Rebuilding samples...')\n const t0 = performance.now()\n\n const proc = Bun.spawn(['bun', 'run', join(ROOT, 'index.ts')], {\n cwd: ROOT,\n stdout: 'inherit',\n stderr: 'inherit',\n })\n await proc.exited\n\n const ms = (performance.now() - t0).toFixed(0)\n if (proc.exitCode === 0) {\n console.log(`\\x1b[32m[dev]\\x1b[0m Rebuilt in ${ms}ms`)\n // Notify all connected browsers to reload\n for (const client of sseClients) {\n try {\n client.enqueue('data: reload\\n\\n')\n } catch {\n sseClients.delete(client)\n }\n }\n } else {\n console.error(`\\x1b[31m[dev]\\x1b[0m Build failed (exit ${proc.exitCode})`)\n }\n building = false\n}\n\n// ============================================================================\n// File watching — debounced to coalesce rapid saves\n// ============================================================================\n\nlet debounce: Timer | null = null\nfunction onFileChange(_event: string, filename: string | null): void {\n // Ignore index.html itself (it's the output, not a source)\n if (filename === 'index.html') return\n if (debounce) clearTimeout(debounce)\n debounce = setTimeout(() => {\n console.log(`\\x1b[90m[dev]\\x1b[0m Change detected${filename ? `: ${filename}` : ''}`)\n rebuild()\n }, 150)\n}\n\n// Watch the entire mermaid package for changes (excludes index.html output)\nwatch(ROOT, { recursive: true }, onFileChange)\n\n// ============================================================================\n// HTTP server\n// ============================================================================\n\n// Initial build before starting the server\nawait rebuild()\n\nconsole.log(`\\x1b[36m[dev]\\x1b[0m Server running at \\x1b[1mhttp://localhost:${PORT}\\x1b[0m`)\nconsole.log(`\\x1b[36m[dev]\\x1b[0m Watching for changes in src/ and index.ts\\n`)\n\nBun.serve({\n port: PORT,\n async fetch(req) {\n const url = new URL(req.url)\n\n // SSE endpoint — browsers connect here to receive reload signals\n if (url.pathname === '/__dev_events') {\n let controller!: ReadableStreamDefaultController\n const stream = new ReadableStream({\n start(c) {\n controller = c\n sseClients.add(controller)\n },\n cancel() {\n sseClients.delete(controller)\n },\n })\n return new Response(stream, {\n headers: {\n 'Content-Type': 'text/event-stream',\n 'Cache-Control': 'no-cache',\n Connection: 'keep-alive',\n },\n })\n }\n\n // Serve index.html with injected live-reload script\n const file = Bun.file(join(ROOT, 'index.html'))\n if (!(await file.exists())) {\n return new Response('index.html not found — build may have failed', { status: 404 })\n }\n\n let html = await file.text()\n\n // Inject live-reload client before \n html = html.replace(\n '',\n ` \n`,\n )\n\n return new Response(html, {\n headers: { 'Content-Type': 'text/html' },\n })\n },\n})\n" }, { "path": "index.ts", "content": "/**\n * Generates index.html showcasing all beautiful-mermaid rendering capabilities.\n *\n * Usage: bun run index.ts\n *\n * This file doubles as a **visual test suite** — every supported feature,\n * shape, edge type, block construct, and theme variant is exercised by at\n * least one sample. If a rendering change causes regressions, it will be\n * visible in the generated HTML.\n *\n * The generated HTML is **dynamic** — it includes a bundled copy of the\n * mermaid renderer and renders all diagrams client-side in real time,\n * showing progressive loading and per-diagram render timing.\n *\n * Sample definitions live in samples-data.ts (shared with bench.ts).\n */\n\nimport { samples } from './samples-data.ts'\nimport { THEMES } from './src/theme.ts'\nimport { createHighlighter } from 'shiki'\n\n// ============================================================================\n// HTML generation — dynamic version\n//\n// Instead of pre-rendering SVGs at build time, we:\n// 1. Bundle the mermaid renderer for the browser via Bun.build()\n// 2. Embed sample definitions as inline JSON\n// 3. Emit client-side JS that renders each diagram on page load\n// ============================================================================\n\nfunction escapeHtml(text: string): string {\n return text\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n}\n\n/** Convert markdown-style backtick spans to tags in description text. */\nfunction formatDescription(text: string): string {\n return text.replace(/`([^`]+)`/g, '$1')\n}\n\n/** Human-readable labels for theme keys */\nconst THEME_LABELS: Record = {\n 'zinc-dark': 'Zinc Dark',\n 'tokyo-night': 'Tokyo Night',\n 'tokyo-night-storm': 'Tokyo Storm',\n 'tokyo-night-light': 'Tokyo Light',\n 'catppuccin-mocha': 'Catppuccin',\n 'catppuccin-latte': 'Latte',\n 'nord': 'Nord',\n 'nord-light': 'Nord Light',\n 'dracula': 'Dracula',\n 'github-light': 'GitHub',\n 'github-dark': 'GitHub Dark',\n 'solarized-light': 'Solarized',\n 'solarized-dark': 'Solar Dark',\n 'one-dark': 'One Dark',\n}\n\nasync function generateHtml(): Promise {\n // Step 0: Create Shiki highlighter for mermaid syntax highlighting in source panels.\n // We use 'github-light' as the base theme — its hex colors get overridden by CSS\n // color-mix() rules derived from --t-fg / --t-bg so tokens adapt to any theme.\n const highlighter = await createHighlighter({\n langs: ['mermaid'],\n themes: ['github-light'],\n })\n\n // Step 1: Bundle the mermaid renderer for the browser\n const buildResult = await Bun.build({\n entrypoints: [new URL('./src/browser.ts', import.meta.url).pathname],\n target: 'browser',\n format: 'esm',\n minify: true,\n })\n if (!buildResult.success) {\n console.error('Bundle build failed:', buildResult.logs)\n process.exit(1)\n }\n const bundleJs = await buildResult.outputs[0]!.text()\n console.log(`Browser bundle: ${(bundleJs.length / 1024).toFixed(1)} KB`)\n\n // Step 2: Build sample JSON (only serializable fields needed by client)\n const samplesJson = JSON.stringify(samples.map(s => ({\n title: s.title,\n description: s.description,\n source: s.source,\n category: s.category ?? 'Other',\n options: s.options ?? {},\n })))\n\n // Step 3: Group samples by category for TOC (done at build time since it's static)\n const categories = new Map()\n samples.forEach((sample, i) => {\n const cat = sample.category ?? 'Other'\n if (!categories.has(cat)) categories.set(cat, [])\n categories.get(cat)!.push(i)\n })\n\n const categoryBadgeColors: Record = {\n Flowchart: '#3b82f6',\n State: '#8b5cf6',\n Sequence: '#10b981',\n Class: '#f59e0b',\n ER: '#ef4444',\n 'XY Chart': '#f97316',\n 'Theme Showcase': '#06b6d4',\n }\n\n // Map category names to the title prefixes they use, so we can strip duplicates in the ToC\n const categoryPrefixes: Record = {\n 'State': 'State: ',\n 'Sequence': 'Sequence: ',\n 'Class': 'Class: ',\n 'ER': 'ER: ',\n 'XY Chart': 'XY: ',\n 'Theme Showcase': 'Theme: ',\n }\n\n // Build mapping from original index to display number (excluding Hero samples)\n const heroCount = samples.filter(s => s.category === 'Hero').length\n const displayNum = (i: number) => i + 1 - heroCount\n\n const tocSections = [...categories.entries()]\n .filter(([cat]) => cat !== 'Hero') // Skip Hero from TOC\n .map(([cat, indices]) => {\n const badgeColor = categoryBadgeColors[cat] ?? '#71717a'\n const prefix = categoryPrefixes[cat]\n const items = indices.map(i => {\n let title = samples[i]!.title\n // Strip the category prefix from the title since it's already under the category heading\n if (prefix && title.startsWith(prefix)) title = title.slice(prefix.length)\n return `
  • ${displayNum(i)}. ${escapeHtml(title)}
    • `\n }).join('\\n ')\n return `\n
    \n

    ${escapeHtml(cat)} (${indices.length} samples)

    \n
      \n ${items}\n
    \n
    `\n }).join('\\n')\n\n // Step 3b: Build theme selector pills (build-time so we include swatches)\n // Only show Default, Dracula, and Solarized inline; rest go in \"More\" dropdown\n const VISIBLE_THEMES = new Set(['dracula', 'solarized-light'])\n\n function buildThemePill(key: string, colors: { bg: string; fg: string }, active = false): string {\n const isDark = parseInt(colors.bg.replace('#', '').slice(0, 2), 16) < 0x80\n const shadow = isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'\n const label = key === '' ? 'Default' : (THEME_LABELS[key] ?? key)\n const activeClass = active ? ' active' : ''\n return ``\n }\n\n const themeEntries = Object.entries(THEMES)\n // Visible inline pills: Default + Dracula + Solarized\n const visiblePills = [\n '',\n ...themeEntries\n .filter(([key]) => VISIBLE_THEMES.has(key))\n .map(([key, colors]) => buildThemePill(key, colors)),\n ]\n // All themes go in the dropdown (including Default, Dracula, Solarized)\n const allDropdownPills = [\n buildThemePill('', { bg: '#FFFFFF', fg: '#27272A' }, true),\n ...themeEntries.map(([key, colors]) => buildThemePill(key, colors)),\n ]\n const totalThemes = allDropdownPills.length\n\n const themePillsHtml = `\n
    \n ${visiblePills.join('\\n ')}\n
    \n
    \n \n
    \n ${allDropdownPills.join('\\n ')}\n
    \n
    `\n\n // Step 4: Pre-highlight all sample sources with Shiki (build-time only, zero runtime cost).\n // The mermaid TextMate grammar requires a fenced code block prefix to tokenize properly\n // (see https://github.com/shikijs/shiki/issues/973), so we wrap each source with\n // ```mermaid ... ``` and then strip those fence lines from the output HTML.\n // Source panels always use github-dark — Shiki's inline colors are used directly.\n const highlightedSources = samples.map(sample => {\n const fenced = '```mermaid\\n' + sample.source.trim() + '\\n```'\n const html = highlighter.codeToHtml(fenced, {\n lang: 'mermaid',\n theme: 'github-light',\n })\n // Strip the first line (```mermaid) and last line (```) from the output\n return html.replace(\n /().*?<\\/span>\\n/, // first line\n '$1'\n ).replace(\n /\\n.*?<\\/span>(<\\/code>)/, // last line\n '$1'\n )\n })\n\n // Step 5: Build sample card HTML shells (SVG + ASCII are empty, filled client-side)\n // data-sample-bg stores the per-sample background for \"Default\" mode restoration.\n // Hero samples get special full-width SVG-only treatment and are placed before \"Samples\" heading.\n const heroCards: string[] = []\n const regularCards: string[] = []\n\n samples.forEach((sample, i) => {\n const bg = sample.options?.bg ?? ''\n const isHero = sample.category === 'Hero'\n\n if (isHero) {\n // Hero sample: full-width SVG only, no header/source/ASCII panels\n heroCards.push(`\n
    \n
    \n
    \n
    \n
    \n
    \n
    `)\n } else {\n regularCards.push(`\n
    \n
    \n

    ${escapeHtml(sample.title)}

    \n

    ${formatDescription(sample.description)}

    \n
    \n
    \n
    \n ${highlightedSources[i]}\n ${sample.options ? `
    Options: ${escapeHtml(JSON.stringify(sample.options))}
    ` : ''}\n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n 
    Rendering\\u2026
    \n
    \n
    \n
    `)\n }\n })\n\n const heroCardsHtml = heroCards.join('\\n')\n const regularCardsHtml = regularCards.join('\\n')\n\n // ============================================================================\n // Step 5: Assemble full HTML\n // ============================================================================\n\n return `\n\n\n \n \n \n Beautiful Mermaid — Mermaid Rendering, Made Beautiful\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n
    \n\n \n
    \n
    \n \n \n
    \n \n
    \n ${themePillsHtml}\n
    \n
    \n
    \n ${tocSections}\n
    \n
    \n
    \n\n \n
    \n

    Beautiful Mermaid

    \n

    Mermaid Rendering, made beautiful.

    \n

    \n An open source library for rendering diagrams, designed for the age of AI: beautiful-mermaid.\n Ultra-fast, fully themeable, and outputs to both SVG and ASCII.
    \n Built by the team at Craft — because diagrams deserve great design too.\n

    \n
    \n \n \n Use in Craft Agents\n \n \n \n GitHub\n \n \n
    \n
    \n

    Rendering ${samples.length * 2} samples\\u2026

    \n
    ASCII rendering based on Mermaid-ASCII
    \n
    Early preview — actively evolving
    \n
    \n
    \n\n
    \n\n${heroCardsHtml}\n\n

    Samples

    \n\n${regularCardsHtml}\n\n \n \n\n \n
    \n
    \n
    \n Edit Diagram\n \n
    \n \n
    \n \n \n
    \n
    \n
    \n\n
    \n\n \n\n`\n}\n\n// ============================================================================\n// Main\n// ============================================================================\n\nconst html = await generateHtml()\nconst outPath = new URL('./index.html', import.meta.url).pathname\nawait Bun.write(outPath, html)\nconsole.log(`Written to ${outPath} (${(html.length / 1024).toFixed(1)} KB)`)\n" }, { "path": "package.json", "content": "{\n \"name\": \"beautiful-mermaid\",\n \"version\": \"1.1.3\",\n \"license\": \"MIT\",\n \"description\": \"Render Mermaid diagrams as beautiful SVGs or ASCII art. Ultra-fast, fully themeable, zero DOM dependencies.\",\n \"type\": \"module\",\n \"main\": \"dist/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"bun\": \"./src/index.ts\",\n \"import\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\"\n }\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/lukilabs/beautiful-mermaid\"\n },\n \"homepage\": \"https://github.com/lukilabs/beautiful-mermaid\",\n \"bugs\": {\n \"url\": \"https://github.com/lukilabs/beautiful-mermaid/issues\"\n },\n \"keywords\": [\n \"mermaid\",\n \"diagram\",\n \"svg\",\n \"ascii\",\n \"flowchart\",\n \"sequence-diagram\",\n \"class-diagram\",\n \"er-diagram\",\n \"xychart\",\n \"state-diagram\",\n \"visualization\",\n \"theming\"\n ],\n \"author\": \"Craft Docs\",\n \"files\": [\"src/\", \"dist/\", \"LICENSE\", \"README.md\"],\n \"scripts\": {\n \"test\": \"bun test src/__tests__/\",\n \"samples\": \"bun run index.ts\",\n \"dev\": \"bun run dev.ts\",\n \"bench\": \"bun run bench.ts\",\n \"build\": \"tsup\",\n \"build:samples\": \"bun run index.ts && mkdir -p site && mv index.html site/ && cp -r public/* site/\",\n \"deploy\": \"bun run build:samples && wrangler pages deploy site --project-name craft-agents-mermaid\",\n \"xychart-test\": \"bun run xychart-test.ts\",\n \"prepublishOnly\": \"npm run build\"\n },\n \"dependencies\": {\n \"elkjs\": \"^0.11.0\",\n \"entities\": \"^7.0.1\"\n },\n \"devDependencies\": {\n \"@types/bun\": \"^1.3.9\",\n \"shiki\": \"^3.19.0\",\n \"tsup\": \"^8.5.1\",\n \"typescript\": \"^5.9.3\"\n }\n}\n" }, { "path": "samples-data.ts", "content": "/**\n * Sample definitions for the beautiful-mermaid visual test suite.\n *\n * Shared by:\n * - index.ts — generates the HTML visual test page\n * - bench.ts — runs performance benchmarks in Bun (no browser)\n * - dev.ts — dev server with live reload\n *\n * Every supported feature, shape, edge type, block construct, and theme\n * variant is exercised by at least one sample.\n */\n\nexport interface Sample {\n title: string\n description: string\n source: string\n /** Optional category tag for grouping in the Table of Contents */\n category?: string\n options?: { bg?: string; fg?: string; line?: string; accent?: string; muted?: string; surface?: string; border?: string; font?: string; padding?: number; transparent?: boolean; interactive?: boolean }\n}\n\nexport const samples: Sample[] = [\n\n // ══════════════════════════════════════════════════════════════════════════\n // HERO — Showcase diagram\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Beautiful Mermaid',\n category: 'Hero',\n description: 'Mermaid rendering, made beautiful.',\n source: `stateDiagram-v2\n direction LR\n [*] --> Input\n Input --> Parse: DSL\n Parse --> Layout: AST\n Layout --> SVG: Vector\n Layout --> ASCII: Text\n SVG --> Theme\n ASCII --> Theme\n Theme --> Output\n Output --> [*]`,\n options: { transparent: true },\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Shapes\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Simple Flow',\n category: 'Flowchart',\n description: 'Basic linear flow with three nodes connected by solid arrows.',\n source: `graph TD\n A[Start] --> B[Process] --> C[End]`,\n },\n {\n title: 'Original Node Shapes',\n category: 'Flowchart',\n description: 'Rectangle, rounded, diamond, stadium, and circle.',\n source: `graph LR\n A[Rectangle] --> B(Rounded)\n B --> C{Diamond}\n C --> D([Stadium])\n D --> E((Circle))`,\n },\n {\n title: 'Batch 1 Shapes',\n category: 'Flowchart',\n description: 'Subroutine `[[text]]`, double circle `(((text)))`, and hexagon `{{text}}`.',\n source: `graph LR\n A[[Subroutine]] --> B(((Double Circle)))\n B --> C{{Hexagon}}`,\n },\n {\n title: 'Batch 2 Shapes',\n category: 'Flowchart',\n description: 'Cylinder `[(text)]`, asymmetric `>text]`, trapezoid `[/text\\\\]`, and inverse trapezoid `[\\\\text/]`.',\n source: `graph LR\n A[(Database)] --> B>Flag Shape]\n B --> C[/Wider Bottom\\\\]\n C --> D[\\\\Wider Top/]`,\n },\n {\n title: 'All 12 Flowchart Shapes',\n category: 'Flowchart',\n description: 'Every supported flowchart shape in a single diagram.',\n source: `graph LR\n A[Rectangle] --> B(Rounded)\n B --> C{Diamond}\n C --> D([Stadium])\n D --> E((Circle))\n E --> F[[Subroutine]]\n F --> G(((Double Circle)))\n G --> H{{Hexagon}}\n H --> I[(Database)]\n I --> J>Flag]\n J --> K[/Trapezoid\\\\]\n K --> L[\\\\Inverse Trap/]`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Edges\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'All Edge Styles',\n category: 'Flowchart',\n description: 'Solid, dotted, and thick arrows with labels.',\n source: `graph TD\n A[Source] -->|solid| B[Target 1]\n A -.->|dotted| C[Target 2]\n A ==>|thick| D[Target 3]`,\n },\n {\n title: 'No-Arrow Edges',\n category: 'Flowchart',\n description: 'Lines without arrowheads: solid `---`, dotted `-.-`, thick `===`.',\n source: `graph TD\n A[Node 1] ---|related| B[Node 2]\n B -.- C[Node 3]\n C === D[Node 4]`,\n },\n {\n title: 'Text-Embedded Labels',\n category: 'Flowchart',\n description: 'Using `-- label -->` syntax instead of `-->|label|` for edge labels.',\n source: `flowchart TD\n A(Start) --> B{Is it sunny?}\n B -- Yes --> C[Go to the park]\n B -- No --> D[Stay indoors]\n C --> E[Finish]\n D --> E`,\n },\n {\n title: 'Bidirectional Arrows',\n category: 'Flowchart',\n description: 'Arrows in both directions: `<-->`, `<-.->`, `<==>`.',\n source: `graph LR\n A[Client] <-->|sync| B[Server]\n B <-.->|heartbeat| C[Monitor]\n C <==>|data| D[Storage]`,\n },\n {\n title: 'Parallel Links (&)',\n category: 'Flowchart',\n description: 'Using `&` to create multiple edges from/to groups of nodes.',\n source: `graph TD\n A[Input] & B[Config] --> C[Processor]\n C --> D[Output] & E[Log]`,\n },\n {\n title: 'Chained Edges',\n category: 'Flowchart',\n description: 'A long chain of nodes demonstrating edge chaining syntax.',\n source: `graph LR\n A[Step 1] --> B[Step 2] --> C[Step 3] --> D[Step 4] --> E[Step 5]`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Edge Styling (linkStyle)\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'linkStyle: Color-Coded Edges',\n category: 'Flowchart',\n description: 'Using `linkStyle` to color specific edges by index (0-based).',\n source: `graph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Accept]\n B -->|No| D[Reject]\n C --> E[Done]\n D --> E\n linkStyle 0 stroke:#7aa2f7,stroke-width:3px\n linkStyle 1 stroke:#9ece6a,stroke-width:2px\n linkStyle 2 stroke:#f7768e,stroke-width:2px\n linkStyle default stroke:#565f89`,\n },\n {\n title: 'linkStyle: Default + Override',\n category: 'Flowchart',\n description: 'Default edge style with index-specific overrides for critical paths.',\n source: `graph LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]\n B --> E[Reject]\n linkStyle default stroke:#6b7280,stroke-width:1px\n linkStyle 0,1,2 stroke:#22c55e,stroke-width:2px\n linkStyle 3 stroke:#ef4444,stroke-width:3px`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Directions\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Direction: Left-Right (LR)',\n category: 'Flowchart',\n description: 'Horizontal layout flowing left to right.',\n source: `graph LR\n A[Input] --> B[Transform] --> C[Output]`,\n },\n {\n title: 'Direction: Bottom-Top (BT)',\n category: 'Flowchart',\n description: 'Vertical layout flowing from bottom to top.',\n source: `graph BT\n A[Foundation] --> B[Layer 2] --> C[Top]`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Subgraphs\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Subgraphs',\n category: 'Flowchart',\n description: 'Grouped nodes inside labeled subgraph containers.',\n source: `graph TD\n subgraph Frontend\n A[React App] --> B[State Manager]\n end\n subgraph Backend\n C[API Server] --> D[Database]\n end\n B --> C`,\n },\n {\n title: 'Nested Subgraphs',\n category: 'Flowchart',\n description: 'Subgraphs inside subgraphs for hierarchical grouping.',\n source: `graph TD\n subgraph Cloud\n subgraph us-east [US East Region]\n A[Web Server] --> B[App Server]\n end\n subgraph us-west [US West Region]\n C[Web Server] --> D[App Server]\n end\n end\n E[Load Balancer] --> A\n E --> C`,\n },\n {\n title: 'Subgraph Direction Override',\n category: 'Flowchart',\n description: 'Using `direction LR` inside a subgraph while the outer graph flows TD.',\n source: `graph TD\n subgraph pipeline [Processing Pipeline]\n direction LR\n A[Input] --> B[Parse] --> C[Transform] --> D[Output]\n end\n E[Source] --> A\n D --> F[Sink]`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Styling\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: '::: Class Shorthand',\n category: 'Flowchart',\n description: 'Assigning classes with `:::` syntax directly on node definitions.',\n source: `graph TD\n A[Normal]:::default --> B[Highlighted]:::highlight --> C[Error]:::error\n classDef default fill:#f4f4f5,stroke:#a1a1aa\n classDef highlight fill:#fbbf24,stroke:#d97706\n classDef error fill:#ef4444,stroke:#dc2626`,\n },\n {\n title: 'Inline Style Overrides',\n category: 'Flowchart',\n description: 'Using `style` statements to override node fill and stroke colors.',\n source: `graph TD\n A[Default] --> B[Custom Colors] --> C[Another Custom]\n style B fill:#3b82f6,stroke:#1d4ed8,color:#ffffff\n style C fill:#10b981,stroke:#059669`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // FLOWCHART — Real-World Diagrams\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'CI/CD Pipeline',\n category: 'Flowchart',\n description: 'A realistic CI/CD pipeline with decision points, feedback loops, and deployment stages.',\n source: `graph TD\n subgraph ci [CI Pipeline]\n A[Push Code] --> B{Tests Pass?}\n B -->|Yes| C[Build Image]\n B -->|No| D[Fix & Retry]\n D -.-> A\n end\n C --> E([Deploy Staging])\n E --> F{QA Approved?}\n F -->|Yes| G((Production))\n F -->|No| D`,\n },\n {\n title: 'System Architecture',\n category: 'Flowchart',\n description: 'A microservices architecture with multiple services and data stores.',\n source: `graph LR\n subgraph clients [Client Layer]\n A([Web App]) --> B[API Gateway]\n C([Mobile App]) --> B\n end\n subgraph services [Service Layer]\n B --> D[Auth Service]\n B --> E[User Service]\n B --> F[Order Service]\n end\n subgraph data [Data Layer]\n D --> G[(Auth DB)]\n E --> H[(User DB)]\n F --> I[(Order DB)]\n F --> J([Message Queue])\n end`,\n },\n {\n title: 'Decision Tree',\n category: 'Flowchart',\n description: 'A branching decision flowchart with multiple outcomes.',\n source: `graph TD\n A{Is it raining?} -->|Yes| B{Have umbrella?}\n A -->|No| C([Go outside])\n B -->|Yes| D([Go with umbrella])\n B -->|No| E{Is it heavy?}\n E -->|Yes| F([Stay inside])\n E -->|No| G([Run for it])`,\n },\n {\n title: 'Git Branching Workflow',\n category: 'Flowchart',\n description: 'A git flow showing feature branches, PRs, and release cycle.',\n source: `graph LR\n A[main] --> B[develop]\n B --> C[feature/auth]\n B --> D[feature/ui]\n C --> E{PR Review}\n D --> E\n E -->|approved| B\n B --> F[release/1.0]\n F --> G{Tests?}\n G -->|pass| A\n G -->|fail| F`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // STATE DIAGRAMS\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Basic State Diagram',\n category: 'State',\n description: 'A simple `stateDiagram-v2` with start/end pseudostates and transitions.',\n source: `stateDiagram-v2\n [*] --> Idle\n Idle --> Active : start\n Active --> Idle : cancel\n Active --> Done : complete\n Done --> [*]`,\n },\n {\n title: 'State: Composite States',\n category: 'State',\n description: 'Nested composite states with inner transitions.',\n source: `stateDiagram-v2\n [*] --> Idle\n Idle --> Processing : submit\n state Processing {\n parse --> validate\n validate --> execute\n }\n Processing --> Complete : done\n Processing --> Error : fail\n Error --> Idle : retry\n Complete --> [*]`,\n },\n {\n title: 'State: Connection Lifecycle',\n category: 'State',\n description: 'TCP-like connection state machine with multiple states.',\n source: `stateDiagram-v2\n [*] --> Closed\n Closed --> Connecting : connect\n Connecting --> Connected : success\n Connecting --> Closed : timeout\n Connected --> Disconnecting : close\n Connected --> Reconnecting : error\n Reconnecting --> Connected : success\n Reconnecting --> Closed : max_retries\n Disconnecting --> Closed : done\n Closed --> [*]`,\n },\n\n {\n title: 'State: CJK State Names',\n category: 'State',\n description: 'State diagram using Chinese characters for state names.',\n source: `stateDiagram-v2\n [*] --> 空闲\n 空闲 --> 处理中 : 提交\n 处理中 --> 完成 : 成功\n 处理中 --> 错误 : 失败\n 错误 --> 空闲 : 重试\n 完成 --> [*]`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // SEQUENCE DIAGRAMS — Core Features\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Sequence: Basic Messages',\n category: 'Sequence',\n description: 'Simple request/response between two participants.',\n source: `sequenceDiagram\n Alice->>Bob: Hello Bob!\n Bob-->>Alice: Hi Alice!`,\n },\n {\n title: 'Sequence: Participant Aliases',\n category: 'Sequence',\n description: 'Using `participant ... as ...` for compact diagram IDs with readable labels.',\n source: `sequenceDiagram\n participant A as Alice\n participant B as Bob\n participant C as Charlie\n A->>B: Hello\n B->>C: Forward\n C-->>A: Reply`,\n },\n {\n title: 'Sequence: Actor Stick Figures',\n category: 'Sequence',\n description: 'Using `actor` instead of `participant` renders stick figures instead of boxes.',\n source: `sequenceDiagram\n actor U as User\n participant S as System\n participant DB as Database\n U->>S: Click button\n S->>DB: Query\n DB-->>S: Results\n S-->>U: Display`,\n },\n {\n title: 'Sequence: Arrow Types',\n category: 'Sequence',\n description: 'All arrow types: solid `->>` and dashed `-->>` with filled arrowheads, open arrows `-)` .',\n source: `sequenceDiagram\n A->>B: Solid arrow (sync)\n B-->>A: Dashed arrow (return)\n A-)B: Open arrow (async)\n B--)A: Open dashed arrow`,\n },\n {\n title: 'Sequence: Activation Boxes',\n category: 'Sequence',\n description: 'Using `+` and `-` to show when participants are active.',\n source: `sequenceDiagram\n participant C as Client\n participant S as Server\n C->>+S: Request\n S->>+S: Process\n S->>-S: Done\n S-->>-C: Response`,\n },\n {\n title: 'Sequence: Self-Messages',\n category: 'Sequence',\n description: 'A participant sending a message to itself (displayed as a loop arrow).',\n source: `sequenceDiagram\n participant S as Server\n S->>S: Internal process\n S->>S: Validate\n S-->>S: Log`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // SEQUENCE DIAGRAMS — Blocks\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Sequence: Loop Block',\n category: 'Sequence',\n description: 'A `loop` construct wrapping repeated message exchanges.',\n source: `sequenceDiagram\n participant C as Client\n participant S as Server\n C->>S: Connect\n loop Every 30s\n C->>S: Heartbeat\n S-->>C: Ack\n end\n C->>S: Disconnect`,\n },\n {\n title: 'Sequence: Alt/Else Block',\n category: 'Sequence',\n description: 'Conditional branching with `alt` (if) and `else` blocks.',\n source: `sequenceDiagram\n participant C as Client\n participant S as Server\n C->>S: Login\n alt Valid credentials\n S-->>C: 200 OK\n else Invalid\n S-->>C: 401 Unauthorized\n else Account locked\n S-->>C: 403 Forbidden\n end`,\n },\n {\n title: 'Sequence: Opt Block',\n category: 'Sequence',\n description: 'Optional block — executes only if condition is met.',\n source: `sequenceDiagram\n participant A as App\n participant C as Cache\n participant DB as Database\n A->>C: Get data\n C-->>A: Cache miss\n opt Cache miss\n A->>DB: Query\n DB-->>A: Results\n A->>C: Store in cache\n end`,\n },\n {\n title: 'Sequence: Par Block',\n category: 'Sequence',\n description: 'Parallel execution with `par`/`and` constructs.',\n source: `sequenceDiagram\n participant C as Client\n participant A as AuthService\n participant U as UserService\n participant O as OrderService\n C->>A: Authenticate\n par Fetch user data\n A->>U: Get profile\n and Fetch orders\n A->>O: Get orders\n end\n A-->>C: Combined response`,\n },\n {\n title: 'Sequence: Critical Block',\n category: 'Sequence',\n description: 'Critical section that must complete atomically.',\n source: `sequenceDiagram\n participant A as App\n participant DB as Database\n A->>DB: BEGIN\n critical Transaction\n A->>DB: UPDATE accounts\n A->>DB: INSERT log\n end\n A->>DB: COMMIT`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // SEQUENCE DIAGRAMS — Notes\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Sequence: Notes (Right/Left/Over)',\n category: 'Sequence',\n description: 'Notes positioned to the right, left, or over participants.',\n source: `sequenceDiagram\n participant A as Alice\n participant B as Bob\n Note left of A: Alice prepares\n A->>B: Hello\n Note right of B: Bob thinks\n B-->>A: Reply\n Note over A,B: Conversation complete`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // SEQUENCE DIAGRAMS — Complex / Real-World\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Sequence: OAuth 2.0 Flow',\n category: 'Sequence',\n description: 'Full OAuth 2.0 authorization code flow with token exchange.',\n source: `sequenceDiagram\n actor U as User\n participant App as Client App\n participant Auth as Auth Server\n participant API as Resource API\n U->>App: Click Login\n App->>Auth: Authorization request\n Auth->>U: Login page\n U->>Auth: Credentials\n Auth-->>App: Authorization code\n App->>Auth: Exchange code for token\n Auth-->>App: Access token\n App->>API: Request + token\n API-->>App: Protected resource\n App-->>U: Display data`,\n },\n {\n title: 'Sequence: Database Transaction',\n category: 'Sequence',\n description: 'Multi-step database transaction with rollback handling.',\n source: `sequenceDiagram\n participant C as Client\n participant S as Server\n participant DB as Database\n C->>S: POST /transfer\n S->>DB: BEGIN\n S->>DB: Debit account A\n alt Success\n S->>DB: Credit account B\n S->>DB: INSERT audit_log\n S->>DB: COMMIT\n S-->>C: 200 OK\n else Insufficient funds\n S->>DB: ROLLBACK\n S-->>C: 400 Bad Request\n end`,\n },\n {\n title: 'Sequence: Microservice Orchestration',\n category: 'Sequence',\n description: 'Complex multi-service flow with parallel calls and error handling.',\n source: `sequenceDiagram\n participant G as Gateway\n participant A as Auth\n participant U as Users\n participant O as Orders\n participant N as Notify\n G->>A: Validate token\n A-->>G: Valid\n par Fetch data\n G->>U: Get user\n U-->>G: User data\n and\n G->>O: Get orders\n O-->>G: Order list\n end\n G->>N: Send notification\n N-->>G: Queued\n Note over G: Aggregate response`,\n },\n {\n title: 'Sequence: Self-Messages with Notes',\n category: 'Sequence',\n description: 'Self-referencing messages inside alt blocks with notes — tests that notes clear self-message loops and stack without overlapping.',\n source: `sequenceDiagram\n participant User\n participant Main as Main Process\n participant Renderer\n participant Timer as 3s Fallback Timer\n User->>Main: CMD+W\n Main->>Main: event.preventDefault()\n Main->>Renderer: WINDOW_CLOSE_REQUESTED\n Main->>Timer: Start 3s timer\n alt Multiple panels\n Renderer->>Renderer: closePanel(focusedId)\n Note over Renderer: Panel removed\n Note over Renderer: No confirmCloseWindow!\n Timer-->>Main: 3s elapsed → window.destroy()\n else Single panel\n Renderer->>Renderer: closePanel(lastId)\n Note over Renderer: Stack becomes []\n Renderer->>Renderer: Auto-select fires → new panel created!\n Note over Renderer: Panel reopens\n Timer-->>Main: 3s elapsed → window.destroy()\n end`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // CLASS DIAGRAMS — Core Features\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Class: Basic Class',\n category: 'Class',\n description: 'A single class with attributes and methods, rendered as a 3-compartment box.',\n source: `classDiagram\n class Animal {\n +String name\n +int age\n +eat() void\n +sleep() void\n }`,\n },\n {\n title: 'Class: Visibility Markers',\n category: 'Class',\n description: 'All four visibility levels: `+` (public), `-` (private), `#` (protected), `~` (package).',\n source: `classDiagram\n class User {\n +String name\n -String password\n #int internalId\n ~String packageField\n +login() bool\n -hashPassword() String\n #validate() void\n ~notify() void\n }`,\n },\n {\n title: 'Class: Interface Annotation',\n category: 'Class',\n description: 'Using `<>` annotation above the class name.',\n source: `classDiagram\n class Serializable {\n <>\n +serialize() String\n +deserialize(data) void\n }`,\n },\n {\n title: 'Class: Abstract Annotation',\n category: 'Class',\n description: 'Using `<>` annotation for abstract classes.',\n source: `classDiagram\n class Shape {\n <>\n +String color\n +area() double\n +draw() void\n }`,\n },\n {\n title: 'Class: Enum Annotation',\n category: 'Class',\n description: 'Using `<>` annotation for enum types.',\n source: `classDiagram\n class Status {\n <>\n ACTIVE\n INACTIVE\n PENDING\n DELETED\n }`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // CLASS DIAGRAMS — Relationships\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Class: Inheritance (<|--)',\n category: 'Class',\n description: 'Inheritance relationship rendered with a hollow triangle marker.',\n source: `classDiagram\n class Animal {\n +String name\n +eat() void\n }\n class Dog {\n +String breed\n +bark() void\n }\n class Cat {\n +bool isIndoor\n +meow() void\n }\n Animal <|-- Dog\n Animal <|-- Cat`,\n },\n {\n title: 'Class: Composition (*--)',\n category: 'Class',\n description: 'Composition — \"owns\" relationship with filled diamond marker.',\n source: `classDiagram\n class Car {\n +String model\n +start() void\n }\n class Engine {\n +int horsepower\n +rev() void\n }\n Car *-- Engine`,\n },\n {\n title: 'Class: Aggregation (o--)',\n category: 'Class',\n description: 'Aggregation — \"has\" relationship with hollow diamond marker.',\n source: `classDiagram\n class University {\n +String name\n }\n class Department {\n +String faculty\n }\n University o-- Department`,\n },\n {\n title: 'Class: Association (-->)',\n category: 'Class',\n description: 'Basic association — simple directed arrow.',\n source: `classDiagram\n class Customer {\n +String name\n }\n class Order {\n +int orderId\n }\n Customer --> Order`,\n },\n {\n title: 'Class: Dependency (..>)',\n category: 'Class',\n description: 'Dependency — dashed line with open arrow.',\n source: `classDiagram\n class Service {\n +process() void\n }\n class Repository {\n +find() Object\n }\n Service ..> Repository`,\n },\n {\n title: 'Class: Realization (..|>)',\n category: 'Class',\n description: 'Realization — dashed line with hollow triangle (implements interface).',\n source: `classDiagram\n class Flyable {\n <>\n +fly() void\n }\n class Bird {\n +fly() void\n +sing() void\n }\n Bird ..|> Flyable`,\n },\n {\n title: 'Class: All 6 Relationship Types',\n category: 'Class',\n description: 'Every relationship type in a single diagram for comparison.',\n source: `classDiagram\n A <|-- B : inheritance\n C *-- D : composition\n E o-- F : aggregation\n G --> H : association\n I ..> J : dependency\n K ..|> L : realization`,\n },\n {\n title: 'Class: Relationship Labels',\n category: 'Class',\n description: 'Labeled relationships between classes with descriptive text.',\n source: `classDiagram\n class Teacher {\n +String name\n }\n class Student {\n +String name\n }\n class Course {\n +String title\n }\n Teacher --> Course : teaches\n Student --> Course : enrolled in`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // CLASS DIAGRAMS — Complex / Real-World\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'Class: Design Pattern — Observer',\n category: 'Class',\n description: 'The Observer (publish-subscribe) design pattern with interface + concrete implementations.',\n source: `classDiagram\n class Subject {\n <>\n +attach(Observer) void\n +detach(Observer) void\n +notify() void\n }\n class Observer {\n <>\n +update() void\n }\n class EventEmitter {\n -List~Observer~ observers\n +attach(Observer) void\n +detach(Observer) void\n +notify() void\n }\n class Logger {\n +update() void\n }\n class Alerter {\n +update() void\n }\n Subject <|.. EventEmitter\n Observer <|.. Logger\n Observer <|.. Alerter\n EventEmitter --> Observer`,\n },\n {\n title: 'Class: MVC Architecture',\n category: 'Class',\n description: 'Model-View-Controller pattern showing relationships between layers.',\n source: `classDiagram\n class Model {\n -data Map\n +getData() Map\n +setData(key, val) void\n +notify() void\n }\n class View {\n -model Model\n +render() void\n +update() void\n }\n class Controller {\n -model Model\n -view View\n +handleInput(event) void\n +updateModel(data) void\n }\n Controller --> Model : updates\n Controller --> View : refreshes\n View --> Model : reads\n Model ..> View : notifies`,\n },\n {\n title: 'Class: Full Hierarchy',\n category: 'Class',\n description: 'A complete class hierarchy with abstract base, interfaces, and concrete classes.',\n source: `classDiagram\n class Animal {\n <>\n +String name\n +int age\n +eat() void\n +sleep() void\n }\n class Mammal {\n +bool warmBlooded\n +nurse() void\n }\n class Bird {\n +bool canFly\n +layEggs() void\n }\n class Dog {\n +String breed\n +bark() void\n }\n class Cat {\n +bool isIndoor\n +purr() void\n }\n class Parrot {\n +String vocabulary\n +speak() void\n }\n Animal <|-- Mammal\n Animal <|-- Bird\n Mammal <|-- Dog\n Mammal <|-- Cat\n Bird <|-- Parrot`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // ER DIAGRAMS — Core Features\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'ER: Basic Relationship',\n category: 'ER',\n description: 'A simple one-to-many relationship between two entities.',\n source: `erDiagram\n CUSTOMER ||--o{ ORDER : places`,\n },\n {\n title: 'ER: Entity with Attributes',\n category: 'ER',\n description: 'An entity with typed attributes and `PK`/`FK`/`UK` key badges.',\n source: `erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n date created_at\n }`,\n },\n {\n title: 'ER: Attribute Keys (PK, FK, UK)',\n category: 'ER',\n description: 'All three key constraint types rendered as badges.',\n source: `erDiagram\n ORDER {\n int id PK\n int customer_id FK\n string invoice_number UK\n decimal total\n date order_date\n string status\n }`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // ER DIAGRAMS — Cardinality Types\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'ER: Exactly One to Exactly One (||--||)',\n category: 'ER',\n description: 'One-to-one mandatory relationship.',\n source: `erDiagram\n PERSON ||--|| PASSPORT : has`,\n },\n {\n title: 'ER: Exactly One to Zero-or-Many (||--o{)',\n category: 'ER',\n description: 'Classic one-to-many optional relationship (crow\\'s foot).',\n source: `erDiagram\n CUSTOMER ||--o{ ORDER : places`,\n },\n {\n title: 'ER: Zero-or-One to One-or-Many (|o--|{)',\n category: 'ER',\n description: 'Optional on one side, at-least-one on the other.',\n source: `erDiagram\n SUPERVISOR |o--|{ EMPLOYEE : manages`,\n },\n {\n title: 'ER: One-or-More to Zero-or-Many (}|--o{)',\n category: 'ER',\n description: 'At-least-one to zero-or-many relationship.',\n source: `erDiagram\n TEACHER }|--o{ COURSE : teaches`,\n },\n {\n title: 'ER: All Cardinality Types',\n category: 'ER',\n description: 'Every cardinality combination in one diagram.',\n source: `erDiagram\n A ||--|| B : one-to-one\n C ||--o{ D : one-to-many\n E |o--|{ F : opt-to-many\n G }|--o{ H : many-to-many`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // ER DIAGRAMS — Line Styles\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'ER: Identifying (Solid) Relationship',\n category: 'ER',\n description: 'Solid line indicating an identifying relationship (child depends on parent for identity).',\n source: `erDiagram\n ORDER ||--|{ LINE_ITEM : contains`,\n },\n {\n title: 'ER: Non-Identifying (Dashed) Relationship',\n category: 'ER',\n description: 'Dashed line indicating a non-identifying relationship.',\n source: `erDiagram\n USER ||..o{ LOG_ENTRY : generates\n USER ||..o{ SESSION : opens`,\n },\n {\n title: 'ER: Mixed Identifying & Non-Identifying',\n category: 'ER',\n description: 'Both solid and dashed lines in the same diagram.',\n source: `erDiagram\n ORDER ||--|{ LINE_ITEM : contains\n ORDER ||..o{ SHIPMENT : ships-via\n PRODUCT ||--o{ LINE_ITEM : includes\n PRODUCT ||..o{ REVIEW : receives`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // ER DIAGRAMS — Complex / Real-World\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'ER: E-Commerce Schema',\n category: 'ER',\n description: 'Full e-commerce database schema with customers, orders, products, and line items.',\n source: `erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n }\n ORDER {\n int id PK\n date created\n int customer_id FK\n }\n PRODUCT {\n int id PK\n string name\n float price\n }\n LINE_ITEM {\n int id PK\n int order_id FK\n int product_id FK\n int quantity\n }\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : includes`,\n },\n {\n title: 'ER: Blog Platform Schema',\n category: 'ER',\n description: 'Blog system with users, posts, comments, and tags.',\n source: `erDiagram\n USER {\n int id PK\n string username UK\n string email UK\n date joined\n }\n POST {\n int id PK\n string title\n text content\n int author_id FK\n date published\n }\n COMMENT {\n int id PK\n text body\n int post_id FK\n int user_id FK\n date created\n }\n TAG {\n int id PK\n string name UK\n }\n USER ||--o{ POST : writes\n USER ||--o{ COMMENT : authors\n POST ||--o{ COMMENT : has\n POST }|--o{ TAG : tagged-with`,\n },\n {\n title: 'ER: School Management Schema',\n category: 'ER',\n description: 'School system with students, teachers, courses, and enrollments.',\n source: `erDiagram\n STUDENT {\n int id PK\n string name\n date dob\n string grade\n }\n TEACHER {\n int id PK\n string name\n string department\n }\n COURSE {\n int id PK\n string title\n int teacher_id FK\n int credits\n }\n ENROLLMENT {\n int id PK\n int student_id FK\n int course_id FK\n string semester\n float grade\n }\n TEACHER ||--o{ COURSE : teaches\n STUDENT ||--o{ ENROLLMENT : enrolled\n COURSE ||--o{ ENROLLMENT : has`,\n },\n\n // ══════════════════════════════════════════════════════════════════════════\n // XY CHARTS (xychart-beta)\n // ══════════════════════════════════════════════════════════════════════════\n\n {\n title: 'XY: Simple Bar Chart',\n category: 'XY Chart',\n description: 'Basic bar chart with categorical x-axis.',\n source: `xychart-beta\n title \"Product Sales\"\n x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]\n bar [150, 230, 180, 95, 310]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Line Chart',\n category: 'XY Chart',\n description: 'Line chart showing revenue growth over years.',\n source: `xychart-beta\n title \"Revenue Growth\"\n x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025]\n line [320, 420, 540, 680, 820, 950, 1080, 1200]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Bar and Line Overlay',\n category: 'XY Chart',\n description: 'Bars with a line overlay and both axis titles.',\n source: `xychart-beta\n title \"Monthly Revenue\"\n x-axis \"Month\" [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Revenue (USD)\" 0 --> 10000\n bar [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]\n line [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Horizontal Bars',\n category: 'XY Chart',\n description: 'Horizontal bar chart showing language popularity.',\n source: `xychart-beta horizontal\n title \"Language Popularity\"\n x-axis [Python, JavaScript, Java, Go, Rust]\n bar [30, 25, 20, 12, 8]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Multiple Bar Series',\n category: 'XY Chart',\n description: 'Two bar series comparing years side by side.',\n source: `xychart-beta\n title \"2023 vs 2024 Sales\"\n x-axis [Q1, Q2, Q3, Q4]\n bar [200, 250, 300, 280]\n bar [230, 280, 320, 350]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Dual Lines',\n category: 'XY Chart',\n description: 'Two lines comparing planned vs actual values.',\n source: `xychart-beta\n title \"Planned vs Actual\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]\n line [100, 145, 190, 240, 280, 320, 360, 400]\n line [90, 130, 185, 235, 275, 340, 380, 420]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Numeric X-Axis',\n category: 'XY Chart',\n description: 'Line chart using a numeric x-axis range.',\n source: `xychart-beta\n title \"Distribution Curve\"\n x-axis 0 --> 100\n line [4, 7, 13, 21, 31, 43, 58, 71, 84, 91, 95, 91, 84, 71, 58, 43, 31, 21, 13, 7, 4]`,\n options: { interactive: true },\n },\n {\n title: 'XY: 12-Month Dataset',\n category: 'XY Chart',\n description: 'Full year monthly data with bar and trend line.',\n source: `xychart-beta\n title \"Monthly Active Users (2024)\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Users\" 0 --> 30000\n bar [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]\n line [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Horizontal Combined',\n category: 'XY Chart',\n description: 'Horizontal chart with both bars and a trend line.',\n source: `xychart-beta horizontal\n title \"Budget vs Actual\"\n x-axis [Eng, Sales, Marketing, Product, Ops, HR, Finance, Legal]\n bar [500, 350, 250, 200, 150, 120, 100, 80]\n line [480, 380, 230, 180, 160, 110, 95, 75]`,\n options: { interactive: true },\n },\n {\n title: 'XY: Sprint Burndown',\n category: 'XY Chart',\n description: 'Sprint burndown chart with actual and ideal lines.',\n source: `xychart-beta\n title \"Sprint Burndown\"\n x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]\n y-axis \"Story Points\" 0 --> 80\n line [72, 65, 58, 50, 45, 38, 30, 22, 12, 0]\n line [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]`,\n options: { interactive: true },\n },\n]\n" }, { "path": "src/__tests__/ascii-edge-styles.test.ts", "content": "// ============================================================================\n// ASCII edge style tests — dotted and thick line rendering\n// ============================================================================\n\nimport { describe, it, expect } from 'bun:test'\nimport { renderMermaidAscii } from '../ascii/index.ts'\n\ndescribe('ASCII edge styles', () => {\n describe('solid edges (default)', () => {\n it('renders solid edges with ─ in unicode mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A --> B\n `)\n expect(result).toContain('─')\n expect(result).not.toContain('┄')\n expect(result).not.toContain('━')\n })\n\n it('renders solid edges with - in ascii mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A --> B\n `, { useAscii: true })\n expect(result).toContain('-')\n })\n })\n\n describe('dotted edges (-.->)', () => {\n it('renders dotted edges with ┄ in unicode mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A -.-> B\n `)\n // Should contain dotted horizontal line character\n expect(result).toContain('┄')\n })\n\n it('renders dotted edges with . in ascii mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A -.-> B\n `, { useAscii: true })\n // Should contain dots for dotted lines\n expect(result).toContain('.')\n })\n\n it('renders dotted vertical edges with ┆ in unicode mode', () => {\n const result = renderMermaidAscii(`\n graph TD\n A -.-> B\n `)\n // Should contain dotted vertical line character\n expect(result).toContain('┆')\n })\n\n it('renders dotted vertical edges with : in ascii mode', () => {\n const result = renderMermaidAscii(`\n graph TD\n A -.-> B\n `, { useAscii: true })\n // Should contain colons for dotted vertical lines\n expect(result).toContain(':')\n })\n\n it('renders dotted edges with labels', () => {\n const result = renderMermaidAscii(`\n graph LR\n A -.->|optional| B\n `)\n expect(result).toContain('┄')\n expect(result).toContain('optional')\n })\n })\n\n describe('thick edges (==>)', () => {\n it('renders thick edges with ━ in unicode mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A ==> B\n `)\n // Should contain thick horizontal line character\n expect(result).toContain('━')\n })\n\n it('renders thick edges with = in ascii mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A ==> B\n `, { useAscii: true })\n // Should contain equals for thick lines\n expect(result).toContain('=')\n })\n\n it('renders thick vertical edges with ┃ in unicode mode', () => {\n const result = renderMermaidAscii(`\n graph TD\n A ==> B\n `)\n // Should contain thick vertical line character\n expect(result).toContain('┃')\n })\n })\n\n describe('mixed edge styles', () => {\n it('renders different styles in the same diagram', () => {\n const result = renderMermaidAscii(`\n graph LR\n A --> B\n B -.-> C\n C ==> D\n `)\n // Should have all three line types\n expect(result).toContain('─') // solid\n expect(result).toContain('┄') // dotted\n expect(result).toContain('━') // thick\n })\n\n it('renders mixed styles in ascii mode', () => {\n const result = renderMermaidAscii(`\n graph LR\n A --> B\n B -.-> C\n C ==> D\n `, { useAscii: true })\n // Note: ASCII mode uses - for solid, . for dotted, = for thick\n // We just check that the diagram renders without error\n expect(result).toContain('A')\n expect(result).toContain('B')\n expect(result).toContain('C')\n expect(result).toContain('D')\n })\n })\n})\n" }, { "path": "src/__tests__/ascii-multiline.test.ts", "content": "import { describe, it, expect } from 'bun:test'\nimport { renderMermaidAscii } from '../ascii/index.ts'\n\ndescribe('ASCII multi-line labels', () => {\n describe('flowchart nodes', () => {\n it('renders multi-line node labels', () => {\n const ascii = renderMermaidAscii('graph TD\\n A[Line1
    Line2]', { useAscii: false })\n expect(ascii).toContain('Line1')\n expect(ascii).toContain('Line2')\n // Lines should be on different rows\n const lines = ascii.split('\\n')\n const line1Row = lines.findIndex(l => l.includes('Line1'))\n const line2Row = lines.findIndex(l => l.includes('Line2'))\n expect(line2Row).toBeGreaterThan(line1Row)\n })\n\n it('handles 3+ line labels', () => {\n const ascii = renderMermaidAscii('graph TD\\n A[A
    B
    C]', { useAscii: false })\n expect(ascii).toContain('A')\n expect(ascii).toContain('B')\n expect(ascii).toContain('C')\n // Verify vertical ordering\n const lines = ascii.split('\\n')\n const aRow = lines.findIndex(l => l.includes('A') && !l.includes('─') && !l.includes('-'))\n const bRow = lines.findIndex(l => l.includes('B'))\n const cRow = lines.findIndex(l => l.includes('C'))\n expect(bRow).toBeGreaterThan(aRow)\n expect(cRow).toBeGreaterThan(bRow)\n })\n\n it('renders in ASCII mode (not Unicode)', () => {\n const ascii = renderMermaidAscii('graph TD\\n A[Line1
    Line2]', { useAscii: true })\n expect(ascii).toContain('Line1')\n expect(ascii).toContain('Line2')\n // Should use ASCII box characters\n expect(ascii).toContain('+')\n expect(ascii).toContain('-')\n })\n })\n\n describe('flowchart edge labels', () => {\n it('renders multi-line edge labels', () => {\n const ascii = renderMermaidAscii('graph TD\\n A --> B\\n A -->|Line1
    Line2| C', { useAscii: false })\n expect(ascii).toContain('Line1')\n expect(ascii).toContain('Line2')\n })\n })\n\n describe('flowchart subgraph labels', () => {\n it('renders multi-line subgraph labels', () => {\n const ascii = renderMermaidAscii(`graph TD\n subgraph sg [Group
    Header]\n A[Node]\n end\n `, { useAscii: false })\n expect(ascii).toContain('Group')\n expect(ascii).toContain('Header')\n })\n })\n\n describe('sequence diagram', () => {\n it('renders multi-line actor labels', () => {\n const ascii = renderMermaidAscii(`sequenceDiagram\n participant A as Actor
    One\n A->>A: msg\n `, { useAscii: false })\n expect(ascii).toContain('Actor')\n expect(ascii).toContain('One')\n })\n\n it('renders multi-line message labels', () => {\n const ascii = renderMermaidAscii(`sequenceDiagram\n participant A\n participant B\n A->>B: Line1
    Line2\n `, { useAscii: false })\n expect(ascii).toContain('Line1')\n expect(ascii).toContain('Line2')\n })\n\n it('preserves existing note multi-line support', () => {\n const ascii = renderMermaidAscii(`sequenceDiagram\n participant A\n A->>A: self\n Note over A: Note line 1
    Note line 2\n `, { useAscii: false })\n expect(ascii).toContain('Note line 1')\n expect(ascii).toContain('Note line 2')\n })\n })\n\n describe('class diagram', () => {\n it('renders multi-line class names', () => {\n const ascii = renderMermaidAscii(`classDiagram\n class MyClass[\"Long
    Name\"]\n `, { useAscii: false })\n expect(ascii).toContain('Long')\n expect(ascii).toContain('Name')\n })\n\n it('renders multi-line relationship labels', () => {\n const ascii = renderMermaidAscii(`classDiagram\n A --> B : uses
    implements\n `, { useAscii: false })\n expect(ascii).toContain('uses')\n expect(ascii).toContain('implements')\n })\n })\n\n describe('ER diagram', () => {\n it('renders multi-line entity names', () => {\n const ascii = renderMermaidAscii(`erDiagram\n \"Entity
    Name\" {\n string id\n }\n `, { useAscii: false })\n expect(ascii).toContain('Entity')\n expect(ascii).toContain('Name')\n })\n\n it('renders multi-line relationship labels', () => {\n const ascii = renderMermaidAscii(`erDiagram\n A ||--o{ B : \"has
    many\"\n `, { useAscii: false })\n expect(ascii).toContain('has')\n expect(ascii).toContain('many')\n })\n })\n\n describe('edge cases', () => {\n it('handles empty lines from consecutive
    ', () => {\n const ascii = renderMermaidAscii('graph TD\\n A[Line1

    Line3]', { useAscii: false })\n expect(ascii).toContain('Line1')\n expect(ascii).toContain('Line3')\n })\n\n it('handles single-line labels (no
    )', () => {\n const ascii = renderMermaidAscii('graph TD\\n A[SingleLine]', { useAscii: false })\n expect(ascii).toContain('SingleLine')\n })\n\n it('handles very long lines', () => {\n const long = 'A'.repeat(30)\n const ascii = renderMermaidAscii(`graph TD\\n A[${long}
    Short]`, { useAscii: false })\n expect(ascii).toContain(long)\n expect(ascii).toContain('Short')\n })\n\n it('handles mixed short and long lines', () => {\n const ascii = renderMermaidAscii('graph TD\\n A[Short
    VeryLongSecondLine
    Med]', { useAscii: false })\n expect(ascii).toContain('Short')\n expect(ascii).toContain('VeryLongSecondLine')\n expect(ascii).toContain('Med')\n })\n })\n\n describe('multiline-utils functions', () => {\n it('splitLines splits on newlines', () => {\n // Test through the rendering pipeline\n const ascii = renderMermaidAscii('graph TD\\n A[One
    Two
    Three]', { useAscii: false })\n const lines = ascii.split('\\n')\n // All three words should appear on separate lines\n expect(lines.some(l => l.includes('One'))).toBe(true)\n expect(lines.some(l => l.includes('Two'))).toBe(true)\n expect(lines.some(l => l.includes('Three'))).toBe(true)\n })\n\n it('maxLineWidth uses longest line for box sizing', () => {\n // Box should be wide enough for the longest line\n const ascii = renderMermaidAscii('graph TD\\n A[X
    LongLine
    Y]', { useAscii: false })\n // The box should contain LongLine without truncation\n expect(ascii).toContain('LongLine')\n })\n })\n})\n" }, { "path": "src/__tests__/ascii.test.ts", "content": "/**\n * Golden-file tests for the ASCII/Unicode renderer.\n *\n * Ported from AlexanderGrooff/mermaid-ascii cmd/graph_test.go.\n * Each .txt file contains mermaid input above a `---` separator\n * and the expected ASCII/Unicode output below it.\n *\n * Test data: 44 ASCII files + 22 Unicode files = 66 total.\n */\nimport { describe, it, expect } from 'bun:test'\nimport { renderMermaidAscii } from '../ascii/index.ts'\nimport { hasDiagonalLines, DIAGONAL_CHARS } from '../ascii/validate.ts'\nimport { readdirSync, readFileSync } from 'node:fs'\nimport { join } from 'node:path'\n\n// ============================================================================\n// Test case parser — matches Go's testutil.ReadTestCase format\n// ============================================================================\n\ninterface TestCase {\n mermaid: string\n expected: string\n paddingX: number\n paddingY: number\n}\n\n/**\n * Parse a golden test file into its components.\n * Format:\n * [paddingX=N] (optional)\n * [paddingY=N] (optional)\n * \n * ---\n * \n */\nfunction parseTestCase(content: string): TestCase {\n const tc: TestCase = { mermaid: '', expected: '', paddingX: 5, paddingY: 5 }\n const lines = content.split('\\n')\n const paddingRegex = /^(?:padding([xy]))\\s*=\\s*(\\d+)\\s*$/i\n\n let inMermaid = true\n let mermaidStarted = false\n const mermaidLines: string[] = []\n const expectedLines: string[] = []\n\n for (const line of lines) {\n if (line === '---') {\n inMermaid = false\n continue\n }\n\n if (inMermaid) {\n const trimmed = line.trim()\n\n // Before mermaid code starts, parse padding directives and skip blanks\n if (!mermaidStarted) {\n if (trimmed === '') continue\n const match = trimmed.match(paddingRegex)\n if (match) {\n const value = parseInt(match[2]!, 10)\n if (match[1]!.toLowerCase() === 'x') {\n tc.paddingX = value\n } else {\n tc.paddingY = value\n }\n continue\n }\n }\n\n mermaidStarted = true\n mermaidLines.push(line)\n } else {\n expectedLines.push(line)\n }\n }\n\n tc.mermaid = mermaidLines.join('\\n') + '\\n'\n\n // Strip final trailing newline (matches Go's strings.TrimSuffix(expected, \"\\n\"))\n let expected = expectedLines.join('\\n')\n if (expected.endsWith('\\n')) {\n expected = expected.slice(0, -1)\n }\n tc.expected = expected\n\n return tc\n}\n\n// ============================================================================\n// Whitespace normalization — matches Go's testutil.NormalizeWhitespace\n// ============================================================================\n\n/**\n * Normalize whitespace for comparison:\n * - Trim trailing spaces from each line\n * - Remove leading/trailing blank lines\n */\nfunction normalizeWhitespace(s: string): string {\n const lines = s.split('\\n')\n let normalized = lines.map(l => l.trimEnd())\n\n // Remove leading blank lines\n while (normalized.length > 0 && normalized[0] === '') {\n normalized.shift()\n }\n // Remove trailing blank lines\n while (normalized.length > 0 && normalized[normalized.length - 1] === '') {\n normalized.pop()\n }\n\n return normalized.join('\\n')\n}\n\n/** Replace spaces with middle dots for clearer diff output. */\nfunction visualizeWhitespace(s: string): string {\n return s.replaceAll(' ', '·')\n}\n\n// ============================================================================\n// Test runner — dynamically loads all golden files from testdata directories\n// ============================================================================\n\nfunction runGoldenTests(dir: string, useAscii: boolean): void {\n const files = readdirSync(dir).filter(f => f.endsWith('.txt')).sort()\n\n for (const file of files) {\n const testName = file.replace('.txt', '')\n\n it(testName, () => {\n const content = readFileSync(join(dir, file), 'utf-8')\n const tc = parseTestCase(content)\n\n const actual = renderMermaidAscii(tc.mermaid, {\n useAscii,\n paddingX: tc.paddingX,\n paddingY: tc.paddingY,\n })\n\n const normalizedExpected = normalizeWhitespace(tc.expected)\n const normalizedActual = normalizeWhitespace(actual)\n\n if (normalizedExpected !== normalizedActual) {\n const expectedVis = visualizeWhitespace(normalizedExpected)\n const actualVis = visualizeWhitespace(normalizedActual)\n expect(actualVis).toBe(expectedVis)\n }\n })\n }\n}\n\n// ============================================================================\n// Test suites\n// ============================================================================\n\nconst testdataDir = join(import.meta.dir, 'testdata')\n\ndescribe('ASCII rendering', () => {\n runGoldenTests(join(testdataDir, 'ascii'), true)\n})\n\ndescribe('Unicode rendering', () => {\n runGoldenTests(join(testdataDir, 'unicode'), false)\n})\n\n// ============================================================================\n// Config behavior tests — ported from Go's TestGraphUseAsciiConfig\n// ============================================================================\n\ndescribe('Config behavior', () => {\n const mermaidInput = 'graph LR\\nA --> B'\n\n it('ASCII and Unicode outputs should differ', () => {\n const asciiOutput = renderMermaidAscii(mermaidInput, { useAscii: true })\n const unicodeOutput = renderMermaidAscii(mermaidInput, { useAscii: false })\n expect(asciiOutput).not.toBe(unicodeOutput)\n })\n\n it('ASCII output should not contain Unicode box-drawing characters', () => {\n const output = renderMermaidAscii(mermaidInput, { useAscii: true })\n expect(output).not.toContain('┌')\n expect(output).not.toContain('─')\n expect(output).not.toContain('│')\n })\n\n it('Unicode output should contain Unicode box-drawing characters', () => {\n const output = renderMermaidAscii(mermaidInput, { useAscii: false })\n const hasUnicode = output.includes('┌') || output.includes('─') || output.includes('│')\n expect(hasUnicode).toBe(true)\n })\n})\n\n// ============================================================================\n// Diagonal validation — ensures all edges use orthogonal Manhattan routing\n// ============================================================================\n\ndescribe('Diagonal validation', () => {\n const asciiDir = join(testdataDir, 'ascii')\n const unicodeDir = join(testdataDir, 'unicode')\n\n it('ASCII output should never contain diagonal characters', () => {\n // Test all ASCII golden files\n const files = readdirSync(asciiDir).filter((f) => f.endsWith('.txt'))\n for (const file of files) {\n const content = readFileSync(join(asciiDir, file), 'utf-8')\n const { mermaid, paddingX, paddingY } = parseTestCase(content)\n const output = renderMermaidAscii(mermaid, {\n useAscii: true,\n boxBorderPadding: paddingX,\n paddingY: paddingY,\n })\n\n // Check for diagonal characters\n for (const char of DIAGONAL_CHARS.ascii) {\n expect(output).not.toContain(char)\n }\n }\n })\n\n it('Unicode output should never contain diagonal characters', () => {\n // Test all Unicode golden files\n const files = readdirSync(unicodeDir).filter((f) => f.endsWith('.txt'))\n for (const file of files) {\n const content = readFileSync(join(unicodeDir, file), 'utf-8')\n const { mermaid, paddingX, paddingY } = parseTestCase(content)\n const output = renderMermaidAscii(mermaid, {\n useAscii: false,\n boxBorderPadding: paddingX,\n paddingY: paddingY,\n })\n\n // Check for diagonal characters\n for (const char of DIAGONAL_CHARS.unicode) {\n expect(output).not.toContain(char)\n }\n }\n })\n\n it('hasDiagonalLines utility correctly detects diagonal characters', () => {\n // Should detect ASCII diagonals\n expect(hasDiagonalLines('A / B')).toBe(true)\n expect(hasDiagonalLines('A \\\\ B')).toBe(true)\n\n // Should detect Unicode diagonals\n expect(hasDiagonalLines('A ╱ B')).toBe(true)\n expect(hasDiagonalLines('A ╲ B')).toBe(true)\n\n // Should not flag clean output\n expect(hasDiagonalLines('┌───┐\\n│ A │\\n└───┘')).toBe(false)\n expect(hasDiagonalLines('+---+\\n| A |\\n+---+')).toBe(false)\n })\n})\n" }, { "path": "src/__tests__/class-arrow-directions.test.ts", "content": "/**\n * Comprehensive tests for class diagram arrow directions.\n *\n * Ensures all relationship types have correctly oriented arrows:\n * - Inheritance/Realization: hollow triangles point toward parent/interface\n * - Association/Dependency: filled arrows point from source to target\n * - Composition/Aggregation: diamonds are omnidirectional\n */\n\nimport { describe, test, expect } from 'bun:test'\nimport { renderMermaidAscii } from '../ascii/index.ts'\n\ndescribe('Class Diagram Arrow Directions', () => {\n\n // ============================================================================\n // INHERITANCE (<|--)\n // ============================================================================\n\n describe('Inheritance (<|--)', () => {\n test('parent above child - triangle points UP toward parent', () => {\n const diagram = `classDiagram\n Animal <|-- Dog`\n const result = renderMermaidAscii(diagram)\n\n // Should contain upward triangle\n expect(result).toContain('△')\n expect(result).not.toContain('▽')\n\n // Parent should be above child\n const lines = result.split('\\n')\n const animalLine = lines.findIndex(l => l.includes('Animal'))\n const dogLine = lines.findIndex(l => l.includes('Dog'))\n expect(animalLine).toBeLessThan(dogLine)\n })\n\n test('multiple inheritance creates separate arrows', () => {\n const diagram = `classDiagram\n Animal <|-- Dog\n Animal <|-- Cat\n Dog <|-- Puppy`\n const result = renderMermaidAscii(diagram)\n\n // Animal should be at top, then Dog/Cat, then Puppy\n const lines = result.split('\\n')\n const animalLine = lines.findIndex(l => l.includes('Animal'))\n const dogLine = lines.findIndex(l => l.includes('Dog'))\n const catLine = lines.findIndex(l => l.includes('Cat'))\n const puppyLine = lines.findIndex(l => l.includes('Puppy'))\n\n expect(animalLine).toBeLessThan(dogLine)\n expect(animalLine).toBeLessThan(catLine)\n expect(dogLine).toBeLessThan(puppyLine)\n })\n\n test('multi-level inheritance - all triangles point UP', () => {\n const diagram = `classDiagram\n Animal <|-- Mammal\n Mammal <|-- Dog`\n const result = renderMermaidAscii(diagram)\n\n // Verify ordering: Animal > Mammal > Dog (top to bottom)\n const lines = result.split('\\n')\n const animalLine = lines.findIndex(l => l.includes('Animal'))\n const mammalLine = lines.findIndex(l => l.includes('Mammal'))\n const dogLine = lines.findIndex(l => l.includes('Dog'))\n\n expect(animalLine).toBeLessThan(mammalLine)\n expect(mammalLine).toBeLessThan(dogLine)\n\n // All triangles should point up\n expect(result.match(/△/g)?.length).toBe(2)\n })\n\n test('multiple inheritance from same parent', () => {\n const diagram = `classDiagram\n Animal <|-- Dog\n Animal <|-- Cat`\n const result = renderMermaidAscii(diagram)\n\n // Animal should be above both children\n const lines = result.split('\\n')\n const animalLine = lines.findIndex(l => l.includes('Animal'))\n const dogLine = lines.findIndex(l => l.includes('Dog'))\n const catLine = lines.findIndex(l => l.includes('Cat'))\n\n expect(animalLine).toBeLessThan(dogLine)\n expect(animalLine).toBeLessThan(catLine)\n\n // Should have at least one triangle pointing up (may merge visually)\n expect(result).toContain('△')\n })\n\n test('ASCII mode uses ^ for upward triangle', () => {\n const diagram = `classDiagram\n Animal <|-- Dog`\n const result = renderMermaidAscii(diagram, { useAscii: true })\n\n expect(result).toContain('^')\n expect(result).not.toContain('v')\n })\n })\n\n // ============================================================================\n // ASSOCIATION (-->)\n // ============================================================================\n\n describe('Association (-->)', () => {\n test('source above target - arrow points DOWN', () => {\n const diagram = `classDiagram\n Person --> Address`\n const result = renderMermaidAscii(diagram)\n\n // Should contain downward arrow\n expect(result).toContain('▼')\n expect(result).not.toContain('▲')\n\n // Person should be above Address\n const lines = result.split('\\n')\n const personLine = lines.findIndex(l => l.includes('Person'))\n const addressLine = lines.findIndex(l => l.includes('Address'))\n expect(personLine).toBeLessThan(addressLine)\n })\n\n test('multiple associations from same source', () => {\n const diagram = `classDiagram\n Person --> Address\n Person --> Phone`\n const result = renderMermaidAscii(diagram)\n\n // Person should be above both targets\n const lines = result.split('\\n')\n const personLine = lines.findIndex(l => l.includes('Person'))\n const addressLine = lines.findIndex(l => l.includes('Address'))\n const phoneLine = lines.findIndex(l => l.includes('Phone'))\n\n expect(personLine).toBeLessThan(addressLine)\n expect(personLine).toBeLessThan(phoneLine)\n })\n\n test('chain of associations', () => {\n const diagram = `classDiagram\n A --> B\n B --> C`\n const result = renderMermaidAscii(diagram)\n\n // A > B > C ordering\n const lines = result.split('\\n')\n const aLine = lines.findIndex(l => l.includes('│ A │'))\n const bLine = lines.findIndex(l => l.includes('│ B │'))\n const cLine = lines.findIndex(l => l.includes('│ C │'))\n\n expect(aLine).toBeLessThan(bLine)\n expect(bLine).toBeLessThan(cLine)\n\n // Both arrows point down\n expect(result.match(/▼/g)?.length).toBe(2)\n })\n\n test('ASCII mode uses v for downward arrow', () => {\n const diagram = `classDiagram\n Person --> Address`\n const result = renderMermaidAscii(diagram, { useAscii: true })\n\n expect(result).toContain('v')\n expect(result).not.toContain('^')\n })\n })\n\n // ============================================================================\n // DEPENDENCY (..>)\n // ============================================================================\n\n describe('Dependency (..>)', () => {\n test('source above target - arrow points DOWN', () => {\n const diagram = `classDiagram\n Client ..> Server`\n const result = renderMermaidAscii(diagram)\n\n expect(result).toContain('▼')\n expect(result).not.toContain('▲')\n\n const lines = result.split('\\n')\n const clientLine = lines.findIndex(l => l.includes('Client'))\n const serverLine = lines.findIndex(l => l.includes('Server'))\n expect(clientLine).toBeLessThan(serverLine)\n })\n\n test('multiple dependencies', () => {\n const diagram = `classDiagram\n Client ..> Server\n Client ..> Database`\n const result = renderMermaidAscii(diagram)\n\n const lines = result.split('\\n')\n const clientLine = lines.findIndex(l => l.includes('Client'))\n const serverLine = lines.findIndex(l => l.includes('Server'))\n const dbLine = lines.findIndex(l => l.includes('Database'))\n\n expect(clientLine).toBeLessThan(serverLine)\n expect(clientLine).toBeLessThan(dbLine)\n })\n\n test('ASCII mode uses v for downward arrow', () => {\n const diagram = `classDiagram\n Client ..> Server`\n const result = renderMermaidAscii(diagram, { useAscii: true })\n\n expect(result).toContain('v')\n })\n })\n\n // ============================================================================\n // REALIZATION (..|>)\n // ============================================================================\n\n describe('Realization (..|>)', () => {\n test('interface above implementation - triangle points UP', () => {\n // Circle ..|> Shape means \"Circle implements Shape\"\n // Shape (interface/parent) should be placed ABOVE Circle (implementation/child)\n const diagram = `classDiagram\n Circle ..|> Shape`\n const result = renderMermaidAscii(diagram)\n\n // Shape (interface) should be above Circle (implementation)\n const lines = result.split('\\n')\n const shapeLine = lines.findIndex(l => l.includes('Shape'))\n const circleLine = lines.findIndex(l => l.includes('Circle'))\n expect(shapeLine).toBeLessThan(circleLine)\n expect(result).toContain('△')\n })\n\n test('realization with <|.. syntax (marker at from end)', () => {\n // Shape <|.. Circle means \"Circle implements Shape\" (same as Circle ..|> Shape)\n const diagram = `classDiagram\n Shape <|.. Circle`\n const result = renderMermaidAscii(diagram)\n\n // Shape (interface) should be above Circle (implementation)\n const lines = result.split('\\n')\n const shapeLine = lines.findIndex(l => l.includes('Shape'))\n const circleLine = lines.findIndex(l => l.includes('Circle'))\n expect(shapeLine).toBeLessThan(circleLine)\n expect(result).toContain('△')\n })\n\n test('multiple implementations', () => {\n // Circle and Square both implement Shape\n const diagram = `classDiagram\n Circle ..|> Shape\n Square ..|> Shape`\n const result = renderMermaidAscii(diagram)\n\n // Shape (interface) above both implementations\n const lines = result.split('\\n')\n const shapeLine = lines.findIndex(l => l.includes('Shape'))\n const circleLine = lines.findIndex(l => l.includes('Circle'))\n const squareLine = lines.findIndex(l => l.includes('Square'))\n\n expect(shapeLine).toBeLessThan(circleLine)\n expect(shapeLine).toBeLessThan(squareLine)\n // At least one triangle (may merge visually if same connection point)\n expect(result).toContain('△')\n })\n })\n\n // ============================================================================\n // COMPOSITION & AGGREGATION (omnidirectional diamonds)\n // ============================================================================\n\n describe('Composition (*--) and Aggregation (o--)', () => {\n test('composition - diamond is omnidirectional', () => {\n const diagram = `classDiagram\n Car *-- Engine`\n const result = renderMermaidAscii(diagram)\n\n // Should contain filled diamond\n expect(result).toContain('◆')\n })\n\n test('aggregation - hollow diamond is omnidirectional', () => {\n const diagram = `classDiagram\n Team o-- Player`\n const result = renderMermaidAscii(diagram)\n\n // Should contain hollow diamond\n expect(result).toContain('◇')\n })\n })\n\n // ============================================================================\n // MIXED SCENARIOS\n // ============================================================================\n\n describe('Mixed Relationship Scenarios', () => {\n test('all 6 relationship types together', () => {\n const diagram = `classDiagram\n A <|-- B : inheritance\n C *-- D : composition\n E o-- F : aggregation\n G --> H : association\n I ..> J : dependency\n K ..|> L : realization`\n const result = renderMermaidAscii(diagram)\n\n // Upward triangles for inheritance and realization\n expect(result.match(/△/g)?.length).toBe(2)\n\n // Downward arrows for association and dependency\n expect(result.match(/▼/g)?.length).toBe(2)\n\n // Diamonds for composition and aggregation\n expect(result).toContain('◆')\n expect(result).toContain('◇')\n })\n\n test('inheritance with association - different arrow directions', () => {\n const diagram = `classDiagram\n Animal <|-- Dog\n Dog --> Food`\n const result = renderMermaidAscii(diagram)\n\n // Should have both up triangle (inheritance) and down arrow (association)\n expect(result).toContain('△')\n expect(result).toContain('▼')\n })\n\n test('circular reference creates valid layout', () => {\n const diagram = `classDiagram\n A --> B\n B --> C\n C ..> A`\n const result = renderMermaidAscii(diagram)\n\n // Cycles may create mixed arrow directions (up and down) to avoid overlaps\n // Just verify arrows are present and classes are rendered\n const hasUpArrow = result.includes('▲')\n const hasDownArrow = result.includes('▼')\n expect(hasUpArrow || hasDownArrow).toBe(true)\n expect(result).toContain('│ A │')\n expect(result).toContain('│ B │')\n expect(result).toContain('│ C │')\n })\n })\n\n // ============================================================================\n // ASCII vs UNICODE CONSISTENCY\n // ============================================================================\n\n describe('ASCII and Unicode Mode Consistency', () => {\n test('same diagram produces consistent layouts in both modes', () => {\n const diagram = `classDiagram\n Animal <|-- Dog\n Person --> Address`\n\n const unicode = renderMermaidAscii(diagram)\n const ascii = renderMermaidAscii(diagram, { useAscii: true })\n\n // Both should have same node ordering\n const unicodeLines = unicode.split('\\n')\n const asciiLines = ascii.split('\\n')\n\n const uAnimal = unicodeLines.findIndex(l => l.includes('Animal'))\n const uDog = unicodeLines.findIndex(l => l.includes('Dog'))\n const aPerson = asciiLines.findIndex(l => l.includes('Person'))\n const aAddress = asciiLines.findIndex(l => l.includes('Address'))\n\n expect(uAnimal).toBeLessThan(uDog)\n expect(aPerson).toBeLessThan(aAddress)\n\n // Unicode has △ and ▼, ASCII has ^ and v\n expect(unicode).toContain('△')\n expect(unicode).toContain('▼')\n expect(ascii).toContain('^')\n expect(ascii).toContain('v')\n })\n })\n\n // ============================================================================\n // EDGE CASES\n // ============================================================================\n\n describe('Edge Cases', () => {\n test('single inheritance relationship', () => {\n const diagram = `classDiagram\n A <|-- B`\n const result = renderMermaidAscii(diagram)\n\n expect(result).toContain('△')\n const lines = result.split('\\n')\n const aLine = lines.findIndex(l => l.includes('│ A │'))\n const bLine = lines.findIndex(l => l.includes('│ B │'))\n expect(aLine).toBeLessThan(bLine)\n })\n\n test('classes with members maintain arrow directions', () => {\n const diagram = `classDiagram\n class Animal {\n +String name\n +eat() void\n }\n class Dog {\n +bark() void\n }\n Animal <|-- Dog`\n const result = renderMermaidAscii(diagram)\n\n expect(result).toContain('△')\n const lines = result.split('\\n')\n const animalLine = lines.findIndex(l => l.includes('Animal'))\n const dogLine = lines.findIndex(l => l.includes('Dog'))\n expect(animalLine).toBeLessThan(dogLine)\n })\n })\n})\n" }, { "path": "src/__tests__/class-integration.test.ts", "content": "/**\n * Integration tests for class diagrams — end-to-end parse → layout → render.\n */\nimport { describe, it, expect } from 'bun:test'\nimport { renderMermaidSVG } from '../index.ts'\n\ndescribe('renderMermaidSVG – class diagrams', () => {\n it('renders a basic class diagram to valid SVG', () => {\n const svg = renderMermaidSVG(`classDiagram\n class Animal {\n +String name\n +eat() void\n }`)\n expect(svg).toContain('')\n expect(svg).toContain('Animal')\n expect(svg).toContain('name')\n expect(svg).toContain('eat')\n })\n\n it('renders class with annotation', () => {\n const svg = renderMermaidSVG(`classDiagram\n class Flyable {\n <>\n +fly() void\n }`)\n expect(svg).toContain('interface')\n expect(svg).toContain('Flyable')\n expect(svg).toContain('fly')\n })\n\n it('renders inheritance relationship with triangle marker', () => {\n const svg = renderMermaidSVG(`classDiagram\n Animal <|-- Dog`)\n expect(svg).toContain('Animal')\n expect(svg).toContain('Dog')\n // Inheritance uses a hollow triangle marker\n expect(svg).toContain('cls-inherit')\n })\n\n it('renders composition with filled diamond', () => {\n const svg = renderMermaidSVG(`classDiagram\n Car *-- Engine`)\n expect(svg).toContain('cls-composition')\n })\n\n it('renders aggregation with hollow diamond', () => {\n const svg = renderMermaidSVG(`classDiagram\n University o-- Department`)\n expect(svg).toContain('cls-aggregation')\n })\n\n it('renders dependency with dashed line', () => {\n const svg = renderMermaidSVG(`classDiagram\n Service ..> Repository`)\n expect(svg).toContain('stroke-dasharray')\n expect(svg).toContain('cls-arrow')\n })\n\n it('renders realization with dashed line and triangle', () => {\n const svg = renderMermaidSVG(`classDiagram\n Bird ..|> Flyable`)\n expect(svg).toContain('stroke-dasharray')\n expect(svg).toContain('cls-inherit')\n })\n\n it('renders relationship labels', () => {\n const svg = renderMermaidSVG(`classDiagram\n Customer --> Order : places`)\n expect(svg).toContain('places')\n })\n\n it('renders class compartments with divider lines', () => {\n const svg = renderMermaidSVG(`classDiagram\n class Animal {\n +String name\n +eat() void\n }`)\n // Should have horizontal divider lines between compartments\n const lines = svg.match(/ {\n const svg = renderMermaidSVG(`classDiagram\n class A {\n +x int\n }`, { bg: '#18181B', fg: '#FAFAFA' })\n expect(svg).toContain('--bg:#18181B')\n })\n\n it('renders a complete class hierarchy', () => {\n const svg = renderMermaidSVG(`classDiagram\n class Animal {\n <>\n +String name\n +eat() void\n }\n class Dog {\n +String breed\n +bark() void\n }\n class Cat {\n +bool isIndoor\n +meow() void\n }\n Animal <|-- Dog\n Animal <|-- Cat`)\n expect(svg).toContain('Animal')\n expect(svg).toContain('Dog')\n expect(svg).toContain('Cat')\n expect(svg).toContain('abstract')\n })\n})\n" }, { "path": "src/__tests__/class-parser.test.ts", "content": "/**\n * Tests for the class diagram parser.\n *\n * Covers: class blocks, attributes, methods, visibility, annotations,\n * relationships (all 6 types), cardinality, labels, inline attributes.\n */\nimport { describe, it, expect } from 'bun:test'\nimport { parseClassDiagram } from '../class/parser.ts'\n\n/** Helper to parse — preprocesses text the same way index.ts does */\nfunction parse(text: string) {\n const lines = text.split('\\n').map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith('%%'))\n return parseClassDiagram(lines)\n}\n\n// ============================================================================\n// Class definitions\n// ============================================================================\n\ndescribe('parseClassDiagram – class definitions', () => {\n it('parses a class block with attributes and methods', () => {\n const d = parse(`classDiagram\n class Animal {\n +String name\n +int age\n +eat() void\n +sleep()\n }`)\n expect(d.classes).toHaveLength(1)\n expect(d.classes[0]!.id).toBe('Animal')\n expect(d.classes[0]!.attributes).toHaveLength(2)\n expect(d.classes[0]!.methods).toHaveLength(2)\n })\n\n it('parses attribute visibility (+ - # ~)', () => {\n const d = parse(`classDiagram\n class MyClass {\n +String publicField\n -int privateField\n #double protectedField\n ~bool packageField\n }`)\n expect(d.classes[0]!.attributes[0]!.visibility).toBe('+')\n expect(d.classes[0]!.attributes[1]!.visibility).toBe('-')\n expect(d.classes[0]!.attributes[2]!.visibility).toBe('#')\n expect(d.classes[0]!.attributes[3]!.visibility).toBe('~')\n })\n\n it('parses method with return type', () => {\n const d = parse(`classDiagram\n class Calc {\n +add(a, b) int\n }`)\n expect(d.classes[0]!.methods[0]!.name).toBe('add')\n expect(d.classes[0]!.methods[0]!.type).toBe('int')\n })\n\n it('parses annotation <>', () => {\n const d = parse(`classDiagram\n class Flyable {\n <>\n +fly() void\n }`)\n expect(d.classes[0]!.annotation).toBe('interface')\n expect(d.classes[0]!.methods).toHaveLength(1)\n })\n\n it('parses inline annotation syntax', () => {\n const d = parse(`classDiagram\n class Shape { <> }`)\n expect(d.classes[0]!.annotation).toBe('abstract')\n })\n\n it('parses standalone class declaration', () => {\n const d = parse(`classDiagram\n class EmptyClass`)\n expect(d.classes).toHaveLength(1)\n expect(d.classes[0]!.id).toBe('EmptyClass')\n })\n\n it('auto-creates classes from relationships', () => {\n const d = parse(`classDiagram\n Animal <|-- Dog`)\n expect(d.classes).toHaveLength(2)\n expect(d.classes.find(c => c.id === 'Animal')).toBeDefined()\n expect(d.classes.find(c => c.id === 'Dog')).toBeDefined()\n })\n})\n\n// ============================================================================\n// Inline attributes\n// ============================================================================\n\ndescribe('parseClassDiagram – inline attributes', () => {\n it('parses inline attribute: ClassName : +Type name', () => {\n const d = parse(`classDiagram\n class Animal\n Animal : +String name\n Animal : +int age`)\n const cls = d.classes.find(c => c.id === 'Animal')!\n expect(cls.attributes).toHaveLength(2)\n expect(cls.attributes[0]!.name).toBe('name')\n })\n})\n\n// ============================================================================\n// Relationships\n// ============================================================================\n\ndescribe('parseClassDiagram – relationships', () => {\n it('parses inheritance: <|-- (marker at from)', () => {\n const d = parse(`classDiagram\n Animal <|-- Dog`)\n expect(d.relationships).toHaveLength(1)\n expect(d.relationships[0]!.type).toBe('inheritance')\n expect(d.relationships[0]!.from).toBe('Animal')\n expect(d.relationships[0]!.to).toBe('Dog')\n expect(d.relationships[0]!.markerAt).toBe('from')\n })\n\n it('parses composition: *-- (marker at from)', () => {\n const d = parse(`classDiagram\n Car *-- Engine`)\n expect(d.relationships[0]!.type).toBe('composition')\n expect(d.relationships[0]!.markerAt).toBe('from')\n })\n\n it('parses aggregation: o-- (marker at from)', () => {\n const d = parse(`classDiagram\n University o-- Department`)\n expect(d.relationships[0]!.type).toBe('aggregation')\n expect(d.relationships[0]!.markerAt).toBe('from')\n })\n\n it('parses association: --> (marker at to)', () => {\n const d = parse(`classDiagram\n Customer --> Order`)\n expect(d.relationships[0]!.type).toBe('association')\n expect(d.relationships[0]!.markerAt).toBe('to')\n })\n\n it('parses dependency: ..> (marker at to)', () => {\n const d = parse(`classDiagram\n Service ..> Repository`)\n expect(d.relationships[0]!.type).toBe('dependency')\n expect(d.relationships[0]!.markerAt).toBe('to')\n })\n\n it('parses realization: ..|> (marker at to)', () => {\n const d = parse(`classDiagram\n Bird ..|> Flyable`)\n expect(d.relationships[0]!.type).toBe('realization')\n expect(d.relationships[0]!.markerAt).toBe('to')\n })\n\n // --- Reversed arrow variants ---\n\n it('parses reversed realization: <|.. (marker at from)', () => {\n const d = parse(`classDiagram\n Flyable <|.. Bird`)\n expect(d.relationships[0]!.type).toBe('realization')\n expect(d.relationships[0]!.from).toBe('Flyable')\n expect(d.relationships[0]!.to).toBe('Bird')\n expect(d.relationships[0]!.markerAt).toBe('from')\n })\n\n it('parses reversed composition: --* (marker at to)', () => {\n const d = parse(`classDiagram\n Engine --* Car`)\n expect(d.relationships[0]!.type).toBe('composition')\n expect(d.relationships[0]!.from).toBe('Engine')\n expect(d.relationships[0]!.to).toBe('Car')\n expect(d.relationships[0]!.markerAt).toBe('to')\n })\n\n it('parses reversed aggregation: --o (marker at to)', () => {\n const d = parse(`classDiagram\n Department --o University`)\n expect(d.relationships[0]!.type).toBe('aggregation')\n expect(d.relationships[0]!.from).toBe('Department')\n expect(d.relationships[0]!.to).toBe('University')\n expect(d.relationships[0]!.markerAt).toBe('to')\n })\n\n it('parses relationship with label', () => {\n const d = parse(`classDiagram\n Customer --> Order : places`)\n expect(d.relationships[0]!.label).toBe('places')\n })\n\n it('parses relationship with cardinality', () => {\n const d = parse(`classDiagram\n Customer \"1\" --> \"*\" Order : places`)\n expect(d.relationships[0]!.fromCardinality).toBe('1')\n expect(d.relationships[0]!.toCardinality).toBe('*')\n })\n\n it('handles multiple relationships', () => {\n const d = parse(`classDiagram\n Animal <|-- Dog\n Animal <|-- Cat\n Dog *-- Leg`)\n expect(d.relationships).toHaveLength(3)\n })\n})\n\n// ============================================================================\n// Full diagram\n// ============================================================================\n\ndescribe('parseClassDiagram – full diagram', () => {\n it('parses a complete class hierarchy', () => {\n const d = parse(`classDiagram\n class Animal {\n <>\n +String name\n +eat() void\n +sleep() void\n }\n class Dog {\n +String breed\n +bark() void\n }\n class Cat {\n +bool isIndoor\n +meow() void\n }\n Animal <|-- Dog\n Animal <|-- Cat`)\n\n expect(d.classes).toHaveLength(3)\n expect(d.relationships).toHaveLength(2)\n const animal = d.classes.find(c => c.id === 'Animal')!\n expect(animal.annotation).toBe('abstract')\n expect(animal.attributes).toHaveLength(1)\n expect(animal.methods).toHaveLength(2)\n })\n})\n" }, { "path": "src/__tests__/edge-approach-direction.test.ts", "content": "/**\n * Edge Approach Direction Tests\n *\n * Verifies that edges approach target nodes from the correct direction:\n * - Edges entering from TOP should have a vertical final segment (coming from above)\n * - Edges entering from BOTTOM should have a vertical final segment (coming from below)\n * - Edges entering from LEFT should have a horizontal final segment (coming from left)\n * - Edges entering from RIGHT should have a horizontal final segment (coming from right)\n *\n * This prevents visual artifacts where an arrow points to the top of a node\n * but approaches horizontally, creating an awkward bend at the arrowhead.\n */\n\nimport { describe, it, expect } from 'bun:test'\nimport { parseMermaid } from '../parser.ts'\nimport { layoutGraphSync } from '../layout.ts'\n\ninterface Point {\n x: number\n y: number\n}\n\n/**\n * Determine if a segment is primarily vertical (dy > dx).\n */\nfunction isVerticalSegment(p1: Point, p2: Point, tolerance = 1): boolean {\n const dx = Math.abs(p2.x - p1.x)\n const dy = Math.abs(p2.y - p1.y)\n return dy > dx || dx < tolerance\n}\n\n/**\n * Determine if a segment is primarily horizontal (dx > dy).\n */\nfunction isHorizontalSegment(p1: Point, p2: Point, tolerance = 1): boolean {\n const dx = Math.abs(p2.x - p1.x)\n const dy = Math.abs(p2.y - p1.y)\n return dx > dy || dy < tolerance\n}\n\n/**\n * Get the final segment of an edge (last two points).\n */\nfunction getFinalSegment(points: Point[]): { p1: Point; p2: Point } | null {\n if (points.length < 2) return null\n return {\n p1: points[points.length - 2]!,\n p2: points[points.length - 1]!,\n }\n}\n\n/**\n * Get the first segment of an edge (first two points).\n */\nfunction getFirstSegment(points: Point[]): { p1: Point; p2: Point } | null {\n if (points.length < 2) return null\n return {\n p1: points[0]!,\n p2: points[1]!,\n }\n}\n\n/**\n * Determine which side of a node a point is on.\n */\nfunction getApproachSide(\n point: Point,\n nodeX: number,\n nodeY: number,\n nodeWidth: number,\n nodeHeight: number\n): 'top' | 'bottom' | 'left' | 'right' {\n const cx = nodeX + nodeWidth / 2\n const cy = nodeY + nodeHeight / 2\n const dx = point.x - cx\n const dy = point.y - cy\n\n // Check which edge the point is closest to\n const distTop = Math.abs(point.y - nodeY)\n const distBottom = Math.abs(point.y - (nodeY + nodeHeight))\n const distLeft = Math.abs(point.x - nodeX)\n const distRight = Math.abs(point.x - (nodeX + nodeWidth))\n\n const minDist = Math.min(distTop, distBottom, distLeft, distRight)\n\n if (minDist === distTop) return 'top'\n if (minDist === distBottom) return 'bottom'\n if (minDist === distLeft) return 'left'\n return 'right'\n}\n\n// ============================================================================\n// Test Cases\n// ============================================================================\n\ndescribe('Edge Approach Direction', () => {\n describe('TD layout - edges should approach targets vertically from top', () => {\n it('simple two-node vertical: final segment should be vertical', () => {\n const parsed = parseMermaid(`graph TD\n A --> B`)\n const positioned = layoutGraphSync(parsed, {})\n\n const edge = positioned.edges.find(\n (e) => e.source === 'A' && e.target === 'B'\n )\n expect(edge).toBeDefined()\n\n const finalSeg = getFinalSegment(edge!.points)\n expect(finalSeg).not.toBeNull()\n\n // Edge enters B from top, so final segment should be vertical\n expect(isVerticalSegment(finalSeg!.p1, finalSeg!.p2)).toBe(true)\n })\n\n it('fan-out pattern: multiple edges to one target should all be vertical', () => {\n // This is the exact pattern from the screenshot\n const parsed = parseMermaid(`graph TD\n Input --> Processor\n Config --> Processor`)\n const positioned = layoutGraphSync(parsed, {})\n\n const processorNode = positioned.nodes.find((n) => n.id === 'Processor')\n expect(processorNode).toBeDefined()\n\n // Both edges should approach Processor with vertical final segments\n for (const edge of positioned.edges) {\n if (edge.target === 'Processor') {\n const finalSeg = getFinalSegment(edge.points)\n expect(finalSeg).not.toBeNull()\n\n // The final segment should be vertical (approaching top edge)\n const isVertical = isVerticalSegment(finalSeg!.p1, finalSeg!.p2)\n expect(isVertical).toBe(true)\n }\n }\n })\n\n it('fan-in and fan-out pattern: all vertical approaches', () => {\n // Full pattern from the screenshot\n const parsed = parseMermaid(`graph TD\n Input --> Processor\n Config --> Processor\n Processor --> Output\n Processor --> Log`)\n const positioned = layoutGraphSync(parsed, {})\n\n // Check all edges\n for (const edge of positioned.edges) {\n const targetNode = positioned.nodes.find((n) => n.id === edge.target)\n expect(targetNode).toBeDefined()\n\n const finalSeg = getFinalSegment(edge.points)\n expect(finalSeg).not.toBeNull()\n\n // Determine which side the edge approaches\n const approachSide = getApproachSide(\n finalSeg!.p2,\n targetNode!.x,\n targetNode!.y,\n targetNode!.width,\n targetNode!.height\n )\n\n // For top/bottom approach, final segment must be vertical\n // For left/right approach, final segment must be horizontal\n if (approachSide === 'top' || approachSide === 'bottom') {\n expect(isVerticalSegment(finalSeg!.p1, finalSeg!.p2)).toBe(true)\n } else {\n expect(isHorizontalSegment(finalSeg!.p1, finalSeg!.p2)).toBe(true)\n }\n }\n })\n })\n\n describe('LR layout - edges should approach targets horizontally', () => {\n it('simple two-node horizontal: final segment should be horizontal', () => {\n const parsed = parseMermaid(`graph LR\n A --> B`)\n const positioned = layoutGraphSync(parsed, {})\n\n const edge = positioned.edges.find(\n (e) => e.source === 'A' && e.target === 'B'\n )\n expect(edge).toBeDefined()\n\n const finalSeg = getFinalSegment(edge!.points)\n expect(finalSeg).not.toBeNull()\n\n // Edge enters B from left, so final segment should be horizontal\n expect(isHorizontalSegment(finalSeg!.p1, finalSeg!.p2)).toBe(true)\n })\n\n it('fan-out pattern in LR: final segments should be horizontal', () => {\n const parsed = parseMermaid(`graph LR\n Input --> Processor\n Config --> Processor`)\n const positioned = layoutGraphSync(parsed, {})\n\n for (const edge of positioned.edges) {\n if (edge.target === 'Processor') {\n const finalSeg = getFinalSegment(edge.points)\n expect(finalSeg).not.toBeNull()\n expect(isHorizontalSegment(finalSeg!.p1, finalSeg!.p2)).toBe(true)\n }\n }\n })\n })\n\n describe('Source exit direction matches side', () => {\n it('TD layout: edges should exit source vertically from bottom', () => {\n const parsed = parseMermaid(`graph TD\n A --> B\n A --> C`)\n const positioned = layoutGraphSync(parsed, {})\n\n for (const edge of positioned.edges) {\n if (edge.source === 'A') {\n const firstSeg = getFirstSegment(edge.points)\n expect(firstSeg).not.toBeNull()\n\n // Edge exits A from bottom, so first segment should be vertical\n expect(isVerticalSegment(firstSeg!.p1, firstSeg!.p2)).toBe(true)\n }\n }\n })\n\n it('LR layout: edges should exit source horizontally from right', () => {\n const parsed = parseMermaid(`graph LR\n A --> B\n A --> C`)\n const positioned = layoutGraphSync(parsed, {})\n\n for (const edge of positioned.edges) {\n if (edge.source === 'A') {\n const firstSeg = getFirstSegment(edge.points)\n expect(firstSeg).not.toBeNull()\n\n // Edge exits A from right, so first segment should be horizontal\n expect(isHorizontalSegment(firstSeg!.p1, firstSeg!.p2)).toBe(true)\n }\n }\n })\n })\n\n describe('Diamond shapes - approach direction preserved', () => {\n it('edges to diamond should approach with correct direction', () => {\n const parsed = parseMermaid(`graph TD\n A --> B{Decision}\n B -->|Yes| C\n B -->|No| D`)\n const positioned = layoutGraphSync(parsed, {})\n\n // Edge A → B should approach B's top vertically\n const edgeAB = positioned.edges.find(\n (e) => e.source === 'A' && e.target === 'B'\n )\n expect(edgeAB).toBeDefined()\n\n const finalSegAB = getFinalSegment(edgeAB!.points)\n expect(finalSegAB).not.toBeNull()\n expect(isVerticalSegment(finalSegAB!.p1, finalSegAB!.p2)).toBe(true)\n })\n\n it('edges should terminate at diamond vertices, not bounding box', () => {\n // In TD layout, edges approaching from above should hit the top vertex,\n // and edges leaving downward should start from the bottom vertex.\n const parsed = parseMermaid(`graph TD\n A[Start] --> B{Decision}\n B --> C[End]`)\n const positioned = layoutGraphSync(parsed, {})\n\n const diamond = positioned.nodes.find(n => n.id === 'B')\n expect(diamond).toBeDefined()\n expect(diamond!.shape).toBe('diamond')\n\n // Calculate diamond vertices\n const cx = diamond!.x + diamond!.width / 2\n const topY = diamond!.y\n const bottomY = diamond!.y + diamond!.height\n\n // Edge A → B should end at the diamond's top vertex\n const edgeAB = positioned.edges.find(e => e.source === 'A' && e.target === 'B')\n expect(edgeAB).toBeDefined()\n const endPointAB = edgeAB!.points[edgeAB!.points.length - 1]!\n expect(endPointAB.x).toBeCloseTo(cx, 0)\n expect(endPointAB.y).toBeCloseTo(topY, 0)\n\n // Edge B → C should start from the diamond's bottom vertex\n const edgeBC = positioned.edges.find(e => e.source === 'B' && e.target === 'C')\n expect(edgeBC).toBeDefined()\n const startPointBC = edgeBC!.points[0]!\n expect(startPointBC.x).toBeCloseTo(cx, 0)\n expect(startPointBC.y).toBeCloseTo(bottomY, 0)\n })\n })\n})\n" }, { "path": "src/__tests__/er-integration.test.ts", "content": "/**\n * Integration tests for ER diagrams — end-to-end parse → layout → render.\n */\nimport { describe, it, expect } from 'bun:test'\nimport { renderMermaidSVG } from '../index.ts'\n\ndescribe('renderMermaidSVG – ER diagrams', () => {\n it('renders a basic ER diagram to valid SVG', () => {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER ||--o{ ORDER : places`)\n expect(svg).toContain('')\n expect(svg).toContain('CUSTOMER')\n expect(svg).toContain('ORDER')\n expect(svg).toContain('places')\n })\n\n it('renders entity with attributes', () => {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n }`)\n expect(svg).toContain('CUSTOMER')\n expect(svg).toContain('id')\n expect(svg).toContain('name')\n expect(svg).toContain('email')\n // PK/UK key badges\n expect(svg).toContain('PK')\n expect(svg).toContain('UK')\n })\n\n it('renders relationship lines between entities', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--o{ B : has`)\n // Should have polyline for the relationship\n expect(svg).toContain(' {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER ||--o{ ORDER : places`)\n // Crow's foot markers are rendered as lines\n const lineCount = (svg.match(/ {\n const svg = renderMermaidSVG(`erDiagram\n USER ||..o{ LOG : generates`)\n expect(svg).toContain('stroke-dasharray')\n })\n\n it('renders relationship labels with background pills', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--o{ B : places`)\n expect(svg).toContain('places')\n // Background pill behind label\n expect(svg).toContain('rx=\"2\"')\n })\n\n it('renders with dark colors', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--|| B : links`, { bg: '#18181B', fg: '#FAFAFA' })\n expect(svg).toContain('--bg:#18181B')\n })\n\n it('renders entity boxes with header and attribute rows', () => {\n const svg = renderMermaidSVG(`erDiagram\n USER {\n int id PK\n string name\n string email\n }`)\n // Should have rectangles for entity box and header\n const rectCount = (svg.match(/ {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n }\n ORDER {\n int id PK\n date created\n int customer_id FK\n }\n PRODUCT {\n int id PK\n string name\n float price\n }\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : includes`)\n expect(svg).toContain('CUSTOMER')\n expect(svg).toContain('ORDER')\n expect(svg).toContain('PRODUCT')\n expect(svg).toContain('LINE_ITEM')\n expect(svg).toContain('places')\n expect(svg).toContain('contains')\n expect(svg).toContain('includes')\n })\n})\n\n// ============================================================================\n// Label positioning tests — verify that relationship labels sit ON the\n// polyline path, not floating in space. The renderer's midpoint() computes\n// the arc-length midpoint of the relationship polyline. These tests parse\n// the SVG output to verify positioning for both straight and multi-segment\n// (orthogonal, bent) paths.\n// ============================================================================\n\n/** Extract entity box rects from SVG: returns Map */\nfunction extractEntityBoxes(svg: string): Map {\n const boxes = new Map()\n\n // Entity header text: LABEL\n const headerPattern = /]*font-weight=\"700\"[^>]*>([^<]+)<\\/text>/g\n let match\n while ((match = headerPattern.exec(svg)) !== null) {\n const centerX = parseFloat(match[1]!)\n const label = match[3]!\n\n // Find the corresponding outer rect that contains this text.\n const rectPattern = /= rx && centerX <= rx + rw) {\n boxes.set(label, { x: rx, y: ry, width: rw, height: rh, rightEdge: rx + rw })\n break\n }\n }\n }\n\n return boxes\n}\n\n/** Extract relationship label positions from SVG: returns Map */\nfunction extractLabelPositions(svg: string): Map {\n const labels = new Map()\n // Relationship labels use font-size=\"11\" font-weight=\"400\" — match flexibly\n // regardless of attribute order\n const labelPattern = /]*font-size=\"11\"[^>]*font-weight=\"400\"[^>]*>([^<]+)<\\/text>/g\n let match\n while ((match = labelPattern.exec(svg)) !== null) {\n labels.set(match[3]!, { x: parseFloat(match[1]!), y: parseFloat(match[2]!) })\n }\n return labels\n}\n\n/** Extract polyline paths from SVG: returns array of point arrays */\nfunction extractPolylines(svg: string): Array> {\n const polylines: Array> = []\n // Match polylines with points attribute anywhere in the tag\n const pattern = /]*points=\"([^\"]+)\"[^>]*>/g\n let match\n while ((match = pattern.exec(svg)) !== null) {\n const points = match[1]!.split(' ').map(p => {\n const [x, y] = p.split(',')\n return { x: parseFloat(x!), y: parseFloat(y!) }\n })\n polylines.push(points)\n }\n return polylines\n}\n\n/**\n * Check if a point lies on (or very near) a polyline path.\n * Computes the minimum distance from the point to any segment of the polyline.\n * Returns the minimum distance in pixels.\n */\nfunction distanceToPolyline(point: { x: number; y: number }, polyline: Array<{ x: number; y: number }>): number {\n let minDist = Infinity\n for (let i = 1; i < polyline.length; i++) {\n const a = polyline[i - 1]!\n const b = polyline[i]!\n const dist = pointToSegmentDist(point, a, b)\n if (dist < minDist) minDist = dist\n }\n return minDist\n}\n\n/** Distance from point P to line segment AB */\nfunction pointToSegmentDist(p: { x: number; y: number }, a: { x: number; y: number }, b: { x: number; y: number }): number {\n const dx = b.x - a.x\n const dy = b.y - a.y\n const lenSq = dx * dx + dy * dy\n if (lenSq === 0) return Math.sqrt((p.x - a.x) ** 2 + (p.y - a.y) ** 2)\n // Project P onto AB, clamped to [0,1]\n const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq))\n const projX = a.x + t * dx\n const projY = a.y + t * dy\n return Math.sqrt((p.x - projX) ** 2 + (p.y - projY) ** 2)\n}\n\n/**\n * Find the polyline closest to a label position.\n * Returns the minimum distance from the label to any polyline.\n */\nfunction closestPolylineDistance(label: { x: number; y: number }, polylines: Array>): number {\n let minDist = Infinity\n for (const pl of polylines) {\n const dist = distanceToPolyline(label, pl)\n if (dist < minDist) minDist = dist\n }\n return minDist\n}\n\n// ─── Straight-line label positioning ────────────────────────────────────────\n\ndescribe('renderMermaidSVG – ER label positioning (straight lines)', () => {\n it('label is between the two entity boxes horizontally', () => {\n const svg = renderMermaidSVG(`erDiagram\n TEACHER }|--o{ COURSE : teaches`)\n\n const boxes = extractEntityBoxes(svg)\n const labels = extractLabelPositions(svg)\n\n const teacher = boxes.get('TEACHER')!\n const course = boxes.get('COURSE')!\n const label = labels.get('teaches')!\n\n // Label x should be between the two entity box edges\n const leftEdge = Math.min(teacher.rightEdge, course.rightEdge)\n const rightEdge = Math.max(teacher.x, course.x)\n expect(label.x).toBeGreaterThan(leftEdge)\n expect(label.x).toBeLessThan(rightEdge)\n })\n\n it('label has minimum clearance from entity box edges', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--o{ B : links`)\n\n const boxes = extractEntityBoxes(svg)\n const labels = extractLabelPositions(svg)\n\n const boxA = boxes.get('A')!\n const boxB = boxes.get('B')!\n const label = labels.get('links')!\n\n const minClearance = 10\n const leftBox = boxA.x < boxB.x ? boxA : boxB\n const rightBox = boxA.x < boxB.x ? boxB : boxA\n\n expect(label.x - leftBox.rightEdge).toBeGreaterThanOrEqual(minClearance)\n expect(rightBox.x - label.x).toBeGreaterThanOrEqual(minClearance)\n })\n\n it('label is approximately at the horizontal midpoint of the gap', () => {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER ||--o{ ORDER : places`)\n\n const boxes = extractEntityBoxes(svg)\n const labels = extractLabelPositions(svg)\n\n const customer = boxes.get('CUSTOMER')!\n const order = boxes.get('ORDER')!\n const label = labels.get('places')!\n\n const leftBox = customer.x < order.x ? customer : order\n const rightBox = customer.x < order.x ? order : customer\n const gapMidpoint = (leftBox.rightEdge + rightBox.x) / 2\n\n expect(Math.abs(label.x - gapMidpoint)).toBeLessThan(15)\n })\n\n it('label sits on (or very near) its relationship polyline', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--o{ B : connects`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n const label = labels.get('connects')!\n\n // Label should be within 2px of its closest polyline segment\n const dist = closestPolylineDistance(label, polylines)\n expect(dist).toBeLessThan(2)\n })\n})\n\n// ─── Multi-entity diagrams with orthogonal routing ──────────────────────────\n\ndescribe('renderMermaidSVG – ER label positioning (multi-segment paths)', () => {\n it('all labels in a multi-relationship diagram sit near a polyline', () => {\n const svg = renderMermaidSVG(`erDiagram\n ORDER ||--|{ LINE_ITEM : contains\n ORDER ||..o{ SHIPMENT : ships-via\n PRODUCT ||--o{ LINE_ITEM : includes\n PRODUCT ||..o{ REVIEW : receives`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n\n // Every relationship label should be found\n for (const name of ['contains', 'ships-via', 'includes', 'receives']) {\n expect(labels.has(name)).toBe(true)\n }\n\n // Every label should be within 2px of a polyline segment\n for (const [, pos] of labels) {\n const dist = closestPolylineDistance(pos, polylines)\n expect(dist).toBeLessThan(2)\n }\n })\n\n it('non-identifying relationship labels also sit on their dashed polylines', () => {\n const svg = renderMermaidSVG(`erDiagram\n USER ||..o{ LOG_ENTRY : generates\n USER ||..o{ SESSION : opens`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n\n expect(labels.has('generates')).toBe(true)\n expect(labels.has('opens')).toBe(true)\n\n for (const [, pos] of labels) {\n const dist = closestPolylineDistance(pos, polylines)\n expect(dist).toBeLessThan(2)\n }\n })\n\n it('label on vertical segment has x matching the segment x', () => {\n const svg = renderMermaidSVG(`erDiagram\n ORDER ||--|{ LINE_ITEM : contains\n ORDER ||..o{ SHIPMENT : ships-via\n PRODUCT ||--o{ LINE_ITEM : includes\n PRODUCT ||..o{ REVIEW : receives`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n\n // For each label, find the closest polyline and verify it's near a segment\n for (const [, pos] of labels) {\n const dist = closestPolylineDistance(pos, polylines)\n expect(dist).toBeLessThan(2)\n }\n })\n\n it('labels in e-commerce schema all sit on their polylines', () => {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : includes`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n\n expect(labels.size).toBe(3)\n for (const [, pos] of labels) {\n const dist = closestPolylineDistance(pos, polylines)\n expect(dist).toBeLessThan(2)\n }\n })\n\n it('label is not at the endpoint of any polyline', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--o{ B : links`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n const label = labels.get('links')!\n\n for (const pl of polylines) {\n const start = pl[0]!\n const end = pl[pl.length - 1]!\n const distToStart = Math.sqrt((label.x - start.x) ** 2 + (label.y - start.y) ** 2)\n const distToEnd = Math.sqrt((label.x - end.x) ** 2 + (label.y - end.y) ** 2)\n // At least one endpoint should be far from the label (>5px)\n expect(Math.min(distToStart, distToEnd)).toBeGreaterThan(5)\n }\n })\n\n it('multiple labels in same diagram have distinct positions', () => {\n const svg = renderMermaidSVG(`erDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : includes`)\n\n const labels = extractLabelPositions(svg)\n const positions = [...labels.values()]\n\n // Each label should have a unique position (no two labels at same x,y)\n for (let i = 0; i < positions.length; i++) {\n for (let j = i + 1; j < positions.length; j++) {\n const dx = positions[i]!.x - positions[j]!.x\n const dy = positions[i]!.y - positions[j]!.y\n const dist = Math.sqrt(dx * dx + dy * dy)\n expect(dist).toBeGreaterThan(10) // at least 10px apart\n }\n }\n })\n\n it('label background pill also sits on the polyline', () => {\n const svg = renderMermaidSVG(`erDiagram\n A ||--o{ B : test`)\n\n const labels = extractLabelPositions(svg)\n const polylines = extractPolylines(svg)\n const label = labels.get('test')!\n\n // Find the background pill rect (rx=\"2\" ry=\"2\" near the label position)\n const pillPattern = / l.trim()).filter(l => l.length > 0 && !l.startsWith('%%'))\n return parseErDiagram(lines)\n}\n\n// ============================================================================\n// Entity definitions\n// ============================================================================\n\ndescribe('parseErDiagram – entity definitions', () => {\n it('parses an entity with attributes', () => {\n const d = parse(`erDiagram\n CUSTOMER {\n string name\n int age\n string email\n }`)\n expect(d.entities).toHaveLength(1)\n expect(d.entities[0]!.id).toBe('CUSTOMER')\n expect(d.entities[0]!.attributes).toHaveLength(3)\n expect(d.entities[0]!.attributes[0]!.type).toBe('string')\n expect(d.entities[0]!.attributes[0]!.name).toBe('name')\n })\n\n it('parses attributes with PK key', () => {\n const d = parse(`erDiagram\n USER {\n int id PK\n string name\n }`)\n expect(d.entities[0]!.attributes[0]!.keys).toContain('PK')\n })\n\n it('parses attributes with FK key', () => {\n const d = parse(`erDiagram\n ORDER {\n int id PK\n int customer_id FK\n }`)\n expect(d.entities[0]!.attributes[1]!.keys).toContain('FK')\n })\n\n it('parses attributes with UK key', () => {\n const d = parse(`erDiagram\n USER {\n string email UK\n }`)\n expect(d.entities[0]!.attributes[0]!.keys).toContain('UK')\n })\n\n it('parses attributes with comment', () => {\n const d = parse(`erDiagram\n USER {\n string email UK \"user email address\"\n }`)\n expect(d.entities[0]!.attributes[0]!.comment).toBe('user email address')\n })\n\n it('parses multiple entities', () => {\n const d = parse(`erDiagram\n CUSTOMER {\n int id PK\n string name\n }\n ORDER {\n int id PK\n date created\n }`)\n expect(d.entities).toHaveLength(2)\n })\n\n it('auto-creates entities from relationships', () => {\n const d = parse(`erDiagram\n CUSTOMER ||--o{ ORDER : places`)\n expect(d.entities).toHaveLength(2)\n expect(d.entities.find(e => e.id === 'CUSTOMER')).toBeDefined()\n expect(d.entities.find(e => e.id === 'ORDER')).toBeDefined()\n })\n})\n\n// ============================================================================\n// Relationships\n// ============================================================================\n\ndescribe('parseErDiagram – relationships', () => {\n it('parses exactly-one to zero-or-many: ||--o{', () => {\n const d = parse(`erDiagram\n CUSTOMER ||--o{ ORDER : places`)\n expect(d.relationships).toHaveLength(1)\n expect(d.relationships[0]!.entity1).toBe('CUSTOMER')\n expect(d.relationships[0]!.entity2).toBe('ORDER')\n expect(d.relationships[0]!.cardinality1).toBe('one')\n expect(d.relationships[0]!.cardinality2).toBe('zero-many')\n expect(d.relationships[0]!.label).toBe('places')\n expect(d.relationships[0]!.identifying).toBe(true)\n })\n\n it('parses zero-or-one to one-or-more: |o--|{', () => {\n const d = parse(`erDiagram\n A |o--|{ B : connects`)\n expect(d.relationships[0]!.cardinality1).toBe('zero-one')\n expect(d.relationships[0]!.cardinality2).toBe('many')\n })\n\n it('parses exactly-one to exactly-one: ||--||', () => {\n const d = parse(`erDiagram\n PERSON ||--|| PASSPORT : has`)\n expect(d.relationships[0]!.cardinality1).toBe('one')\n expect(d.relationships[0]!.cardinality2).toBe('one')\n })\n\n it('parses non-identifying relationship (dotted): ||..o{', () => {\n const d = parse(`erDiagram\n USER ||..o{ LOG : generates`)\n expect(d.relationships[0]!.identifying).toBe(false)\n })\n\n it('parses one-or-more to zero-or-many: }|--o{', () => {\n const d = parse(`erDiagram\n PRODUCT }|--o{ TAG : has`)\n expect(d.relationships[0]!.cardinality1).toBe('many')\n expect(d.relationships[0]!.cardinality2).toBe('zero-many')\n })\n\n it('handles multiple relationships', () => {\n const d = parse(`erDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : appears_in`)\n expect(d.relationships).toHaveLength(3)\n })\n})\n\n// ============================================================================\n// Full diagram\n// ============================================================================\n\ndescribe('parseErDiagram – full diagram', () => {\n it('parses a complete e-commerce schema', () => {\n const d = parse(`erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n }\n ORDER {\n int id PK\n date created\n int customer_id FK\n }\n LINE_ITEM {\n int id PK\n int quantity\n int order_id FK\n int product_id FK\n }\n PRODUCT {\n int id PK\n string name\n float price\n }\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : includes`)\n\n expect(d.entities).toHaveLength(4)\n expect(d.relationships).toHaveLength(3)\n\n const customer = d.entities.find(e => e.id === 'CUSTOMER')!\n expect(customer.attributes).toHaveLength(3)\n expect(customer.attributes[0]!.keys).toContain('PK')\n expect(customer.attributes[2]!.keys).toContain('UK')\n\n const lineItem = d.entities.find(e => e.id === 'LINE_ITEM')!\n expect(lineItem.attributes.filter(a => a.keys.includes('FK'))).toHaveLength(2)\n })\n})\n" }, { "path": "src/__tests__/integration.test.ts", "content": "/**\n * Integration tests for the full renderMermaidSVG pipeline.\n *\n * These tests exercise parse → layout → render end-to-end.\n * They use the synchronous ELK.js-based rendering pipeline.\n *\n * Covers: original features, Batch 1 (new shapes), Batch 2 (edges, styles),\n * and Batch 3 (state diagrams).\n */\nimport { describe, it, expect } from 'bun:test'\nimport { renderMermaidSVG } from '../index.ts'\n\n// ============================================================================\n// Basic rendering\n// ============================================================================\n\ndescribe('renderMermaidSVG – basic', () => {\n it('renders a simple graph to valid SVG', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B')\n expect(svg).toContain('')\n // Should contain both nodes\n expect(svg).toContain('>A')\n expect(svg).toContain('>B')\n })\n\n it('renders a graph with labeled nodes', () => {\n const svg = renderMermaidSVG('graph TD\\n A[Start] --> B[End]')\n expect(svg).toContain('>Start')\n expect(svg).toContain('>End')\n })\n\n it('renders edges with labels', () => {\n const svg = renderMermaidSVG('graph TD\\n A -->|Yes| B')\n expect(svg).toContain('>Yes')\n })\n})\n\n// ============================================================================\n// Options\n// ============================================================================\n\ndescribe('renderMermaidSVG – options', () => {\n it('applies dark colors', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B', { bg: '#18181B', fg: '#FAFAFA' })\n expect(svg).toContain('--bg:#18181B')\n })\n\n it('applies default light colors', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B')\n expect(svg).toContain('--bg:#FFFFFF')\n })\n\n it('applies custom font', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B', { font: 'JetBrains Mono' })\n expect(svg).toContain(\"'JetBrains Mono'\")\n })\n\n it('respects padding option', () => {\n const small = renderMermaidSVG('graph TD\\n A --> B', { padding: 10 })\n const large = renderMermaidSVG('graph TD\\n A --> B', { padding: 80 })\n const getWidth = (svg: string) => {\n const match = svg.match(/width=\"([\\d.]+)\"/)\n return match ? Number(match[1]) : 0\n }\n expect(getWidth(large)).toBeGreaterThan(getWidth(small))\n })\n})\n\n// ============================================================================\n// Complex diagrams\n// ============================================================================\n\ndescribe('renderMermaidSVG – complex diagrams', () => {\n it('renders all original node shapes', () => {\n const svg = renderMermaidSVG(`graph TD\n A[Rectangle] --> B(Rounded)\n B --> C{Diamond}\n C --> D([Stadium])\n D --> E((Circle))`)\n\n expect(svg).toContain('>Rectangle')\n expect(svg).toContain('>Rounded')\n expect(svg).toContain('>Diamond')\n expect(svg).toContain('>Stadium')\n expect(svg).toContain('>Circle')\n expect(svg).toContain(' {\n const svg = renderMermaidSVG(`graph TD\n A -->|solid| B\n B -.->|dotted| C\n C ==>|thick| D`)\n\n expect(svg).toContain('>solid')\n expect(svg).toContain('>dotted')\n expect(svg).toContain('>thick')\n expect(svg).toContain('stroke-dasharray=\"4 4\"')\n })\n\n it('renders subgraphs', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph Backend\n A[API] --> B[DB]\n end\n C[Client] --> A`)\n\n expect(svg).toContain('>Backend')\n expect(svg).toContain('>API')\n expect(svg).toContain('>DB')\n expect(svg).toContain('>Client')\n })\n\n it('renders a complex real-world diagram', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph ci [CI Pipeline]\n A[Push Code] --> B{Tests Pass?}\n B -->|Yes| C[Build Docker]\n B -->|No| D[Fix & Retry]\n D --> A\n end\n C --> E([Deploy to Staging])\n E --> F{QA Approved?}\n F -->|Yes| G((Production))\n F -->|No| D`)\n\n expect(svg).toContain('')\n expect(svg).toContain('>CI Pipeline')\n expect(svg).toContain('>Push Code')\n expect(svg).toContain('>Tests Pass?')\n expect(svg).toContain('>Yes')\n expect(svg).toContain('>No')\n expect(svg).toContain('>Production')\n })\n\n it('renders different directions', () => {\n const lr = renderMermaidSVG('graph LR\\n A --> B --> C')\n const td = renderMermaidSVG('graph TD\\n A --> B --> C')\n\n const getDimensions = (svg: string) => {\n const w = svg.match(/width=\"([\\d.]+)\"/)\n const h = svg.match(/height=\"([\\d.]+)\"/)\n return { width: Number(w?.[1] ?? 0), height: Number(h?.[1] ?? 0) }\n }\n\n const lrDims = getDimensions(lr)\n const tdDims = getDimensions(td)\n\n expect(lrDims.width).toBeGreaterThan(tdDims.width)\n expect(tdDims.height).toBeGreaterThan(lrDims.height)\n })\n})\n\n// ============================================================================\n// Batch 1: New shapes (end-to-end)\n// ============================================================================\n\ndescribe('renderMermaidSVG – Batch 1 shapes', () => {\n it('renders subroutine shape with inner vertical lines', () => {\n const svg = renderMermaidSVG('graph TD\\n A[[Subroutine]] --> B')\n expect(svg).toContain('>Subroutine')\n expect(svg).toContain(' elements', () => {\n const svg = renderMermaidSVG('graph TD\\n A(((Important))) --> B')\n expect(svg).toContain('>Important')\n const circleCount = (svg.match(/ {\n const svg = renderMermaidSVG('graph TD\\n A{{Decision}} --> B')\n expect(svg).toContain('>Decision')\n expect(svg).toContain(' {\n it('renders cylinder / database', () => {\n const svg = renderMermaidSVG('graph TD\\n A[(Database)] --> B')\n expect(svg).toContain('>Database')\n expect(svg).toContain(' {\n const svg = renderMermaidSVG('graph TD\\n A>Flag Shape] --> B')\n expect(svg).toContain('>Flag Shape')\n expect(svg).toContain(' {\n const svg = renderMermaidSVG('graph TD\\n A[/Wider Bottom\\\\] --> B[\\\\Wider Top/]')\n expect(svg).toContain('>Wider Bottom')\n expect(svg).toContain('>Wider Top')\n })\n})\n\ndescribe('renderMermaidSVG – Batch 2 edge features', () => {\n it('renders no-arrow edges', () => {\n const svg = renderMermaidSVG('graph TD\\n A --- B')\n expect(svg).toContain(' {\n const svg = renderMermaidSVG('graph TD\\n A <--> B')\n expect(svg).toContain('marker-end=\"url(#arrowhead)\"')\n expect(svg).toContain('marker-start=\"url(#arrowhead-start)\"')\n })\n\n it('renders parallel links with &', () => {\n const svg = renderMermaidSVG('graph TD\\n A & B --> C')\n // Should have node labels for A, B, and C\n expect(svg).toContain('>A')\n expect(svg).toContain('>B')\n expect(svg).toContain('>C')\n // Should have 2 edges (A→C and B→C)\n const polylines = (svg.match(/ {\n const svg = renderMermaidSVG(`graph TD\n A[Red Node] --> B\n style A fill:#ff0000,stroke:#cc0000`)\n expect(svg).toContain('fill=\"#ff0000\"')\n expect(svg).toContain('stroke=\"#cc0000\"')\n })\n})\n\n// ============================================================================\n// Batch 3: State diagrams (end-to-end)\n// ============================================================================\n\ndescribe('renderMermaidSVG – state diagrams', () => {\n it('renders a basic state diagram', () => {\n const svg = renderMermaidSVG(`stateDiagram-v2\n [*] --> Idle\n Idle --> Active : start\n Active --> Done`)\n\n expect(svg).toContain('')\n expect(svg).toContain('>Idle')\n expect(svg).toContain('>Active')\n expect(svg).toContain('>Done')\n expect(svg).toContain('>start')\n })\n\n it('renders start pseudostate as filled circle', () => {\n const svg = renderMermaidSVG(`stateDiagram-v2\n [*] --> Ready`)\n // Start pseudostate: filled circle with stroke=\"none\"\n expect(svg).toContain('stroke=\"none\"')\n expect(svg).toContain(' {\n const svg = renderMermaidSVG(`stateDiagram-v2\n Done --> [*]`)\n // End pseudostate: two circles (outer ring + inner filled)\n const circleCount = (svg.match(/ {\n const svg = renderMermaidSVG(`stateDiagram-v2\n state Processing {\n parse --> validate\n validate --> execute\n }\n [*] --> Processing`)\n\n expect(svg).toContain('>Processing')\n expect(svg).toContain('>parse')\n expect(svg).toContain('>validate')\n expect(svg).toContain('>execute')\n })\n\n it('renders full state diagram lifecycle', () => {\n const svg = renderMermaidSVG(`stateDiagram-v2\n [*] --> Idle\n Idle --> Processing : submit\n state Processing {\n parse --> validate\n validate --> execute\n }\n Processing --> Complete : done\n Complete --> [*]`)\n\n expect(svg).toContain('')\n expect(svg).toContain('>Idle')\n expect(svg).toContain('>Complete')\n expect(svg).toContain('>Processing')\n expect(svg).toContain('>submit')\n expect(svg).toContain('>done')\n })\n\n it('cycle edge labels do not overlap (Running ↔ Paused)', () => {\n const svg = renderMermaidSVG(`stateDiagram-v2\n [*] --> Ready\n Ready --> Running : start\n Running --> Paused : pause\n Paused --> Running : resume\n Running --> Stopped : stop\n Stopped --> [*]`)\n\n // Extract all label pill elements (rx=\"2\" distinguishes them from node rects)\n const pillPattern = / b.x\n const overlapY = a.y < b.y + b.h && a.y + a.h > b.y\n expect(\n overlapX && overlapY,\n `Label pills ${i} (x=${a.x},y=${a.y},w=${a.w},h=${a.h}) and ${j} (x=${b.x},y=${b.y},w=${b.w},h=${b.h}) overlap`\n ).toBe(false)\n }\n }\n })\n})\n\n// ============================================================================\n// Source order and deduplication\n// ============================================================================\n\ndescribe('renderMermaidSVG – source order', () => {\n it('does not duplicate composite state nodes in SVG', () => {\n const svg = renderMermaidSVG(`stateDiagram-v2\n [*] --> Idle\n Idle --> Processing : submit\n state Processing {\n parse --> validate\n validate --> execute\n }\n Processing --> Complete : done\n Complete --> [*]`)\n\n // \"Processing\" should appear exactly once as a group label, not also as a standalone node.\n const processingLabels = (svg.match(/>Processing<\\/text>/g) ?? []).length\n expect(processingLabels).toBe(1)\n })\n\n it('renders subgraph-first diagrams with subgraph at top in TD layout', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph ci [CI Pipeline]\n A[Push Code] --> B{Tests Pass?}\n B -->|Yes| C[Build Image]\n end\n C --> D([Deploy])\n D --> E{QA?}\n E -->|Yes| F((Production))`)\n\n // Verify all elements render (no crashes from source order changes)\n expect(svg).toContain('>CI Pipeline')\n expect(svg).toContain('>Push Code')\n expect(svg).toContain('>Deploy')\n expect(svg).toContain('>Production')\n })\n})\n\n// ============================================================================\n// Edge cases: self-loops, empty subgraphs, nesting depth\n// ============================================================================\n\ndescribe('renderMermaidSVG – edge cases', () => {\n it('renders a self-loop (source === target)', () => {\n const svg = renderMermaidSVG(`graph TD\n A[Node] --> A`)\n\n expect(svg).toContain('Node')\n // Should have at least one edge polyline\n expect(svg).toContain(' {\n const svg = renderMermaidSVG(`graph TD\n A[Retry] -->|again| A`)\n\n expect(svg).toContain('>Retry')\n expect(svg).toContain('>again')\n })\n\n it('renders an empty subgraph without crashing', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph Empty\n end\n A --> B`)\n\n expect(svg).toContain('Empty')\n expect(svg).toContain('>A')\n expect(svg).toContain('>B')\n })\n\n it('renders edges targeting an empty subgraph', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph S [Empty Group]\n end\n A --> S\n S --> B`)\n\n expect(svg).toContain('Empty Group')\n expect(svg).toContain('>A')\n expect(svg).toContain('>B')\n })\n\n it('renders a single-node subgraph', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph Single\n A[Only Node]\n end\n B --> A`)\n\n expect(svg).toContain('>Single')\n expect(svg).toContain('>Only Node')\n expect(svg).toContain('>B')\n })\n\n it('renders 3-level nested subgraphs', () => {\n const svg = renderMermaidSVG(`graph TD\n subgraph Level1 [Outer]\n subgraph Level2 [Middle]\n subgraph Level3 [Inner]\n A[Deep Node] --> B[Also Deep]\n end\n end\n end\n C[Outside] --> A`)\n\n expect(svg).toContain('>Outer')\n expect(svg).toContain('>Middle')\n expect(svg).toContain('>Inner')\n expect(svg).toContain('>Deep Node')\n expect(svg).toContain('>Also Deep')\n expect(svg).toContain('>Outside')\n })\n\n it('renders 3-level nested composite states', () => {\n const svg = renderMermaidSVG(`stateDiagram-v2\n [*] --> Active\n state Active {\n state Processing {\n state Validating {\n check --> verify\n }\n }\n }\n Active --> [*]`)\n\n expect(svg).toContain('Active')\n expect(svg).toContain('>Processing')\n expect(svg).toContain('>Validating')\n expect(svg).toContain('>check')\n expect(svg).toContain('>verify')\n })\n})\n\n// ============================================================================\n// All new shapes in one diagram (end-to-end stress test)\n// ============================================================================\n\ndescribe('renderMermaidSVG – all shapes combined', () => {\n it('renders a diagram with all 12 flowchart shapes', () => {\n const svg = renderMermaidSVG(`graph LR\n A[Rectangle] --> B(Rounded)\n B --> C{Diamond}\n C --> D([Stadium])\n D --> E((Circle))\n E --> F[[Subroutine]]\n F --> G(((DoubleCircle)))\n G --> H{{Hexagon}}\n H --> I[(Cylinder)]\n I --> J>Flag]\n J --> K[/Trapezoid\\\\]\n K --> L[\\\\TrapAlt/]`)\n\n // Verify every label renders\n for (const label of ['Rectangle', 'Rounded', 'Diamond', 'Stadium', 'Circle',\n 'Subroutine', 'DoubleCircle', 'Hexagon', 'Cylinder', 'Flag', 'Trapezoid', 'TrapAlt']) {\n expect(svg).toContain(`>${label}`)\n }\n\n // Verify SVG validity\n expect(svg).toContain('')\n })\n})\n" }, { "path": "src/__tests__/layout-disconnected.test.ts", "content": "/**\n * Integration tests for disconnected component layout.\n *\n * These tests verify that the full layout pipeline correctly handles\n * graphs with multiple disconnected components (subgraphs or nodes\n * with no edges connecting them).\n *\n * The key invariant: disconnected components should NEVER overlap.\n */\nimport { describe, it, expect } from 'bun:test'\nimport { renderMermaidSync, parseMermaid } from '../index.ts'\nimport { layoutGraphSync } from '../layout.ts'\n\n// ============================================================================\n// Test helpers\n// ============================================================================\n\n/** Check if two rectangles overlap */\nfunction rectanglesOverlap(\n r1: { x: number; y: number; width: number; height: number },\n r2: { x: number; y: number; width: number; height: number }\n): boolean {\n return !(\n r1.x + r1.width <= r2.x || // r1 is left of r2\n r2.x + r2.width <= r1.x || // r2 is left of r1\n r1.y + r1.height <= r2.y || // r1 is above r2\n r2.y + r2.height <= r1.y // r2 is above r1\n )\n}\n\n/** Get bounding box from positioned elements */\nfunction getBoundingBox(items: Array<{ x: number; y: number; width: number; height: number }>) {\n if (items.length === 0) return { x: 0, y: 0, width: 0, height: 0 }\n\n let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity\n for (const item of items) {\n minX = Math.min(minX, item.x)\n minY = Math.min(minY, item.y)\n maxX = Math.max(maxX, item.x + item.width)\n maxY = Math.max(maxY, item.y + item.height)\n }\n\n return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }\n}\n\n// ============================================================================\n// Two disconnected subgraphs (the original bug)\n// ============================================================================\n\ndescribe('layoutGraph – two disconnected subgraphs', () => {\n it('renders without overlap in LR direction', () => {\n const source = `graph LR\n subgraph Today [Today]\n A[AI Response] --> B[Markdown]\n B --> C[User reads]\n C --> D[User acts]\n end\n\n subgraph Tomorrow [Next Wave]\n E[AI Response] --> F[Widget]\n F --> G[User acts]\n end`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n // Find the two top-level groups\n const today = result.groups.find(g => g.label === 'Today')\n const tomorrow = result.groups.find(g => g.label === 'Next Wave')\n\n expect(today).toBeDefined()\n expect(tomorrow).toBeDefined()\n\n // They should NOT overlap\n expect(rectanglesOverlap(today!, tomorrow!)).toBe(false)\n })\n\n it('renders without overlap in TD direction', () => {\n const source = `graph TD\n subgraph Today [Today]\n A --> B --> C\n end\n\n subgraph Tomorrow [Tomorrow]\n D --> E --> F\n end`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const today = result.groups.find(g => g.label === 'Today')\n const tomorrow = result.groups.find(g => g.label === 'Tomorrow')\n\n expect(today).toBeDefined()\n expect(tomorrow).toBeDefined()\n expect(rectanglesOverlap(today!, tomorrow!)).toBe(false)\n })\n\n it('respects direction for stacking (LR = vertical)', () => {\n // Perpendicular stacking: LR flows horizontally → stack vertically\n const source = `graph LR\n subgraph S1 [First]\n A --> B\n end\n subgraph S2 [Second]\n C --> D\n end`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const s1 = result.groups.find(g => g.label === 'First')!\n const s2 = result.groups.find(g => g.label === 'Second')!\n\n // In LR mode, subgraphs should be stacked vertically (perpendicular to flow)\n // One should be above the other\n const isVerticallyArranged =\n (s1.y + s1.height <= s2.y) || (s2.y + s2.height <= s1.y)\n\n expect(isVerticallyArranged).toBe(true)\n })\n\n it('respects direction for stacking (TD = horizontal)', () => {\n // Perpendicular stacking: TD flows vertically → stack horizontally\n const source = `graph TD\n subgraph S1 [First]\n A --> B\n end\n subgraph S2 [Second]\n C --> D\n end`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const s1 = result.groups.find(g => g.label === 'First')!\n const s2 = result.groups.find(g => g.label === 'Second')!\n\n // ELK may arrange disconnected components in various ways\n // The key requirement is that they don't overlap\n const noOverlap =\n (s1.x + s1.width <= s2.x) || (s2.x + s2.width <= s1.x) ||\n (s1.y + s1.height <= s2.y) || (s2.y + s2.height <= s1.y)\n\n expect(noOverlap).toBe(true)\n })\n})\n\n// ============================================================================\n// Three+ disconnected components\n// ============================================================================\n\ndescribe('layoutGraph – multiple disconnected components', () => {\n it('renders three disconnected subgraphs without overlap', () => {\n const source = `graph LR\n subgraph A [Alpha]\n A1 --> A2\n end\n subgraph B [Beta]\n B1 --> B2\n end\n subgraph C [Gamma]\n C1 --> C2\n end`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const alpha = result.groups.find(g => g.label === 'Alpha')!\n const beta = result.groups.find(g => g.label === 'Beta')!\n const gamma = result.groups.find(g => g.label === 'Gamma')!\n\n // No pair should overlap\n expect(rectanglesOverlap(alpha, beta)).toBe(false)\n expect(rectanglesOverlap(beta, gamma)).toBe(false)\n expect(rectanglesOverlap(alpha, gamma)).toBe(false)\n })\n\n it('renders five disconnected nodes without overlap', () => {\n // Five completely isolated nodes\n const source = `graph LR\n A[Node A]\n B[Node B]\n C[Node C]\n D[Node D]\n E[Node E]`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n // All nodes should exist\n expect(result.nodes.length).toBe(5)\n\n // No pair of nodes should overlap\n for (let i = 0; i < result.nodes.length; i++) {\n for (let j = i + 1; j < result.nodes.length; j++) {\n const overlap = rectanglesOverlap(result.nodes[i]!, result.nodes[j]!)\n expect(\n overlap,\n `Nodes ${result.nodes[i]!.id} and ${result.nodes[j]!.id} overlap`\n ).toBe(false)\n }\n }\n })\n})\n\n// ============================================================================\n// Mixed: connected + disconnected\n// ============================================================================\n\ndescribe('layoutGraph – mixed connected and disconnected', () => {\n it('renders two connected subgraphs + one disconnected', () => {\n const source = `graph LR\n subgraph Frontend [Frontend]\n FE1 --> FE2\n end\n subgraph Backend [Backend]\n BE1 --> BE2\n end\n subgraph Isolated [Isolated]\n I1 --> I2\n end\n FE2 --> BE1`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const frontend = result.groups.find(g => g.label === 'Frontend')!\n const backend = result.groups.find(g => g.label === 'Backend')!\n const isolated = result.groups.find(g => g.label === 'Isolated')!\n\n // None should overlap\n expect(rectanglesOverlap(frontend, backend)).toBe(false)\n expect(rectanglesOverlap(backend, isolated)).toBe(false)\n expect(rectanglesOverlap(frontend, isolated)).toBe(false)\n })\n\n it('renders connected nodes + isolated node', () => {\n const source = `graph LR\n A --> B --> C\n D[Isolated]`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const nodeD = result.nodes.find(n => n.id === 'D')!\n const connectedNodes = result.nodes.filter(n => n.id !== 'D')\n\n // Isolated node should not overlap with any connected node\n for (const node of connectedNodes) {\n expect(\n rectanglesOverlap(nodeD, node),\n `Node D overlaps with node ${node.id}`\n ).toBe(false)\n }\n })\n})\n\n// ============================================================================\n// Layout quality preservation\n// ============================================================================\n\ndescribe('layoutGraph – quality preservation', () => {\n it('each component looks identical to standalone rendering', () => {\n // Render a single subgraph standalone\n const standalone = `graph LR\n subgraph S [Section]\n A --> B --> C\n end`\n\n const standaloneParsed = parseMermaid(standalone)\n const standaloneResult = layoutGraphSync(standaloneParsed)\n\n // Render the same subgraph as part of a disconnected graph\n const combined = `graph LR\n subgraph S [Section]\n A --> B --> C\n end\n subgraph Other [Other]\n X --> Y\n end`\n\n const combinedParsed = parseMermaid(combined)\n const combinedResult = layoutGraphSync(combinedParsed)\n\n // The \"Section\" group should have the same dimensions\n const standaloneGroup = standaloneResult.groups.find(g => g.label === 'Section')!\n const combinedGroup = combinedResult.groups.find(g => g.label === 'Section')!\n\n expect(combinedGroup.width).toBe(standaloneGroup.width)\n expect(combinedGroup.height).toBe(standaloneGroup.height)\n })\n})\n\n// ============================================================================\n// Edge cases\n// ============================================================================\n\ndescribe('layoutGraph – disconnected edge cases', () => {\n it('handles single node as its own component', () => {\n const source = `graph LR\n A --> B\n C[Isolated]`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n expect(result.nodes.length).toBe(3)\n\n // All nodes positioned without overlap\n for (let i = 0; i < result.nodes.length; i++) {\n for (let j = i + 1; j < result.nodes.length; j++) {\n expect(rectanglesOverlap(result.nodes[i]!, result.nodes[j]!)).toBe(false)\n }\n }\n })\n\n it('handles empty subgraph with disconnected nodes', () => {\n const source = `graph LR\n subgraph Empty\n end\n A --> B`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n expect(result.groups.length).toBe(1)\n expect(result.nodes.length).toBe(2)\n })\n\n it('handles subgraph containing entire component', () => {\n const source = `graph LR\n subgraph Component1\n A --> B --> C\n end\n D --> E`\n\n const parsed = parseMermaid(source)\n const result = layoutGraphSync(parsed)\n\n const group = result.groups.find(g => g.label === 'Component1')!\n const nodeD = result.nodes.find(n => n.id === 'D')!\n const nodeE = result.nodes.find(n => n.id === 'E')!\n\n // Group and D/E nodes should not overlap\n expect(rectanglesOverlap(group, nodeD)).toBe(false)\n expect(rectanglesOverlap(group, nodeE)).toBe(false)\n })\n})\n\n// ============================================================================\n// Full render tests (SVG output)\n// ============================================================================\n\ndescribe('renderMermaid – disconnected components', () => {\n it('renders two disconnected subgraphs to valid SVG', () => {\n const source = `graph LR\n subgraph Today [Today]\n A --> B\n end\n subgraph Tomorrow [Tomorrow]\n C --> D\n end`\n\n const svg = renderMermaidSync(source)\n\n expect(svg).toContain('')\n expect(svg).toContain('>Today')\n expect(svg).toContain('>Tomorrow')\n expect(svg).toContain('>A')\n expect(svg).toContain('>B')\n expect(svg).toContain('>C')\n expect(svg).toContain('>D')\n })\n\n it('renders isolated nodes to valid SVG', () => {\n const source = `graph LR\n A[First]\n B[Second]\n C[Third]`\n\n const svg = renderMermaidSync(source)\n\n expect(svg).toContain('')\n expect(svg).toContain('>First')\n expect(svg).toContain('>Second')\n expect(svg).toContain('>Third')\n })\n})\n" }, { "path": "src/__tests__/linkstyle.test.ts", "content": "import { describe, it, expect } from 'bun:test'\nimport { parseMermaid } from '../parser.ts'\nimport { renderMermaidSVG } from '../index.ts'\n\ndescribe('linkStyle – parser', () => {\n it('parses linkStyle with single index', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n linkStyle 0 stroke:#ff0000,stroke-width:2px')\n expect(g.linkStyles.get(0)).toEqual({ stroke: '#ff0000', 'stroke-width': '2px' })\n })\n\n it('parses linkStyle with comma-separated indices', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n B --> C\\n linkStyle 0,1 stroke:#00ff00')\n expect(g.linkStyles.get(0)).toEqual({ stroke: '#00ff00' })\n expect(g.linkStyles.get(1)).toEqual({ stroke: '#00ff00' })\n })\n\n it('parses linkStyle default', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n linkStyle default stroke:#888888,stroke-width:3px')\n expect(g.linkStyles.get('default')).toEqual({ stroke: '#888888', 'stroke-width': '3px' })\n })\n\n it('later linkStyle overrides earlier for same index', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n linkStyle 0 stroke:#ff0000\\n linkStyle 0 stroke:#00ff00')\n expect(g.linkStyles.get(0)).toEqual({ stroke: '#00ff00' })\n })\n\n it('ignores linkStyle lines silently (no crash) when index out of range', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n linkStyle 99 stroke:#ff0000')\n expect(g.linkStyles.get(99)).toEqual({ stroke: '#ff0000' })\n expect(g.edges).toHaveLength(1)\n })\n\n it('strips trailing semicolons from style values', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n linkStyle 0 stroke:#ff0000,stroke-width:4px;')\n expect(g.linkStyles.get(0)).toEqual({ stroke: '#ff0000', 'stroke-width': '4px' })\n })\n})\n\ndescribe('linkStyle – state diagram parser', () => {\n it('parses linkStyle in state diagrams', () => {\n const g = parseMermaid('stateDiagram-v2\\n A --> B\\n linkStyle 0 stroke:#ff0000')\n expect(g.linkStyles.get(0)).toEqual({ stroke: '#ff0000' })\n })\n\n it('parses linkStyle default in state diagrams', () => {\n const g = parseMermaid('stateDiagram-v2\\n A --> B\\n B --> C\\n linkStyle default stroke:#888')\n expect(g.linkStyles.get('default')).toEqual({ stroke: '#888' })\n })\n})\n\ndescribe('linkStyle – SVG integration', () => {\n it('applies linkStyle stroke color to SVG edge', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B\\n linkStyle 0 stroke:#ff0000')\n expect(svg).toContain('stroke=\"#ff0000\"')\n })\n\n it('applies linkStyle stroke-width to SVG edge', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B\\n linkStyle 0 stroke-width:3px')\n expect(svg).toContain('stroke-width=\"3px\"')\n })\n\n it('applies linkStyle default to all edges', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B\\n B --> C\\n linkStyle default stroke:#00ff00')\n const matches = svg.match(/stroke=\"#00ff00\"/g)\n expect(matches).not.toBeNull()\n expect(matches!.length).toBeGreaterThanOrEqual(2)\n })\n\n it('index-specific linkStyle overrides default', () => {\n const svg = renderMermaidSVG(\n 'graph TD\\n A --> B\\n B --> C\\n linkStyle default stroke:#888\\n linkStyle 0 stroke:#ff0000'\n )\n expect(svg).toContain('stroke=\"#ff0000\"')\n expect(svg).toContain('stroke=\"#888\"')\n })\n\n it('arrowhead color matches custom stroke color', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B\\n linkStyle 0 stroke:#ff0000')\n // Should have a color-specific marker def (# is hex-encoded to \"23\")\n expect(svg).toContain('id=\"arrowhead-23ff0000\"')\n expect(svg).toContain('fill=\"#ff0000\"')\n // Edge should reference the colored marker\n expect(svg).toContain('marker-end=\"url(#arrowhead-23ff0000)\"')\n })\n\n it('escapes XSS injection in stroke value', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B\\n linkStyle 0 stroke:red\" onmouseover=\"alert(1)')\n // Quotes must be escaped — no attribute breakout\n expect(svg).not.toContain('stroke=\"red\" onmouseover')\n expect(svg).toContain('stroke=\"red" onmouseover="alert(1)\"')\n })\n\n it('trailing semicolons do not leak into SVG attributes', () => {\n const svg = renderMermaidSVG('graph TD\\n A --> B\\n linkStyle 0 stroke:#ff0000,stroke-width:4px;')\n expect(svg).toContain('stroke-width=\"4px\"')\n expect(svg).not.toContain('stroke-width=\"4px;\"')\n })\n})\n" }, { "path": "src/__tests__/multiline-labels.test.ts", "content": "/**\n * Tests for multi-line label support via
    tags.\n *\n * Covers:\n * - Parser: normalization of
    ,
    ,
    to \\n\n * - Text metrics: measureMultilineText() for width/height calculation\n * - Layout: estimateNodeSize() with multi-line labels\n * - Renderer: generation for node and edge labels\n * - Integration: full SVG output with multi-line labels\n */\nimport { describe, it, expect } from 'bun:test'\nimport { parseMermaid } from '../parser.ts'\nimport { parseSequenceDiagram } from '../sequence/parser.ts'\nimport { parseClassDiagram } from '../class/parser.ts'\nimport { parseErDiagram } from '../er/parser.ts'\nimport { measureMultilineText, LINE_HEIGHT_RATIO, measureTextWidth } from '../text-metrics.ts'\nimport { renderMermaid } from '../index.ts'\nimport { normalizeBrTags, stripFormattingTags } from '../multiline-utils.ts'\n\n// ============================================================================\n// Parser:
    tag normalization\n// ============================================================================\n\ndescribe('parseMermaid –
    tag normalization', () => {\n describe('node labels', () => {\n it('normalizes
    to newline', () => {\n const g = parseMermaid('graph TD\\n A[Line1
    Line2]')\n expect(g.nodes.get('A')!.label).toBe('Line1\\nLine2')\n })\n\n it('normalizes
    to newline', () => {\n const g = parseMermaid('graph TD\\n A[Line1
    Line2]')\n expect(g.nodes.get('A')!.label).toBe('Line1\\nLine2')\n })\n\n it('normalizes
    (with space) to newline', () => {\n const g = parseMermaid('graph TD\\n A[Line1
    Line2]')\n expect(g.nodes.get('A')!.label).toBe('Line1\\nLine2')\n })\n\n it('is case-insensitive (
    ,
    ,
    )', () => {\n const g1 = parseMermaid('graph TD\\n A[Line1
    Line2]')\n const g2 = parseMermaid('graph TD\\n B[Line1
    Line2]')\n const g3 = parseMermaid('graph TD\\n C[Line1
    Line2]')\n\n expect(g1.nodes.get('A')!.label).toBe('Line1\\nLine2')\n expect(g2.nodes.get('B')!.label).toBe('Line1\\nLine2')\n expect(g3.nodes.get('C')!.label).toBe('Line1\\nLine2')\n })\n\n it('handles multiple
    tags', () => {\n const g = parseMermaid('graph TD\\n A[One
    Two
    Three
    Four]')\n expect(g.nodes.get('A')!.label).toBe('One\\nTwo\\nThree\\nFour')\n })\n\n it('handles
    with various node shapes', () => {\n const g = parseMermaid(`graph TD\n A[Rect
    Label]\n B(Round
    Label)\n C{Diamond
    Label}\n D([Stadium
    Label])\n `)\n expect(g.nodes.get('A')!.label).toBe('Rect\\nLabel')\n expect(g.nodes.get('B')!.label).toBe('Round\\nLabel')\n expect(g.nodes.get('C')!.label).toBe('Diamond\\nLabel')\n expect(g.nodes.get('D')!.label).toBe('Stadium\\nLabel')\n })\n })\n\n describe('edge labels', () => {\n it('normalizes
    in edge labels', () => {\n const g = parseMermaid('graph TD\\n A -->|First
    Second| B')\n expect(g.edges[0]!.label).toBe('First\\nSecond')\n })\n\n it('normalizes
    in edge labels', () => {\n const g = parseMermaid('graph TD\\n A -->|Line1
    Line2| B')\n expect(g.edges[0]!.label).toBe('Line1\\nLine2')\n })\n })\n\n describe('subgraph labels', () => {\n it('normalizes
    in subgraph labels (bracket syntax)', () => {\n const g = parseMermaid(`graph TD\n subgraph sg1 [Group
    Header]\n A[Node]\n end\n `)\n expect(g.subgraphs[0]!.label).toBe('Group\\nHeader')\n })\n\n it('normalizes
    in subgraph labels (plain syntax)', () => {\n const g = parseMermaid(`graph TD\n subgraph Line1
    Line2\n A[Node]\n end\n `)\n expect(g.subgraphs[0]!.label).toBe('Line1\\nLine2')\n })\n })\n\n describe('state diagram labels', () => {\n it('normalizes
    in state alias labels', () => {\n const g = parseMermaid(`stateDiagram-v2\n state \"First
    Second\" as s1\n [*] --> s1\n `)\n expect(g.nodes.get('s1')!.label).toBe('First\\nSecond')\n })\n\n it('normalizes
    in state description labels', () => {\n const g = parseMermaid(`stateDiagram-v2\n s1 : First
    Second\n [*] --> s1\n `)\n expect(g.nodes.get('s1')!.label).toBe('First\\nSecond')\n })\n\n it('normalizes
    in transition labels', () => {\n const g = parseMermaid(`stateDiagram-v2\n s1 --> s2 : Event
    Action\n `)\n expect(g.edges[0]!.label).toBe('Event\\nAction')\n })\n })\n\n describe('sequence diagram labels', () => {\n it('normalizes
    in participant alias labels', () => {\n const lines = ['sequenceDiagram', 'participant A as First
    Line', 'A->>A: test']\n const diagram = parseSequenceDiagram(lines)\n expect(diagram.actors[0]!.label).toBe('First\\nLine')\n })\n\n it('normalizes
    in message labels', () => {\n const lines = ['sequenceDiagram', 'A->>B: Hello
    World']\n const diagram = parseSequenceDiagram(lines)\n expect(diagram.messages[0]!.label).toBe('Hello\\nWorld')\n })\n\n it('normalizes
    in note text', () => {\n const lines = ['sequenceDiagram', 'A->>B: Hello', 'Note over A,B: First
    Second']\n const diagram = parseSequenceDiagram(lines)\n expect(diagram.notes[0]!.text).toBe('First\\nSecond')\n })\n\n it('normalizes
    in block labels', () => {\n const lines = ['sequenceDiagram', 'A->>B: Hello', 'loop Every
    30s', 'A->>B: Ping', 'end']\n const diagram = parseSequenceDiagram(lines)\n expect(diagram.blocks[0]!.label).toBe('Every\\n30s')\n })\n\n it('normalizes
    in divider labels', () => {\n const lines = ['sequenceDiagram', 'A->>B: Hello', 'alt First
    case', 'A->>B: a', 'else Second
    case', 'A->>B: b', 'end']\n const diagram = parseSequenceDiagram(lines)\n expect(diagram.blocks[0]!.dividers[0]!.label).toBe('Second\\ncase')\n })\n })\n\n describe('class diagram labels', () => {\n it('normalizes
    in relationship labels', () => {\n const lines = ['classDiagram', 'A --> B : uses
    internally']\n const diagram = parseClassDiagram(lines)\n expect(diagram.relationships[0]!.label).toBe('uses\\ninternally')\n })\n\n it('normalizes
    in fromCardinality labels', () => {\n const lines = ['classDiagram', 'A \"one
    to\" --> B']\n const diagram = parseClassDiagram(lines)\n expect(diagram.relationships[0]!.fromCardinality).toBe('one\\nto')\n })\n\n it('normalizes
    in toCardinality labels', () => {\n const lines = ['classDiagram', 'A --> \"many
    items\" B']\n const diagram = parseClassDiagram(lines)\n expect(diagram.relationships[0]!.toCardinality).toBe('many\\nitems')\n })\n })\n\n describe('ER diagram labels', () => {\n it('normalizes
    in relationship labels', () => {\n const lines = ['erDiagram', 'CUSTOMER ||--o{ ORDER : places
    orders']\n const diagram = parseErDiagram(lines)\n expect(diagram.relationships[0]!.label).toBe('places\\norders')\n })\n\n it('normalizes
    in attribute comments', () => {\n const lines = ['erDiagram', 'CUSTOMER {', 'int id PK \"primary
    key\"', '}']\n const diagram = parseErDiagram(lines)\n expect(diagram.entities[0]!.attributes[0]!.comment).toBe('primary\\nkey')\n })\n })\n})\n\n// ============================================================================\n// Text metrics: multi-line measurement\n// ============================================================================\n\ndescribe('measureMultilineText', () => {\n const fontSize = 13\n const fontWeight = 500\n\n it('returns single line metrics for text without newlines', () => {\n const metrics = measureMultilineText('Hello', fontSize, fontWeight)\n\n expect(metrics.lines).toEqual(['Hello'])\n expect(metrics.lineHeight).toBe(fontSize * LINE_HEIGHT_RATIO)\n expect(metrics.height).toBe(fontSize * LINE_HEIGHT_RATIO)\n expect(metrics.width).toBe(measureTextWidth('Hello', fontSize, fontWeight))\n })\n\n it('splits text on newlines', () => {\n const metrics = measureMultilineText('Line1\\nLine2\\nLine3', fontSize, fontWeight)\n expect(metrics.lines).toEqual(['Line1', 'Line2', 'Line3'])\n })\n\n it('calculates height based on number of lines', () => {\n const lineHeight = fontSize * LINE_HEIGHT_RATIO\n\n const one = measureMultilineText('One', fontSize, fontWeight)\n const two = measureMultilineText('One\\nTwo', fontSize, fontWeight)\n const three = measureMultilineText('One\\nTwo\\nThree', fontSize, fontWeight)\n\n expect(one.height).toBeCloseTo(lineHeight, 1)\n expect(two.height).toBeCloseTo(lineHeight * 2, 1)\n expect(three.height).toBeCloseTo(lineHeight * 3, 1)\n })\n\n it('uses maximum line width for overall width', () => {\n const metrics = measureMultilineText('Short\\nMuch Longer Line\\nMedium', fontSize, fontWeight)\n\n const shortWidth = measureTextWidth('Short', fontSize, fontWeight)\n const longWidth = measureTextWidth('Much Longer Line', fontSize, fontWeight)\n const mediumWidth = measureTextWidth('Medium', fontSize, fontWeight)\n\n expect(metrics.width).toBe(longWidth)\n expect(metrics.width).toBeGreaterThan(shortWidth)\n expect(metrics.width).toBeGreaterThan(mediumWidth)\n })\n\n it('handles empty lines', () => {\n const metrics = measureMultilineText('Line1\\n\\nLine3', fontSize, fontWeight)\n expect(metrics.lines).toEqual(['Line1', '', 'Line3'])\n expect(metrics.height).toBeCloseTo(fontSize * LINE_HEIGHT_RATIO * 3, 1)\n })\n\n it('exports LINE_HEIGHT_RATIO constant', () => {\n expect(LINE_HEIGHT_RATIO).toBe(1.3)\n })\n})\n\n// ============================================================================\n// Renderer: element generation\n// ============================================================================\n\ndescribe('renderMermaid – multi-line labels', () => {\n it('renders single-line node label without tspan', async () => {\n const svg = await renderMermaid('graph TD\\n A[Single Line]')\n\n // Should have text element with direct content\n expect(svg).toContain('Single Line')\n // Should NOT have tspan for single line\n expect(svg).not.toMatch(/]*>Single Line<\\/tspan>/)\n })\n\n it('renders multi-line node label with tspan elements', async () => {\n const svg = await renderMermaid('graph TD\\n A[Line1
    Line2]')\n\n // Should have tspan elements\n expect(svg).toContain('Line1    ')\n expect(svg).toContain('>Line2    ')\n })\n\n it('renders 3-line node label with 3 tspan elements', async () => {\n const svg = await renderMermaid('graph TD\\n A[One
    Two
    Three]')\n\n // Count tspan occurrences\n const tspanMatches = svg.match(/One')\n expect(svg).toContain('>Two')\n expect(svg).toContain('>Three')\n })\n\n it('renders multi-line edge label with tspan elements', async () => {\n const svg = await renderMermaid('graph TD\\n A -->|First
    Second| B')\n\n expect(svg).toContain('First')\n expect(svg).toContain('>Second')\n })\n\n it('includes x attribute on each tspan for horizontal reset', async () => {\n const svg = await renderMermaid('graph TD\\n A[Line1
    Line2]')\n\n // Each tspan should have an x attribute\n const tspanRegex = / {\n const svg = await renderMermaid('graph TD\\n A[Line1
    Line2]')\n\n // Each tspan should have a dy attribute\n const tspanRegex = /]*dy=\"[^\"]+\"/g\n const matches = svg.match(tspanRegex)\n expect(matches).toHaveLength(2)\n })\n\n it('escapes XML characters in multi-line labels', async () => {\n const svg = await renderMermaid('graph TD\\n A[First &
    Second >]')\n\n expect(svg).toContain('&')\n expect(svg).toContain('>')\n expect(svg).not.toContain('First &    ')\n expect(svg).not.toContain('Second >')\n })\n})\n\n// ============================================================================\n// Integration: layout sizing\n// ============================================================================\n\ndescribe('renderMermaid – multi-line layout sizing', () => {\n it('multi-line node is taller than single-line node', async () => {\n const singleSvg = await renderMermaid('graph TD\\n A[Single]')\n const multiSvg = await renderMermaid('graph TD\\n A[Line1
    Line2]')\n\n // Extract node rect heights\n const singleHeight = extractFirstRectHeight(singleSvg)\n const multiHeight = extractFirstRectHeight(multiSvg)\n\n expect(multiHeight).toBeGreaterThan(singleHeight)\n })\n\n it('3-line node is taller than 2-line node', async () => {\n const twoLineSvg = await renderMermaid('graph TD\\n A[One
    Two]')\n const threeLineSvg = await renderMermaid('graph TD\\n A[One
    Two
    Three]')\n\n const twoLineHeight = extractFirstRectHeight(twoLineSvg)\n const threeLineHeight = extractFirstRectHeight(threeLineSvg)\n\n expect(threeLineHeight).toBeGreaterThan(twoLineHeight)\n })\n\n it('node width matches longest line', async () => {\n // \"Much Longer\" is wider than \"Short\"\n const svg = await renderMermaid('graph TD\\n A[Short
    Much Longer Line]')\n const width = extractFirstRectWidth(svg)\n\n // Compare to single-line with long text\n const longSvg = await renderMermaid('graph TD\\n A[Much Longer Line]')\n const longWidth = extractFirstRectWidth(longSvg)\n\n // Widths should be approximately equal (multi-line uses max line width)\n expect(Math.abs(width - longWidth)).toBeLessThan(5)\n })\n})\n\n// ============================================================================\n// Integration: sequence diagram multi-line rendering\n// ============================================================================\n\ndescribe('renderMermaid – sequence diagram multi-line', () => {\n it('renders multi-line message labels with tspan elements', async () => {\n const svg = await renderMermaid(`sequenceDiagram\n A->>B: Hello
    World\n `)\n\n expect(svg).toContain('Hello')\n expect(svg).toContain('>World')\n })\n\n it('renders multi-line actor labels with tspan elements', async () => {\n const svg = await renderMermaid(`sequenceDiagram\n participant A as First
    Line\n A->>A: test\n `)\n\n expect(svg).toContain('First')\n expect(svg).toContain('>Line')\n })\n\n it('renders multi-line note text with tspan elements', async () => {\n const svg = await renderMermaid(`sequenceDiagram\n A->>B: msg\n Note over A,B: Note
    Text\n `)\n\n expect(svg).toContain('Note')\n expect(svg).toContain('>Text')\n })\n})\n\n// ============================================================================\n// Integration: class diagram multi-line rendering\n// ============================================================================\n\ndescribe('renderMermaid – class diagram multi-line', () => {\n it('renders multi-line relationship labels with tspan elements', async () => {\n const svg = await renderMermaid(`classDiagram\n A --> B : uses
    data\n `)\n\n expect(svg).toContain('uses')\n expect(svg).toContain('>data')\n })\n\n it('renders multi-line cardinality with tspan elements', async () => {\n const svg = await renderMermaid(`classDiagram\n A \"one
    to\" --> B\n `)\n\n expect(svg).toContain('one')\n expect(svg).toContain('>to')\n })\n})\n\n// ============================================================================\n// Integration: ER diagram multi-line rendering\n// ============================================================================\n\ndescribe('renderMermaid – ER diagram multi-line', () => {\n it('renders multi-line relationship labels with tspan elements', async () => {\n const svg = await renderMermaid(`erDiagram\n CUSTOMER ||--o{ ORDER : places
    orders\n `)\n\n expect(svg).toContain('places')\n expect(svg).toContain('>orders')\n })\n})\n\n// ============================================================================\n// Edge cases\n// ============================================================================\n\ndescribe('renderMermaid – edge cases', () => {\n it('handles consecutive

    tags (empty lines)', async () => {\n const svg = await renderMermaid('graph TD\\n A[Line1

    Line3]')\n const tspanMatches = svg.match(/', async () => {\n const longLine = 'VeryLongTextHere'\n const svg = await renderMermaid(`graph TD\\n A[${longLine}
    Short]`)\n expect(svg).toContain(`>${longLine}    `)\n expect(svg).toContain('>Short')\n })\n\n it('handles single character lines', async () => {\n const svg = await renderMermaid('graph TD\\n A[X
    Y
    Z]')\n expect(svg).toContain('>X')\n expect(svg).toContain('>Y')\n expect(svg).toContain('>Z')\n })\n\n it('handles unicode with
    ', async () => {\n const svg = await renderMermaid('graph TD\\n A[日本
    語]')\n expect(svg).toContain('>日本')\n expect(svg).toContain('>語')\n })\n\n it('handles many lines (5+)', async () => {\n const svg = await renderMermaid('graph TD\\n A[1
    2
    3
    4
    5
    6]')\n const tspanMatches = svg.match(/ {\n const svg = await renderMermaid(`graph TD\n A[Single] --> B[Multi
    Line]\n B --> C[Also Single]\n `)\n expect(svg).toContain('>Single')\n expect(svg).toContain('>Multi    ')\n expect(svg).toContain('>Also Single')\n })\n})\n\n// ============================================================================\n// Subgraph multi-line\n// ============================================================================\n\ndescribe('renderMermaid – subgraph multi-line', () => {\n it('renders multi-line group headers with tspan', async () => {\n const svg = await renderMermaid(`graph TD\n subgraph sg [Group
    Header]\n A[Node]\n end\n `)\n expect(svg).toContain('>Group')\n expect(svg).toContain('>Header')\n })\n})\n\n// ============================================================================\n// All flowchart shapes with multi-line\n// ============================================================================\n\ndescribe('renderMermaid – all flowchart shapes with multi-line', () => {\n const shapes: [string, string][] = [\n ['rectangle', 'A[Line1
    Line2]'],\n ['rounded', 'A(Line1
    Line2)'],\n ['diamond', 'A{Line1
    Line2}'],\n ['stadium', 'A([Line1
    Line2])'],\n ['circle', 'A((Line1
    Line2))'],\n ['subroutine', 'A[[Line1
    Line2]]'],\n ['double-circle', 'A(((Line1
    Line2)))'],\n ['hexagon', 'A{{Line1
    Line2}}'],\n ['cylinder', 'A[(Line1
    Line2)]'],\n ['flag', 'A>Line1
    Line2]'],\n ['trapezoid', 'A[/Line1
    Line2\\\\]'],\n ['inv-trapezoid', 'A[\\\\Line1
    Line2/]'],\n ]\n\n shapes.forEach(([name, syntax]) => {\n it(`renders multi-line in ${name} shape`, async () => {\n const svg = await renderMermaid(`graph TD\\n ${syntax}`)\n expect(svg).toContain('Line1')\n expect(svg).toContain('>Line2')\n })\n })\n})\n\n// ============================================================================\n// Inline formatting: , , , → SVG tspan attributes\n// ============================================================================\n\ndescribe('renderMermaid – inline formatting', () => {\n it('renders as font-weight=\"bold\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello bold text]')\n expect(svg).toContain('font-weight=\"bold\"')\n expect(svg).toContain('>bold')\n })\n\n it('renders as font-weight=\"bold\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello bold]')\n expect(svg).toContain('font-weight=\"bold\"')\n })\n\n it('renders as font-style=\"italic\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello italic text]')\n expect(svg).toContain('font-style=\"italic\"')\n expect(svg).toContain('>italic')\n })\n\n it('renders as font-style=\"italic\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello italic]')\n expect(svg).toContain('font-style=\"italic\"')\n })\n\n it('renders as text-decoration=\"underline\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello underline text]')\n expect(svg).toContain('text-decoration=\"underline\"')\n expect(svg).toContain('>underline')\n })\n\n it('renders as text-decoration=\"line-through\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello strike text]')\n expect(svg).toContain('text-decoration=\"line-through\"')\n expect(svg).toContain('>strike')\n })\n\n it('renders as text-decoration=\"line-through\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello deleted]')\n expect(svg).toContain('text-decoration=\"line-through\"')\n })\n\n it('renders nested with both attributes', async () => {\n const svg = await renderMermaid('graph TD\\n A[bold italic]')\n expect(svg).toContain('font-weight=\"bold\"')\n expect(svg).toContain('font-style=\"italic\"')\n expect(svg).toContain('>bold italic')\n })\n\n it('renders formatting combined with
    multiline', async () => {\n const svg = await renderMermaid('graph TD\\n A[Line1
    Bold Line2]')\n expect(svg).toContain('font-weight=\"bold\"')\n expect(svg).toContain('>Bold Line2')\n })\n\n it('does not include raw tag text in rendered text', async () => {\n const svg = await renderMermaid('graph TD\\n A[bold]')\n // Tags should not appear as escaped text content inside elements\n expect(svg).toMatch(/bold<\\/tspan>/)\n expect(svg).not.toMatch(/]*><b>/)\n })\n\n it('renders plain text without formatting tspan wrappers', async () => {\n const svg = await renderMermaid('graph TD\\n A[Plain text]')\n // Should not have bold/italic formatting tspans (font-weight=\"500\" on the text element is fine)\n expect(svg).not.toContain('font-weight=\"bold\"')\n expect(svg).not.toContain('font-style=\"italic\"')\n expect(svg).not.toContain('text-decoration=')\n })\n})\n\n// ============================================================================\n// Tag stripping: unsupported tags removed, formatting tags preserved\n// ============================================================================\n\ndescribe('normalizeBrTags – tag handling', () => {\n it('strips tags', () => {\n expect(normalizeBrTags('H2O')).toBe('H2O')\n })\n\n it('strips tags', () => {\n expect(normalizeBrTags('x2')).toBe('x2')\n })\n\n it('strips tags', () => {\n expect(normalizeBrTags('big small')).toBe('big small')\n })\n\n it('strips tags', () => {\n expect(normalizeBrTags('some highlighted text')).toBe('some highlighted text')\n })\n\n it('preserves tags for rendering', () => {\n expect(normalizeBrTags('Hello bold')).toContain('')\n })\n\n it('preserves tags for rendering', () => {\n expect(normalizeBrTags('Hello italic')).toContain('')\n })\n\n it('preserves tags for rendering', () => {\n expect(normalizeBrTags('Hello under')).toContain('')\n })\n\n it('preserves tags for rendering', () => {\n expect(normalizeBrTags('Hello strike')).toContain('')\n })\n})\n\ndescribe('stripFormattingTags', () => {\n it('strips all formatting tags', () => {\n expect(stripFormattingTags('bold and italic')).toBe('bold and italic')\n })\n\n it('strips and ', () => {\n expect(stripFormattingTags('bold italic')).toBe('bold italic')\n })\n\n it('strips , , ', () => {\n expect(stripFormattingTags('under strike del')).toBe('under strike del')\n })\n\n it('handles nested tags', () => {\n expect(stripFormattingTags('nested')).toBe('nested')\n })\n\n it('returns plain text unchanged', () => {\n expect(stripFormattingTags('no tags here')).toBe('no tags here')\n })\n})\n\n// ============================================================================\n// Text metrics: formatting tags excluded from width\n// ============================================================================\n\ndescribe('measureMultilineText – formatting tag exclusion', () => {\n const fontSize = 13\n const fontWeight = 500\n\n it('measures width of plain text, not tag text', () => {\n const withTags = measureMultilineText('bold', fontSize, fontWeight)\n const plain = measureMultilineText('bold', fontSize, fontWeight)\n expect(withTags.width).toBe(plain.width)\n })\n\n it('excludes nested tags from width', () => {\n const withTags = measureMultilineText('text', fontSize, fontWeight)\n const plain = measureMultilineText('text', fontSize, fontWeight)\n expect(withTags.width).toBe(plain.width)\n })\n})\n\n// ============================================================================\n// HTML entity decoding — prevents double-escaping in SVG output\n// ============================================================================\n\ndescribe('renderMermaid – HTML entity decoding', () => {\n it('decodes < and > in node labels (prevents double-escaping)', async () => {\n // Input has pre-encoded entities (as delivered by react-markdown + rehype-raw)\n const svg = await renderMermaid('graph LR\\n A[AsyncGenerator<AgentEvent>]')\n\n // SVG should contain single-encoded < (correct XML), NOT double-encoded &lt;\n expect(svg).toContain('AsyncGenerator<AgentEvent>')\n expect(svg).not.toContain('&lt;')\n expect(svg).not.toContain('&gt;')\n })\n\n it('decodes & in node labels', async () => {\n const svg = await renderMermaid('graph LR\\n A[Tom & Jerry]')\n\n expect(svg).toContain('Tom & Jerry')\n expect(svg).not.toContain('&amp;')\n })\n\n it('decodes numeric entity references (decimal)', async () => {\n // < = <, > = >\n const svg = await renderMermaid('graph LR\\n A[List<Item>]')\n\n expect(svg).toContain('List<Item>')\n expect(svg).not.toContain('<')\n expect(svg).not.toContain('>')\n })\n\n it('decodes numeric entity references (hex)', async () => {\n // < = <, > = >\n const svg = await renderMermaid('graph LR\\n A[Map<K, V>]')\n\n expect(svg).toContain('Map<K, V>')\n expect(svg).not.toContain('<')\n expect(svg).not.toContain('>')\n })\n\n it('decodes entities in edge labels', async () => {\n const svg = await renderMermaid('graph LR\\n A -->|returns <T>| B')\n\n expect(svg).toContain('returns <T>')\n expect(svg).not.toContain('&lt;')\n })\n\n it('decodes entities in class diagram generics', async () => {\n const svg = await renderMermaid(`classDiagram\n class MyService~T~\n MyService --> Handler : uses\n `)\n\n // Class parser converts ~T~ to in the label, then escapeXml encodes it\n expect(svg).toContain('MyService<T>')\n })\n\n it('handles raw angle brackets the same as decoded entities', async () => {\n // Raw < and decoded < should produce identical SVG output\n const svgRaw = await renderMermaid('graph LR\\n A[List]')\n const svgEncoded = await renderMermaid('graph LR\\n A[List<Item>]')\n\n // Both should contain the same single-encoded entity in SVG\n expect(svgRaw).toContain('List<Item>')\n expect(svgEncoded).toContain('List<Item>')\n })\n})\n\n// ============================================================================\n// Markdown formatting: **bold**, *italic*, ~~strike~~ → HTML tags\n// ============================================================================\n\ndescribe('normalizeBrTags – markdown formatting', () => {\n it('converts **bold** to bold', () => {\n expect(normalizeBrTags('Hello **World**')).toBe('Hello World')\n })\n\n it('converts *italic* to italic', () => {\n expect(normalizeBrTags('Hello *World*')).toBe('Hello World')\n })\n\n it('converts ~~strikethrough~~ to strikethrough', () => {\n expect(normalizeBrTags('Hello ~~World~~')).toBe('Hello World')\n })\n\n it('handles bold and italic together', () => {\n expect(normalizeBrTags('**bold** and *italic*')).toBe('bold and italic')\n })\n\n it('does not match single * surrounded by spaces (multiplication)', () => {\n expect(normalizeBrTags('a * b * c')).toBe('a * b * c')\n })\n\n it('handles ***bold italic*** (bold outer, italic inner)', () => {\n const result = normalizeBrTags('***text***')\n // ** matches first → *text, then * italic wraps across tag boundary\n // Functionally correct: parseInlineFormatting() uses boolean state, not tag nesting\n expect(result).toBe('text')\n })\n\n it('handles multiple bold segments', () => {\n expect(normalizeBrTags('**one** and **two**')).toBe('one and two')\n })\n\n it('handles bold with
    multiline', () => {\n expect(normalizeBrTags('Line1
    **Bold Line2**')).toBe('Line1\\nBold Line2')\n })\n\n it('preserves existing HTML tags alongside markdown', () => {\n expect(normalizeBrTags('html and **md**')).toBe('html and md')\n })\n\n it('does not affect text without markdown formatting', () => {\n expect(normalizeBrTags('plain text')).toBe('plain text')\n })\n})\n\ndescribe('renderMermaid – markdown formatting in labels', () => {\n it('renders **bold** as font-weight=\"bold\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello **bold** text]')\n expect(svg).toContain('font-weight=\"bold\"')\n expect(svg).toContain('>bold    ')\n })\n\n it('renders *italic* as font-style=\"italic\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello *italic* text]')\n expect(svg).toContain('font-style=\"italic\"')\n expect(svg).toContain('>italic')\n })\n\n it('renders ~~strike~~ as text-decoration=\"line-through\"', async () => {\n const svg = await renderMermaid('graph TD\\n A[Hello ~~strike~~ text]')\n expect(svg).toContain('text-decoration=\"line-through\"')\n expect(svg).toContain('>strike')\n })\n\n it('renders **bold** in edge labels', async () => {\n const svg = await renderMermaid('graph TD\\n A -->|**important**| B')\n expect(svg).toContain('font-weight=\"bold\"')\n expect(svg).toContain('>important')\n })\n})\n\n// ============================================================================\n// Helper functions\n// ============================================================================\n\nfunction extractFirstRectHeight(svg: string): number {\n const match = svg.match(/]*height=\"(\\d+(?:\\.\\d+)?)\"/)\n return match ? parseFloat(match[1]!) : 0\n}\n\nfunction extractFirstRectWidth(svg: string): number {\n const match = svg.match(/]*width=\"(\\d+(?:\\.\\d+)?)\"/)\n return match ? parseFloat(match[1]!) : 0\n}\n" }, { "path": "src/__tests__/parser.test.ts", "content": "/**\n * Tests for the Mermaid parser.\n *\n * Covers:\n * - Flowcharts: graph headers, node shapes (all 13), edge styles, chained edges,\n * subgraphs (basic + nested), classDef/class, ::: shorthand, style statements,\n * direction override, & parallel links, no-arrow edges, bidirectional arrows\n * - State diagrams: transitions, [*] pseudostates, composite states,\n * state aliases, direction override\n * - Comments and error cases\n */\nimport { describe, it, expect } from 'bun:test'\nimport { parseMermaid } from '../parser.ts'\n\n// ============================================================================\n// Graph header parsing\n// ============================================================================\n\ndescribe('parseMermaid – graph header', () => {\n it('parses \"graph TD\" header', () => {\n const g = parseMermaid('graph TD\\n A --> B')\n expect(g.direction).toBe('TD')\n })\n\n it('parses \"flowchart LR\" header', () => {\n const g = parseMermaid('flowchart LR\\n A --> B')\n expect(g.direction).toBe('LR')\n })\n\n it.each(['TD', 'TB', 'LR', 'BT', 'RL'] as const)('accepts direction %s', (dir) => {\n const g = parseMermaid(`graph ${dir}\\n A --> B`)\n expect(g.direction).toBe(dir)\n })\n\n it('is case-insensitive for the keyword', () => {\n const g = parseMermaid('graph td\\n A --> B')\n expect(g.direction).toBe('TD')\n })\n\n it('throws on empty input', () => {\n expect(() => parseMermaid('')).toThrow('Empty mermaid diagram')\n })\n\n it('throws on invalid header', () => {\n expect(() => parseMermaid('sequenceDiagram\\n A ->> B')).toThrow('Invalid mermaid header')\n })\n\n it('throws on header without direction', () => {\n expect(() => parseMermaid('graph\\n A --> B')).toThrow('Invalid mermaid header')\n })\n})\n\n// ============================================================================\n// Original node shapes\n// ============================================================================\n\ndescribe('parseMermaid – node shapes (original)', () => {\n it('parses rectangle nodes: A[Label]', () => {\n const g = parseMermaid('graph TD\\n A[Hello World]')\n const node = g.nodes.get('A')\n expect(node).toBeDefined()\n expect(node!.shape).toBe('rectangle')\n expect(node!.label).toBe('Hello World')\n })\n\n it('parses rounded nodes: A(Label)', () => {\n const g = parseMermaid('graph TD\\n A(Rounded)')\n expect(g.nodes.get('A')!.shape).toBe('rounded')\n expect(g.nodes.get('A')!.label).toBe('Rounded')\n })\n\n it('parses diamond nodes: A{Label}', () => {\n const g = parseMermaid('graph TD\\n A{Decision}')\n expect(g.nodes.get('A')!.shape).toBe('diamond')\n expect(g.nodes.get('A')!.label).toBe('Decision')\n })\n\n it('parses stadium nodes: A([Label])', () => {\n const g = parseMermaid('graph TD\\n A([Stadium])')\n expect(g.nodes.get('A')!.shape).toBe('stadium')\n expect(g.nodes.get('A')!.label).toBe('Stadium')\n })\n\n it('parses circle nodes: A((Label))', () => {\n const g = parseMermaid('graph TD\\n A((Circle))')\n expect(g.nodes.get('A')!.shape).toBe('circle')\n expect(g.nodes.get('A')!.label).toBe('Circle')\n })\n\n it('creates a default rectangle for bare node references', () => {\n const g = parseMermaid('graph TD\\n A --> B')\n expect(g.nodes.get('A')!.shape).toBe('rectangle')\n expect(g.nodes.get('A')!.label).toBe('A')\n expect(g.nodes.get('B')!.shape).toBe('rectangle')\n expect(g.nodes.get('B')!.label).toBe('B')\n })\n\n it('supports hyphenated node IDs', () => {\n const g = parseMermaid('graph TD\\n my-node[My Node]')\n expect(g.nodes.get('my-node')).toBeDefined()\n expect(g.nodes.get('my-node')!.label).toBe('My Node')\n })\n\n it('first definition wins for shape and label', () => {\n const g = parseMermaid('graph TD\\n A[Start] --> B\\n A --> B')\n expect(g.nodes.get('A')!.shape).toBe('rectangle')\n expect(g.nodes.get('A')!.label).toBe('Start')\n })\n})\n\n// ============================================================================\n// Batch 1 node shapes\n// ============================================================================\n\ndescribe('parseMermaid – node shapes (Batch 1)', () => {\n it('parses subroutine nodes: A[[Label]]', () => {\n const g = parseMermaid('graph TD\\n A[[Subroutine]]')\n expect(g.nodes.get('A')!.shape).toBe('subroutine')\n expect(g.nodes.get('A')!.label).toBe('Subroutine')\n })\n\n it('parses double circle nodes: A(((Label)))', () => {\n const g = parseMermaid('graph TD\\n A(((Double)))')\n expect(g.nodes.get('A')!.shape).toBe('doublecircle')\n expect(g.nodes.get('A')!.label).toBe('Double')\n })\n\n it('parses hexagon nodes: A{{Label}}', () => {\n const g = parseMermaid('graph TD\\n A{{Hexagon}}')\n expect(g.nodes.get('A')!.shape).toBe('hexagon')\n expect(g.nodes.get('A')!.label).toBe('Hexagon')\n })\n})\n\n// ============================================================================\n// Batch 2 node shapes\n// ============================================================================\n\ndescribe('parseMermaid – node shapes (Batch 2)', () => {\n it('parses cylinder / database nodes: A[(Label)]', () => {\n const g = parseMermaid('graph TD\\n A[(Database)]')\n expect(g.nodes.get('A')!.shape).toBe('cylinder')\n expect(g.nodes.get('A')!.label).toBe('Database')\n })\n\n it('parses asymmetric / flag nodes: A>Label]', () => {\n const g = parseMermaid('graph TD\\n A>Flag Shape]')\n expect(g.nodes.get('A')!.shape).toBe('asymmetric')\n expect(g.nodes.get('A')!.label).toBe('Flag Shape')\n })\n\n it('parses trapezoid nodes: A[/Label\\\\]', () => {\n const g = parseMermaid('graph TD\\n A[/Trapezoid\\\\]')\n expect(g.nodes.get('A')!.shape).toBe('trapezoid')\n expect(g.nodes.get('A')!.label).toBe('Trapezoid')\n })\n\n it('parses trapezoid-alt nodes: A[\\\\Label/]', () => {\n const g = parseMermaid('graph TD\\n A[\\\\Alt Trapezoid/]')\n expect(g.nodes.get('A')!.shape).toBe('trapezoid-alt')\n expect(g.nodes.get('A')!.label).toBe('Alt Trapezoid')\n })\n})\n\n// ============================================================================\n// All shapes in one diagram — ensures no regex conflicts\n// ============================================================================\n\ndescribe('parseMermaid – all shapes combined', () => {\n it('parses all 13 shapes correctly in one diagram', () => {\n const g = parseMermaid(`graph TD\n A[Rectangle]\n B(Rounded)\n C{Diamond}\n D([Stadium])\n E((Circle))\n F[[Subroutine]]\n G(((DoubleCircle)))\n H{{Hexagon}}\n I[(Cylinder)]\n J>Asymmetric]\n K[/Trapezoid\\\\]\n L[\\\\TrapAlt/]`)\n\n expect(g.nodes.get('A')!.shape).toBe('rectangle')\n expect(g.nodes.get('B')!.shape).toBe('rounded')\n expect(g.nodes.get('C')!.shape).toBe('diamond')\n expect(g.nodes.get('D')!.shape).toBe('stadium')\n expect(g.nodes.get('E')!.shape).toBe('circle')\n expect(g.nodes.get('F')!.shape).toBe('subroutine')\n expect(g.nodes.get('G')!.shape).toBe('doublecircle')\n expect(g.nodes.get('H')!.shape).toBe('hexagon')\n expect(g.nodes.get('I')!.shape).toBe('cylinder')\n expect(g.nodes.get('J')!.shape).toBe('asymmetric')\n expect(g.nodes.get('K')!.shape).toBe('trapezoid')\n expect(g.nodes.get('L')!.shape).toBe('trapezoid-alt')\n })\n})\n\n// ============================================================================\n// Edge parsing — original arrows\n// ============================================================================\n\ndescribe('parseMermaid – edges (original)', () => {\n it('parses a solid edge: -->', () => {\n const g = parseMermaid('graph TD\\n A --> B')\n expect(g.edges).toHaveLength(1)\n expect(g.edges[0]!.source).toBe('A')\n expect(g.edges[0]!.target).toBe('B')\n expect(g.edges[0]!.style).toBe('solid')\n expect(g.edges[0]!.label).toBeUndefined()\n })\n\n it('parses a dotted edge: -.->', () => {\n const g = parseMermaid('graph TD\\n A -.-> B')\n expect(g.edges[0]!.style).toBe('dotted')\n })\n\n it('parses a thick edge: ==>', () => {\n const g = parseMermaid('graph TD\\n A ==> B')\n expect(g.edges[0]!.style).toBe('thick')\n })\n\n it('parses edge label: -->|label|', () => {\n const g = parseMermaid('graph TD\\n A -->|Yes| B')\n expect(g.edges[0]!.label).toBe('Yes')\n })\n\n it('parses edge label on dotted edges', () => {\n const g = parseMermaid('graph TD\\n A -.->|Maybe| B')\n expect(g.edges[0]!.label).toBe('Maybe')\n expect(g.edges[0]!.style).toBe('dotted')\n })\n\n it('parses chained edges: A --> B --> C', () => {\n const g = parseMermaid('graph TD\\n A --> B --> C')\n expect(g.edges).toHaveLength(2)\n expect(g.edges[0]!.source).toBe('A')\n expect(g.edges[0]!.target).toBe('B')\n expect(g.edges[1]!.source).toBe('B')\n expect(g.edges[1]!.target).toBe('C')\n })\n\n it('parses chained edges with shapes: A[Start] --> B{Check} --> C(End)', () => {\n const g = parseMermaid('graph TD\\n A[Start] --> B{Check} --> C(End)')\n expect(g.edges).toHaveLength(2)\n expect(g.nodes.get('A')!.shape).toBe('rectangle')\n expect(g.nodes.get('B')!.shape).toBe('diamond')\n expect(g.nodes.get('C')!.shape).toBe('rounded')\n })\n\n it('handles multiple edge lines', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n B --> C\\n C --> D')\n expect(g.edges).toHaveLength(3)\n })\n\n it('sets hasArrowEnd=true for arrow operators (-->)', () => {\n const g = parseMermaid('graph TD\\n A --> B')\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n expect(g.edges[0]!.hasArrowStart).toBe(false)\n })\n})\n\n// ============================================================================\n// No-arrow edges (Batch 1.1)\n// ============================================================================\n\ndescribe('parseMermaid – no-arrow edges', () => {\n it('parses solid line without arrow: ---', () => {\n const g = parseMermaid('graph TD\\n A --- B')\n expect(g.edges).toHaveLength(1)\n expect(g.edges[0]!.style).toBe('solid')\n expect(g.edges[0]!.hasArrowEnd).toBe(false)\n expect(g.edges[0]!.hasArrowStart).toBe(false)\n })\n\n it('parses dotted line without arrow: -.-', () => {\n const g = parseMermaid('graph TD\\n A -.- B')\n expect(g.edges[0]!.style).toBe('dotted')\n expect(g.edges[0]!.hasArrowEnd).toBe(false)\n })\n\n it('parses thick line without arrow: ===', () => {\n const g = parseMermaid('graph TD\\n A === B')\n expect(g.edges[0]!.style).toBe('thick')\n expect(g.edges[0]!.hasArrowEnd).toBe(false)\n })\n\n it('parses no-arrow with label: ---|text|', () => {\n const g = parseMermaid('graph TD\\n A ---|connects| B')\n expect(g.edges[0]!.label).toBe('connects')\n expect(g.edges[0]!.hasArrowEnd).toBe(false)\n })\n})\n\n// ============================================================================\n// Bidirectional arrows (Batch 2.4)\n// ============================================================================\n\ndescribe('parseMermaid – bidirectional arrows', () => {\n it('parses solid bidirectional: <-->', () => {\n const g = parseMermaid('graph TD\\n A <--> B')\n expect(g.edges).toHaveLength(1)\n expect(g.edges[0]!.style).toBe('solid')\n expect(g.edges[0]!.hasArrowStart).toBe(true)\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n\n it('parses dotted bidirectional: <-.->', () => {\n const g = parseMermaid('graph TD\\n A <-.-> B')\n expect(g.edges[0]!.style).toBe('dotted')\n expect(g.edges[0]!.hasArrowStart).toBe(true)\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n\n it('parses thick bidirectional: <==>', () => {\n const g = parseMermaid('graph TD\\n A <==> B')\n expect(g.edges[0]!.style).toBe('thick')\n expect(g.edges[0]!.hasArrowStart).toBe(true)\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n\n it('parses bidirectional with label: <-->|text|', () => {\n const g = parseMermaid('graph TD\\n A <-->|sync| B')\n expect(g.edges[0]!.label).toBe('sync')\n expect(g.edges[0]!.hasArrowStart).toBe(true)\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n})\n\n// ============================================================================\n// Text-embedded edge labels (fixes #32)\n// Based on PR #36 by @liuxiaopai-ai\n// ============================================================================\n\ndescribe('parseMermaid – text-embedded edge labels', () => {\n it('parses solid arrow with text label: -- Yes -->', () => {\n const g = parseMermaid('graph TD\\n A -- Yes --> B')\n expect(g.edges).toHaveLength(1)\n expect(g.edges[0]!.label).toBe('Yes')\n expect(g.edges[0]!.style).toBe('solid')\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n\n it('parses solid line with text label: -- text ---', () => {\n const g = parseMermaid('graph TD\\n A -- related --- B')\n expect(g.edges[0]!.label).toBe('related')\n expect(g.edges[0]!.style).toBe('solid')\n expect(g.edges[0]!.hasArrowEnd).toBe(false)\n })\n\n it('parses dotted arrow with text label: -. Maybe .->', () => {\n const g = parseMermaid('graph TD\\n A -. Maybe .-> B')\n expect(g.edges[0]!.label).toBe('Maybe')\n expect(g.edges[0]!.style).toBe('dotted')\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n\n it('parses thick arrow with text label: == Sure ==>', () => {\n const g = parseMermaid('graph TD\\n A == Sure ==> B')\n expect(g.edges[0]!.label).toBe('Sure')\n expect(g.edges[0]!.style).toBe('thick')\n expect(g.edges[0]!.hasArrowEnd).toBe(true)\n })\n\n it('parses multi-word text labels', () => {\n const g = parseMermaid('graph TD\\n A -- This is a label --> B')\n expect(g.edges[0]!.label).toBe('This is a label')\n })\n\n it('parses shaped nodes with text-embedded labels', () => {\n const g = parseMermaid('graph TD\\n A[Start] -- Yes --> B(End)')\n expect(g.edges[0]!.label).toBe('Yes')\n expect(g.nodes.get('A')!.shape).toBe('rectangle')\n expect(g.nodes.get('B')!.shape).toBe('rounded')\n })\n\n it('produces same result as pipe syntax (issue #32)', () => {\n const pipe = parseMermaid(`graph TD\n A --> B\n B -->|Yes| C`)\n const text = parseMermaid(`graph TD\n A --> B\n B -- Yes --> C`)\n expect(pipe.edges[1]!.label).toBe(text.edges[1]!.label)\n expect(pipe.edges[1]!.style).toBe(text.edges[1]!.style)\n expect(pipe.edges[1]!.hasArrowEnd).toBe(text.edges[1]!.hasArrowEnd)\n })\n\n it('handles the exact issue #32 scenario', () => {\n const g = parseMermaid(`flowchart TD\n A(Start) --> B{Is it sunny?}\n B -- Yes --> C[Go to the park]\n B -- No --> D[Stay indoors]\n C --> E[Finish]\n D --> E`)\n expect(g.edges).toHaveLength(5)\n expect(g.edges[1]!.label).toBe('Yes')\n expect(g.edges[2]!.label).toBe('No')\n })\n})\n\n// ============================================================================\n// Parallel links with & (Batch 2.6)\n// ============================================================================\n\ndescribe('parseMermaid – parallel links (&)', () => {\n it('expands A & B --> C to two edges', () => {\n const g = parseMermaid('graph TD\\n A & B --> C')\n expect(g.edges).toHaveLength(2)\n expect(g.edges[0]!.source).toBe('A')\n expect(g.edges[0]!.target).toBe('C')\n expect(g.edges[1]!.source).toBe('B')\n expect(g.edges[1]!.target).toBe('C')\n })\n\n it('expands A --> C & D to two edges', () => {\n const g = parseMermaid('graph TD\\n A --> C & D')\n expect(g.edges).toHaveLength(2)\n expect(g.edges[0]!.source).toBe('A')\n expect(g.edges[0]!.target).toBe('C')\n expect(g.edges[1]!.source).toBe('A')\n expect(g.edges[1]!.target).toBe('D')\n })\n\n it('expands A & B --> C & D to four edges (Cartesian product)', () => {\n const g = parseMermaid('graph TD\\n A & B --> C & D')\n expect(g.edges).toHaveLength(4)\n const edgePairs = g.edges.map(e => `${e.source}->${e.target}`)\n expect(edgePairs).toContain('A->C')\n expect(edgePairs).toContain('A->D')\n expect(edgePairs).toContain('B->C')\n expect(edgePairs).toContain('B->D')\n })\n})\n\n// ============================================================================\n// ::: class shorthand (Batch 1.2)\n// ============================================================================\n\ndescribe('parseMermaid – ::: class shorthand', () => {\n it('assigns class via ::: on shaped nodes', () => {\n const g = parseMermaid('graph TD\\n A[Start]:::highlight --> B')\n expect(g.classAssignments.get('A')).toBe('highlight')\n })\n\n it('assigns class via ::: on bare nodes', () => {\n const g = parseMermaid('graph TD\\n A:::important --> B')\n expect(g.classAssignments.get('A')).toBe('important')\n })\n\n it('works in chained edges', () => {\n const g = parseMermaid('graph TD\\n A:::start --> B:::mid --> C:::end')\n expect(g.classAssignments.get('A')).toBe('start')\n expect(g.classAssignments.get('B')).toBe('mid')\n expect(g.classAssignments.get('C')).toBe('end')\n })\n})\n\n// ============================================================================\n// Inline style statements (Batch 2.5)\n// ============================================================================\n\ndescribe('parseMermaid – style statements', () => {\n it('parses style for a single node', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n style A fill:#ff0000,stroke:#333')\n expect(g.nodeStyles.get('A')).toEqual({ fill: '#ff0000', stroke: '#333' })\n })\n\n it('parses style for multiple nodes', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n style A,B fill:#0f0')\n expect(g.nodeStyles.get('A')).toEqual({ fill: '#0f0' })\n expect(g.nodeStyles.get('B')).toEqual({ fill: '#0f0' })\n })\n\n it('merges multiple style statements for same node', () => {\n const g = parseMermaid('graph TD\\n A --> B\\n style A fill:#f00\\n style A stroke:#333')\n expect(g.nodeStyles.get('A')).toEqual({ fill: '#f00', stroke: '#333' })\n })\n})\n\n// ============================================================================\n// Subgraph direction override (Batch 2.7)\n// ============================================================================\n\ndescribe('parseMermaid – subgraph direction override', () => {\n it('parses direction override inside subgraph', () => {\n const g = parseMermaid(`graph TD\n subgraph sub1 [Left-Right Group]\n direction LR\n A --> B\n end`)\n expect(g.subgraphs[0]!.direction).toBe('LR')\n })\n\n it('does not apply direction outside subgraph', () => {\n // \"direction LR\" at root level without subgraph context should not change graph direction\n const g = parseMermaid('graph TD\\n A --> B')\n expect(g.direction).toBe('TD')\n })\n})\n\n// ============================================================================\n// Subgraphs\n// ============================================================================\n\ndescribe('parseMermaid – subgraphs', () => {\n it('parses a basic subgraph', () => {\n const g = parseMermaid(`graph TD\n subgraph Backend\n A --> B\n end`)\n expect(g.subgraphs).toHaveLength(1)\n expect(g.subgraphs[0]!.label).toBe('Backend')\n expect(g.subgraphs[0]!.nodeIds).toContain('A')\n expect(g.subgraphs[0]!.nodeIds).toContain('B')\n })\n\n it('parses subgraph with bracket ID syntax: subgraph id [Label]', () => {\n const g = parseMermaid(`graph TD\n subgraph be [Backend Services]\n A --> B\n end`)\n expect(g.subgraphs[0]!.id).toBe('be')\n expect(g.subgraphs[0]!.label).toBe('Backend Services')\n })\n\n it('parses subgraph bracket syntax with hyphenated ID: subgraph us-east [US East]', () => {\n const g = parseMermaid(`graph TD\n subgraph us-east [US East Region]\n A --> B\n end`)\n expect(g.subgraphs[0]!.id).toBe('us-east')\n expect(g.subgraphs[0]!.label).toBe('US East Region')\n })\n\n it('slugifies label as id when bracket syntax is not used', () => {\n const g = parseMermaid(`graph TD\n subgraph My Group\n A --> B\n end`)\n expect(g.subgraphs[0]!.id).toBe('My_Group')\n expect(g.subgraphs[0]!.label).toBe('My Group')\n })\n\n it('parses nested subgraphs', () => {\n const g = parseMermaid(`graph TD\n subgraph Outer\n subgraph Inner\n A --> B\n end\n C --> D\n end`)\n expect(g.subgraphs).toHaveLength(1) // only top-level\n const outer = g.subgraphs[0]!\n expect(outer.label).toBe('Outer')\n expect(outer.children).toHaveLength(1)\n expect(outer.children[0]!.label).toBe('Inner')\n expect(outer.children[0]!.nodeIds).toContain('A')\n expect(outer.children[0]!.nodeIds).toContain('B')\n expect(outer.nodeIds).toContain('C')\n expect(outer.nodeIds).toContain('D')\n })\n\n it('does NOT track nodes in subgraphs where they are merely referenced (regression)', () => {\n // This diagram has cross-subgraph edges:\n // - B is defined in \"clients\" but referenced in \"services\"\n // - D, E, F are defined in \"services\" but referenced in \"data\"\n // Nodes should only belong to the subgraph where they are FIRST DEFINED.\n const g = parseMermaid(`graph LR\n subgraph clients [Client Layer]\n A([Web App]) --> B[API Gateway]\n C([Mobile App]) --> B\n end\n subgraph services [Service Layer]\n B --> D[Auth Service]\n B --> E[User Service]\n B --> F[Order Service]\n end\n subgraph data [Data Layer]\n D --> G[(Auth DB)]\n E --> H[(User DB)]\n F --> I[(Order DB)]\n F --> J([Message Queue])\n end`)\n\n const clients = g.subgraphs.find(sg => sg.id === 'clients')!\n const services = g.subgraphs.find(sg => sg.id === 'services')!\n const data = g.subgraphs.find(sg => sg.id === 'data')!\n\n // B should ONLY be in clients (where it's defined), NOT in services\n expect(clients.nodeIds).toContain('B')\n expect(services.nodeIds).not.toContain('B')\n\n // D, E, F should ONLY be in services, NOT in data\n expect(services.nodeIds).toContain('D')\n expect(services.nodeIds).toContain('E')\n expect(services.nodeIds).toContain('F')\n expect(data.nodeIds).not.toContain('D')\n expect(data.nodeIds).not.toContain('E')\n expect(data.nodeIds).not.toContain('F')\n\n // Data layer should only have its own nodes\n expect(data.nodeIds).toContain('G')\n expect(data.nodeIds).toContain('H')\n expect(data.nodeIds).toContain('I')\n expect(data.nodeIds).toContain('J')\n })\n})\n\n// ============================================================================\n// classDef and class assignments\n// ============================================================================\n\ndescribe('parseMermaid – classDef and class', () => {\n it('parses classDef with properties', () => {\n const g = parseMermaid(`graph TD\n classDef highlight fill:#f96,stroke:#333\n A --> B`)\n expect(g.classDefs.has('highlight')).toBe(true)\n const props = g.classDefs.get('highlight')!\n expect(props['fill']).toBe('#f96')\n expect(props['stroke']).toBe('#333')\n })\n\n it('parses class assignments to single node', () => {\n const g = parseMermaid(`graph TD\n A --> B\n class A highlight`)\n expect(g.classAssignments.get('A')).toBe('highlight')\n })\n\n it('parses class assignments to multiple nodes', () => {\n const g = parseMermaid(`graph TD\n A --> B --> C\n class A,B highlight`)\n expect(g.classAssignments.get('A')).toBe('highlight')\n expect(g.classAssignments.get('B')).toBe('highlight')\n })\n})\n\n// ============================================================================\n// Comments\n// ============================================================================\n\ndescribe('parseMermaid – comments', () => {\n it('ignores lines starting with %%', () => {\n const g = parseMermaid(`graph TD\n %% This is a comment\n A --> B\n %% Another comment`)\n expect(g.nodes.size).toBe(2)\n expect(g.edges).toHaveLength(1)\n })\n})\n\n// ============================================================================\n// Edge cases\n// ============================================================================\n\ndescribe('parseMermaid – edge cases', () => {\n it('handles extra whitespace', () => {\n const g = parseMermaid(' graph TD \\n A --> B ')\n expect(g.edges).toHaveLength(1)\n expect(g.nodes.size).toBe(2)\n })\n\n it('handles empty lines between definitions', () => {\n const g = parseMermaid('graph TD\\n\\n A --> B\\n\\n B --> C')\n expect(g.edges).toHaveLength(2)\n })\n\n it('handles diagram with only nodes (no edges)', () => {\n const g = parseMermaid('graph TD\\n A[Only Node]')\n expect(g.nodes.size).toBe(1)\n expect(g.edges).toHaveLength(0)\n })\n\n it('preserves node order in the map', () => {\n const g = parseMermaid('graph TD\\n Z[Last] --> A[First]')\n const ids = [...g.nodes.keys()]\n expect(ids[0]).toBe('Z')\n expect(ids[1]).toBe('A')\n })\n})\n\n// ============================================================================\n// State diagram parsing (Batch 3)\n// ============================================================================\n\ndescribe('parseMermaid – state diagrams', () => {\n it('detects stateDiagram-v2 header', () => {\n const g = parseMermaid('stateDiagram-v2\\n s1 --> s2')\n expect(g.direction).toBe('TD')\n })\n\n it('detects stateDiagram header (without -v2)', () => {\n const g = parseMermaid('stateDiagram\\n s1 --> s2')\n expect(g.direction).toBe('TD')\n })\n\n it('parses basic state transitions', () => {\n const g = parseMermaid(`stateDiagram-v2\n Idle --> Active\n Active --> Done`)\n expect(g.edges).toHaveLength(2)\n expect(g.edges[0]!.source).toBe('Idle')\n expect(g.edges[0]!.target).toBe('Active')\n expect(g.edges[1]!.source).toBe('Active')\n expect(g.edges[1]!.target).toBe('Done')\n // State nodes default to rounded shape\n expect(g.nodes.get('Idle')!.shape).toBe('rounded')\n })\n\n it('parses transition labels', () => {\n const g = parseMermaid(`stateDiagram-v2\n Idle --> Active : start`)\n expect(g.edges[0]!.label).toBe('start')\n })\n\n it('parses [*] start pseudostate', () => {\n const g = parseMermaid(`stateDiagram-v2\n [*] --> Idle`)\n // [*] as source becomes _start with state-start shape\n const startNode = g.nodes.get('_start')\n expect(startNode).toBeDefined()\n expect(startNode!.shape).toBe('state-start')\n expect(g.edges[0]!.source).toBe('_start')\n })\n\n it('parses [*] end pseudostate', () => {\n const g = parseMermaid(`stateDiagram-v2\n Done --> [*]`)\n const endNode = g.nodes.get('_end')\n expect(endNode).toBeDefined()\n expect(endNode!.shape).toBe('state-end')\n expect(g.edges[0]!.target).toBe('_end')\n })\n\n it('assigns unique IDs to multiple [*] pseudostates', () => {\n const g = parseMermaid(`stateDiagram-v2\n [*] --> A\n [*] --> B`)\n // First [*] source → _start, second → _start2\n expect(g.nodes.has('_start')).toBe(true)\n expect(g.nodes.has('_start2')).toBe(true)\n })\n\n it('parses state description: s1 : Description', () => {\n const g = parseMermaid(`stateDiagram-v2\n s1 : Idle State\n s1 --> s2`)\n expect(g.nodes.get('s1')!.label).toBe('Idle State')\n expect(g.nodes.get('s1')!.shape).toBe('rounded')\n })\n\n it('parses state alias: state \"Description\" as s1', () => {\n const g = parseMermaid(`stateDiagram-v2\n state \"Waiting for input\" as waiting\n waiting --> active`)\n expect(g.nodes.get('waiting')!.label).toBe('Waiting for input')\n })\n\n it('parses composite states', () => {\n const g = parseMermaid(`stateDiagram-v2\n state Processing {\n parse --> validate\n validate --> execute\n }`)\n expect(g.subgraphs).toHaveLength(1)\n expect(g.subgraphs[0]!.id).toBe('Processing')\n expect(g.subgraphs[0]!.label).toBe('Processing')\n expect(g.subgraphs[0]!.nodeIds).toContain('parse')\n expect(g.subgraphs[0]!.nodeIds).toContain('validate')\n expect(g.subgraphs[0]!.nodeIds).toContain('execute')\n })\n\n it('parses composite states with alias', () => {\n const g = parseMermaid(`stateDiagram-v2\n state \"Active Processing\" as AP {\n inner1 --> inner2\n }`)\n expect(g.subgraphs[0]!.id).toBe('AP')\n expect(g.subgraphs[0]!.label).toBe('Active Processing')\n })\n\n it('parses direction override in state diagrams', () => {\n const g = parseMermaid(`stateDiagram-v2\n direction LR\n s1 --> s2`)\n expect(g.direction).toBe('LR')\n })\n\n it('parses direction override inside composite state', () => {\n const g = parseMermaid(`stateDiagram-v2\n state Processing {\n direction LR\n parse --> validate\n }`)\n expect(g.subgraphs[0]!.direction).toBe('LR')\n })\n\n it('parses CJK (Chinese) state names in transitions', () => {\n const g = parseMermaid(`stateDiagram-v2\n [*] --> 空闲\n 空闲 --> 完成`)\n expect(g.edges).toHaveLength(2)\n expect(g.edges[0]!.target).toBe('空闲')\n expect(g.edges[1]!.source).toBe('空闲')\n expect(g.edges[1]!.target).toBe('完成')\n expect(g.nodes.get('空闲')!.shape).toBe('rounded')\n })\n\n it('parses CJK state names with transition labels', () => {\n const g = parseMermaid(`stateDiagram-v2\n 空闲 --> 处理中 : 提交`)\n expect(g.edges[0]!.source).toBe('空闲')\n expect(g.edges[0]!.target).toBe('处理中')\n expect(g.edges[0]!.label).toBe('提交')\n })\n\n it('parses CJK state descriptions', () => {\n const g = parseMermaid(`stateDiagram-v2\n 空闲 : 等待输入\n 空闲 --> 完成`)\n expect(g.nodes.get('空闲')!.label).toBe('等待输入')\n })\n\n it('parses Japanese state names', () => {\n const g = parseMermaid(`stateDiagram-v2\n [*] --> 待機\n 待機 --> 処理中 : 開始\n 処理中 --> 完了`)\n expect(g.edges).toHaveLength(3)\n expect(g.nodes.has('待機')).toBe(true)\n expect(g.nodes.has('処理中')).toBe(true)\n expect(g.nodes.has('完了')).toBe(true)\n })\n\n it('handles full state diagram with start/end and composites', () => {\n const g = parseMermaid(`stateDiagram-v2\n [*] --> Idle\n Idle --> Processing : submit\n state Processing {\n parse --> validate\n validate --> execute\n }\n Processing --> Complete : done\n Complete --> [*]`)\n\n expect(g.nodes.has('_start')).toBe(true)\n expect(g.nodes.has('_end')).toBe(true)\n expect(g.nodes.has('Idle')).toBe(true)\n expect(g.nodes.has('Complete')).toBe(true)\n expect(g.subgraphs).toHaveLength(1)\n expect(g.subgraphs[0]!.id).toBe('Processing')\n // Should have transitions for: [*]→Idle, Idle→Processing, parse→validate,\n // validate→execute, Processing→Complete, Complete→[*]\n expect(g.edges).toHaveLength(6)\n })\n})\n" }, { "path": "src/__tests__/renderer.test.ts", "content": "/**\n * Tests for the SVG renderer.\n *\n * Uses hand-crafted PositionedGraph data to test SVG output without\n * depending on the layout engine.\n */\nimport { describe, it, expect } from 'bun:test'\nimport { renderSvg } from '../renderer.ts'\nimport type { DiagramColors } from '../theme.ts'\nimport type { PositionedGraph, PositionedNode, PositionedEdge, PositionedGroup } from '../types.ts'\n\n/** Minimal positioned graph for testing */\nfunction makeGraph(overrides: Partial = {}): PositionedGraph {\n return {\n width: 400,\n height: 300,\n nodes: [],\n edges: [],\n groups: [],\n ...overrides,\n }\n}\n\n/** Helper to build a positioned node */\nfunction makeNode(overrides: Partial = {}): PositionedNode {\n return {\n id: 'A',\n label: 'Test',\n shape: 'rectangle',\n x: 100,\n y: 100,\n width: 80,\n height: 40,\n ...overrides,\n }\n}\n\n/** Helper to build a positioned edge with arrow defaults */\nfunction makeEdge(overrides: Partial = {}): PositionedEdge {\n return {\n source: 'A',\n target: 'B',\n style: 'solid',\n hasArrowStart: false,\n hasArrowEnd: true,\n points: [{ x: 100, y: 120 }, { x: 100, y: 200 }],\n ...overrides,\n }\n}\n\n/** Default light colors — CSS custom properties handle actual styling */\nconst lightColors: DiagramColors = { bg: '#FFFFFF', fg: '#27272A' }\nconst darkColors: DiagramColors = { bg: '#18181B', fg: '#FAFAFA' }\n\n// ============================================================================\n// SVG structure\n// ============================================================================\n\ndescribe('renderSvg – SVG structure', () => {\n it('produces a valid SVG root element', () => {\n const svg = renderSvg(makeGraph(), lightColors)\n expect(svg).toContain('')\n })\n\n it('includes with arrow markers', () => {\n const svg = renderSvg(makeGraph(), lightColors)\n expect(svg).toContain('')\n expect(svg).toContain('')\n })\n\n it('includes embedded Google Fonts import', () => {\n const svg = renderSvg(makeGraph(), lightColors, 'Inter')\n expect(svg).toContain('fonts.googleapis.com')\n expect(svg).toContain('Inter')\n })\n\n it('uses custom font name when specified', () => {\n const svg = renderSvg(makeGraph(), lightColors, 'Roboto Mono')\n // encodeURIComponent turns spaces into %20\n expect(svg).toContain('Roboto%20Mono')\n expect(svg).toContain(\"'Roboto Mono'\")\n })\n\n it('sets CSS color variables in inline style', () => {\n const light = renderSvg(makeGraph(), lightColors)\n expect(light).toContain('--bg:#FFFFFF')\n expect(light).toContain('--fg:#27272A')\n\n const dark = renderSvg(makeGraph(), darkColors)\n expect(dark).toContain('--bg:#18181B')\n expect(dark).toContain('--fg:#FAFAFA')\n })\n})\n\n// ============================================================================\n// Original node shapes\n// ============================================================================\n\ndescribe('renderSvg – node shapes', () => {\n it('renders rectangle with rx=0', () => {\n const graph = makeGraph({ nodes: [makeNode({ shape: 'rectangle' })] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('rx=\"0\" ry=\"0\"')\n })\n\n it('renders rounded rectangle with rx=6', () => {\n const graph = makeGraph({ nodes: [makeNode({ shape: 'rounded' })] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('rx=\"6\" ry=\"6\"')\n })\n\n it('renders stadium with rx=height/2', () => {\n const node = makeNode({ shape: 'stadium', height: 40 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('rx=\"20\" ry=\"20\"')\n })\n\n it('renders circle with element', () => {\n const node = makeNode({ shape: 'circle', width: 60, height: 60 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('', () => {\n const node = makeNode({ shape: 'diamond', width: 80, height: 80 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain(' elements', () => {\n const graph = makeGraph({ nodes: [makeNode({ label: 'My Node' })] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('>My Node    ')\n })\n})\n\n// ============================================================================\n// New Batch 1 shapes\n// ============================================================================\n\ndescribe('renderSvg – new shapes (Batch 1)', () => {\n it('renders subroutine with outer rect and inset vertical lines', () => {\n const node = makeNode({ shape: 'subroutine', width: 100, height: 40 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n // Outer rect\n expect(svg).toContain(' elements', () => {\n const node = makeNode({ shape: 'doublecircle', width: 80, height: 80 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n const circleMatches = svg.match(/', () => {\n const node = makeNode({ shape: 'hexagon', width: 100, height: 40 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain(' {\n it('renders cylinder with ellipses and body rect', () => {\n const node = makeNode({ shape: 'cylinder', width: 80, height: 50 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n // Should contain ellipses for top and bottom caps\n const ellipseMatches = svg.match(/', () => {\n const node = makeNode({ shape: 'asymmetric', width: 100, height: 40 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('', () => {\n const node = makeNode({ shape: 'trapezoid', width: 100, height: 40 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('', () => {\n const node = makeNode({ shape: 'trapezoid-alt', width: 100, height: 40 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain(' {\n it('renders state-start as a filled circle', () => {\n const node = makeNode({ shape: 'state-start', label: '', width: 28, height: 28 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain(' {\n const node = makeNode({ shape: 'state-end', label: '', width: 28, height: 28 })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n const circleMatches = svg.match(/ {\n it('renders a solid edge as with end arrow', () => {\n const edge = makeEdge({ style: 'solid', hasArrowEnd: true })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain(' {\n const edge = makeEdge({ style: 'dotted' })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('stroke-dasharray=\"4 4\"')\n })\n\n it('renders thick edges with doubled stroke width', () => {\n const edge = makeEdge({ style: 'thick' })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n // Base connector stroke is 1px, thick is doubled to 2px\n expect(svg).toContain('stroke-width=\"2\"')\n })\n\n it('does not add dasharray to solid edges', () => {\n const edge = makeEdge({ style: 'solid' })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).not.toContain('dasharray')\n })\n\n it('skips edges with fewer than 2 points', () => {\n const edge = makeEdge({ points: [{ x: 0, y: 0 }] })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).not.toContain(' {\n const edge = makeEdge({ hasArrowEnd: false, hasArrowStart: false })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain(' {\n const edge = makeEdge({ hasArrowStart: true, hasArrowEnd: true })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('marker-end=\"url(#arrowhead)\"')\n expect(svg).toContain('marker-start=\"url(#arrowhead-start)\"')\n })\n})\n\n// ============================================================================\n// Edge labels\n// ============================================================================\n\ndescribe('renderSvg – edge labels', () => {\n it('renders edge label with background pill', () => {\n const edge = makeEdge({ label: 'Yes' })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('>Yes')\n expect(svg).toContain('rx=\"2\" ry=\"2\"')\n })\n\n it('does not render label elements for edges without labels', () => {\n const edge = makeEdge({ label: undefined })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n const textMatches = svg.match(/]*>.*?<\\/text>/g) ?? []\n expect(textMatches).toHaveLength(0)\n })\n\n it('uses labelPosition when provided instead of edge midpoint', () => {\n // Edge midpoint would be at (100, 160) given these points.\n // labelPosition overrides to (50, 80) — verify the SVG uses that coordinate.\n const edge = makeEdge({\n label: 'Go',\n points: [{ x: 100, y: 120 }, { x: 100, y: 200 }],\n labelPosition: { x: 50, y: 80 },\n })\n const graph = makeGraph({ edges: [edge] })\n const svg = renderSvg(graph, lightColors)\n\n // The label text should be centered at the labelPosition (x=50, y=80)\n expect(svg).toContain('x=\"50\" y=\"80\"')\n // The midpoint y=160 should NOT appear in any label-related element\n expect(svg).not.toContain('y=\"160\"')\n })\n})\n\n// ============================================================================\n// Group rendering (subgraphs)\n// ============================================================================\n\ndescribe('renderSvg – groups', () => {\n it('renders group with outer rectangle and header band', () => {\n const group: PositionedGroup = {\n id: 'sg1', label: 'Backend',\n x: 20, y: 20, width: 200, height: 150, children: [],\n }\n const graph = makeGraph({ groups: [group] })\n const svg = renderSvg(graph, lightColors)\n const rectCount = (svg.match(/x=\"20\" y=\"20\"/g) ?? []).length\n expect(rectCount).toBeGreaterThanOrEqual(2)\n expect(svg).toContain('>Backend')\n })\n\n it('renders nested groups recursively', () => {\n const inner: PositionedGroup = {\n id: 'inner', label: 'Inner',\n x: 40, y: 60, width: 120, height: 80, children: [],\n }\n const outer: PositionedGroup = {\n id: 'outer', label: 'Outer',\n x: 20, y: 20, width: 200, height: 150, children: [inner],\n }\n const graph = makeGraph({ groups: [outer] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('>Outer')\n expect(svg).toContain('>Inner')\n })\n})\n\n// ============================================================================\n// Inline style support\n// ============================================================================\n\ndescribe('renderSvg – inline styles', () => {\n it('applies inline fill override', () => {\n const node = makeNode({ inlineStyle: { fill: '#ff0000' } })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('fill=\"#ff0000\"')\n })\n\n it('applies inline stroke override', () => {\n const node = makeNode({ inlineStyle: { stroke: '#00ff00' } })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('stroke=\"#00ff00\"')\n })\n\n it('applies inline text color override', () => {\n const node = makeNode({ inlineStyle: { color: '#0000ff' } })\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('fill=\"#0000ff\"')\n })\n\n it('falls back to theme when no inline style', () => {\n const node = makeNode()\n const graph = makeGraph({ nodes: [node] })\n const svg = renderSvg(graph, lightColors)\n expect(svg).toContain('fill=\"var(--_node-fill)\"')\n })\n})\n\n// ============================================================================\n// XML escaping\n// ============================================================================\n\ndescribe('renderSvg – XML escaping', () => {\n it('escapes special characters in node labels', () => {\n const node = makeNode({ label: '\n \n\n\n
    \n\n
    \n
    XY Chart Test
    \n \n
    \n \n
    \n \n \n \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n \n
    \n

    Basic Bar Charts (10)

    \n
      \n
    1. 1. Simple Bar Chart
      2. \n
    2. 2. Five-Category Bars
      3. \n
    3. 3. Descending Values
      4. \n
    4. 4. Single Bar
      5. \n
    5. 5. Eight-Category Bars
      6. \n
    6. 6. Small Values
      7. \n
    7. 7. Uniform Values
      8. \n
    8. 8. Wide Range
      9. \n
    9. 9. Ten-Category Bars
      10. \n
    10. 10. Bars With Y-Axis Range
      11. \n
    \n
    \n\n
    \n

    Basic Line Charts (10)

    \n
      \n
    1. 11. Simple Line Chart
      2. \n
    2. 12. Upward Trend
      3. \n
    3. 13. Downward Trend
      4. \n
    4. 14. Oscillating Values
      5. \n
    5. 15. Large Scale Line
      6. \n
    6. 16. Flat Line
      7. \n
    7. 17. Spike Pattern
      8. \n
    8. 18. V-Shape Recovery
      9. \n
    9. 19. Step Pattern
      10. \n
    10. 20. Two Lines
      11. \n
    \n
    \n\n
    \n

    Combined Bar + Line (10)

    \n
      \n
    1. 21. Bar and Line Overlay
      2. \n
    2. 22. Bar with Trend Line
      3. \n
    3. 23. Bar with Target Line
      4. \n
    4. 24. Revenue and Profit
      5. \n
    5. 25. Dual Dataset Overlay
      6. \n
    6. 26. Costs vs Revenue
      7. \n
    7. 27. Bar with Two Lines
      8. \n
    8. 28. Stacked Context
      9. \n
    9. 29. Cumulative Line Over Bars
      10. \n
    10. 30. Conversion Funnel
      11. \n
    \n
    \n\n
    \n

    Axis Configurations (15)

    \n
      \n
    1. 31. Categorical X-Axis
      2. \n
    2. 32. Numeric X-Axis Range
      3. \n
    3. 33. Y-Axis with Label and Range
      4. \n
    4. 34. Y-Axis Range Without Label
      5. \n
    5. 35. X-Axis with Title
      6. \n
    6. 36. Both Axes Titled
      7. \n
    7. 37. Long Category Labels
      8. \n
    8. 38. Many Short Labels
      9. \n
    9. 39. Wide Y-Axis Range
      10. \n
    10. 40. Narrow Y-Axis Range
      11. \n
    11. 41. Auto-Range Y-Axis
      12. \n
    12. 42. Year Labels
      13. \n
    13. 43. Percentage Y-Axis
      14. \n
    14. 44. Numeric X-Axis with Bars
      15. \n
    15. 45. Mixed Short and Long Labels
      16. \n
    \n
    \n\n
    \n

    Horizontal Orientation (10)

    \n
      \n
    1. 46. Horizontal Bar Chart
      2. \n
    2. 47. Horizontal with Y-Axis
      3. \n
    3. 48. Horizontal Line Chart
      4. \n
    4. 49. Horizontal Combined
      5. \n
    5. 50. Horizontal Ranking
      6. \n
    6. 51. Horizontal Small Values
      7. \n
    7. 52. Horizontal Two Bars
      8. \n
    8. 53. Horizontal Wide Range
      9. \n
    9. 54. Horizontal with Two Lines
      10. \n
    10. 55. Horizontal Long Labels
      11. \n
    \n
    \n\n
    \n

    Titles & Formatting (10)

    \n
      \n
    1. 56. No Title
      2. \n
    2. 57. Short Title
      3. \n
    3. 58. Long Title
      4. \n
    4. 59. Title with Numbers
      5. \n
    5. 60. Title with Special Characters
      6. \n
    6. 61. Title with Ampersand
      7. \n
    7. 62. Title with Hyphen
      8. \n
    8. 63. Minimal Chart
      9. \n
    9. 64. Full Specification
      10. \n
    10. 65. Title with Colon
      11. \n
    \n
    \n\n
    \n

    Large Datasets (10)

    \n
      \n
    1. 66. 12-Month Dataset
      2. \n
    2. 67. 26-Point Alphabet
      3. \n
    3. 68. Dense Weekly Data
      4. \n
    4. 69. Multiple Series Large
      5. \n
    5. 70. Two Bars Twelve Months
      6. \n
    6. 71. High Frequency Data
      7. \n
    7. 72. Large Values Dataset
      8. \n
    8. 73. Three Lines Large
      9. \n
    9. 74. Quarterly Four Years
      10. \n
    10. 75. Dense Bars and Line
      11. \n
    \n
    \n\n
    \n

    Edge Cases (10)

    \n
      \n
    1. 76. Single Data Point
      2. \n
    2. 77. All Zeros
      3. \n
    3. 78. Very Large Numbers
      4. \n
    4. 79. Very Small Numbers
      5. \n
    5. 80. Two Data Points
      6. \n
    6. 81. Single Value Repeated
      7. \n
    7. 82. Extreme Outlier
      8. \n
    8. 83. Descending to Zero
      9. \n
    9. 84. Ascending from Zero
      10. \n
    10. 85. Alternating High Low
      11. \n
    \n
    \n\n
    \n

    Real-World Scenarios (15)

    \n
      \n
    1. 86. Monthly Revenue Report
      2. \n
    2. 87. Cumulative Registered Users
      3. \n
    3. 88. Temperature Over the Year
      4. \n
    4. 89. Stock Price Trend
      5. \n
    5. 90. Survey Results
      6. \n
    6. 91. API Response Time
      7. \n
    7. 92. Website Analytics
      8. \n
    8. 93. Sprint Burndown
      9. \n
    9. 94. Marketing Funnel
      10. \n
    10. 95. Server Error Rates
      11. \n
    11. 96. Employee Growth
      12. \n
    12. 97. Monthly Churn Rate
      13. \n
    13. 98. A/B Test Results
      14. \n
    14. 99. Cloud Cost Breakdown
      15. \n
    15. 100. Release Frequency
      16. \n
    \n
    \n
    \n
    \n
    \n\n
    \n

    XY Chart Test

    \n

    xychart-beta rendering comparison: Chart.js vs beautiful-mermaid

    \n

    \n Column 1 shows the Mermaid source, Column 2 renders a Chart.js reference,\n and Column 3 shows the beautiful-mermaid SVG rendering with theme support.\n

    \n
    \n

    100 xychart-beta examples across 9 categories

    \n

    Chart.js reference + beautiful-mermaid SVG comparison

    \n
    \n
    \n\n
    \n\n

    Basic Bar Charts

    \n\n
    \n
    \n

    Simple Bar Chart

    \n

    A minimal bar chart with three data points.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Simple Bar Chart\"\n    x-axis [A, B, C]\n    bar [10, 20, 30]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Five-Category Bars

    \n

    Bar chart with five categories and varied values.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Product Sales\"\n    x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]\n    bar [150, 230, 180, 95, 310]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Descending Values

    \n

    Bars sorted in descending order to show ranking.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Browser Market Share\"\n    x-axis [Chrome, Safari, Firefox, Edge, Other]\n    bar [65, 19, 8, 5, 3]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Single Bar

    \n

    A bar chart with only two data points.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Q1 vs Q2\"\n    x-axis [Q1, Q2]\n    bar [4500, 5200]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Eight-Category Bars

    \n

    Bar chart with eight categories and varied heights.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Department Headcount\"\n    x-axis [Eng, Sales, Marketing, Support, HR, Finance, Legal, Ops]\n    bar [45, 32, 18, 25, 8, 12, 6, 15]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Small Values

    \n

    Bar chart with small integer values under 10.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Daily Bugs Found\"\n    x-axis [Mon, Tue, Wed, Thu, Fri]\n    bar [3, 7, 2, 5, 1]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Uniform Values

    \n

    Bars with nearly identical heights.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Consistent Output\"\n    x-axis [Week 1, Week 2, Week 3, Week 4]\n    bar [100, 102, 99, 101]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Wide Range

    \n

    Bars with a wide range of values from small to large.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"City Population (thousands)\"\n    x-axis [Town A, Town B, City C, Metro D, Mega E]\n    bar [5, 25, 150, 800, 3500]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Ten-Category Bars

    \n

    Bar chart with ten data points showing monthly figures.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly Signups\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct]\n    bar [120, 145, 190, 210, 250, 280, 310, 295, 340, 380]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Bars With Y-Axis Range

    \n

    Bar chart with an explicit y-axis range.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Test Scores\"\n    x-axis [Alice, Bob, Carol, Dave, Eve]\n    y-axis \"Score\" 0 --> 100\n    bar [85, 72, 91, 68, 95]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Basic Line Charts

    \n\n
    \n
    \n

    Simple Line Chart

    \n

    A minimal line chart with four data points.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Simple Trend\"\n    x-axis [Q1, Q2, Q3, Q4]\n    line [100, 150, 130, 180]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Upward Trend

    \n

    Line chart showing a steady upward trend.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Revenue Growth\"\n    x-axis [2019, 2020, 2021, 2022, 2023]\n    line [500, 620, 780, 950, 1200]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Downward Trend

    \n

    Line chart showing a declining trend.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Declining Defect Rate\"\n    x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5, Sprint 6]\n    line [25, 20, 15, 12, 8, 5]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Oscillating Values

    \n

    Line chart with values that rise and fall repeatedly.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Daily Temperature Variation\"\n    x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]\n    line [18, 22, 17, 24, 19, 26, 20]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Large Scale Line

    \n

    Line chart with values in the thousands.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Website Visitors\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    y-axis \"Visitors\" 0 --> 50000\n    line [12000, 18000, 25000, 31000, 38000, 45000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Flat Line

    \n

    A line chart where values remain approximately constant.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Stable Metric\"\n    x-axis [W1, W2, W3, W4, W5, W6]\n    line [50, 51, 49, 50, 52, 50]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Spike Pattern

    \n

    Line chart with a dramatic spike in the middle.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Traffic Spike\"\n    x-axis [6am, 8am, 10am, 12pm, 2pm, 4pm, 6pm]\n    line [200, 350, 1200, 4500, 2800, 900, 300]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    V-Shape Recovery

    \n

    Line chart showing a sharp decline followed by recovery.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Stock Price Recovery\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    line [100, 72, 45, 38, 65, 95]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Step Pattern

    \n

    Line chart with staircase-like jumps between plateaus.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Pricing Tiers\"\n    x-axis [Free, Basic, Pro, Team, Enterprise]\n    line [0, 10, 25, 50, 100]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Two Lines

    \n

    Two line series plotted on the same chart.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Planned vs Actual\"\n    x-axis [Q1, Q2, Q3, Q4]\n    line [100, 200, 300, 400]\n    line [90, 210, 280, 420]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Combined Bar + Line

    \n\n
    \n
    \n

    Bar and Line Overlay

    \n

    Bars with a line overlaid showing the same data as a trend.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly Revenue\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    y-axis \"Revenue (USD)\" 0 --> 10000\n    bar [5000, 6200, 7800, 4500, 9200, 8100]\n    line [5000, 6200, 7800, 4500, 9200, 8100]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Bar with Trend Line

    \n

    Bars showing actual values with a line showing the moving average trend.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Sales with Trend\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    bar [300, 450, 280, 520, 390, 610]\n    line [300, 375, 343, 388, 388, 425]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Bar with Target Line

    \n

    Bars showing actual performance with a flat target line.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Performance vs Target\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    y-axis \"Units\" 0 --> 600\n    bar [320, 410, 380, 520, 290, 480]\n    line [400, 400, 400, 400, 400, 400]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Revenue and Profit

    \n

    Bars for revenue with a line for profit margin.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Revenue and Profit\"\n    x-axis [Q1, Q2, Q3, Q4]\n    bar [5000, 6500, 7200, 8100]\n    line [1200, 1800, 2100, 2600]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Dual Dataset Overlay

    \n

    Two bars and one line series for multi-metric comparison.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Orders, Returns, and Net\"\n    x-axis [Jan, Feb, Mar, Apr, May]\n    bar [200, 250, 300, 280, 350]\n    bar [20, 30, 25, 35, 28]\n    line [180, 220, 275, 245, 322]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Costs vs Revenue

    \n

    Bars for costs with a line showing revenue growth.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Costs vs Revenue\"\n    x-axis [2020, 2021, 2022, 2023, 2024]\n    bar [400, 420, 450, 440, 460]\n    line [350, 480, 620, 780, 950]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Bar with Two Lines

    \n

    Bars with two overlaid line series for comparison.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Actual, Forecast, Target\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    bar [100, 120, 115, 140, 135, 160]\n    line [95, 110, 120, 130, 140, 150]\n    line [120, 120, 120, 120, 120, 120]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Stacked Context

    \n

    Multiple bar series with a line showing the total.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Channel Performance\"\n    x-axis [Jan, Feb, Mar, Apr]\n    bar [100, 120, 140, 160]\n    bar [80, 90, 100, 110]\n    line [180, 210, 240, 270]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Cumulative Line Over Bars

    \n

    Monthly bars with a cumulative line showing running total.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly and Cumulative Sales\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    bar [100, 150, 120, 180, 200, 170]\n    line [100, 250, 370, 550, 750, 920]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Conversion Funnel

    \n

    Bars for stage counts with a line showing conversion rate.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Funnel Analysis\"\n    x-axis [Visitors, Signups, Activated, Paid, Retained]\n    bar [10000, 3000, 1500, 800, 500]\n    line [10000, 3000, 1500, 800, 500]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Axis Configurations

    \n\n
    \n
    \n

    Categorical X-Axis

    \n

    Standard categorical x-axis with string labels.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Fruit Preferences\"\n    x-axis [Apple, Banana, Cherry, Date, Elderberry]\n    bar [45, 32, 28, 15, 8]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Numeric X-Axis Range

    \n

    Numeric x-axis using the range syntax.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Distribution Curve\"\n    x-axis 0 --> 100\n    line [5, 15, 35, 60, 80, 95, 80, 60, 35, 15, 5]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Y-Axis with Label and Range

    \n

    Y-axis with a title and explicit min/max range.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Temperature Log\"\n    x-axis [6am, 9am, 12pm, 3pm, 6pm, 9pm]\n    y-axis \"Temp (F)\" 50 --> 100\n    line [58, 65, 78, 85, 76, 62]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Y-Axis Range Without Label

    \n

    Y-axis with range but no title.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Sensor Readings\"\n    x-axis [T1, T2, T3, T4, T5]\n    y-axis 0 --> 500\n    line [120, 250, 380, 310, 190]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    X-Axis with Title

    \n

    Categorical x-axis with an axis title.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Quarterly Results\"\n    x-axis \"Quarter\" [Q1, Q2, Q3, Q4]\n    y-axis \"Revenue ($K)\" 0 --> 1000\n    bar [420, 580, 710, 890]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Both Axes Titled

    \n

    Both x-axis and y-axis have descriptive titles.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Experiment Results\"\n    x-axis \"Trial Number\" [1, 2, 3, 4, 5, 6]\n    y-axis \"Measurement (mm)\" 0 --> 50\n    line [12, 18, 25, 22, 31, 28]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Long Category Labels

    \n

    X-axis with long multi-word category labels.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Department Budget\"\n    x-axis [Engineering, Product Management, Customer Success, Human Resources]\n    bar [850, 420, 310, 180]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Many Short Labels

    \n

    X-axis with many single-character labels.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Letter Frequency\"\n    x-axis [A, B, C, D, E, F, G, H, I, J, K, L, M]\n    bar [82, 15, 28, 43, 127, 22, 20, 61, 70, 2, 8, 40, 24]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Wide Y-Axis Range

    \n

    Y-axis spanning a large range from 0 to 100000.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Annual Revenue\"\n    x-axis [2020, 2021, 2022, 2023, 2024]\n    y-axis \"USD\" 0 --> 100000\n    bar [15000, 28000, 45000, 67000, 92000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Narrow Y-Axis Range

    \n

    Y-axis with a tight range to emphasize small differences.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"CPU Temperature\"\n    x-axis [10s, 20s, 30s, 40s, 50s, 60s]\n    y-axis \"Celsius\" 60 --> 80\n    line [65, 68, 72, 75, 73, 70]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Auto-Range Y-Axis

    \n

    No y-axis declaration; auto-ranged from data.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Auto Range\"\n    x-axis [A, B, C, D, E]\n    bar [42, 87, 63, 29, 75]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Year Labels

    \n

    X-axis with year labels as categories.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Company Growth\"\n    x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025]\n    line [10, 15, 12, 22, 35, 48, 62, 80]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Percentage Y-Axis

    \n

    Y-axis configured as percentage from 0 to 100.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Completion Rate\"\n    x-axis [Week 1, Week 2, Week 3, Week 4, Week 5]\n    y-axis \"Percent\" 0 --> 100\n    line [15, 35, 58, 78, 95]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Numeric X-Axis with Bars

    \n

    Numeric x-axis range combined with bar data.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Histogram\"\n    x-axis 0 --> 50\n    bar [5, 12, 25, 38, 30, 18, 8]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Mixed Short and Long Labels

    \n

    X-axis with a mix of short and longer labels.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Regional Sales\"\n    x-axis [US, EU, Asia Pacific, LATAM, MEA, ANZ]\n    bar [450, 380, 520, 180, 95, 60]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Horizontal Orientation

    \n\n
    \n
    \n

    Horizontal Bar Chart

    \n

    Simple horizontal bar chart.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Language Popularity\"\n    x-axis [Python, JavaScript, Java, Go, Rust]\n    bar [30, 25, 20, 12, 8]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal with Y-Axis

    \n

    Horizontal bars with explicit y-axis range.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Sprint Velocity\"\n    x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5]\n    y-axis \"Story Points\" 0 --> 100\n    bar [45, 52, 68, 72, 80]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Line Chart

    \n

    Line chart in horizontal orientation.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Response Time Trend\"\n    x-axis [v1.0, v1.1, v1.2, v1.3, v1.4]\n    line [450, 380, 320, 280, 210]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Combined

    \n

    Horizontal chart with both bars and a line.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Budget vs Actual\"\n    x-axis [Eng, Sales, Marketing, Ops, HR]\n    bar [500, 350, 200, 150, 100]\n    line [480, 380, 180, 160, 95]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Ranking

    \n

    Horizontal bars showing a ranked list.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Top Features Requested\"\n    x-axis [Dark Mode, API Access, Mobile App, SSO, Webhooks, CSV Export]\n    bar [245, 198, 176, 152, 134, 112]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Small Values

    \n

    Horizontal bars with small single-digit values.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Team Satisfaction Survey\"\n    x-axis [Culture, Compensation, Growth, Balance, Tools]\n    y-axis \"Rating\" 0 --> 5\n    bar [4, 3, 4, 5, 3]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Two Bars

    \n

    Horizontal chart with two bar series.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"This Year vs Last Year\"\n    x-axis [Q1, Q2, Q3, Q4]\n    bar [200, 250, 300, 280]\n    bar [180, 220, 270, 310]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Wide Range

    \n

    Horizontal bars with a wide value range.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"GitHub Stars\"\n    x-axis [React, Vue, Angular, Svelte, Solid]\n    bar [220000, 210000, 95000, 78000, 32000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal with Two Lines

    \n

    Horizontal chart with two line series.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Planned vs Actual Delivery\"\n    x-axis [Feature A, Feature B, Feature C, Feature D]\n    line [10, 15, 20, 25]\n    line [12, 14, 22, 23]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Horizontal Long Labels

    \n

    Horizontal orientation with long category labels.

    \n
    \n
    \n
    \n 
    xychart-beta horizontal\n    title \"Error Categories\"\n    x-axis [Authentication Failure, Database Timeout, Rate Limit Exceeded, Invalid Input]\n    bar [342, 128, 89, 456]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Titles & Formatting

    \n\n
    \n
    \n

    No Title

    \n

    Chart without a title declaration.

    \n
    \n
    \n
    \n 
    xychart-beta\n    x-axis [A, B, C, D]\n    bar [10, 20, 30, 40]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Short Title

    \n

    Chart with a very short one-word title.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Sales\"\n    x-axis [Jan, Feb, Mar]\n    bar [100, 200, 150]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Long Title

    \n

    Chart with a long descriptive title.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Quarterly Revenue Comparison Across All Regional Offices 2024\"\n    x-axis [Q1, Q2, Q3, Q4]\n    bar [1200, 1500, 1800, 2100]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Title with Numbers

    \n

    Title containing numeric values.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"FY2024 Q3 Results\"\n    x-axis [Product A, Product B, Product C]\n    bar [340, 520, 180]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Title with Special Characters

    \n

    Title containing parentheses and symbols.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Growth Rate (%)\"\n    x-axis [2020, 2021, 2022, 2023]\n    line [5, 12, 8, 15]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Title with Ampersand

    \n

    Title using the ampersand character.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"R&D Investment\"\n    x-axis [2021, 2022, 2023, 2024]\n    bar [200, 280, 350, 420]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Title with Hyphen

    \n

    Title containing hyphens.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Year-Over-Year Comparison\"\n    x-axis [Jan, Feb, Mar, Apr, May]\n    bar [100, 120, 90, 140, 130]\n    line [110, 115, 100, 125, 135]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Minimal Chart

    \n

    The most minimal possible xychart with just axis and data.

    \n
    \n
    \n
    \n 
    xychart-beta\n    x-axis [A, B]\n    bar [1, 2]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Full Specification

    \n

    Chart with every optional element specified.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Complete Chart\"\n    x-axis \"Category\" [Alpha, Beta, Gamma, Delta]\n    y-axis \"Value\" 0 --> 500\n    bar [120, 340, 250, 410]\n    line [120, 340, 250, 410]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Title with Colon

    \n

    Title containing a colon separator.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Metrics: Daily Active Users\"\n    x-axis [Mon, Tue, Wed, Thu, Fri]\n    line [1500, 1800, 2200, 2000, 1700]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Large Datasets

    \n\n
    \n
    \n

    12-Month Dataset

    \n

    Full year of monthly data points.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly Active Users (2024)\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    line [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    26-Point Alphabet

    \n

    Bar chart with 26 data points, one per letter.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Letter Distribution\"\n    x-axis [A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z]\n    bar [82, 15, 28, 43, 127, 22, 20, 61, 70, 2, 8, 40, 24, 67, 75, 19, 1, 60, 63, 91, 28, 10, 24, 2, 20, 1]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Dense Weekly Data

    \n

    Line chart with data for many weeks.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Weekly Downloads\"\n    x-axis [W1, W2, W3, W4, W5, W6, W7, W8, W9, W10, W11, W12, W13, W14, W15, W16, W17, W18, W19, W20]\n    line [500, 520, 480, 550, 600, 580, 620, 650, 700, 680, 720, 750, 800, 780, 820, 850, 900, 880, 920, 950]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Multiple Series Large

    \n

    Three data series across 12 months.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Product Lines Revenue\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    bar [500, 520, 540, 580, 600, 620, 650, 640, 680, 700, 720, 750]\n    bar [300, 320, 310, 350, 370, 380, 400, 390, 420, 440, 450, 470]\n    line [800, 840, 850, 930, 970, 1000, 1050, 1030, 1100, 1140, 1170, 1220]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Two Bars Twelve Months

    \n

    Two bar series over 12 months for year comparison.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"2023 vs 2024 Monthly Sales\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    bar [180, 200, 220, 240, 260, 250, 270, 290, 310, 330, 350, 380]\n    bar [210, 230, 250, 270, 300, 290, 310, 330, 360, 380, 400, 430]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    High Frequency Data

    \n

    Hourly data points across a full day.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Hourly Server Load\"\n    x-axis [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]\n    line [15, 12, 10, 8, 7, 9, 18, 45, 72, 85, 88, 90, 82, 78, 80, 85, 88, 75, 60, 45, 35, 28, 22, 18]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Large Values Dataset

    \n

    Dataset with values in the millions.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Cloud Spending by Month\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"USD\" 0 --> 500000\n    bar [120000, 135000, 148000, 162000, 178000, 195000, 210000, 228000, 245000, 268000, 290000, 315000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Three Lines Large

    \n

    Three overlapping line series over 10 data points.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Multi-Region Latency\"\n    x-axis [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]\n    line [45, 48, 42, 50, 55, 52, 47, 44, 49, 46]\n    line [120, 115, 125, 118, 122, 130, 128, 135, 132, 127]\n    line [200, 210, 195, 205, 215, 220, 208, 212, 218, 225]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Quarterly Four Years

    \n

    Quarterly data spanning four years.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Quarterly Earnings (2021-2024)\"\n    x-axis [21Q1, 21Q2, 21Q3, 21Q4, 22Q1, 22Q2, 22Q3, 22Q4, 23Q1, 23Q2, 23Q3, 23Q4, 24Q1, 24Q2, 24Q3, 24Q4]\n    bar [120, 140, 135, 160, 155, 175, 170, 190, 185, 210, 205, 230, 225, 250, 245, 270]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Dense Bars and Line

    \n

    Dense bar chart with 15 categories and an overlay line.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Daily Active Users (First 15 Days)\"\n    x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10, D11, D12, D13, D14, D15]\n    bar [500, 520, 510, 530, 540, 480, 450, 520, 550, 540, 560, 570, 510, 490, 530]\n    line [500, 510, 510, 520, 530, 520, 510, 515, 525, 530, 535, 540, 535, 530, 530]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Edge Cases

    \n\n
    \n
    \n

    Single Data Point

    \n

    Chart with only one data point.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Single Value\"\n    x-axis [Only]\n    bar [42]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    All Zeros

    \n

    Bar chart where every value is zero.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"No Activity\"\n    x-axis [Mon, Tue, Wed, Thu, Fri]\n    bar [0, 0, 0, 0, 0]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Very Large Numbers

    \n

    Chart with values in the millions.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"National GDP (millions)\"\n    x-axis [Country A, Country B, Country C]\n    bar [5200000, 3800000, 2900000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Very Small Numbers

    \n

    Chart with very small decimal-like integer values.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Trace Amounts\"\n    x-axis [Sample A, Sample B, Sample C, Sample D]\n    bar [1, 2, 1, 3]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Two Data Points

    \n

    Minimal chart with exactly two data points.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Before and After\"\n    x-axis [Before, After]\n    bar [25, 75]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Single Value Repeated

    \n

    All bars have the identical value.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Equal Distribution\"\n    x-axis [A, B, C, D, E]\n    bar [50, 50, 50, 50, 50]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Extreme Outlier

    \n

    One value is dramatically larger than the rest.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Revenue by Product\"\n    x-axis [Niche A, Niche B, Flagship, Niche C, Niche D]\n    bar [50, 30, 5000, 40, 20]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Descending to Zero

    \n

    Values that decrease to zero.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Declining Interest\"\n    x-axis [Week 1, Week 2, Week 3, Week 4, Week 5]\n    line [100, 60, 25, 8, 0]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Ascending from Zero

    \n

    Values that start at zero and increase.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Ramp Up\"\n    x-axis [Day 1, Day 2, Day 3, Day 4, Day 5]\n    bar [0, 10, 50, 150, 400]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Alternating High Low

    \n

    Values alternating between high and low.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Alternating Pattern\"\n    x-axis [A, B, C, D, E, F, G, H]\n    bar [100, 10, 100, 10, 100, 10, 100, 10]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n

    Real-World Scenarios

    \n\n
    \n
    \n

    Monthly Revenue Report

    \n

    Typical monthly revenue bar chart for a SaaS company.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly Revenue (2024)\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"Revenue ($K)\" 0 --> 500\n    bar [180, 195, 210, 225, 250, 268, 285, 275, 300, 320, 340, 380]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Cumulative Registered Users

    \n

    Cumulative user growth over months showing accelerating adoption.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Cumulative Registered Users\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"Users\" 0 --> 50000\n    line [2500, 5200, 8800, 13100, 18000, 23500, 29200, 34800, 39500, 43200, 46500, 50000]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Temperature Over the Year

    \n

    Average monthly temperature showing seasonal variation.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Average Monthly Temperature\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"Temp (F)\" 20 --> 100\n    line [32, 35, 45, 58, 68, 78, 85, 83, 74, 60, 48, 36]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Stock Price Trend

    \n

    Weekly stock price movement over a quarter.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"ACME Corp Stock Price\"\n    x-axis [W1, W2, W3, W4, W5, W6, W7, W8, W9, W10, W11, W12, W13]\n    y-axis \"Price ($)\" 80 --> 160\n    line [100, 105, 98, 112, 108, 120, 115, 125, 135, 128, 140, 148, 155]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Survey Results

    \n

    Customer satisfaction survey scores by category.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Customer Satisfaction Survey\"\n    x-axis [Ease of Use, Performance, Support, Pricing, Features, Reliability]\n    y-axis \"Score\" 0 --> 5\n    bar [4, 3, 5, 3, 4, 4]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    API Response Time

    \n

    P95 API response times across endpoints.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"P95 Response Time by Endpoint\"\n    x-axis [/users, /orders, /products, /search, /auth, /reports]\n    y-axis \"ms\" 0 --> 1000\n    bar [120, 250, 180, 450, 80, 850]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Website Analytics

    \n

    Daily page views and unique visitors for a week.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Website Traffic\"\n    x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]\n    bar [8500, 9200, 9800, 9500, 8800, 5200, 4100]\n    line [3200, 3500, 3800, 3600, 3400, 2100, 1800]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Sprint Burndown

    \n

    Remaining story points over a two-week sprint.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Sprint Burndown\"\n    x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]\n    y-axis \"Story Points\" 0 --> 80\n    line [72, 65, 58, 50, 45, 38, 30, 22, 12, 0]\n    line [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Marketing Funnel

    \n

    Marketing conversion funnel from impressions to purchases.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Marketing Funnel\"\n    x-axis [Impressions, Clicks, Signups, Trials, Purchases]\n    bar [50000, 5000, 1200, 400, 150]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Server Error Rates

    \n

    HTTP error rates by hour during an incident.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Error Rate During Incident\"\n    x-axis [10am, 11am, 12pm, 1pm, 2pm, 3pm, 4pm, 5pm]\n    y-axis \"Errors/min\" 0 --> 500\n    bar [5, 12, 45, 380, 420, 250, 35, 8]\n    line [5, 12, 45, 380, 420, 250, 35, 8]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Employee Growth

    \n

    Headcount growth at a startup over years.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Company Headcount\"\n    x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024]\n    bar [8, 15, 25, 45, 80, 120, 185]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Monthly Churn Rate

    \n

    Customer churn rate percentage over months.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly Churn Rate\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"Churn %\" 0 --> 10\n    line [5, 4, 5, 4, 3, 3, 4, 3, 3, 2, 2, 2]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    A/B Test Results

    \n

    Conversion rates for control vs variant across segments.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"A/B Test Conversion Rates\"\n    x-axis [Mobile, Desktop, Tablet, New Users, Returning]\n    bar [3, 5, 4, 2, 6]\n    bar [4, 7, 5, 3, 8]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Cloud Cost Breakdown

    \n

    Monthly cloud infrastructure costs by service.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Monthly Cloud Costs\"\n    x-axis [Compute, Storage, Database, Network, CDN, Monitoring, Other]\n    y-axis \"USD\" 0 --> 20000\n    bar [15000, 8000, 6500, 3200, 2800, 1500, 900]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n\n
    \n
    \n

    Release Frequency

    \n

    Number of production deployments per month.

    \n
    \n
    \n
    \n 
    xychart-beta\n    title \"Production Deployments per Month\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    bar [12, 15, 18, 22, 20, 25, 28, 24, 30, 32, 35, 38]\n    line [12, 15, 18, 22, 20, 25, 28, 24, 30, 32, 35, 38]
    \n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    \n
    \n\n
    \n © 2026 Luki Labs. MIT License.\n
    \n\n \n \n\n" }, { "path": "xychart-test.ts", "content": "/**\n * Generates xychart-test.html showcasing xychart-beta Mermaid examples.\n *\n * Usage: bun run xychart-test.ts\n *\n * For each example, renders a 3-column grid:\n * 1. Shiki-highlighted mermaid source\n * 2. Chart.js reference rendering\n * 3. beautiful-mermaid SVG rendering (client-side via bundled renderer)\n */\n\nimport { xychartSamples } from './xychart-samples-data.ts'\nimport { THEMES } from './src/theme.ts'\nimport { createHighlighter } from 'shiki'\n\nfunction escapeHtml(text: string): string {\n return text\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n}\n\nfunction formatDescription(text: string): string {\n return text.replace(/`([^`]+)`/g, '$1')\n}\n\nconst THEME_LABELS: Record = {\n 'zinc-dark': 'Zinc Dark',\n 'tokyo-night': 'Tokyo Night',\n 'tokyo-night-storm': 'Tokyo Storm',\n 'tokyo-night-light': 'Tokyo Light',\n 'catppuccin-mocha': 'Catppuccin',\n 'catppuccin-latte': 'Latte',\n 'nord': 'Nord',\n 'nord-light': 'Nord Light',\n 'dracula': 'Dracula',\n 'github-light': 'GitHub',\n 'github-dark': 'GitHub Dark',\n 'solarized-light': 'Solarized',\n 'solarized-dark': 'Solar Dark',\n 'one-dark': 'One Dark',\n}\n\nasync function generateHtml(): Promise {\n const highlighter = await createHighlighter({\n langs: ['mermaid'],\n themes: ['github-light'],\n })\n\n // Bundle the mermaid renderer for client-side SVG rendering\n const buildResult = await Bun.build({\n entrypoints: [new URL('./src/browser.ts', import.meta.url).pathname],\n target: 'browser',\n format: 'esm',\n minify: true,\n })\n const bundleJs = await buildResult.outputs[0].text()\n\n // Group samples by category for TOC\n const categories = new Map()\n xychartSamples.forEach((sample, i) => {\n const cat = sample.category ?? 'Other'\n if (!categories.has(cat)) categories.set(cat, [])\n categories.get(cat)!.push(i)\n })\n\n const tocSections = [...categories.entries()].map(([cat, indices]) => {\n const items = indices.map(i => {\n const title = xychartSamples[i]!.title\n return `
  • ${i + 1}. ${escapeHtml(title)}
    • `\n }).join('\\n ')\n return `\n
    \n

    ${escapeHtml(cat)} (${indices.length})

    \n
      \n ${items}\n
    \n
    `\n }).join('\\n')\n\n // Theme pills\n const VISIBLE_THEMES = new Set(['dracula', 'solarized-light'])\n\n function buildThemePill(key: string, colors: { bg: string; fg: string }, active = false): string {\n const isDark = parseInt(colors.bg.replace('#', '').slice(0, 2), 16) < 0x80\n const shadow = isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'\n const label = key === '' ? 'Default' : (THEME_LABELS[key] ?? key)\n const activeClass = active ? ' active' : ''\n return ``\n }\n\n const themeEntries = Object.entries(THEMES)\n const visiblePills = [\n '',\n ...themeEntries\n .filter(([key]) => VISIBLE_THEMES.has(key))\n .map(([key, colors]) => buildThemePill(key, colors)),\n ]\n const allDropdownPills = [\n buildThemePill('', { bg: '#FFFFFF', fg: '#27272A' }, true),\n ...themeEntries.map(([key, colors]) => buildThemePill(key, colors)),\n ]\n const totalThemes = allDropdownPills.length\n\n const themePillsHtml = `\n
    \n ${visiblePills.join('\\n ')}\n
    \n
    \n \n
    \n ${allDropdownPills.join('\\n ')}\n
    \n
    `\n\n // Pre-highlight sources with Shiki\n const highlightedSources = xychartSamples.map(sample => {\n const fenced = '```mermaid\\n' + sample.source.trim() + '\\n```'\n const html = highlighter.codeToHtml(fenced, {\n lang: 'mermaid',\n theme: 'github-light',\n })\n return html.replace(\n /().*?<\\/span>\\n/,\n '$1'\n ).replace(\n /\\n.*?<\\/span>(<\\/code>)/,\n '$1'\n )\n })\n\n // Build sample cards grouped by category\n let currentCategory = ''\n const sampleCards = xychartSamples.map((sample, i) => {\n const cat = sample.category ?? 'Other'\n let sectionHeader = ''\n if (cat !== currentCategory) {\n currentCategory = cat\n sectionHeader = `\\n

    ${escapeHtml(cat)}

    \\n`\n }\n\n return `${sectionHeader}\n
    \n
    \n

    ${escapeHtml(sample.title)}

    \n

    ${formatDescription(sample.description)}

    \n
    \n
    \n
    \n ${highlightedSources[i]}\n
    \n
    \n \n
    \n
    \n
    Rendering…
    \n
    \n
    \n
    `\n }).join('\\n')\n\n // Build THEMES JSON for client-side use\n const themesJson = JSON.stringify(THEMES)\n\n // Build sources JSON for the parser\n const sourcesJson = JSON.stringify(xychartSamples.map(s => s.source))\n\n return `\n\n\n \n \n \n XY Chart Test — Beautiful Mermaid\n \n \n \n \n \n\n\n
    \n\n
    \n
    XY Chart Test
    \n \n
    \n ${themePillsHtml}\n
    \n
    \n
    \n ${tocSections}\n
    \n
    \n
    \n\n
    \n

    XY Chart Test

    \n

    xychart-beta rendering comparison: Chart.js vs beautiful-mermaid

    \n

    \n Column 1 shows the Mermaid source, Column 2 renders a Chart.js reference,\n and Column 3 shows the beautiful-mermaid SVG rendering with theme support.\n

    \n
    \n

    ${xychartSamples.length} xychart-beta examples across ${categories.size} categories

    \n

    Chart.js reference + beautiful-mermaid SVG comparison

    \n
    \n
    \n\n
    \n${sampleCards}\n
    \n\n
    \n © 2026 Luki Labs. MIT License.\n
    \n\n \n \n\n`\n}\n\nconst html = await generateHtml()\nconst outPath = new URL('./xychart-test.html', import.meta.url).pathname\nawait Bun.write(outPath, html)\nconsole.log(`Written to ${outPath} (${(html.length / 1024).toFixed(1)} KB)`)\n" } ]