@zombie-mermaid/svg-renderer 3.0.0 → 3.2.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)"`,
     )}`
   )
 }
@@ -330,7 +331,7 @@ function renderRelationshipLabel(
  * Crow's foot notation:
  *   'one':       ─║─   (single vertical line)
  *   'zero-one':  ─o║─  (circle + single line)
- *   'many':      ─╢─   (crow's foot + single line)
+ *   'many':      ─╢─   (crow's foot + bar)
  *   'zero-many': ─o╣─  (circle + crow's foot)
  */
 function renderCardinality(rel: PositionedErRelationship): string {
@@ -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,34 @@ 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}" />`,
+    )
+  }
+
+  // Bar across the foot's convergence point: distinguishes one-or-many
+  // from a bare crow's foot (#1233)
+  if (cardinality === 'many') {
+    const barX = point.x - ux * 20
+    const barY = point.y - uy * 20
+    const halfW = 6
+    parts.push(
+      f`<line x1="${barX + px * halfW}" y1="${barY + py * halfW}" ` +
+        f`x2="${barX - px * halfW}" y2="${barY - py * halfW}" ` +
+        f`stroke="var(--_line)" stroke-width="${sw}" />`,
     )
   }
 
@@ -436,8 +450,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/layout-engine/elk-graph-builder.ts

@@ -47,6 +47,9 @@ export type ElkDirection = 'DOWN' | 'UP' | 'LEFT' | 'RIGHT'
  *   single fixed orientation, matching Mermaid's own TB class rendering —
  *   which `../class/layout.ts` relies on to put a `note for X` above its
  *   class.
+ * - **C4** — `DOWN`. `C4Diagram.direction` is never set by the parser (C4
+ *   sources have no direction statement), only by `RenderOptions.direction`,
+ *   so an unset one is the top-down layout every C4 diagram is drawn in.
  * - **ER** — `RIGHT`. An ER diagram's `direction` is optional
  *   (`ErDiagram.direction?`), left `undefined` when the source has no
  *   `direction` statement, and this renderer has always laid those out
@@ -65,6 +68,7 @@ export const ELK_DIRECTION_FALLBACK = {
   state: 'DOWN',
   class: 'DOWN',
   er: 'RIGHT',
+  c4: 'DOWN',
 } as const satisfies Record<string, ElkDirection>
 
 /**

package/src/registry.ts

@@ -54,6 +54,9 @@ import {
   parseErDiagram,
   parseSequenceDiagram,
   parseClassDiagram,
+  parseArchitecture,
+  architectureToGraph,
+  parseC4Diagram,
 } from '@zombie-mermaid/mermaid-parser'
 import type {
   XYChart,
@@ -64,6 +67,9 @@ import type {
   PositionedSequenceDiagram,
   ClassDiagram,
   PositionedClassDiagram,
+  ArchitectureDiagram,
+  C4Diagram,
+  PositionedC4Diagram,
 } from '@zombie-mermaid/mermaid-parser'
 import { layoutXYChart } from './xychart/layout.ts'
 import { renderXYChartSvg } from './xychart/renderer.ts'
@@ -73,6 +79,8 @@ import { layoutSequenceDiagram } from './sequence/layout.ts'
 import { renderSequenceSvg } from './sequence/renderer.ts'
 import { layoutClassDiagramSync } from './class/layout.ts'
 import { renderClassSvg } from './class/renderer.ts'
+import { layoutC4DiagramSync } from './c4/layout.ts'
+import { renderC4Svg } from './c4/renderer.ts'
 import { layoutGraphSync } from './layout-engine.ts'
 import { renderSvg as renderFlowchartSvg } from './renderer.ts'
 import { parseMermaid } from '../../../src/parser.ts'
@@ -323,6 +331,55 @@ const flowchartModule: DiagramModule<MermaidGraph, PositionedFlowchart> = {
   },
 }
 
+const c4Module: DiagramModule<C4Diagram, PositionedC4Diagram> = {
+  type: 'c4',
+  parse: parseC4Diagram,
+  // Mermaid's C4 renderer has no direction: shapes are placed in rows in
+  // declaration order, so `options.direction` does not apply to the SVG.
+  layoutForSvg(diagram, options) {
+    return layoutC4DiagramSync(diagram, options)
+  },
+  renderSvg(positioned, ctx) {
+    return renderC4Svg(
+      positioned,
+      ctx.colors,
+      ctx.font,
+      ctx.transparent,
+      ctx.fontSizes,
+      ctx.embedSource,
+      ctx.title,
+      ctx.decorative,
+      ctx.emit,
+    )
+  },
+}
+
+/**
+ * Architecture diagrams are lowered to the flowchart model
+ * (`architectureToGraph` in `@zombie-mermaid/mermaid-parser`) and ride the
+ * flowchart layout + renderer, so this module is `flowchartModule` with a
+ * different `parse`. The lowered graph carries no `%%{init}%%` config, so
+ * `curve` is `options.curve` or 'linear'.
+ */
+const architectureModule: DiagramModule<
+  ArchitectureDiagram,
+  PositionedFlowchart
+> = {
+  type: 'architecture',
+  parse: parseArchitecture,
+  layoutForSvg(diagram, options) {
+    const graph = withDirectionOverride(
+      architectureToGraph(diagram),
+      options.direction,
+    )
+    return {
+      graph: layoutGraphSync(graph, options),
+      curve: options.curve ?? 'linear',
+    }
+  },
+  renderSvg: flowchartModule.renderSvg,
+}
+
 /**
  * The registry proper — every `DiagramType` is looked up here by the SVG
  * front door (`renderMermaidSVG` in ./index.ts), which has no fallback
@@ -348,4 +405,7 @@ export const diagramRegistry: Record<DiagramType, AnyDiagramModule> = {
   sequence: sequenceModule,
   class: classModule,
   flowchart: flowchartModule,
+  architecture: architectureModule,
+
+  c4: c4Module,
 }