@zombie-mermaid/svg-renderer 3.2.0 → 4.1.0

package/src/__tests__/class-visibility-markers-1237.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+// The marker used to share the faint colour and regular weight of the colon,
+// so `~` read as `-` at 1x (#1237). It now gets the member-name colour and a
+// bold weight, in its own tspan.
+describe('class diagram visibility markers (#1237)', () => {
+  const svg = renderMermaidSVG(`classDiagram
+  class User {
+    +String a
+    -String b
+    #String c
+    ~String d
+  }`)
+
+  for (const marker of ['+', '-', '#', '~']) {
+    it(`draws ${marker} in a bold, non-faint tspan`, () => {
+      expect(svg).toContain(
+        `<tspan fill="var(--_text-sec)" font-weight="700">${marker}</tspan>`,
+      )
+    })
+  }
+
+  it('keeps a faint spacer between marker and name', () => {
+    expect(svg).toContain('<tspan fill="var(--_text-faint)"> </tspan>')
+  })
+})

package/src/__tests__/er-attribute-right-padding-1262.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+// Mono glyphs advance 0.6em (6.6px at the 11px attribute size). Chromium
+// without subpixel glyph positioning (headless Linux) rounds each advance to a
+// whole pixel, so the worst-case drawn width is chars * ceil(6.6) = chars * 7.
+// A box sized from the unrounded estimate let the type run into the
+// right-aligned name (#1262, same cause as #1238).
+const WORST_CASE_ADVANCE = 7
+// The row text puts two spaces between type and name, so at worst-case
+// advances the gap must not shrink below two whole-pixel glyphs.
+const MIN_GAP_BETWEEN_TYPE_AND_NAME = 2 * WORST_CASE_ADVANCE
+
+const SRC = `erDiagram
+  CUSTOMER {
+    varchar(255) emailAddressPrimary
+    string name
+  }`
+
+const attr = (tag: string, name: string) => {
+  const start = tag.indexOf(`${name}="`) + name.length + 2
+  return Number(tag.slice(start, tag.indexOf('"', start)))
+}
+
+describe('ER attribute row padding (#1262)', () => {
+  const svg = renderMermaidSVG(SRC)
+  const texts = svg.split('<text')
+  const typeText = texts.find((t) => t.includes('varchar(255)')) as string
+  const nameText = texts.find((t) =>
+    t.includes('emailAddressPrimary'),
+  ) as string
+
+  it('finds the type and name text', () => {
+    expect(typeText).toBeDefined()
+    expect(nameText).toBeDefined()
+  })
+
+  it('leaves a gap between type and name even with whole-pixel glyph advances', () => {
+    const typeRight =
+      attr(typeText, 'x') + 'varchar(255)'.length * WORST_CASE_ADVANCE
+    const nameLeft =
+      attr(nameText, 'x') - 'emailAddressPrimary'.length * WORST_CASE_ADVANCE
+    expect(nameLeft - typeRight).toBeGreaterThanOrEqual(
+      MIN_GAP_BETWEEN_TYPE_AND_NAME,
+    )
+  })
+})

package/src/__tests__/er-default-direction-1250.test.ts

