@zombie-mermaid/svg-renderer 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
   "repository": {
@@ -37,7 +37,7 @@
   "dependencies": {
     "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/core": "4.0.0",
-    "@zombie-mermaid/mermaid-parser": "4.0.0"
+    "@zombie-mermaid/core": "4.2.0",
+    "@zombie-mermaid/mermaid-parser": "4.2.0"
   }
 }

package/src/__tests__/flowchart-parallel-edge-lanes-1308.test.ts

@@ -0,0 +1,168 @@
+/**
+ * #1308: edges leaving `develop` in the git branching sample were merged onto
+ * one trunk, and the `approved` edge returning to `develop` ended on the same
+ * side, on top of that trunk. A fan-out/fan-in bundle is only drawn when
+ * nothing else attaches to the side it uses.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseMermaid } from '@zombie-mermaid/mermaid-parser'
+import { layoutGraphSync } from '@zombie-mermaid/svg-renderer'
+
+const GIT_BRANCHING = `graph LR
+  A[main] --> B[develop]
+  B --> C[feature/auth]
+  B --> D[feature/ui]
+  C --> E{PR Review}
+  D --> E
+  E -->|approved| B
+  B --> F[release/1.0]
+  F --> G{Tests?}
+  G -->|pass| A
+  G -->|fail| F`
+
+const BUNDLED = `graph LR
+  B --> C[one]
+  B --> D[two]
+  B --> F[three]`
+
+function route(source: string, from: string, to: string) {
+  const edge = layoutGraphSync(parseMermaid(source)).edges.find(
+    (e) => e.source === from && e.target === to,
+  )
+  expect(edge).toBeDefined()
+  return edge?.points ?? []
+}
+
+type Pt = { x: number; y: number }
+
+/** Count orthogonal segment pairs that cross at an interior point. */
+function crossings(a: Pt[], b: Pt[]): number {
+  let n = 0
+  for (let i = 0; i + 1 < a.length; i++) {
+    for (let j = 0; j + 1 < b.length; j++) {
+      const [p, q, r, s] = [a[i]!, a[i + 1]!, b[j]!, b[j + 1]!]
+      const pH = Math.abs(p.y - q.y) < 0.5
+      const rH = Math.abs(r.y - s.y) < 0.5
+      if (pH === rH) continue
+      const [h1, h2, v1, v2] = pH ? [p, q, r, s] : [r, s, p, q]
+      if (
+        v1.x > Math.min(h1.x, h2.x) + 0.5 &&
+        v1.x < Math.max(h1.x, h2.x) - 0.5 &&
+        h1.y > Math.min(v1.y, v2.y) + 0.5 &&
+        h1.y < Math.max(v1.y, v2.y) - 0.5
+      )
+        n++
+    }
+  }
+  return n
+}
+
+describe('parallel edges leaving one node (#1308)', () => {
+  it('gives each edge out of develop its own first run', () => {
+    const exits = ['C', 'D', 'F'].map((t) => route(GIT_BRANCHING, 'B', t)[1])
+    const ys = new Set(exits.map((p) => Math.round(p?.y ?? 0)))
+    // The bundle drew all three as one run along y = develop's centre line.
+    expect(ys.size).toBe(3)
+  })
+
+  it('does not cross the approved edge over the runs leaving develop', () => {
+    const approved = route(GIT_BRANCHING, 'E', 'B')
+    for (const t of ['C', 'D', 'F']) {
+      expect(crossings(approved, route(GIT_BRANCHING, 'B', t))).toBe(0)
+    }
+  })
+
+  it('still bundles a plain fan-out with nothing else on that side', () => {
+    const exits = ['C', 'D', 'F'].map((t) => route(BUNDLED, 'B', t)[1]!)
+    expect(new Set(exits.map((p) => Math.round(p.y))).size).toBe(1)
+  })
+})
+
+/** Distinct rounded values of one coordinate of each edge's chosen point. */
+function distinct(
+  source: string,
+  pairs: [string, string][],
+  pick: (pts: Pt[]) => number,
+): number {
+  return new Set(
+    pairs.map(([from, to]) => Math.round(pick(route(source, from, to)))),
+  ).size
+}
+
+const first = (axis: 'x' | 'y') => (pts: Pt[]) => pts[1]![axis]
+const last = (axis: 'x' | 'y') => (pts: Pt[]) => pts[pts.length - 1]![axis]
+
+describe('bundle guard on the other orientations and sides (#1308)', () => {
+  const out: [string, string][] = [
+    ['B', 'C'],
+    ['B', 'D'],
+    ['B', 'F'],
+  ]
+  const into: [string, string][] = [
+    ['A', 'T'],
+    ['B', 'T'],
+    ['C', 'T'],
+  ]
+
+  it('top-down: keeps edges leaving a node apart when a back edge returns to it', () => {
+    const src = `graph TD
+  B --> C
+  B --> D
+  B --> F
+  E --> B
+  C --> E`
+    expect(distinct(src, out, first('x'))).toBe(3)
+  })
+
+  it('top-down: still bundles a plain fan-out', () => {
+    const src = `graph TD
+  B --> C
+  B --> D
+  B --> F`
+    expect(distinct(src, out, first('x'))).toBe(1)
+  })
+
+  it('left-to-right: keeps edges entering a node apart when one leaves it on that side', () => {
+    const src = `graph LR
+  A --> T
+  B --> T
+  C --> T
+  T --> A`
+    expect(distinct(src, into, last('y'))).toBe(3)
+  })
+
+  it('left-to-right: still bundles a plain fan-in', () => {
+    const src = `graph LR
+  A --> T
+  B --> T
+  C --> T`
+    expect(distinct(src, into, last('y'))).toBe(1)
+  })
+
+  it('top-down: keeps edges entering a node apart when one leaves it on that side', () => {
+    const src = `graph TD
+  A --> T
+  B --> T
+  C --> T
+  T --> A`
+    expect(distinct(src, into, last('x'))).toBe(3)
+  })
+
+  it('top-down: still bundles a plain fan-in', () => {
+    const src = `graph TD
+  A --> T
+  B --> T
+  C --> T`
+    expect(distinct(src, into, last('x'))).toBe(1)
+  })
+
+  it('ignores self-loops and unrelated edges when deciding to bundle', () => {
+    const src = `graph LR
+  B --> B
+  B --> C
+  B --> D
+  B --> F
+  F --> G`
+    expect(distinct(src, out, first('y'))).toBe(1)
+  })
+})

