@zombie-mermaid/svg-renderer 4.2.2 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "4.2.2",
+  "version": "5.0.0",
   "license": "MIT",
   "description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
   "repository": {
@@ -30,14 +30,23 @@
     "provenance": true
   },
   "files": [
-    "src/",
     "dist/",
     "LICENSE"
   ],
   "dependencies": {
-    "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/core": "4.2.2",
-    "@zombie-mermaid/mermaid-parser": "4.2.2"
+    "@zombie-mermaid/core": "5.0.0",
+    "@zombie-mermaid/mermaid-parser": "5.0.0"
+  },
+  "peerDependencies": {
+    "elkjs": "^0.11.0"
+  },
+  "peerDependenciesMeta": {
+    "elkjs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "elkjs": "^0.11.0"
   }
 }

package/src/__tests__/c4-label-clearance-1290.test.ts

@@ -1,112 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { c4RelLabelLines, parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-import { C4, c4TextWidth } from '../c4/metrics.ts'
-
-// Mermaid starts a relationship label at the chord's midpoint, which can land
-// it on a shape. The label slides along its line to clear every shape (#1290).
-const layout = (src: string) =>
-  layoutC4DiagramSync(parseC4Diagram(splitStatements(src)))
-
-// The C4 Container sample: `Reads/writes [SQL]` and `Publishes [AMQP]` both
-// used to sit on the Database cylinder.
-const container = `C4Container
-  Person(user, "User")
-  System_Boundary(sys, "Shop") {
-    Container(web, "Web App", "React", "Storefront")
-    Container(api, "API", "Node.js", "Business logic")
-    ContainerDb(db, "Database", "PostgreSQL", "Orders")
-    ContainerQueue(q, "Events", "Kafka")
-  }
-  System_Ext(pay, "Payments")
-  Rel(user, web, "Browses")
-  Rel(web, api, "Calls", "JSON/HTTPS")
-  Rel(api, db, "Reads/writes", "SQL")
-  BiRel(api, q, "Publishes", "AMQP")
-  Rel(api, pay, "Charges cards")`
-
-function labelRects(d: ReturnType<typeof layout>) {
-  return d.relationships.flatMap((rel) => {
-    if (!rel.labelPosition) return []
-    const lines = c4RelLabelLines(rel)
-    return lines.map((line, i) => {
-      const isTech = rel.technology !== undefined && i === lines.length - 1
-      const w = c4TextWidth(line, C4.messageSize, 400)
-      const cx =
-        isTech && rel.technologyX !== undefined
-          ? rel.technologyX
-          : rel.labelPosition!.x
-      const cy = rel.labelPosition!.y + (i === 0 ? 0 : C4.messageSize + 5)
-      return {
-        rel: `${rel.from}->${rel.to}`,
-        x0: cx - w / 2,
-        x1: cx + w / 2,
-        y0: cy - C4.messageSize / 2,
-        y1: cy + C4.messageSize / 2,
-      }
-    })
-  })
-}
-
-function overlapping(d: ReturnType<typeof layout>): string[] {
-  const hits: string[] = []
-  for (const r of labelRects(d)) {
-    for (const e of d.elements) {
-      if (
-        r.x0 < e.x + e.width &&
-        r.x1 > e.x &&
-        r.y0 < e.y + e.height &&
-        r.y1 > e.y
-      ) {
-        hits.push(`${r.rel} label over ${e.alias}`)
-      }
-    }
-  }
-  return hits
-}
-
-describe('C4 relationship labels clear the shapes (#1290)', () => {
-  it('keeps every label in the Container sample off every shape', () => {
-    expect(overlapping(layout(container))).toEqual([])
-  })
-
-  it('keeps a label on its own line, only sliding along it', () => {
-    const d = layout(container)
-    const rel = d.relationships.find((r) => r.to === 'db')!
-    const [s, e] = rel.points
-    const dx = e!.x - s!.x
-    const dy = e!.y - s!.y
-    const t = rel.labelPosition!
-    // Same distance from the chord as an unmoved label: Mermaid's label is
-    // half its own width to the right of the midpoint, never further off.
-    const across = Math.abs(
-      ((t.x - s!.x) * dy - (t.y - s!.y) * dx) / Math.hypot(dx, dy),
-    )
-    expect(across).toBeLessThan(40)
-  })
-
-  it('leaves a label that already clears every shape where Mermaid puts it', () => {
-    const d = layout(`C4Context
-  System(a, "A")
-  System(b, "B")
-  Rel(a, b, "Uses")`)
-    const rel = d.relationships[0]!
-    const [s, e] = rel.points
-    const mid = (s!.x + e!.x) / 2
-    const width = c4TextWidth('Uses', C4.messageSize, 400)
-    expect(rel.labelPosition!.x).toBeCloseTo(mid + width / 2, 5)
-  })
-
-  it('does not let two labels in one gap sit on each other', () => {
-    const rects = labelRects(layout(container))
-    for (const [i, a] of rects.entries()) {
-      for (const b of rects.slice(i + 1)) {
-        if (a.rel === b.rel) continue
-        const apart =
-          a.x1 <= b.x0 || b.x1 <= a.x0 || a.y1 <= b.y0 || b.y1 <= a.y0
-        expect(apart, `${a.rel} vs ${b.rel}`).toBe(true)
-      }
-    }
-  })
-})

package/src/__tests__/c4-line-ends-1208.test.ts

@@ -1,52 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-import { c4PersonGeometry } from '../c4/metrics.ts'
-
-// A relationship meets a cylinder, pipe or person where Mermaid's own shape
-// outline puts it, not at the box around the shape (#1208). The pipe and the
-// oblique person cases are checked against recorded Mermaid output in
-// c4-mermaid-reference.test.ts.
-const layout = (src: string) =>
-  layoutC4DiagramSync(parseC4Diagram(splitStatements(src)))
-
-describe('C4 line ends on shaped elements (#1208)', () => {
-  // Row 1 holds four shapes and row 2 starts under the first, so the line from
-  // `b` down to the database arrives from the upper right.
-  const src = `C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  System(e, "E")
-  SystemDb(db, "Store")
-  Rel(b, db, "Reads")`
-
-  it('ends a slanted line on the curve of the cylinder cap, below the box top', () => {
-    const d = layout(src)
-    const store = d.elements.find((e) => e.alias === 'db')!
-    const [, end] = d.relationships[0]!.points
-    // 84.4px right of the centre the cap (rx 108, ry 15.8) has dropped
-    // 5.9px, so the line ends 5.9px under the top of the box, not on it.
-    expect(end!.y - store.y).toBeCloseTo(5.96, 1)
-  })
-
-  it('ends a line into the bottom middle of a cylinder at the box bottom', () => {
-    const d = layout(`C4Context
-  SystemDb(db, "Store")
-  System(b, "B")
-  System(c, "C")
-  System(e, "E")
-  System(f, "F")
-  Rel(f, db, "Reads")`)
-    const store = d.elements.find((e) => e.alias === 'db')!
-    const [, end] = d.relationships[0]!.points
-    // Straight below the centre the ellipse is at its lowest: no lift.
-    expect(end!.y - (store.y + store.height)).toBeCloseTo(0, 5)
-  })
-
-  it("keeps a wide person head at Mermaid's 56px radius cap", () => {
-    expect(c4PersonGeometry(216).headRadius).toBeCloseTo(49.68, 2)
-    expect(c4PersonGeometry(400).headRadius).toBe(56)
-  })
-})

package/src/__tests__/c4-mermaid-reference.test.ts

@@ -1,124 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { readFileSync } from 'node:fs'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-
-// Each case is a C4 source rendered by real Mermaid 11.17.2 (headless Chrome,
-// screen width 1440), with the numbers read back from its SVG: the diagram
-// size, the centre of every shape, and each relationship's line and label.
-// The sources vary on purpose (shapes of every kind, wrapped names and
-// descriptions, boundaries nested and side by side, relationships in every
-// direction), so a constant tuned to one sample cannot satisfy all of them.
-//
-// Vertical numbers depend only on heights and gaps, so they must agree to a
-// few pixels. Horizontal ones depend on text widths, which this package sums
-// from Arial advances (Mermaid measures them in a browser), and relationship
-// ends follow each shape's own outline, as Mermaid's do.
-interface Reference {
-  name: string
-  source: string
-  width: number
-  height: number
-  elements: Record<string, [number, number]>
-  relationships: { line: number[]; label?: [number, number] }[]
-}
-
-const cases: Reference[] = JSON.parse(
-  readFileSync(
-    new URL('./fixtures/c4-mermaid-reference.json', import.meta.url),
-    'utf8',
-  ),
-)
-
-const Y = 3
-const X = 2
-const LINE = 3
-// Relationships whose end this package cannot place within LINE, with the
-// reason. Each is a limit of the shape outline, not of the text widths.
-const WIDER_LINE = 9
-const WIDER: Record<string, number[]> = {
-  // A line that skims along the top of a person's body, where the pill meets
-  // the head: 0.25px of height moves where it crosses by about 8px.
-  'v02-person-targets': [3],
-}
-const LABEL = 10
-// Deliberate difference (#1209): Mermaid merges two relationships with the
-// same from/to (the later one wins, one line drawn). This package draws both,
-// so a relationship the author wrote is never dropped. Each entry is a case
-// where Mermaid drew `n` lines for a source with `n + 1` relationships.
-const DUPLICATE_PAIRS = new Set(['v07-dynamic'])
-
-describe('C4 SVG layout against Mermaid on varied diagrams', () => {
-  it('covers a spread of diagrams', () => {
-    expect(cases.length).toBeGreaterThanOrEqual(30)
-  })
-
-  for (const ref of cases) {
-    it(`${ref.name} matches Mermaid`, () => {
-      const d = layoutC4DiagramSync(parseC4Diagram(splitStatements(ref.source)))
-      expect(Math.abs(d.height - ref.height), 'diagram height').toBeLessThan(Y)
-      expect(Math.abs(d.width - ref.width), 'diagram width').toBeLessThan(X)
-
-      for (const e of d.elements) {
-        const r = ref.elements[e.alias]
-        if (!r) continue
-        const cx = e.x + e.width / 2
-        const cy = e.y + e.height / 2
-        expect(Math.abs(cx - r[0]), `${e.alias} centre x`).toBeLessThan(X)
-        expect(Math.abs(cy - r[1]), `${e.alias} centre y`).toBeLessThan(Y)
-      }
-
-      // Mermaid merges duplicate pairs and this package draws both (see
-      // DUPLICATE_PAIRS), so the lines only line up when the counts agree.
-      // A count mismatch is only allowed for a listed case, and there it must
-      // be exactly the duplicate that is drawn extra.
-      if (DUPLICATE_PAIRS.has(ref.name)) {
-        expect(d.relationships.length, 'both duplicate lines drawn').toBe(
-          ref.relationships.length + 1,
-        )
-        const pairs = d.relationships.map((r) => `${r.from}>${r.to}`)
-        expect(
-          new Set(pairs).size,
-          'a pair is drawn twice, as written',
-        ).toBeLessThan(pairs.length)
-        return
-      }
-      expect(d.relationships.length, 'relationship count').toBe(
-        ref.relationships.length,
-      )
-      d.relationships.forEach((rel, i) => {
-        const r = ref.relationships[i]!
-        const [s, e] = rel.points
-        const got = [s!.x, s!.y, e!.x, e!.y]
-        const limit = WIDER[ref.name]?.includes(i + 1) ? WIDER_LINE : LINE
-        got.forEach((v, k) => {
-          expect(
-            Math.abs(v - r.line[k]!),
-            `relationship ${i + 1} line[${k}]`,
-          ).toBeLessThan(limit)
-        })
-        if (r.label && rel.labelPosition) {
-          // Mermaid's label can sit on a shape; this package slides it along
-          // the chord to clear it (#1290). That is the one allowed difference:
-          // the label may move along the line but not off it.
-          const dx = e!.x - s!.x
-          const dy = e!.y - s!.y
-          const len = Math.hypot(dx, dy)
-          const across = (p: { x: number; y: number }): number =>
-            ((p.x - s!.x) * dy - (p.y - s!.y) * dx) / len
-          const ref0 = { x: r.label[0], y: r.label[1] }
-          const moved =
-            Math.abs(rel.labelPosition.x - ref0.x) >= LABEL ||
-            Math.abs(rel.labelPosition.y - ref0.y) >= LABEL
-          if (moved) {
-            expect(
-              Math.abs(across(rel.labelPosition) - across(ref0)),
-              `relationship ${i + 1} label is off the chord`,
-            ).toBeLessThan(LABEL)
-          }
-        }
-      })
-    })
-  }
-})

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

@@ -1,337 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import type { PositionedC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { renderMermaidSVG } from '../../../../src/index.ts'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-
-function layout(src: string, direction?: 'LR'): PositionedC4Diagram {
-  const d = parseC4Diagram(splitStatements(src))
-  return layoutC4DiagramSync(direction ? { ...d, direction } : d)
-}
-
-const el = (p: PositionedC4Diagram, alias: string) =>
-  p.elements.find((e) => e.alias === alias)!
-const centerX = (e: { x: number; width: number }) => e.x + e.width / 2
-
-// The layout follows Mermaid's own C4 renderer: shapes go in rows in
-// declaration order, relationships are drawn afterwards and move nothing.
-describe('C4 SVG layout (Mermaid grid)', () => {
-  const SYSTEMS = (n: number) =>
-    `C4Context\n${Array.from({ length: n }, (_, i) => `  System(s${i}, "S${i}")`).join('\n')}`
-
-  it('fills a row left to right in declaration order, four to a row', () => {
-    const p = layout(SYSTEMS(5))
-    const xs = [0, 1, 2, 3, 4].map((i) => el(p, `s${i}`).x)
-    // Columns are one shape plus two margins apart: 216 + 100.
-    expect(xs[1]! - xs[0]!).toBeCloseTo(316, 0)
-    expect(xs[2]! - xs[1]!).toBeCloseTo(316, 0)
-    expect(xs[3]! - xs[2]!).toBeCloseTo(316, 0)
-    const ys = [0, 1, 2, 3].map((i) => el(p, `s${i}`).y)
-    expect(new Set(ys).size).toBe(1)
-    // The fifth wraps to the next row, back under the first.
-    expect(el(p, 's4').x).toBeCloseTo(xs[0]!, 0)
-    expect(el(p, 's4').y).toBeGreaterThan(ys[0]! + 60)
-  })
-
-  it('ignores Rel_U/D/L/R hints and the direction, as Mermaid does', () => {
-    const plain = `C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  Rel(a, b, "x")
-  Rel(a, c, "y")`
-    const hinted = plain
-      .replace('Rel(a, b', 'Rel_D(a, b')
-      .replace('Rel(a, c', 'Rel_U(a, c')
-    const pos = (p: PositionedC4Diagram) =>
-      p.elements.map((e) => [e.alias, e.x, e.y])
-    expect(pos(layout(hinted))).toEqual(pos(layout(plain)))
-    expect(pos(layout(plain, 'LR'))).toEqual(pos(layout(plain)))
-  })
-
-  it('widens a shape whose text is wider than the standard width', () => {
-    const p = layout(`C4Context
-  Person(a, "Personal Banking Customer", "A customer of the bank")
-  System(b, "B")`)
-    expect(el(p, 'a').width).toBeGreaterThan(216)
-    expect(el(p, 'b').width).toBe(216)
-    // The next shape moves right by the same amount.
-    expect(el(p, 'b').x - (el(p, 'a').x + el(p, 'a').width)).toBeCloseTo(100, 0)
-  })
-
-  it('wraps a long name to the text width and grows the box by a line', () => {
-    const one = layout('C4Context\nSystem(a, "Banking Banking Banking")')
-    const two = layout(
-      'C4Context\nSystem(a, "Banking Banking Banking Banking")',
-    )
-    expect(el(one, 'a').nameLines).toHaveLength(1)
-    expect(el(two, 'a').nameLines).toHaveLength(2)
-    expect(el(two, 'a').height - el(one, 'a').height).toBeCloseTo(15.35, 1)
-  })
-
-  it('gives shapes the heights Mermaid does', () => {
-    const p = layout(`C4Container
-  System(plain, "Plain")
-  System(desc, "Described", "One line")
-  ContainerDb(db, "DB", "PG", "Rows")
-  ContainerQueue(q, "Q", "Kafka")`)
-    expect(el(p, 'plain').height).toBeCloseTo(71.07, 0)
-    expect(el(p, 'desc').height).toBeCloseTo(88.2, 0)
-    expect(el(p, 'db').height).toBeCloseTo(115.8, 0)
-    expect(el(p, 'q').height).toBeCloseTo(41.07, 0)
-  })
-
-  it('reproduces the size and frame of a real Mermaid render', () => {
-    // The context sample, measured on Mermaid 11.17.2.
-    const p = layout(`C4Context
-  title System Context for Internet Banking
-  Person(customer, "Personal Banking Customer", "A customer of the bank")
-  Enterprise_Boundary(b0, "Bank") {
-    System(banking, "Internet Banking System", "Lets customers view accounts")
-    SystemDb(ledger, "Ledger", "Stores transactions")
-  }
-  System_Ext(mail, "E-mail System", "Sends e-mails")
-  Rel(customer, banking, "Uses", "HTTPS")`)
-    expect(p.width).toBeCloseTo(932, -1)
-    expect(p.height).toBeCloseTo(888.4, -1)
-    const frame = p.boundaries[0]!
-    expect(frame.x).toBeCloseTo(150, 0)
-    expect(frame.width).toBeCloseTo(632, 0)
-    expect(frame.height).toBeCloseTo(265.8, 0)
-    expect(centerX(el(p, 'banking'))).toBeCloseTo(308, 0)
-    expect(centerX(el(p, 'ledger'))).toBeCloseTo(624, 0)
-  })
-
-  it('puts two boundaries on a row and keeps nested elements inside', () => {
-    const p = layout(`C4Container
-  Boundary(outer, "Outer", "System") {
-    Boundary(inner, "Inner") {
-      Container(a, "A", "Go")
-    }
-    Container(b, "B", "Go")
-  }
-  Boundary(other, "Other") {
-    Container(c, "C", "Go")
-  }
-  Boundary(third, "Third") {
-    Container(d, "D", "Go")
-  }
-  Rel(a, b, "x")`)
-    const by = (alias: string) => p.boundaries.find((b) => b.alias === alias)!
-    const outer = by('outer')
-    const inner = by('inner')
-    expect(outer.depth).toBe(0)
-    expect(inner.depth).toBe(1)
-    // Outer boundaries are listed first so inner ones paint on top.
-    expect(p.boundaries.indexOf(outer)).toBeLessThan(
-      p.boundaries.indexOf(inner),
-    )
-    const inside = (
-      o: { x: number; y: number; width: number; height: number },
-      i: { x: number; y: number; width: number; height: number },
-    ) =>
-      i.x >= o.x &&
-      i.y >= o.y &&
-      i.x + i.width <= o.x + o.width &&
-      i.y + i.height <= o.y + o.height
-    expect(inside(outer, inner)).toBe(true)
-    expect(inside(inner, el(p, 'a'))).toBe(true)
-    expect(inside(outer, el(p, 'b'))).toBe(true)
-    expect(inside(inner, el(p, 'b'))).toBe(false)
-    // Mermaid lays boundaries out two to a row: the third starts a new row.
-    expect(by('other').y).toBeCloseTo(outer.y, 0)
-    expect(by('other').x).toBeGreaterThan(outer.x + outer.width)
-    expect(by('third').y).toBeGreaterThan(outer.y + outer.height)
-  })
-
-  it('draws the first relationship straight and later ones as curves', () => {
-    const p = layout(`C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  Rel(a, b, "first")
-  Rel(a, c, "second")
-  Rel(b, c, "third")`)
-    const [first, second, third] = p.relationships
-    expect(first!.curve).toBeUndefined()
-    const [s, e] = second!.points
-    expect(second!.curve).toEqual({
-      x: s!.x + (e!.x - s!.x) / 4,
-      y: s!.y + (e!.y - s!.y) / 2,
-    })
-    expect(third!.curve).toBeDefined()
-  })
-
-  it('starts a relationship label at the middle of its chord', () => {
-    const p = layout(`C4Context
-  System(a, "A")
-  System(b, "B")
-  Rel(a, b, "label", "tech")`)
-    const rel = p.relationships[0]!
-    const [s, e] = rel.points
-    const midX = (s!.x + e!.x) / 2
-    // Mermaid gives its text routine the midpoint as the block's left edge, so
-    // the label is centred half its own width to the right of it.
-    expect(rel.labelPosition!.x).toBeGreaterThan(midX + 5)
-    expect(rel.labelPosition!.x).toBeLessThan(midX + 40)
-    expect(rel.labelPosition!.y).toBeCloseTo((s!.y + e!.y) / 2, 5)
-    // The technology is centred on its own, at least as far along.
-    expect(rel.technologyX!).toBeGreaterThanOrEqual(rel.labelPosition!.x)
-  })
-
-  it('leaves a person along the drawn head and pill, not the box around them', () => {
-    const p = layout(`C4Context
-  Person(u, "Customer", "Buys things")
-  System(s, "Shop", "Online store")
-  Rel(u, s, "Orders from")`)
-    const u = el(p, 'u')
-    const start = p.relationships[0]!.points[0]!
-    const headCx = u.x + u.width / 2
-    const headCy = u.y + 49.68
-    // Mermaid's line leaves on the head circle (in its own drawing, at 295.7),
-    // well inside the box's right edge rather than in the air beside the head.
-    expect(start.x).toBeLessThan(u.x + u.width - 40)
-    expect(Math.hypot(start.x - headCx, start.y - headCy)).toBeCloseTo(49.68, 0)
-  })
-
-  it('routes a relationship that ends on a populated boundary to its frame', () => {
-    const p = layout(`C4Context
-  System(o, "O")
-  Boundary(b, "B") {
-    System(s, "S")
-  }
-  Rel(o, b, "into the boundary")`)
-    const rel = p.relationships[0]!
-    const b = p.boundaries[0]!
-    const end = rel.points[rel.points.length - 1]!
-    const onFrame =
-      Math.abs(end.x - b.x) < 1 ||
-      Math.abs(end.x - (b.x + b.width)) < 1 ||
-      Math.abs(end.y - b.y) < 1 ||
-      Math.abs(end.y - (b.y + b.height)) < 1
-    expect(onFrame).toBe(true)
-  })
-
-  it('shifts everything below a title, as Mermaid does', () => {
-    const plain = layout('C4Context\nSystem(a, "A")')
-    const titled = layout('C4Context\ntitle T\nSystem(a, "A")')
-    expect(el(titled, 'a').y - el(plain, 'a').y).toBeCloseTo(60, 0)
-    expect(titled.titlePosition).toBeDefined()
-    expect(titled.height - plain.height).toBeCloseTo(60, 0)
-  })
-})
-
-describe('C4 SVG rendering', () => {
-  const SRC = `C4Container
-  title Shop
-  Person(u, "User")
-  Person_Ext(x, "Partner")
-  System_Boundary(sys, "Shop") {
-    Container(web, "Web App", "React", "Storefront")
-    ContainerDb(db, "Database", "PostgreSQL")
-    ContainerQueue(q, "Events", "Kafka")
-    Component(c, "Comp", "TS")
-  }
-  Rel(u, web, "Browses", "HTTPS")
-  BiRel(web, q, "Publishes")
-  Rel(web, db, "Reads")`
-
-  it('draws a person as a pill with a round head, only for persons', () => {
-    const svg = renderMermaidSVG(SRC)
-    // One circle per person (the user and the external partner).
-    expect(svg.match(/<circle/g)).toHaveLength(2)
-    expect(svg).not.toContain('c4-person-glyph')
-    expect(renderMermaidSVG('C4Context\nSystem(s, "S")')).not.toContain(
-      '<circle',
-    )
-  })
-
-  it('draws cylinders for databases and pipes for queues', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg.match(/<ellipse/g)).toHaveLength(2) // one cap each: db, queue
-    expect(svg).toContain('data-shape="db"')
-    expect(svg).toContain('data-shape="queue"')
-  })
-
-  it("shows a queue's ellipse face at its right end, as Mermaid does", () => {
-    const svg = renderMermaidSVG('C4Container\nContainerQueue(q, "Events")')
-    expect(svg).toContain('data-shape="queue"')
-    const ell = /<ellipse cx="([\d.-]+)" cy="[\d.-]+" rx="([\d.-]+)"/.exec(svg)!
-    const path = /<path d="M ([\d.-]+) [\d.-]+ H ([\d.-]+) A/.exec(svg)!
-    const cx = +ell[1]!
-    const rx = +ell[2]!
-    // The body starts at the face centre (right) and runs left to its
-    // rounded end.
-    expect(+path[1]!).toBeCloseTo(cx, 1)
-    expect(+path[2]!).toBeLessThan(cx - rx)
-  })
-
-  it('uses Mermaid’s palette by kind, lighter for external elements', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg).toContain('#08427b') // person
-    expect(svg).toContain('#686868') // external person
-    expect(svg).toContain('#438dd5') // container
-    expect(svg).toContain('#85bbf0') // component
-  })
-
-  it('draws the diagram title, boundary title and technology text', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg).toContain('class="c4-title"')
-    expect(svg).toContain('>Shop</text>')
-    expect(svg).toContain('[HTTPS]')
-    expect(svg).toContain('[Container: React]')
-    expect(svg).toContain('[Person]')
-  })
-
-  it('puts arrowheads at both ends of a BiRel and one end otherwise', () => {
-    const svg = renderMermaidSVG(
-      'C4Context\nSystem(a, "A")\nSystem(b, "B")\nRel(a, b, "one")',
-    )
-    const bi = renderMermaidSVG(
-      'C4Context\nSystem(a, "A")\nSystem(b, "B")\nBiRel(a, b, "two")',
-    )
-    expect(svg.match(/<polygon/g)).toHaveLength(1)
-    expect(bi.match(/<polygon/g)).toHaveLength(2)
-  })
-
-  it('draws the first relationship as a line and the rest as quadratic curves', () => {
-    const svg = renderMermaidSVG(`C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  Rel(a, b, "one")
-  Rel(a, c, "two")`)
-    const ds = [
-      ...svg.matchAll(/<path class="c4-relationship"[^>]* d="([^"]+)"/g),
-    ]
-    expect(ds).toHaveLength(2)
-    expect(ds[0]![1]).toMatch(/^M [\d.-]+,[\d.-]+ L /)
-    expect(ds[1]![1]).toMatch(/^M [\d.-]+,[\d.-]+ Q /)
-  })
-
-  it('escapes user text', () => {
-    const svg = renderMermaidSVG(
-      'C4Context\nSystem(a, "A <b> & \\"q\\"")\nSystem(b, "B")\nRel(a, b, "x<y")',
-    )
-    expect(svg).not.toContain('A <b>')
-    expect(svg).toContain('x&lt;y')
-  })
-
-  it('uses the diagram title as the accessible name when no title option is set', () => {
-    expect(renderMermaidSVG(SRC)).toContain('<title')
-    expect(renderMermaidSVG(SRC, { title: 'Mine' })).toContain('>Mine</title>')
-  })
-
-  it('renders empty and boundary-only diagrams', () => {
-    expect(renderMermaidSVG('C4Context')).toContain('<svg')
-    const svg = renderMermaidSVG('C4Context\nBoundary(b, "Empty", "Type")')
-    expect(svg).toContain('class="c4-boundary"')
-  })
-
-  it('is deterministic', () => {
-    // The accessible-name id counter advances per render; everything else is fixed.
-    const strip = (svg: string) => svg.replace(/zm-title-\d+/g, 'zm-title')
-    expect(strip(renderMermaidSVG(SRC))).toBe(strip(renderMermaidSVG(SRC)))
-  })
-})