zombie-mermaid 4.1.0 → 4.2.1

package/README.md

@@ -17,7 +17,8 @@ Ultra-fast, fully themeable, zero DOM dependencies. A maintained fork of [`beaut
 [![npm version](https://img.shields.io/npm/v/zombie-mermaid.svg)](https://www.npmjs.com/package/zombie-mermaid)
 [![CI](https://github.com/dfadler/zombie-mermaid/actions/workflows/ci.yml/badge.svg)](https://github.com/dfadler/zombie-mermaid/actions/workflows/ci.yml)
 [![codecov](https://codecov.io/gh/dfadler/zombie-mermaid/branch/main/graph/badge.svg)](https://codecov.io/gh/dfadler/zombie-mermaid)
-[![Bundle Size](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/dfadler/zombie-mermaid/main/badges/bundle-size.json)](#bundle-size)
+[![ASCII renderer size](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/dfadler/zombie-mermaid/main/badges/bundle-size-ascii-renderer.json)](#bundle-size)
+[![SVG renderer size](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/dfadler/zombie-mermaid/main/badges/bundle-size-svg-renderer.json)](#bundle-size)
 [![Socket Security](https://badge.socket.dev/npm/package/zombie-mermaid)](https://socket.dev/npm/package/zombie-mermaid)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
@@ -46,19 +47,28 @@ Diagrams are essential for AI-assisted programming. When you're working with an
 
 ### Bundle Size
 
-The **Bundle Size** badge above tracks the gzipped size of `zombie-mermaid`'s
-main entry point (`dist/index.js`) together with the `@zombie-mermaid/*`
-workspace packages it imports, **plus the SVG renderer's third-party
-dependencies** ([ELK.js](https://github.com/kieler/elkjs) and `entities`,
-which make up most of the SVG renderer's real weight), and updates
-automatically with every release — the same badge/CI-tracked pattern already
-backing the coverage and CI status badges. The standalone renderer packages
-under [Packages](#packages) get the same measurement for their own dependency
-closure: the SVG badge is labelled "incl. deps" because it counts ELK.js and
-`entities`, while the ASCII renderer has no third-party dependencies to count. Need ASCII rendering only? `import { renderMermaidASCII }
-from 'zombie-mermaid/ascii'` skips [ELK.js](https://github.com/kieler/elkjs),
-the layout engine the SVG renderer depends on, for a substantially smaller
-bundle.
+The two size badges above track the gzipped size of each renderer, and update
+automatically with every release:
+
+- **ascii-renderer** — the ASCII/Unicode renderer plus `@zombie-mermaid/core`
+  and `@zombie-mermaid/mermaid-parser`. It has no third-party dependencies, so
+  this is what `zombie-mermaid/ascii` costs.
+- **svg-renderer (incl. deps)** — the SVG renderer, core and parser, **plus its
+  third-party dependencies**. Nearly all of the weight is
+  [ELK.js](https://github.com/kieler/elkjs), the layout engine: about 466 KB
+  gzipped on its own, shipped as one pre-bundled file that can't be
+  tree-shaken. `entities` is counted tree-shaken, since the renderer uses one
+  function from it.
+
+Both figures gzip a plain concatenation of the built files, so they approximate
+what you'd ship, not what any particular bundler emits. The umbrella
+`zombie-mermaid` entry re-exports both renderers; its all-in total is
+[![All-in size](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/dfadler/zombie-mermaid/main/badges/bundle-size.json)](#bundle-size), the worst case. With a
+bundler, importing only `renderMermaidASCII` from the root drops the SVG
+renderer and ELK.js (every package here is `"sideEffects": false`). Without a
+bundler — Node, a CLI, a serverless function — the root entry loads ELK.js at
+startup even for ASCII-only use, so import from `zombie-mermaid/ascii` instead
+(see [ASCII Output](#ascii-output)).
 
 ## Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zombie-mermaid",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "license": "MIT",
   "description": "Render Mermaid diagrams as beautiful SVGs or ASCII art. Ultra-fast, fully themeable, zero DOM dependencies. Maintained fork of beautiful-mermaid.",
   "type": "module",
@@ -90,11 +90,11 @@
     "@modelcontextprotocol/sdk": "^1.30.0",
     "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/ascii-renderer": "4.1.0",
-    "@zombie-mermaid/core": "4.1.0",
-    "@zombie-mermaid/mcp": "4.1.0",
-    "@zombie-mermaid/mermaid-parser": "4.1.0",
-    "@zombie-mermaid/svg-renderer": "4.1.0"
+    "@zombie-mermaid/ascii-renderer": "4.2.1",
+    "@zombie-mermaid/core": "4.2.1",
+    "@zombie-mermaid/mcp": "4.2.1",
+    "@zombie-mermaid/mermaid-parser": "4.2.1",
+    "@zombie-mermaid/svg-renderer": "4.2.1"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^1.0.0",

package/src/__tests__/ascii-draw-bundles.test.ts

@@ -63,6 +63,15 @@ const FAN_IN = `flowchart TD
   A[One] --> C[Target]
   B[Two] --> C`
 
+// A plain fan-in centers its target between the sources, so the grid has no
+// spare columns beside the junction. The hand-built trunk paths below step a
+// column to either side of it; a source that feeds a second node keeps the
+// target under the first source (#1339), leaving that room.
+const FAN_IN_BESIDE = `flowchart TD
+  A[One] --> C[Target]
+  B[Two] --> C
+  B --> D[Other]`
+
 const FAN_OUT = `flowchart TD
   C[Source] --> A[One]
   C --> B[Two]`
@@ -82,16 +91,18 @@ const MIXED_FAN_OUT = `flowchart TD
 describe('draw-bundles: rendered fan-in/fan-out diagrams', () => {
   it('draws a fan-in bundle with a T-junction and single arrowhead (unicode)', () => {
     const out = renderMermaidASCII(FAN_IN, { useAscii: false })
-    expect(out).toContain('├────────────┘')
+    // The two sources join in one trunk whose T-junction sits over the
+    // (centered) target.
+    expect(out).toContain('└───────┬──────┘')
     expect(out).toContain('▼')
     expect(out.match(/▼/g)).toHaveLength(1)
   })
 
   it('draws a fan-in bundle box-start and junction in ASCII charset', () => {
     const out = renderMermaidASCII(FAN_IN, { useAscii: true })
-    expect(out).toContain('+----+---+')
+    expect(out).toContain('+-------+------+')
     expect(out).toContain('+--+--+')
-    expect(out).toContain('+------------+')
+    expect(out).toContain('+--------+')
     expect(out).toContain('v')
   })
 
@@ -276,7 +287,7 @@ describe('drawBundledEdgeSegment', () => {
 
 describe('drawBundleSharedPath', () => {
   it('returns unmodified canvases when sharedPath has fewer than 2 points', () => {
-    const graph = buildGraph(FAN_IN)
+    const graph = buildGraph(FAN_IN_BESIDE)
     const bundle = graph.bundles[0]!
     const shortBundle = {
       ...bundle,
@@ -324,7 +335,7 @@ describe('drawBundleSharedPath', () => {
   ])(
     'draws a %s in the shared trunk (unicode)',
     (_label, makePath, expectedChar) => {
-      const graph = buildGraph(FAN_IN)
+      const graph = buildGraph(FAN_IN_BESIDE)
       const bundle = graph.bundles[0]!
       const bent = {
         ...bundle,
@@ -336,7 +347,7 @@ describe('drawBundleSharedPath', () => {
   )
 
   it('draws a bend in the shared trunk as "+" in ASCII charset', () => {
-    const graph = buildGraph(FAN_IN, true)
+    const graph = buildGraph(FAN_IN_BESIDE, true)
     const bundle = graph.bundles[0]!
     const junction = bundle.junctionPoint!
     const bent = {

package/src/__tests__/ascii-nonmember-beside-frame-1283.test.ts

@@ -89,7 +89,12 @@ end`
 
   it('does not move anything when Y has two parents', () => {
     const g = layout(`graph TD${frame}\nX-->A\nW-->Y\nV-->Y\nY-->A`, 'TD')
-    expect(grid(g, 'W').x).not.toBe(grid(g, 'Y').x)
+    // Longest-path layering ranks A below Y, so Y no longer lands in the
+    // frame's span and nothing is moved: both parents stay on the root row
+    // in their own columns.
+    expect(grid(g, 'W').y).toBe(grid(g, 'V').y)
+    expect(grid(g, 'W').x).not.toBe(grid(g, 'V').x)
+    expect(grid(g, 'Y').y).toBeGreaterThan(grid(g, 'W').y)
   })
 
   it('leaves a parent that is itself in a subgraph alone', () => {

package/src/__tests__/ascii-reverse-direction-edges-629.test.ts

@@ -220,21 +220,31 @@ describe('opposite-direction edges between one node pair (#629)', () => {
   })
 
   it('never folds a lane-assigned edge into a fan-in/fan-out bundle', () => {
-    // Side-by-side siblings B and C with an edge each way between them, in
-    // a TD graph (the only direction analyzeEdgeBundles bundles at all), so
-    // both a lane group and bundle groups exist over the same edges.
+    // Longest-path layering ranks a reciprocal pair on different levels (as
+    // dagre does), so B and C can no longer sit side by side with a lane
+    // group between them. The invariant still matters where a pair and a
+    // fan-in bundle (B, C --> D) share the same edges' neighbourhood: no
+    // edge of the pair may end up inside a bundle, and none may carry a lane
+    // into one.
     const graph = buildGraph(
       `graph TD
   A --> B
   A --> C
+  B --> D
+  C --> D
   B -- x --> C
   C -- y --> B`,
       'TD',
     )
 
-    expect(edgeBetween(graph, 'B', 'C').parallelLane).toBeDefined()
     const bundled = (graph.bundles ?? []).flatMap((b) => b.edges)
+    expect(bundled.length).toBeGreaterThan(0)
     expect(bundled.filter((e) => e.parallelLane)).toEqual([])
+    const pair = new Set([
+      edgeBetween(graph, 'B', 'C'),
+      edgeBetween(graph, 'C', 'B'),
+    ])
+    expect(bundled.filter((e) => pair.has(e))).toEqual([])
   })
 
   it('leaves a vertically stacked reciprocal pair on the #530 mechanism', () => {

package/src/__tests__/ascii-stacked-frame-geometry-1285.test.ts

@@ -34,7 +34,7 @@ describe('ASCII: stacked frames keep clear columns beside walls and titles (#128
     expect(lines.some((l) => l.includes('││'))).toBe(false)
   })
 
-  it('keeps a clear column when the edge runs left of a frame it passes', () => {
+  it('keeps a clear column when the edge runs beside a frame it passes', () => {
     const out = renderMermaidASCII(`graph TD
 subgraph S1[One]
  a
@@ -61,25 +61,39 @@ a --> c`)
         '│       │',
         '│ ┌───┐ │',
         '│ │   │ │',
-        '│ │ a ├─┼───────────┬───────────┐',
-        '│ │   │ │           │           │',
-        '│ └─┬─┘ │           │           │',
-        '│   │   │           │           │',
-        '└───┼───┘           │           │',
-        '    │               │           │',
-        '    │               │           │',
-        '    │       ┌───────┼─────┐     │',
-        '┌───┼─────┐ │       │     │ ┌───┼───────┐',
-        '│   │ Two │ │       │     │ │   │ Three │',
-        '│   │     │ │       │     │ │   │       │',
-        '│   ▼     │ │       ▼     │ │   ▼       │',
-        '│ ┌───┐   │ │     ┌───┐   │ │ ┌───┐     │',
-        '│ │   │   │ │     │   │   │ │ │   │     │',
-        '│ │ b ├───┼─┘     │ x │   └─┼►│ c │     │',
-        '│ │   │   │       │   │     │ │   │     │',
-        '│ └───┘   │       └───┘     │ └───┘     │',
-        '│         │                 │           │',
-        '└─────────┘                 └───────────┘',
+        '│ │ a ├─┼───────────┐',
+        '│ │   │ │           │',
+        '│ └─┬─┘ │           │',
+        '│   │   │           │',
+        '└───┼───┘           │',
+        '    │               │',
+        '    │               │',
+        '    ├───────┐       │',
+        '┌───┼─────┐ │       │',
+        '│   │ Two │ │       │',
+        '│   │     │ │       │',
+        '│   ▼     │ │       ▼',
+        '│ ┌───┐   │ │     ┌───┐',
+        '│ │   │   │ │     │   │',
+        '│ │ b │   │ │     │ x │',
+        '│ │   │   │ │     │   │',
+        '│ └─┬─┘   │ │     └───┘',
+        '│   │     │ │',
+        '└───┼─────┘ │',
+        '    │       │',
+        '    │       │',
+        '    ├───────┘',
+        '┌───┼───────┐',
+        '│   │ Three │',
+        '│   │       │',
+        '│   ▼       │',
+        '│ ┌───┐     │',
+        '│ │   │     │',
+        '│ │ c │     │',
+        '│ │   │     │',
+        '│ └───┘     │',
+        '│           │',
+        '└───────────┘',
       ].join('\n'),
     )
   })

package/src/__tests__/cli-diagrams.test.ts

@@ -48,6 +48,11 @@ const diagrams: Record<string, string> = {
   x-axis [jan, feb, mar, apr]
   y-axis "Revenue (k)" 0 --> 120
   bar [50, 60, 75, 90]`,
+
+  pie: `pie showData title Pets
+  "Dogs" : 386
+  "Cats" : 85
+  "Rats" : 15`,
 }
 
 // ============================================================================

package/src/__tests__/cli-e2e.test.ts

@@ -27,7 +27,7 @@ beforeAll(() => {
   if (!existsSync(CLI)) {
     throw new Error(`Expected ${CLI} to exist after 'pnpm run build'`)
   }
-}, 60_000)
+}, 180_000) // build is ~15s alone but slows several-fold under full-suite worker contention
 
 const SIMPLE_FLOWCHART = `graph LR
   A[Start] --> B[Middle] --> C[End]`

package/src/__tests__/mermaid-entity-codes.test.ts

@@ -0,0 +1,114 @@
+/**
+ * Mermaid entity codes (#quot; #lt; #35; #x5B;) in labels, and HTML entities
+ * in ASCII labels. Ported in spirit from lukilabs/beautiful-mermaid#158
+ * (thiccyoda), reimplemented per label with a code point guard.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseMermaid } from '@zombie-mermaid/mermaid-parser'
+import {
+  decodeMermaidEntities,
+  decodeXmlEntitiesInLabel,
+} from '@zombie-mermaid/core'
+import { renderMermaidSVG, renderMermaidASCII } from '../index.ts'
+
+describe('Mermaid entity codes', () => {
+  it('decodes named and numeric codes in labels', () => {
+    const g = parseMermaid(
+      'flowchart LR\n  A["say #quot;hi#quot; #lt;x#gt; #35;9 #x5B;y#x5D;"]',
+    )
+    expect(g.nodes.get('A')!.label).toBe('say "hi" <x> #9 [y]')
+  })
+
+  it('leaves unknown codes alone', () => {
+    const g = parseMermaid('flowchart LR\n  A["#nope; ok"]')
+    expect(g.nodes.get('A')!.label).toBe('#nope; ok')
+  })
+
+  it('decodes edge labels, so SVG output no longer prints the raw code', () => {
+    const svg = renderMermaidSVG('flowchart LR\n  A -->|#quot;go#quot;| B')
+    expect(svg).not.toContain('#quot;')
+    expect(svg).toContain('&quot;go&quot;')
+  })
+
+  it('does not throw on out-of-range or invalid code points', () => {
+    for (const bad of ['#99999999;', '#x110000;', '#0;', '#xD800;']) {
+      expect(decodeMermaidEntities(bad)).toBe(bad)
+    }
+    const g = parseMermaid('flowchart LR\n  A["a #99999999; b"]')
+    expect(g.nodes.get('A')!.label).toBe('a #99999999; b')
+  })
+
+  it('does not touch #rrggbb; colors in style lines', () => {
+    const g = parseMermaid(
+      'flowchart LR\n  A --> B\n  style A fill:#123;,stroke:#ff0000;',
+    )
+    // #123; is a valid numeric code, so decoding the whole source would turn it into "{"
+    expect(g.nodeStyles.get('A')).toEqual({ fill: '#123;', stroke: '#ff0000' })
+  })
+
+  it('keeps decoded syntax characters as label text instead of re-parsing', () => {
+    const g = parseMermaid('flowchart LR\n  A["x #x5D;--> B#x5B;"]')
+    expect(g.nodes.has('B')).toBe(false)
+    expect(g.nodes.get('A')!.label).toBe('x ]--> B[')
+  })
+})
+
+describe('ASCII entity decoding', () => {
+  it('decodes HTML entities in ASCII labels as SVG does', () => {
+    const out = renderMermaidASCII(
+      'flowchart LR\n  A["&quot;q&quot; &lt;y&gt;"]',
+      { colorMode: 'none' },
+    )
+    expect(out).toContain('"q" <y>')
+  })
+
+  it('decodes Mermaid codes in ASCII labels', () => {
+    const out = renderMermaidASCII(
+      'flowchart LR\n  A["#quot;q#quot; #lt;y#gt;"]',
+      { colorMode: 'none' },
+    )
+    expect(out).toContain('"q" <y>')
+  })
+
+  it('decodes once: &amp;lt; stays a literal &lt;', () => {
+    const out = renderMermaidASCII('flowchart LR\n  A["&amp;lt;"]', {
+      colorMode: 'none',
+    })
+    expect(out).toContain('&lt;')
+  })
+
+  it('decodes edge labels in ASCII output', () => {
+    const out = renderMermaidASCII('flowchart LR\n  A -->|&quot;go&quot;| B', {
+      colorMode: 'none',
+    })
+    expect(out).toContain('"go"')
+    expect(out).not.toContain('&quot;')
+  })
+
+  it('decodes subgraph labels, including nested ones', () => {
+    const out = renderMermaidASCII(
+      'flowchart TD\n  subgraph O["&lt;outer&gt;"]\n    subgraph I["&quot;inner&quot;"]\n      A\n    end\n  end',
+      { colorMode: 'none' },
+    )
+    expect(out).toContain('<outer>')
+    expect(out).toContain('"inner"')
+    expect(out).not.toContain('&lt;')
+    expect(out).not.toContain('&quot;')
+  })
+
+  it('decodes numeric and hex HTML entities', () => {
+    expect(decodeXmlEntitiesInLabel('&#35;9 &#x5B;y&#X5d; &apos;')).toBe(
+      "#9 [y] '",
+    )
+  })
+
+  it('leaves invalid numeric HTML entities untouched', () => {
+    for (const bad of ['&#99999999;', '&#x110000;', '&#0;', '&#xD800;']) {
+      expect(decodeXmlEntitiesInLabel(bad)).toBe(bad)
+    }
+  })
+
+  it('decodes an uppercase X hex marker in Mermaid codes', () => {
+    expect(decodeMermaidEntities('#X5B;y#X5d;')).toBe('[y]')
+  })
+})

package/src/__tests__/parser.test.ts

@@ -93,9 +93,16 @@ describe('parseMermaid – graph header', () => {
     ).toThrow('Did you mean "sequenceDiagram"?')
   })
 
+  it('suggests `pie` for a pie header in the wrong case', () => {
+    // Mermaid's `pie` keyword is case-sensitive, so `PieChart` is not a pie.
+    expect(() => parseMermaid('PieChart\n  "A" : 1')).toThrow(
+      'Did you mean "pie"?',
+    )
+  })
+
   it('lists all supported diagram headers for a totally unrecognized header', () => {
     expect(() => parseMermaid('this is not mermaid at all')).toThrow(
-      /"stateDiagram-v2".*"sequenceDiagram".*"classDiagram".*"erDiagram".*"xychart-beta"/,
+      /"stateDiagram-v2".*"sequenceDiagram".*"classDiagram".*"erDiagram".*"xychart-beta".*"pie"/,
     )
   })
 

package/src/__tests__/svg-accessible-name-conformance.test.ts

@@ -73,8 +73,17 @@ const SAMPLE_BY_TYPE: Record<DiagramType, string> = {
     'architecture-beta\n  service a[A]\n  service b[B]\n  a:R -- L:b',
 
   c4: 'C4Context\n  Person(u, "User")\n  System(s, "System")\n  Rel(u, s, "Uses")',
+  pie: 'pie title Pets\n  "Dogs" : 386\n  "Cats" : 85',
 }
 
+/**
+ * Types that are detected and parsed but have no SVG renderer yet. Each is
+ * asserted to fail with an explicit "not implemented" error instead of the
+ * accessibility contract — and that assertion stops passing the moment the
+ * renderer lands, forcing the type out of this set and into the real check.
+ */
+const NOT_YET_RENDERED: ReadonlySet<DiagramType> = new Set<DiagramType>([])
+
 /**
  * `stateDiagram-v2` is a distinct syntax a real caller might render, but it
  * routes through the same `'flowchart'` DiagramType and renderSvg() pipeline
@@ -211,6 +220,12 @@ describe('accessible-name conformance — every diagram type (#294)', () => {
 
   for (const diagramType of Object.keys(SAMPLE_BY_TYPE) as DiagramType[]) {
     const source = SAMPLE_BY_TYPE[diagramType]
+    if (NOT_YET_RENDERED.has(diagramType)) {
+      it(`${diagramType}: rendering is not implemented yet`, () => {
+        expect(() => renderMermaidSVG(source)).toThrow(/not implemented yet/)
+      })
+      continue
+    }
     for (const { name, options } of OPTION_SETS) {
       it(`${diagramType}: ${name}`, () => {
         const svg = renderMermaidSVG(source, options)

package/src/__tests__/svg-accessible-name.test.ts

@@ -182,6 +182,32 @@ describe('svgOpenTag – hasInteractiveLinks (issue #239)', () => {
   })
 })
 
+describe('svgOpenTag – description', () => {
+  const desc = (decorative?: boolean, links?: boolean) =>
+    svgOpenTag(400, 300, colors, false, 'T', decorative, links, true, 'D & <x>')
+
+  it('adds aria-describedby and a <desc> after the <title>', () => {
+    const tag = desc()
+    expect(tag).toContain(
+      'role="img" aria-labelledby="zm-title-1" aria-describedby="zm-desc-1"',
+    )
+    expect(tag).toMatch(
+      /<title id="zm-title-1">T<\/title>\n {2}<desc id="zm-desc-1">D &amp; &lt;x&gt;<\/desc>$/,
+    )
+  })
+
+  it('keeps the description with interactive links, drops it when decorative', () => {
+    expect(desc(true, true)).toContain('<desc id="zm-desc-1">')
+    expect(desc(true, false)).not.toMatch(/<desc|aria-describedby/)
+  })
+
+  it('emits nothing new without a description', () => {
+    expect(svgOpenTag(400, 300, colors, false, 'T')).not.toMatch(
+      /<desc|aria-describedby/,
+    )
+  })
+})
+
 // ============================================================================
 // renderMermaidSVG – wiring across every diagram type
 // ============================================================================