package/src/__tests__/pie-layout.test.ts

@@ -0,0 +1,215 @@
+import { describe, it, expect } from 'vitest'
+import { parsePieChart } from '@zombie-mermaid/mermaid-parser'
+import type { PositionedPieChart } from '@zombie-mermaid/mermaid-parser'
+import { layoutPieChart, PIE } from '../pie/layout.ts'
+import { estimateTextWidth } from '../styles.ts'
+
+// Geometry follows Mermaid's pieRenderer.ts (default config): a 450px frame,
+// radius 185 at (225, 225), slices clockwise from 12 o'clock in source
+// order, labels at 0.75r, legend 216px right of the centre, rows 22px apart.
+
+const layout = (src: string): PositionedPieChart =>
+  layoutPieChart(parsePieChart(src))
+
+const TAU = Math.PI * 2
+const close = (a: number, b: number) => expect(a).toBeCloseTo(b, 6)
+
+describe('pie layout: Mermaid frame', () => {
+  it('uses a 450px-tall frame with radius 185 centred at (225, 225)', () => {
+    const p = layout('pie\n  "A" : 1\n  "B" : 1')
+    expect(p.height).toBe(450)
+    expect(p.radius).toBe(185)
+    expect(p.cx).toBe(225)
+    expect(p.cy).toBe(225)
+    // Outline circle: radius + half the 2px outer stroke.
+    expect(p.outerRadius).toBe(186)
+  })
+
+  it('places the title centred over the pie, baseline 25px from the top', () => {
+    const p = layout('pie title Pets\n  "A" : 1')
+    expect(p.title).toEqual({ text: 'Pets', x: 225, y: 25 })
+  })
+
+  it('omits the title when there is none', () => {
+    expect(layout('pie\n  "A" : 1').title).toBeUndefined()
+  })
+
+  it('sizes the width as pie + margin + swatch + gap + longest legend text', () => {
+    const p = layout('pie\n  "Short" : 1\n  "A much longer label" : 1')
+    const longest = estimateTextWidth('A much longer label', 17, 400)
+    expect(p.width).toBe(Math.ceil(450 + 40 + 18 + 4 + longest))
+  })
+
+  it('widens the viewBox for a title wider than the chart, keeping the pie centred under it', () => {
+    const title =
+      'An extremely long pie chart title that runs well past the legend'
+    const p = layout(`pie title ${title}\n  "A" : 1`)
+    const titleW = estimateTextWidth(title, 25, 400)
+    expect(titleW / 2).toBeGreaterThan(225)
+    // Content shifted right by the overhang on the left.
+    close(p.cx, titleW / 2)
+    close(p.title!.x, p.cx)
+    expect(p.width).toBeGreaterThanOrEqual(Math.floor(titleW))
+  })
+})
+
+describe('pie layout: slices', () => {
+  it("draws slices in source order, clockwise from 12 o'clock, unsorted", () => {
+    const p = layout('pie\n  "Small" : 10\n  "Big" : 70\n  "Mid" : 20')
+    expect(p.slices.map((s) => s.label)).toEqual(['Small', 'Big', 'Mid'])
+    close(p.slices[0]!.startAngle, 0)
+    close(p.slices[0]!.endAngle, 0.1 * TAU)
+    close(p.slices[1]!.startAngle, 0.1 * TAU)
+    close(p.slices[1]!.endAngle, 0.8 * TAU)
+    close(p.slices[2]!.endAngle, TAU)
+    // First slice starts at the top of the circle.
+    expect(p.slices[0]!.path.startsWith('M225,40A185,185,0,0,1,')).toBe(true)
+  })
+
+  it('angles always cover exactly the full circle', () => {
+    const p = layout('pie\n  "A" : 3.3\n  "B" : 7.1\n  "C" : 12.9\n  "D" : 0.9')
+    const sweep = p.slices.reduce((t, s) => t + (s.endAngle - s.startAngle), 0)
+    close(sweep, TAU)
+  })
+
+  it('labels each slice with toFixed(0) of its share, at 0.75 of the radius', () => {
+    const p = layout(
+      'pie\n  "Calcium" : 42.96\n  "Potassium" : 50.05\n  "Magnesium" : 10.01\n  "Iron" : 5',
+    )
+    // Mermaid's own docs example renders 40% / 46% / 9% / 5%.
+    expect(p.slices.map((s) => s.percentText)).toEqual([
+      '40%',
+      '46%',
+      '9%',
+      '5%',
+    ])
+    for (const s of p.slices) {
+      const mid = (s.startAngle + s.endAngle) / 2
+      close(s.labelX, 225 + 185 * 0.75 * Math.sin(mid))
+      close(s.labelY, 225 - 185 * 0.75 * Math.cos(mid))
+    }
+  })
+
+  it('uses whole-number percentages only, even for shares like 33.3%', () => {
+    const p = layout('pie\n  "A" : 1\n  "B" : 1\n  "C" : 1')
+    expect(p.slices.map((s) => s.percentText)).toEqual(['33%', '33%', '33%'])
+  })
+
+  it('draws a single slice as a full circle labelled 100%, label straight below the centre', () => {
+    const p = layout('pie\n  "Only" : 5')
+    expect(p.slices).toHaveLength(1)
+    const s = p.slices[0]!
+    expect(s.percentText).toBe('100%')
+    expect(s.path).toBe('M225,40A185,185,0,1,1,225,410A185,185,0,1,1,225,40Z')
+    close(s.labelX, 225)
+    close(s.labelY, 225 + 185 * 0.75)
+  })
+
+  it('leaves out slices under 1% but keeps them in the legend; the rest fill the circle', () => {
+    const p = layout('pie\n  "Big" : 995\n  "Tiny" : 5\n  "Other" : 100')
+    // Tiny = 5/1100 = 0.45%.
+    expect(p.slices.map((s) => s.label)).toEqual(['Big', 'Other'])
+    expect(p.legend.map((l) => l.text)).toEqual(['Big', 'Tiny', 'Other'])
+    // Drawn slices share the full circle between them...
+    close(p.slices[0]!.endAngle, (995 / 1095) * TAU)
+    close(p.slices[1]!.endAngle, TAU)
+    // ...but percentages are of the whole total, omitted slices included.
+    expect(p.slices.map((s) => s.percentText)).toEqual(['90%', '9%'])
+  })
+
+  it('keeps a slice of exactly 1%', () => {
+    const p = layout('pie\n  "A" : 99\n  "B" : 1')
+    expect(p.slices.map((s) => s.label)).toEqual(['A', 'B'])
+    expect(p.slices[1]!.percentText).toBe('1%')
+  })
+
+  it('does not draw zero-value slices', () => {
+    const p = layout('pie\n  "A" : 0\n  "B" : 4\n  "C" : 0')
+    expect(p.slices.map((s) => s.label)).toEqual(['B'])
+    expect(p.legend).toHaveLength(3)
+  })
+
+  it('draws no slices when every value is zero', () => {
+    const p = layout('pie\n  "A" : 0\n  "B" : 0')
+    expect(p.slices).toEqual([])
+    expect(p.legend).toHaveLength(2)
+  })
+
+  it('keeps palette slots tied to source position, so an omitted slice still uses one', () => {
+    const p = layout('pie\n  "A" : 500\n  "Tiny" : 1\n  "C" : 500')
+    expect(p.slices.map((s) => s.colorIndex)).toEqual([0, 2])
+    expect(p.legend.map((l) => l.colorIndex)).toEqual([0, 1, 2])
+  })
+
+  it('wraps colours after 12 slices', () => {
+    const lines = Array.from({ length: 14 }, (_, i) => `  "S${i}" : 10`)
+    const p = layout(`pie\n${lines.join('\n')}`)
+    expect(p.slices.map((s) => s.colorIndex)).toEqual([
+      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1,
+    ])
+  })
+})
+
+describe('pie layout: legend', () => {
+  it('lists every slice to the right of the pie, 22px apart, centred on it', () => {
+    const p = layout('pie\n  "A" : 1\n  "B" : 2\n  "C" : 3\n  "D" : 4')
+    expect(p.legend.map((l) => l.x)).toEqual([441, 441, 441, 441])
+    // translate(216, i * 22 - 22 * 4 / 2) from the centre.
+    expect(p.legend.map((l) => l.y)).toEqual([181, 203, 225, 247])
+    for (const l of p.legend) {
+      expect(l.size).toBe(18)
+      expect(l.textX).toBe(l.x + 22)
+      expect(l.textY).toBe(l.y + 14)
+    }
+  })
+
+  it('shows `label [value]` with showData, value printed as-is', () => {
+    const p = layout(
+      'pie showData\n  "A" : 1234567\n  "B" : 42.50\n  "C" : 0.125',
+    )
+    expect(p.legend.map((l) => l.text)).toEqual([
+      'A [1234567]',
+      'B [42.5]',
+      'C [0.125]',
+    ])
+  })
+
+  it('shows the bare label without showData', () => {
+    expect(layout('pie\n  "A" : 1').legend[0]!.text).toBe('A')
+  })
+
+  it('grows the viewBox for a legend taller than the frame instead of clipping it', () => {
+    const lines = Array.from({ length: 30 }, (_, i) => `  "S${i}" : 1`)
+    const p = layout(`pie\n${lines.join('\n')}`)
+    // Mermaid would start the legend at 225 - 330 = -105, above the frame.
+    const first = p.legend[0]!
+    const last = p.legend[p.legend.length - 1]!
+    expect(first.y).toBe(0)
+    expect(last.y + last.size).toBeLessThanOrEqual(p.height)
+    // The pie moved down by the same amount and keeps its frame.
+    expect(p.cy).toBe(225 + 105)
+    expect(p.height).toBe(30 * 22 - 4)
+  })
+})
+
+describe('pie layout: empty chart', () => {
+  it('draws only the circle and title for a bare `pie`', () => {
+    const p = layout('pie title Nothing yet')
+    expect(p.slices).toEqual([])
+    expect(p.legend).toEqual([])
+    expect(p.title?.text).toBe('Nothing yet')
+    expect(p.height).toBe(450)
+    // No legend: the pie and its right margin only, not a cropped half.
+    expect(p.width).toBe(PIE.height + PIE.margin)
+  })
+})
+
+describe('pie layout: accessibility fields', () => {
+  it('carries accTitle and accDescr through', () => {
+    const p = layout(
+      'pie\n  accTitle: Pets\n  accDescr: Dogs vs cats\n  "A" : 1',
+    )
+    expect(p.accTitle).toBe('Pets')
+    expect(p.accDescr).toBe('Dogs vs cats')
+  })
+})