@@ -0,0 +1,69 @@
+/**
+ * #1250: an ER diagram with no `direction` statement laid out left-to-right,
+ * while official Mermaid lays it out top-to-bottom. The relationship line
+ * between two entities is the layout axis: vertical when stacked, horizontal
+ * when side by side.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '@zombie-mermaid/svg-renderer'
+
+const SOURCE = 'ORDER ||--|{ LINE_ITEM : contains'
+
+function endpoints(svg: string): { dx: number; dy: number } {
+  const points = svg.match(/class="er-relationship"[^>]*points="([^"]+)"/)?.[1]
+  expect(points).toBeDefined()
+  const pts = (points ?? '').split(' ').map((p) => p.split(',').map(Number))
+  const first = pts[0] ?? []
+  const last = pts[pts.length - 1] ?? []
+  return {
+    dx: Math.abs((last[0] ?? 0) - (first[0] ?? 0)),
+    dy: Math.abs((last[1] ?? 0) - (first[1] ?? 0)),
+  }
+}
+
+describe('ER default layout direction (#1250)', () => {
+  it('stacks entities top-to-bottom when the source has no direction', () => {
+    const { dx, dy } = endpoints(renderMermaidSVG(`erDiagram\n  ${SOURCE}`))
+    expect(dy).toBeGreaterThan(dx)
+  })
+
+  it('still honors an explicit `direction LR` in the source', () => {
+    const { dx, dy } = endpoints(
+      renderMermaidSVG(`erDiagram\n  direction LR\n  ${SOURCE}`),
+    )
+    expect(dx).toBeGreaterThan(dy)
+  })
+
+  it('still honors the direction render option', () => {
+    const { dx, dy } = endpoints(
+      renderMermaidSVG(`erDiagram\n  ${SOURCE}`, { direction: 'LR' }),
+    )
+    expect(dx).toBeGreaterThan(dy)
+  })
+
+  it('keeps declaration order within a layer and centers a shared child', () => {
+    const svg = renderMermaidSVG(`erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE_ITEM : contains
+  PRODUCT ||--o{ LINE_ITEM : includes`)
+    const box = (id: string): { left: number; right: number } => {
+      const start = svg.indexOf(`data-id="${id}"`)
+      expect(start).toBeGreaterThanOrEqual(0)
+      const m = svg
+        .slice(start)
+        .match(/>\s*<rect x="([\d.]+)"[^>]*width="([\d.]+)"/)
+      expect(m).not.toBeNull()
+      const x = Number(m?.[1])
+      return { left: x, right: x + Number(m?.[2]) }
+    }
+    const order = box('ORDER')
+    const product = box('PRODUCT')
+    const lineItem = box('LINE_ITEM')
+    // ORDER is declared before PRODUCT, so it sits to its left.
+    expect(order.left).toBeLessThan(product.left)
+    // LINE_ITEM sits between its two parents, not off to one side.
+    const mid = (lineItem.left + lineItem.right) / 2
+    expect(mid).toBeGreaterThan(order.left)
+    expect(mid).toBeLessThan(product.right)
+  })
+})

package/src/__tests__/er-edge-label-contrast-1244.test.ts

@@ -0,0 +1,58 @@
+/**
+ * #1244: ER edge labels were drawn in `--_text-muted` (fg mixed at 40% into
+ * bg), ~2.4:1 on the default white background. Read the mix the renderer
+ * actually emits and assert it clears WCAG AA for text (4.5:1) against the
+ * default theme.
+ */
+import { describe, it, expect } from 'vitest'
+import { DEFAULTS, MIX } from '@zombie-mermaid/core'
+import { renderMermaidSVG } from '@zombie-mermaid/svg-renderer'
+
+type Rgb = readonly [number, number, number]
+
+function channels(hex: string): Rgb {
+  const c = (i: number) => parseInt(hex.slice(i, i + 2), 16)
+  return [c(1), c(3), c(5)]
+}
+
+function luminance([r, g, b]: Rgb): number {
+  const lin = (c: number) => {
+    const v = c / 255
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+  }
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+}
+
+/** Contrast of `color-mix(in srgb, fg pct%, bg)` against bg. */
+function mixContrast(pct: number): number {
+  const [fr, fgc, fb] = channels(DEFAULTS.fg)
+  const [br, bgc, bb] = channels(DEFAULTS.bg)
+  const mix = (f: number, b: number) => (f * pct + b * (100 - pct)) / 100
+  const mixed: Rgb = [mix(fr, br), mix(fgc, bgc), mix(fb, bb)]
+  const l1 = luminance(mixed)
+  const l2 = luminance([br, bgc, bb])
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
+}
+
+describe('ER edge label contrast (#1244)', () => {
+  const svg = renderMermaidSVG('erDiagram\n  ORDER ||--|{ LINE_ITEM : contains')
+  const label = svg.match(/<text[^>]*>contains<\/text>/)?.[0] ?? ''
+  const percent = Number(
+    label.match(
+      /fill="color-mix\(in srgb, var\(--fg\) (\d+)%, var\(--bg\)\)"/,
+    )?.[1],
+  )
+
+  it('mixes the relationship label color from --fg and --bg', () => {
+    expect(Number.isFinite(percent)).toBe(true)
+  })
+
+  it('clears WCAG AA (4.5:1) with the default theme', () => {
+    expect(mixContrast(percent)).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('is darker than the shared muted/secondary text tokens that failed AA', () => {
+    expect(mixContrast(MIX.textMuted)).toBeLessThan(4.5)
+    expect(mixContrast(MIX.textSec)).toBeLessThan(4.5)
+  })
+})

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__/sequence-label-clearance-1242.test.ts

@@ -0,0 +1,162 @@
+/**
+ * #1242: lifelines were drawn straight through message labels and block
+ * titles, and a stick-figure actor's label sat on the first message arrow.
+ * The visual suite's tolerance can't see either, so assert the geometry.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseSequenceDiagram } from '@zombie-mermaid/mermaid-parser'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+import { layoutSequenceDiagram } from '../sequence/layout.ts'
+
+function lifelineSegments(
+  svg: string,
+  actor: string,
+): Array<{ x: number; y1: number; y2: number }> {
+  const out: Array<{ x: number; y1: number; y2: number }> = []
+  const re =
+    /<line class="lifeline" data-actor="([^"]*)" x1="([\d.]+)" y1="([\d.]+)" x2="[\d.]+" y2="([\d.]+)"/g
+  for (const m of svg.matchAll(re)) {
+    if (m[1] !== actor) continue
+    out.push({ x: Number(m[2]), y1: Number(m[3]), y2: Number(m[4]) })
+  }
+  return out
+}
+
+/** Centre y of the `<text>` whose content is `label`. */
+function textY(svg: string, label: string): number {
+  for (const m of svg.matchAll(
+    /<text [^>]*y="([\d.]+)"[^>]*>([^<]*)<\/text>/g,
+  )) {
+    if (m[2] === label) return Number(m[1])
+  }
+  return NaN
+}
+
+/** True when no lifeline segment of `actor` covers height `y`. */
+function lifelineClearAt(svg: string, actor: string, y: number): boolean {
+  return lifelineSegments(svg, actor).every((s) => y < s.y1 || y > s.y2)
+}
+
+describe('lifelines stay out of message labels (#1242)', () => {
+  const svg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  participant C
+  A->>B: first
+  A->>C: label crossing the middle lifeline
+  A->>B: next`)
+
+  it('cuts the crossed lifeline around the label instead of running through it', () => {
+    const labelY = textY(svg, 'label crossing the middle lifeline')
+    expect(lifelineSegments(svg, 'B').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(svg, 'B', labelY)).toBe(true)
+  })
+
+  it('leaves a lifeline whole where no label crosses it', () => {
+    expect(lifelineSegments(svg, 'A')).toHaveLength(1)
+  })
+
+  it('cuts lifelines around a block title tab', () => {
+    const blockSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  A->>B: hi
+  alt Multiple panels
+    B->>A: yes
+  end`)
+    // The tab sits at the block's top-left; the lifeline under it is cut.
+    const rect = blockSvg.match(
+      /<g class="block"[^>]*>\s*<rect x="([\d.]+)" y="([\d.]+)"/,
+    )
+    const blockY = Number(rect?.[2])
+    expect(lifelineSegments(blockSvg, 'A').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(blockSvg, 'A', blockY + 9)).toBe(true)
+  })
+
+  it('cuts a lifeline beside a self-message label', () => {
+    const selfSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  A->>A: a long self message label crossing B
+  A->>B: after`)
+    const y = textY(selfSvg, 'a long self message label crossing B')
+    expect(lifelineSegments(selfSvg, 'B').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(selfSvg, 'B', y)).toBe(true)
+  })
+
+  it('cuts lifelines around a bare divider label', () => {
+    const divSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  alt first
+    A->>B: x
+  else other case
+    B->>A: y
+  end`)
+    const y = textY(divSvg, '[other case]')
+    expect(lifelineSegments(divSvg, 'A').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(divSvg, 'A', y)).toBe(true)
+  })
+
+  it('ignores unlabeled blocks and dividers', () => {
+    const bareSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  loop
+    B->>A: ping
+  else
+    A->>B: pong
+  end`)
+    expect(lifelineSegments(bareSvg, 'A').length).toBeGreaterThan(0)
+    expect(lifelineSegments(bareSvg, 'B').length).toBeGreaterThan(0)
+  })
+
+  it('never drops a lifeline entirely, even under a label taller than it', () => {
+    const lines = Array.from({ length: 8 }, (_, i) => `l${i}`).join('<br/>')
+    const tall = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  participant C
+  A->>C: ${lines}`)
+    // The label spans B's whole lifeline; B keeps one uncut line.
+    expect(lifelineSegments(tall, 'B')).toHaveLength(1)
+  })
+})
+
+describe('stick-figure actor label clears the first message (#1242)', () => {
+  const src = `sequenceDiagram
+  actor U as User
+  participant S as System
+  U->>S: Click button`
+  const svg = renderMermaidSVG(src)
+  const layout = layoutSequenceDiagram(
+    parseSequenceDiagram(
+      src
+        .split('\n')
+        .slice(1)
+        .map((text, line) => ({ text: text.trim(), line })),
+    ),
+  )
+
+  it('starts the actor lifeline below its label', () => {
+    const [seg] = lifelineSegments(svg, 'U')
+    expect(seg!.y1).toBeGreaterThan(textY(svg, 'User') + 6)
+  })
+
+  it('places the first message arrow clear of the label', () => {
+    const first = layout.messages[0]!
+    // label is 13px-ish text centred at textY; arrow must be well below it
+    expect(first.y).toBeGreaterThan(textY(svg, 'User') + 16)
+  })
+
+  it('keeps the original compact header when no stick figure is used', () => {
+    const plain = layoutSequenceDiagram(
+      parseSequenceDiagram([
+        { text: 'participant A', line: 0 },
+        { text: 'participant B', line: 1 },
+        { text: 'A->>B: hi', line: 2 },
+      ]),
+    )
+    expect(plain.messages[0]!.y - (plain.actors[0]!.y + 40)).toBe(20)
+  })
+})

