@zombie-mermaid/svg-renderer 2.2.6 → 3.1.0

package/src/er/renderer.ts

@@ -13,6 +13,7 @@ import {
   escapeXml as escapeXmlUtil,
   escapeAttr,
   measureMultilineText,
+  f,
 } from '@zombie-mermaid/core'
 import { withDataSrc } from '../renderer.ts'
 import {
@@ -144,19 +145,19 @@ function renderEntityBox(
 
   // Semantic wrapper with entity metadata
   parts.push(
-    `<g class="entity" data-id="${escapeAttr(id)}" data-label="${escapeAttr(label)}">`,
+    f`<g class="entity" data-id="${escapeAttr(id)}" data-label="${escapeAttr(label)}">`,
   )
 
   // Outer rectangle
   parts.push(
-    `  <rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
-      `rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
+    f`  <rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
+      f`rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
   )
 
   // Header background
   parts.push(
-    `  <rect x="${x}" y="${y}" width="${width}" height="${headerHeight}" ` +
-      `rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
+    f`  <rect x="${x}" y="${y}" width="${width}" height="${headerHeight}" ` +
+      f`rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
   )
 
   // Entity name (supports multi-line via <br> tags)
@@ -167,15 +168,15 @@ function renderEntityBox(
         x + width / 2,
         y + headerHeight / 2,
         fontSizes.nodeLabel,
-        `text-anchor="middle" font-size="${fontSizes.nodeLabel}" font-weight="700" fill="var(--_text)"`,
+        f`text-anchor="middle" font-size="${fontSizes.nodeLabel}" font-weight="700" fill="var(--_text)"`,
       ),
   )
 
   // Divider
   const attrTop = y + headerHeight
   parts.push(
-    `  <line x1="${x}" y1="${attrTop}" x2="${x + width}" y2="${attrTop}" ` +
-      `stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
+    f`  <line x1="${x}" y1="${attrTop}" x2="${x + width}" y2="${attrTop}" ` +
+      f`stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
   )
 
   // Attribute rows
@@ -190,8 +191,8 @@ function renderEntityBox(
   // Empty row placeholder when no attributes
   if (attributes.length === 0) {
     parts.push(
-      `  <text x="${x + width / 2}" y="${attrTop + rowHeight / 2}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
-        `font-size="${ER_FONT.attrSize}" fill="var(--_text-faint)" font-style="italic">(no attributes)</text>`,
+      f`  <text x="${x + width / 2}" y="${attrTop + rowHeight / 2}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
+        f`font-size="${ER_FONT.attrSize}" fill="var(--_text-faint)" font-style="italic">(no attributes)</text>`,
     )
   }
 
@@ -220,7 +221,7 @@ function renderAttribute(
   if (attr.comment && attr.comment.length > 0) {
     // Replace <br> with newlines for tooltip display
     const tooltipText = attr.comment.replace(/<br\s*\/?>/gi, '\n')
-    parts.push(`<g><title>${escapeXml(tooltipText)}</title>`)
+    parts.push(f`<g><title>${escapeXml(tooltipText)}</title>`)
   }
 
   // Key badges on the left (keep proportional font — they're visual tags, not code)
@@ -230,29 +231,29 @@ function renderAttribute(
     keyWidth =
       estimateTextWidth(keyText, ER_FONT.keySize, ER_FONT.keyWeight) + 8
     parts.push(
-      `<rect x="${boxX + 6}" y="${y - 7}" width="${keyWidth}" height="14" rx="2" ry="2" ` +
+      f`<rect x="${boxX + 6}" y="${y - 7}" width="${keyWidth}" height="14" rx="2" ry="2" ` +
         `fill="var(--_key-badge)" />`,
     )
     parts.push(
-      `<text x="${boxX + 6 + keyWidth / 2}" y="${y}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
-        `font-size="${ER_FONT.keySize}" font-weight="${ER_FONT.keyWeight}" fill="var(--_text-sec)">${attr.keys.join(',')}</text>`,
+      f`<text x="${boxX + 6 + keyWidth / 2}" y="${y}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
+        f`font-size="${ER_FONT.keySize}" font-weight="${ER_FONT.keyWeight}" fill="var(--_text-sec)">${attr.keys.join(',')}</text>`,
     )
   }
 
   // Type (left-aligned after keys, monospace with syntax highlighting)
   const typeX = boxX + 8 + (keyWidth > 0 ? keyWidth + 6 : 0)
   parts.push(
-    `<text x="${typeX}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
-      `font-size="${ER_FONT.attrSize}" font-weight="${ER_FONT.attrWeight}">` +
-      `<tspan fill="var(--_text-muted)">${escapeXml(attr.type)}</tspan></text>`,
+    f`<text x="${typeX}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
+      f`font-size="${ER_FONT.attrSize}" font-weight="${ER_FONT.attrWeight}">` +
+      f`<tspan fill="var(--_text-muted)">${escapeXml(attr.type)}</tspan></text>`,
   )
 
   // Name (right-aligned, monospace with syntax highlighting)
   const nameX = boxX + boxWidth - 8
   parts.push(
-    `<text x="${nameX}" y="${y}" class="mono" text-anchor="end" dy="${TEXT_BASELINE_SHIFT}" ` +
-      `font-size="${ER_FONT.attrSize}" font-weight="${ER_FONT.attrWeight}">` +
-      `<tspan fill="var(--_text-sec)">${escapeXml(attr.name)}</tspan></text>`,
+    f`<text x="${nameX}" y="${y}" class="mono" text-anchor="end" dy="${TEXT_BASELINE_SHIFT}" ` +
+      f`font-size="${ER_FONT.attrSize}" font-weight="${ER_FONT.attrWeight}">` +
+      f`<tspan fill="var(--_text-sec)">${escapeXml(attr.name)}</tspan></text>`,
   )
 
   // Close the group if we opened one
@@ -273,23 +274,23 @@ function renderAttribute(
 function renderRelationshipLine(rel: PositionedErRelationship): string {
   if (rel.points.length < 2) return ''
 
-  const pathData = rel.points.map((p) => `${p.x},${p.y}`).join(' ')
+  const pathData = rel.points.map((p) => f`${p.x},${p.y}`).join(' ')
   const dashArray = !rel.identifying ? ' stroke-dasharray="6 4"' : ''
 
   // Semantic data attributes for relationship inspection
-  const labelAttr = rel.label ? ` data-label="${escapeAttr(rel.label)}"` : ''
+  const labelAttr = rel.label ? f` data-label="${escapeAttr(rel.label)}"` : ''
   const dataAttrs = [
     'class="er-relationship"',
-    `data-entity1="${escapeAttr(rel.entity1)}"`,
-    `data-entity2="${escapeAttr(rel.entity2)}"`,
-    `data-cardinality1="${rel.cardinality1}"`,
-    `data-cardinality2="${rel.cardinality2}"`,
-    `data-identifying="${rel.identifying}"`,
+    f`data-entity1="${escapeAttr(rel.entity1)}"`,
+    f`data-entity2="${escapeAttr(rel.entity2)}"`,
+    f`data-cardinality1="${rel.cardinality1}"`,
+    f`data-cardinality2="${rel.cardinality2}"`,
+    f`data-identifying="${rel.identifying}"`,
   ]
 
   return (
-    `<polyline ${dataAttrs.join(' ')}${labelAttr} points="${pathData}" fill="none" stroke="var(--_line)" ` +
-    `stroke-width="${STROKE_WIDTHS.connector}"${dashArray} />`
+    f`<polyline ${dataAttrs.join(' ')}${labelAttr} points="${pathData}" fill="none" stroke="var(--_line)" ` +
+    f`stroke-width="${STROKE_WIDTHS.connector}"${dashArray} />`
   )
 }
 
@@ -312,14 +313,14 @@ function renderRelationshipLabel(
   const bgH = metrics.height + 6
 
   return (
-    `<rect x="${mid.x - bgW / 2}" y="${mid.y - bgH / 2}" width="${bgW}" height="${bgH}" rx="2" ry="2" ` +
+    f`<rect x="${mid.x - bgW / 2}" y="${mid.y - bgH / 2}" width="${bgW}" height="${bgH}" rx="2" ry="2" ` +
     `fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />` +
-    `\n${renderMultilineText(
+    f`\n${renderMultilineText(
       rel.label,
       mid.x,
       mid.y,
       fontSizes.edgeLabel,
-      `text-anchor="middle" font-size="${fontSizes.edgeLabel}" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+      f`text-anchor="middle" font-size="${fontSizes.edgeLabel}" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
     )}`
   )
 }
@@ -389,17 +390,17 @@ function renderCrowsFoot(
   if (hasOneLine) {
     const halfW = 6
     parts.push(
-      `<line x1="${tipX + px * halfW}" y1="${tipY + py * halfW}" ` +
-        `x2="${tipX - px * halfW}" y2="${tipY - py * halfW}" ` +
-        `stroke="var(--_line)" stroke-width="${sw}" />`,
+      f`<line x1="${tipX + px * halfW}" y1="${tipY + py * halfW}" ` +
+        f`x2="${tipX - px * halfW}" y2="${tipY - py * halfW}" ` +
+        f`stroke="var(--_line)" stroke-width="${sw}" />`,
     )
     // Second line slightly back for "exactly one" emphasis
     const line2X = tipX - ux * 4
     const line2Y = tipY - uy * 4
     parts.push(
-      `<line x1="${line2X + px * halfW}" y1="${line2Y + py * halfW}" ` +
-        `x2="${line2X - px * halfW}" y2="${line2Y - py * halfW}" ` +
-        `stroke="var(--_line)" stroke-width="${sw}" />`,
+      f`<line x1="${line2X + px * halfW}" y1="${line2Y + py * halfW}" ` +
+        f`x2="${line2X - px * halfW}" y2="${line2Y - py * halfW}" ` +
+        f`stroke="var(--_line)" stroke-width="${sw}" />`,
     )
   }
 
@@ -412,21 +413,21 @@ function renderCrowsFoot(
     // Three lines from tip to back, fanning out
     parts.push(
       // Top fan line
-      `<line x1="${cfTipX + px * fanW}" y1="${cfTipY + py * fanW}" ` +
-        `x2="${backX}" y2="${backY}" ` +
-        `stroke="var(--_line)" stroke-width="${sw}" />`,
+      f`<line x1="${cfTipX + px * fanW}" y1="${cfTipY + py * fanW}" ` +
+        f`x2="${backX}" y2="${backY}" ` +
+        f`stroke="var(--_line)" stroke-width="${sw}" />`,
     )
     parts.push(
       // Center line
-      `<line x1="${cfTipX}" y1="${cfTipY}" ` +
-        `x2="${backX}" y2="${backY}" ` +
-        `stroke="var(--_line)" stroke-width="${sw}" />`,
+      f`<line x1="${cfTipX}" y1="${cfTipY}" ` +
+        f`x2="${backX}" y2="${backY}" ` +
+        f`stroke="var(--_line)" stroke-width="${sw}" />`,
     )
     parts.push(
       // Bottom fan line
-      `<line x1="${cfTipX - px * fanW}" y1="${cfTipY - py * fanW}" ` +
-        `x2="${backX}" y2="${backY}" ` +
-        `stroke="var(--_line)" stroke-width="${sw}" />`,
+      f`<line x1="${cfTipX - px * fanW}" y1="${cfTipY - py * fanW}" ` +
+        f`x2="${backX}" y2="${backY}" ` +
+        f`stroke="var(--_line)" stroke-width="${sw}" />`,
     )
   }
 
@@ -436,8 +437,8 @@ function renderCrowsFoot(
     const circleX = point.x - ux * circleOffset
     const circleY = point.y - uy * circleOffset
     parts.push(
-      `<circle cx="${circleX}" cy="${circleY}" r="4" ` +
-        `fill="var(--bg)" stroke="var(--_line)" stroke-width="${sw}" />`,
+      f`<circle cx="${circleX}" cy="${circleY}" r="4" ` +
+        f`fill="var(--bg)" stroke="var(--_line)" stroke-width="${sw}" />`,
     )
   }
 

package/src/index.ts

@@ -23,10 +23,9 @@
 // #624) call its primitives directly (zombie-mermaid#616), so it is part
 // of the public API alongside `elk-adapter-utils.ts`.
 //
-// `layout.ts` re-exports `layoutGraphSync` from `layout-engine.ts`, so the
-// two star-exports below resolve to one and the same binding — legal, and
-// not an ambiguous re-export. It stays a module of its own (rather than
-// being folded away here) because #625 is a move, not a redesign.
+// `layout.ts` used to be a thin re-export of `layoutGraphSync` from
+// `layout-engine.ts`; it was folded into `layout-engine.ts` directly
+// (#1109), so `layoutGraphSync` now comes from the one star-export below.
 //
 // `class/`, `er/`, `sequence/`, `xychart/` hold each diagram type's
 // renderer half (`layout.ts` + `renderer.ts`) — the other half
@@ -35,11 +34,18 @@
 // `@zombie-mermaid/mermaid-parser` under the same issue (#624), per the
 // scoping doc's finding 1: each per-type directory used to mix both halves
 // in one place, and the split point already existed at the file level.
+//
+// `renderMermaidSVG` (below) is the single "Mermaid text in, SVG out" front
+// door — moved here from the umbrella's `src/index.ts` under issue #1111,
+// for parity with `@zombie-mermaid/ascii-renderer`'s `renderMermaidASCII`.
+// `./registry.ts` (not re-exported — same as ascii-renderer's own
+// `registry.ts` — it's this front door's internal dispatch table, not part
+// of the public API) drives per-diagram-type dispatch; see that file's
+// header for why it's a separate module from the ASCII side's table.
 // ============================================================================
 
 export * from './edge-curves.ts'
 export * from './elk-instance.ts'
-export * from './layout.ts'
 export * from './layout-engine.ts'
 export * from './layout-engine/elk-adapter-utils.ts'
 export * from './layout-engine/elk-graph-builder.ts'
@@ -56,3 +62,214 @@ export * from './sequence/layout.ts'
 export * from './sequence/renderer.ts'
 export * from './xychart/layout.ts'
 export * from './xychart/renderer.ts'
+
+import { decodeXML } from 'entities'
+import type {
+  RenderOptions,
+  DiagramColors,
+  SvgEmitOptions,
+  DiagramType,
+} from '@zombie-mermaid/core'
+import {
+  DEFAULTS,
+  themeStyleDeclarations,
+  isMonospaceFont,
+  setMonospaceMetrics,
+  detectDiagramType,
+  splitStatements,
+} from '@zombie-mermaid/core'
+import { resolveCssColors } from './resolve-colors.ts'
+import { resolveFontSizes } from './styles.ts'
+import { diagramRegistry } from './registry.ts'
+import type { SvgRenderContext } from './registry.ts'
+
+/**
+ * Build a DiagramColors object from render options.
+ * Uses DEFAULTS for bg/fg when not provided, and passes through
+ * optional enrichment colors (line, accent, muted, surface, border).
+ */
+function buildColors(options: RenderOptions): DiagramColors {
+  return {
+    bg: options.bg ?? DEFAULTS.bg,
+    fg: options.fg ?? DEFAULTS.fg,
+    line: options.line,
+    accent: options.accent,
+    muted: options.muted,
+    surface: options.surface,
+    border: options.border,
+  }
+}
+
+/**
+ * The exact CSS declaration list the root `<svg style="…">` attribute would
+ * carry for these options — `--bg`, `--fg`, whichever enrichment colours
+ * were given, and (unless `transparent`) `background: var(--bg)`.
+ *
+ * For hosts with a strict `Content-Security-Policy`: a `style=` attribute
+ * can't be nonced, so a `style-src` without `'unsafe-inline'` drops it and
+ * the diagram loses its colours. Render with `styleAttribute: false` and
+ * put this string in your own stylesheet on the SVG (or any ancestor —
+ * custom properties inherit) instead. Pass the same options object to both
+ * calls so the declarations match what the render expects. See
+ * `RenderOptions.styleAttribute` / `RenderOptions.nonce` and issue #216.
+ *
+ * Built by the same function that fills the attribute in normal renders,
+ * so there is one variable list to keep in sync. The string is compact
+ * (`--bg:#fff;--fg:#000;background:var(--bg)`) — valid inside any rule
+ * block — and the colour values are yours, unescaped, exactly as the
+ * attribute has always carried them.
+ *
+ * @example
+ * ```ts
+ * const opts = { bg: '#1a1b26', fg: '#a9b1d6', nonce, styleAttribute: false }
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', opts)
+ * const css = `.diagram svg { ${themeCssVariables(opts)} }`
+ * ```
+ */
+export function themeCssVariables(options: RenderOptions = {}): string {
+  return themeStyleDeclarations(buildColors(options), options.transparent)
+}
+
+/**
+ * Resolve the effective strict-CSP emission controls from the public
+ * options. Kept as one object so every renderer takes it as a single
+ * trailing parameter — see `SvgEmitOptions` in packages/core/src/theme.ts.
+ */
+function resolveSvgEmit(options: RenderOptions): SvgEmitOptions {
+  return {
+    nonce: options.nonce,
+    styleAttribute: options.styleAttribute,
+  }
+}
+
+// Interactivity-derived render gates — whether xychart hover tooltips
+// render, whether flowchart/state edge animation (`e1@{ animate: true }`)
+// plays, and whether `click`-based links/`<title>` tooltips render — all
+// now live next to their diagram type's registry entry in ./registry.ts
+// (`resolveAnimationEnabled`/`resolveLinksEnabled` there, duplicated rather
+// than imported since that module is imported BY this file — see those
+// functions' own comments for why), since every diagram type's SVG dispatch
+// is fully handled by the registry lookup below and there is no remaining
+// switch case here for them to serve.
+
+/**
+ * Render Mermaid diagram text to an SVG string — synchronously.
+ *
+ * Uses elk.bundled.js with a direct FakeWorker bypass (no setTimeout(0) delay).
+ * The ELK singleton is created lazily on first use and cached forever.
+ *
+ * Use this in React components with useMemo() to avoid flash:
+ *   const svg = useMemo(() => renderMermaidSVG(code, opts), [code])
+ *
+ * @param text - Mermaid source text
+ * @param options - Rendering options (colors, font, spacing)
+ * @returns A self-contained SVG string
+ *
+ * @example
+ * ```ts
+ * const svg = renderMermaidSVG('graph TD\n  A --> B')
+ *
+ * // With theme
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', {
+ *   bg: '#1a1b26', fg: '#a9b1d6'
+ * })
+ *
+ * // With CSS variables (for live theme switching)
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', {
+ *   bg: 'var(--background)', fg: 'var(--foreground)', transparent: true
+ * })
+ *
+ * // With the original source stamped onto the root <svg> as data-src —
+ * // handy for a "copy source" button or an "open in Mermaid Live" link
+ * // without re-attaching it via string surgery on the output.
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', { embedSource: true })
+ *
+ * // With an accessible name — role="img" + aria-labelledby pointing at a
+ * // <title> child, so assistive tech announces the diagram instead of
+ * // reading every node label individually (see issue #215).
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', {
+ *   title: 'Flowchart: Build → Test → Ship'
+ * })
+ *
+ * // Decorative diagram — already described in surrounding prose, so it's
+ * // hidden from assistive tech (aria-hidden="true") instead of named.
+ * const svg = renderMermaidSVG('graph TD\n  A --> B', { decorative: true })
+ * ```
+ */
+export function renderMermaidSVG(
+  text: string,
+  options: RenderOptions = {},
+): string {
+  const svg = renderMermaidSVGRaw(text, options)
+  return options.resolveColors
+    ? resolveCssColors(svg, buildColors(options))
+    : svg
+}
+
+/** The renderer proper — `renderMermaidSVG` minus the optional `resolveColors` post-pass. */
+function renderMermaidSVGRaw(text: string, options: RenderOptions): string {
+  // Decode XML entities that may leak from markdown parsers (e.g. rehype-raw).
+  // Without this, escapeXml() double-encodes them: &lt; → &amp;lt; → literal "&lt;" in SVG.
+  // `text` itself is left untouched so `embedSource` below stamps the exact
+  // string the caller passed in, not this entity-decoded copy used
+  // internally for parsing.
+  const decoded = decodeXML(text)
+
+  const colors = buildColors(options)
+  const font = options.font ?? 'Inter'
+  // Box sizing depends on the metrics model, so pick it before any layout runs.
+  setMonospaceMetrics(isMonospaceFont(font))
+  const transparent = options.transparent ?? false
+  const fontSizes = resolveFontSizes(options.fontSizes)
+  const diagramType: DiagramType = detectDiagramType(decoded)
+  const embedSource = options.embedSource ? text : undefined
+  const title = options.title
+  const decorative = options.decorative
+  const emit = resolveSvgEmit(options)
+
+  const lines = splitStatements(decoded)
+
+  // Registry dispatch (see ./registry.ts): every diagram type, including
+  // 'flowchart' (and the 'state' pipeline it shares), is registered there.
+  // `parse` takes both `lines` (what every already-registered type's parser
+  // wants) and `decoded` (the raw text flowchart/state's parser needs
+  // instead — see the `parse` doc comment on `DiagramModule` in
+  // ./registry.ts).
+  const registered = diagramRegistry[diagramType]
+  const diagram = registered.parse(lines, decoded)
+  const positioned = registered.layoutForSvg(diagram, options)
+  const ctx: SvgRenderContext = {
+    colors,
+    font,
+    transparent,
+    fontSizes,
+    embedSource,
+    title,
+    decorative,
+    emit,
+  }
+  return registered.renderSvg(positioned, ctx, options)
+}
+
+/**
+ * Render Mermaid diagram text to an SVG string — async.
+ *
+ * Same result as renderMermaidSVG() but returns a Promise.
+ * Useful in async contexts (server handlers, data loaders, etc.)
+ */
+export async function renderMermaidSVGAsync(
+  text: string,
+  options: RenderOptions = {},
+): Promise<string> {
+  return renderMermaidSVG(text, options)
+}
+
+// ---------------------------------------------------------------------------
+// Backward-compatible aliases
+// ---------------------------------------------------------------------------
+
+/** @deprecated Use `renderMermaidSVG` */
+export const renderMermaidSync = renderMermaidSVG
+
+/** @deprecated Use `renderMermaidSVGAsync` */
+export const renderMermaid = renderMermaidSVGAsync

package/src/layout-engine/from-elk.ts

@@ -7,7 +7,7 @@
  * up ELK's raw output.
  */
 
-import type { ElkNode } from 'elkjs'
+import type { ElkNode, ElkExtendedEdge } from 'elkjs'
 import type {
   MermaidGraph,
   MermaidSubgraph,
@@ -432,9 +432,27 @@ function extractEdgesRecursively(
   offsetY: number,
   margins?: MarginInfo,
 ): void {
-  // First pass: collect all edge segments
+  // First pass: collect all edge segments.
+  //
+  // Under `hierarchyHandling: INCLUDE_CHILDREN` (see to-elk.ts — used when no
+  // subgraph has a direction override), ELK is free to leave a
+  // cross-hierarchy edge in an *ancestor* node's `edges` array while
+  // reporting its sections/labels in the coordinate space of the deeper
+  // container named by the edge's own (untyped-in-elkjs) `container`
+  // property. `collectEdgeSegments`'s tree walk assumes an edge's
+  // coordinates match the array it was found in, which breaks for exactly
+  // this case — the edge lands at the *ancestor's* offset instead of the
+  // declared container's, shifting nested-subgraph edges/labels off their
+  // node boundaries toward the root. Pre-computing every container's
+  // accumulated root offset here lets `collectEdgeSegments` prefer the
+  // edge's declared container when present, falling back to the owning
+  // array's offset (the previous behavior) otherwise — see
+  // zombie-mermaid#1145, ported from a fix by Galen Suen in
+  // lukilabs/beautiful-mermaid#152.
+  const containerOffsets = new Map<string, Point>()
+  collectContainerOffsets(elkNode, containerOffsets, 0, 0)
   const segments = new Map<number, EdgeSegmentGroup>()
-  collectEdgeSegments(elkNode, segments, 0, 0)
+  collectEdgeSegments(elkNode, segments, 0, 0, containerOffsets)
 
   // Track margin-routed edge count for spacing offsets
   let marginEdgeIndex = 0
@@ -518,6 +536,35 @@ function extractEdgesRecursively(
   }
 }
 
+/**
+ * Build a map from every ELK node's own id to its accumulated root-relative
+ * offset, by walking the same `elkNode.children` tree `collectEdgeSegments`
+ * walks. Used to resolve a cross-hierarchy edge's declared `container`
+ * (an ELK output property not modeled in elkjs's types) to the offset of
+ * the container ELK actually reported its coordinates in, rather than the
+ * offset of whichever ancestor array the edge object happened to be left
+ * in — see the comment on `extractEdgesRecursively`'s call site.
+ */
+function collectContainerOffsets(
+  elkNode: ElkNode,
+  offsets: Map<string, Point>,
+  offsetX: number,
+  offsetY: number,
+): void {
+  offsets.set(elkNode.id, { x: offsetX, y: offsetY })
+  for (const child of elkNode.children ?? []) {
+    // `x`/`y` are optional in elkjs's types, but ELK always assigns both to
+    // every laid-out child node — the `?? 0` fallback mirrors the same
+    // defensive pattern already used for this walk in `collectEdgeSegments`
+    // below, and is equally unreachable from real ELK output.
+    /* v8 ignore next */
+    const childX = child.x ?? 0
+    /* v8 ignore next */
+    const childY = child.y ?? 0
+    collectContainerOffsets(child, offsets, offsetX + childX, offsetY + childY)
+  }
+}
+
 /**
  * Post-process edge points to ensure all segments are purely orthogonal.
  *
@@ -596,6 +643,7 @@ function collectEdgeSegments(
   segments: Map<number, EdgeSegmentGroup>,
   offsetX: number,
   offsetY: number,
+  containerOffsets: Map<string, Point>,
 ): void {
   if (elkNode.edges) {
     for (const elkEdge of elkNode.edges) {
@@ -605,9 +653,35 @@ function collectEdgeSegments(
       if (!parsed) continue
       const { edgeIndex } = parsed
 
+      // Prefer the edge's declared container offset (see
+      // `collectContainerOffsets`'s comment) over the owning array's
+      // offset. `container` and `containerOffsets.get(container)` were
+      // verified (by direct instrumentation against real elk.bundled.js
+      // output, across both flat and multiply-nested subgraphs) to always
+      // be defined in practice — ELK tags every edge with its container,
+      // even at the root, and `collectContainerOffsets` walks the same
+      // tree so every container id it can name is already in the map. The
+      // `container?`/`?? offset{X,Y}` fallbacks below exist only because
+      // `container` is untyped in elkjs and `Map.get` is typed to allow a
+      // miss; kept as defensive narrowing rather than assumed impossible.
+      const container = (elkEdge as ElkExtendedEdge & { container?: string })
+        .container
+      /* v8 ignore next */
+      const containerOffset = container
+        ? containerOffsets.get(container)
+        : undefined
+      /* v8 ignore next */
+      const edgeOffsetX = containerOffset?.x ?? offsetX
+      /* v8 ignore next */
+      const edgeOffsetY = containerOffset?.y ?? offsetY
+
       // Extract points and label position
-      const points = extractEdgePoints(elkEdge, offsetX, offsetY)
-      const labelPosition = extractEdgeLabelPosition(elkEdge, offsetX, offsetY)
+      const points = extractEdgePoints(elkEdge, edgeOffsetX, edgeOffsetY)
+      const labelPosition = extractEdgeLabelPosition(
+        elkEdge,
+        edgeOffsetX,
+        edgeOffsetY,
+      )
 
       // Store segment
       const seg: EdgeSegmentGroup = segments.get(edgeIndex) ?? {
@@ -635,6 +709,7 @@ function collectEdgeSegments(
         segments,
         offsetX + (child.x ?? 0),
         offsetY + (child.y ?? 0),
+        containerOffsets,
       )
     }
   }