package/src/__tests__/pie-svg.test.ts

@@ -0,0 +1,194 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { __resetSvgTitleIdCounterForTests, THEMES } from '@zombie-mermaid/core'
+import { getSeriesColor } from '@zombie-mermaid/mermaid-parser'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+beforeEach(() => {
+  __resetSvgTitleIdCounterForTests()
+})
+
+const BASIC = `pie title Pets adopted by volunteers
+  "Dogs" : 386
+  "Cats" : 85
+  "Rats" : 15`
+
+const count = (svg: string, re: RegExp) => (svg.match(re) ?? []).length
+
+describe('pie SVG: structure', () => {
+  const svg = renderMermaidSVG(BASIC)
+
+  it('draws the outline circle, one path per slice, a label each, the title and a legend row each', () => {
+    expect(count(svg, /class="pie-outer"/g)).toBe(1)
+    expect(count(svg, /<path [^>]*class="pie-slice /g)).toBe(3)
+    expect(count(svg, /class="pie-slice-label"/g)).toBe(3)
+    expect(count(svg, /class="pie-title"/g)).toBe(1)
+    expect(count(svg, /<g class="pie-legend">/g)).toBe(3)
+  })
+
+  it("paints in Mermaid's order: circle, slices, labels, title, legend", () => {
+    const order = [
+      'class="pie-outer"',
+      'class="pie-slice ',
+      'class="pie-slice-label"',
+      'class="pie-title"',
+      'class="pie-legend"',
+    ].map((m) => svg.indexOf(m))
+    expect(order).toEqual([...order].sort((a, b) => a - b))
+    expect(order.every((i) => i > 0)).toBe(true)
+  })
+
+  it('writes whole-number percentage labels', () => {
+    const labels = [...svg.matchAll(/class="pie-slice-label">([^<]*)</g)].map(
+      (m) => m[1],
+    )
+    // 386/486, 85/486, 15/486
+    expect(labels).toEqual(['79%', '17%', '3%'])
+  })
+
+  it('draws no callout lines', () => {
+    expect(svg).not.toMatch(/<polyline|<line /)
+  })
+
+  it('tags slices with their label and value', () => {
+    expect(svg).toContain('data-label="Dogs" data-value="386"')
+  })
+
+  it('sizes the root to the layout', () => {
+    expect(svg).toMatch(
+      /^<svg [^>]*viewBox="0 0 \d+ 450" width="\d+" height="450"/,
+    )
+  })
+
+  it('escapes labels and titles', () => {
+    const out = renderMermaidSVG('pie title A <b> & "c"\n  "x<y & \\"z\\"" : 1')
+    expect(out).toContain(
+      'class="pie-title">A &lt;b&gt; &amp; &quot;c&quot;</text>',
+    )
+    expect(out).toContain('data-label="x&lt;y &amp; &quot;z&quot;"')
+    expect(out).toContain(
+      'class="pie-legend-text">x&lt;y &amp; &quot;z&quot;</text>',
+    )
+  })
+
+  it('renders an empty chart as the outline circle and title only', () => {
+    const out = renderMermaidSVG('pie title Empty')
+    expect(count(out, /class="pie-outer"/g)).toBe(1)
+    expect(out).not.toContain('class="pie-slice')
+    expect(out).not.toContain('class="pie-legend"')
+    expect(out).toContain('class="pie-title">Empty</text>')
+  })
+
+  it('renders a bare `pie` with no title', () => {
+    const out = renderMermaidSVG('pie')
+    expect(out).toContain('class="pie-outer"')
+    expect(out).not.toContain('class="pie-title"')
+  })
+})
+
+describe('pie SVG: styling and theme', () => {
+  it("uses Mermaid's 0.7 slice opacity, 2px strokes and text sizes", () => {
+    const svg = renderMermaidSVG(BASIC)
+    expect(svg).toContain(
+      '.pie-slice { stroke: var(--fg); stroke-width: 2px; opacity: 0.7; }',
+    )
+    expect(svg).toContain(
+      '.pie-outer { fill: none; stroke: var(--fg); stroke-width: 2px; }',
+    )
+    expect(svg).toMatch(/\.pie-title \{[^}]*font-size: 25px/)
+    expect(svg).toMatch(/\.pie-slice-label \{[^}]*font-size: 17px/)
+    expect(svg).toMatch(/\.pie-legend-text \{[^}]*font-size: 17px/)
+  })
+
+  it('fills slot 0 with the live theme accent and later slots with series shades', () => {
+    const svg = renderMermaidSVG(BASIC, {
+      bg: '#ffffff',
+      fg: '#111111',
+      accent: '#e11d48',
+    })
+    expect(svg).toContain('--pie-color-0: var(--accent, #3b82f6);')
+    expect(svg).toContain(
+      `--pie-color-1: ${getSeriesColor(1, '#e11d48', '#ffffff')};`,
+    )
+    expect(svg).toContain(
+      `--pie-color-2: ${getSeriesColor(2, '#e11d48', '#ffffff')};`,
+    )
+    expect(svg).toContain('.pie-color-1 { fill: var(--pie-color-1); }')
+    expect(svg).toContain('rect.pie-color-1 { stroke: var(--pie-color-1); }')
+  })
+
+  it('adapts the series shades to a dark background', () => {
+    const dark = THEMES['tokyo-night']!
+    const svg = renderMermaidSVG(BASIC, dark)
+    expect(svg).toContain(
+      `--pie-color-1: ${getSeriesColor(1, dark.accent ?? '#3b82f6', dark.bg)};`,
+    )
+    expect(svg).toContain(`--bg:${dark.bg}`)
+    // Light vs dark backgrounds pick different shades for the same slot.
+    expect(getSeriesColor(1, '#3b82f6', '#ffffff')).not.toBe(
+      getSeriesColor(1, '#3b82f6', dark.bg),
+    )
+  })
+
+  it('defines colour variables only for palette slots in use, wrapping after 12', () => {
+    const lines = Array.from({ length: 14 }, (_, i) => `  "S${i}" : 10`)
+    const svg = renderMermaidSVG(`pie\n${lines.join('\n')}`)
+    expect(count(svg, /--pie-color-\d+:/g)).toBe(12)
+    expect(svg).not.toContain('--pie-color-12')
+    expect(count(svg, /class="pie-slice pie-color-0"/g)).toBe(2)
+  })
+
+  it('resolves to concrete colours with resolveColors', () => {
+    const svg = renderMermaidSVG(BASIC, { resolveColors: true })
+    expect(svg).not.toMatch(/var\(--pie-color/)
+  })
+
+  it('honours nonce and styleAttribute: false', () => {
+    const svg = renderMermaidSVG(BASIC, { nonce: 'abc', styleAttribute: false })
+    expect(count(svg, /<style nonce="abc">/g)).toBe(2)
+    expect(svg).not.toMatch(/<style>/)
+    expect(svg.slice(0, svg.indexOf('>'))).not.toContain('style=')
+  })
+})
+
+describe('pie SVG: accessibility', () => {
+  it('uses accTitle as the accessible name and accDescr as the description', () => {
+    const svg = renderMermaidSVG(
+      'pie\n  accTitle: Pet adoptions\n  accDescr: Dogs lead by far\n  "Dogs" : 3\n  "Cats" : 1',
+    )
+    expect(svg).toMatch(
+      /^<svg [^>]*role="img" aria-labelledby="zm-title-1" aria-describedby="zm-desc-1"/,
+    )
+    expect(svg).toContain('<title id="zm-title-1">Pet adoptions</title>')
+    expect(svg).toContain('<desc id="zm-desc-1">Dogs lead by far</desc>')
+  })
+
+  it('lets options.title override accTitle', () => {
+    const svg = renderMermaidSVG('pie\n  accTitle: From source\n  "A" : 1', {
+      title: 'From caller',
+    })
+    expect(svg).toContain('>From caller</title>')
+    expect(svg).not.toContain('From source')
+  })
+
+  it('does not use the visible title as the accessible name', () => {
+    const svg = renderMermaidSVG(BASIC)
+    expect(svg).toMatch(/^<svg [^>]*role="img"/)
+    expect(svg).not.toContain('<title')
+  })
+
+  it('drops the name and description for decorative output', () => {
+    const svg = renderMermaidSVG(
+      'pie\n  accTitle: T\n  accDescr: D\n  "A" : 1',
+      { decorative: true },
+    )
+    expect(svg).toMatch(/^<svg [^>]*aria-hidden="true"/)
+    expect(svg).not.toMatch(
+      /<title|<desc|aria-labelledby|aria-describedby|role=/,
+    )
+  })
+
+  it('embeds the source when asked', () => {
+    const svg = renderMermaidSVG(BASIC, { embedSource: true })
+    expect(svg).toMatch(/^<svg data-src="pie title Pets/)
+  })
+})

package/src/__tests__/svg-edge-to-own-cluster-1310.test.ts

@@ -0,0 +1,32 @@
+/**
+ * #1310 — real mermaid.js (11.17.2) draws no line for an edge between a node
+ * and a subgraph that contains it (the edge path is zero-length). The SVG
+ * renderer used to draw degenerate stubs for it; it now omits the edge, so the
+ * output equals the same diagram without that edge.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+const base = 'flowchart TD; subgraph Sub; B; end; A --> B'
+
+describe('SVG: an edge between a node and its own subgraph (#1310)', () => {
+  it.each([
+    ['member to subgraph', `${base}; B --> Sub`],
+    ['subgraph to member', `${base}; Sub --> B`],
+    [
+      'nested containment',
+      'flowchart TD; subgraph Outer; subgraph Inner; B; end; end; A --> B; B --> Outer; Inner --> B; Outer --> Inner',
+    ],
+  ])('renders %s identically to the diagram without the edge', (_, src) => {
+    const without = src.includes('Outer')
+      ? 'flowchart TD; subgraph Outer; subgraph Inner; B; end; end; A --> B'
+      : base
+    expect(renderMermaidSVG(src)).toBe(renderMermaidSVG(without))
+  })
+
+  it('still draws an edge from an outside node to the subgraph', () => {
+    expect(renderMermaidSVG(`${base}; X --> Sub`)).not.toBe(
+      renderMermaidSVG(base),
+    )
+  })
+})

package/src/class/renderer.ts

@@ -10,7 +10,6 @@ import type {
 import type { DiagramColors, SvgEmitOptions } from '@zombie-mermaid/core'
 import {
   svgOpenTag,
-  buildStyleBlock,
   getReadableTextColor,
   sanitizeClassName,
   renderMultilineText,
@@ -21,6 +20,7 @@ import {
 } from '@zombie-mermaid/core'
 import { withDataSrc } from '../renderer.ts'
 import {
+  buildSvgStyleBlock,
   FONT_SIZES,
   FONT_WEIGHTS,
   STROKE_WIDTHS,
@@ -110,7 +110,7 @@ export function renderClassSvg(
       embedSource,
     ),
   )
-  parts.push(buildStyleBlock(font, true, emit.nonce))
+  parts.push(buildSvgStyleBlock(font, true, emit.nonce))
   parts.push('<defs>')
   parts.push(relationshipMarkerDefs())
   parts.push('</defs>')

package/src/er/renderer.ts

@@ -8,7 +8,6 @@ import type {
 import type { DiagramColors, SvgEmitOptions } from '@zombie-mermaid/core'
 import {
   svgOpenTag,
-  buildStyleBlock,
   renderMultilineText,
   escapeXml as escapeXmlUtil,
   escapeAttr,
@@ -17,6 +16,7 @@ import {
 } from '@zombie-mermaid/core'
 import { withDataSrc } from '../renderer.ts'
 import {
+  buildSvgStyleBlock,
   FONT_SIZES,
   FONT_WEIGHTS,
   STROKE_WIDTHS,
@@ -99,7 +99,7 @@ export function renderErSvg(
       embedSource,
     ),
   )
-  parts.push(buildStyleBlock(font, true, emit.nonce))
+  parts.push(buildSvgStyleBlock(font, true, emit.nonce))
   parts.push('<defs>')
   parts.push('</defs>') // No marker defs — we draw crow's foot inline