package/src/__tests__/sequence-nested-activation-1241.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { parseSequenceDiagram } from '@zombie-mermaid/mermaid-parser'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+import { layoutSequenceDiagram } from '../sequence/layout.ts'
+
+const SRC = [
+  'participant C as Client',
+  'participant S as Server',
+  'C->>+S: Request',
+  'S->>+S: Process',
+  'S->>-S: Done',
+  'S-->>-C: Response',
+]
+
+describe('nested self-message activation (#1241)', () => {
+  const layout = layoutSequenceDiagram(
+    parseSequenceDiagram(SRC.map((text, line) => ({ text, line }))),
+  )
+  const server = layout.activations.filter((a) => a.actorId === 'S')
+
+  it('yields two activations on the actor with depths 0 and 1', () => {
+    expect(server.map((a) => a.depth)).toEqual([0, 1])
+  })
+
+  it('offsets the nested bar right by half a bar, inside the parent span', () => {
+    const outer = server.find((a) => a.depth === 0)!
+    const inner = server.find((a) => a.depth === 1)!
+    expect(inner.x - outer.x).toBe(outer.width / 2)
+    expect(inner.topY).toBeGreaterThan(outer.topY)
+    expect(inner.bottomY).toBeLessThan(outer.bottomY)
+  })
+
+  it('draws both bars, outer first so the nested one is painted on top', () => {
+    const svg = renderMermaidSVG(`sequenceDiagram\n  ${SRC.join('\n  ')}`)
+    expect(svg.match(/class="activation"/g)).toHaveLength(2)
+  })
+})

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/__tests__/xychart-x-label-overlap-1243.test.ts

@@ -0,0 +1,62 @@
+/**
+ * #1243: with many categories the x-axis labels touched. The visual suite's
+ * tolerance can't see labels moving a few pixels, so assert on the layout.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseXYChart } from '@zombie-mermaid/mermaid-parser'
+import { splitStatements } from '@zombie-mermaid/core'
+import { layoutXYChart } from '../xychart/layout.ts'
+import { estimateTextWidth } from '../styles.ts'
+
+function layout(src: string) {
+  return layoutXYChart(parseXYChart(splitStatements(src)))
+}
+
+function shown(src: string) {
+  return layout(src).xAxis.ticks.filter((t) => t.label !== '')
+}
+
+function minGap(ticks: ReturnType<typeof shown>): number {
+  let gap = Infinity
+  for (let i = 1; i < ticks.length; i++) {
+    const a = ticks[i - 1]!
+    const b = ticks[i]!
+    const half =
+      (estimateTextWidth(a.label, 14, 400) +
+        estimateTextWidth(b.label, 14, 400)) /
+      2
+    gap = Math.min(gap, b.labelX - a.labelX - half)
+  }
+  return gap
+}
+
+const QUARTERS = `xychart-beta
+    x-axis [21Q1, 21Q2, 21Q3, 21Q4, 22Q1, 22Q2, 22Q3, 22Q4, 23Q1, 23Q2, 23Q3, 23Q4, 24Q1, 24Q2, 24Q3, 24Q4]
+    bar [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]`
+
+describe('xychart x-axis label spacing (#1243)', () => {
+  it('drops labels so adjacent shown labels do not touch', () => {
+    const ticks = shown(QUARTERS)
+    expect(ticks.length).toBeLessThan(16)
+    expect(ticks.length).toBeGreaterThan(1)
+    expect(minGap(ticks)).toBeGreaterThan(0)
+  })
+
+  it('keeps every label when they all fit', () => {
+    const src = `xychart-beta
+    x-axis [Q1, Q2, Q3, Q4]
+    bar [1, 2, 3, 4]`
+    expect(shown(src).map((t) => t.label)).toEqual(['Q1', 'Q2', 'Q3', 'Q4'])
+  })
+
+  it('does not thin a roomy axis because of one long label', () => {
+    const src = `xychart-beta
+    x-axis [A, B, "A Rather Long Category", D, E]
+    bar [1, 2, 3, 4, 5]`
+    expect(shown(src)).toHaveLength(5)
+  })
+
+  it('keeps the tick marks of dropped labels', () => {
+    expect(layout(QUARTERS).xAxis.ticks).toHaveLength(16)
+  })
+})