@zombie-mermaid/svg-renderer 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "3.0.0",
+  "version": "3.1.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": "3.0.0",
-    "@zombie-mermaid/mermaid-parser": "3.0.0"
+    "@zombie-mermaid/core": "3.1.0",
+    "@zombie-mermaid/mermaid-parser": "3.1.0"
   }
 }

package/src/class/renderer.ts

@@ -16,6 +16,7 @@ import {
   escapeXml as escapeXmlUtil,
   escapeAttr,
   safeHref,
+  f,
 } from '@zombie-mermaid/core'
 import { withDataSrc } from '../renderer.ts'
 import {
@@ -230,20 +231,20 @@ function renderClassBox(
   // data-label: class name
   // data-annotation: stereotype (interface, abstract, etc.)
   const annotationAttr = cls.annotation
-    ? ` data-annotation="${escapeAttr(cls.annotation)}"`
+    ? f` data-annotation="${escapeAttr(cls.annotation)}"`
     : ''
   // A style class from `cssClass`/`class A name`/`:::name` is emitted onto
   // the group so external CSS can target it, after the same allowlist the
   // flowchart renderer applies.
   const safeClassName = sanitizeClassName(cls.className)
   const groupAttrs = [
-    `class="${safeClassName ? `class-node ${safeClassName}` : 'class-node'}"`,
-    `data-id="${escapeAttr(cls.id)}"`,
-    `data-label="${escapeAttr(cls.label)}"`,
+    f`class="${safeClassName ? f`class-node ${safeClassName}` : 'class-node'}"`,
+    f`data-id="${escapeAttr(cls.id)}"`,
+    f`data-label="${escapeAttr(cls.label)}"`,
   ]
   // `click ClassName call fn()` is parsed, never invoked, and never written
   // into the markup — see renderNode() in packages/svg-renderer/src/renderer.ts for the rationale.
-  parts.push(`<g ${groupAttrs.join(' ')}${annotationAttr}>`)
+  parts.push(f`<g ${groupAttrs.join(' ')}${annotationAttr}>`)
 
   // An href becomes a real SVG link, which needs no script to work.
   // `interactivity: 'none'` strips it — a link is meaningless in
@@ -251,28 +252,28 @@ function renderClassBox(
   const href = linksEnabled ? safeHref(interaction?.href) : undefined
   if (href) {
     const targetAttr = interaction?.target
-      ? ` target="${escapeAttr(interaction.target)}"`
+      ? f` target="${escapeAttr(interaction.target)}"`
       : ''
-    parts.push(`  <a href="${escapeAttr(href)}"${targetAttr}>`)
+    parts.push(f`  <a href="${escapeAttr(href)}"${targetAttr}>`)
   }
 
   if (linksEnabled && interaction?.tooltip) {
     // <title> is SVG's native tooltip — no script, no CSS. Gated by
     // linksEnabled alongside href above: both come from the same `click`
     // statement, and 'none' strips both.
-    parts.push(`  <title>${escapeXml(interaction.tooltip)}</title>`)
+    parts.push(f`  <title>${escapeXml(interaction.tooltip)}</title>`)
   }
 
   // Outer rectangle (full box)
   parts.push(
-    `  <rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
-      `rx="0" ry="0" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
+    f`  <rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
+      f`rx="0" ry="0" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
   )
 
   // Header background
   parts.push(
-    `  <rect x="${x}" y="${y}" width="${width}" height="${headerHeight}" ` +
-      `rx="0" ry="0" fill="${headerFill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
+    f`  <rect x="${x}" y="${y}" width="${width}" height="${headerHeight}" ` +
+      f`rx="0" ry="0" fill="${headerFill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
   )
 
   // Annotation (<<interface>>, <<abstract>>, etc.)
@@ -280,9 +281,9 @@ function renderClassBox(
   if (cls.annotation) {
     const annotY = y + 12
     parts.push(
-      `  <text x="${x + width / 2}" y="${annotY}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
-        `font-size="${CLS_FONT.annotationSize}" font-weight="${CLS_FONT.annotationWeight}" ` +
-        `font-style="italic" fill="${textColor ?? 'var(--_text-muted)'}">&lt;&lt;${escapeXml(cls.annotation)}&gt;&gt;</text>`,
+      f`  <text x="${x + width / 2}" y="${annotY}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
+        f`font-size="${CLS_FONT.annotationSize}" font-weight="${CLS_FONT.annotationWeight}" ` +
+        f`font-style="italic" fill="${textColor ?? 'var(--_text-muted)'}">&lt;&lt;${escapeXml(cls.annotation)}&gt;&gt;</text>`,
     )
     nameY = y + headerHeight / 2 + 6
   }
@@ -295,15 +296,15 @@ function renderClassBox(
         x + width / 2,
         nameY,
         fontSizes.nodeLabel,
-        `text-anchor="middle" font-size="${fontSizes.nodeLabel}" font-weight="700" fill="${textColor ?? 'var(--_text)'}"`,
+        f`text-anchor="middle" font-size="${fontSizes.nodeLabel}" font-weight="700" fill="${textColor ?? 'var(--_text)'}"`,
       ),
   )
 
   // Divider line between header and attributes
   const attrTop = y + headerHeight
   parts.push(
-    `  <line x1="${x}" y1="${attrTop}" x2="${x + width}" y2="${attrTop}" ` +
-      `stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
+    f`  <line x1="${x}" y1="${attrTop}" x2="${x + width}" y2="${attrTop}" ` +
+      f`stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
   )
 
   // Attributes
@@ -317,8 +318,8 @@ function renderClassBox(
   // Divider line between attributes and methods
   const methodTop = attrTop + attrHeight
   parts.push(
-    `  <line x1="${x}" y1="${methodTop}" x2="${x + width}" y2="${methodTop}" ` +
-      `stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
+    f`  <line x1="${x}" y1="${methodTop}" x2="${x + width}" y2="${methodTop}" ` +
+      f`stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
   )
 
   // Methods
@@ -366,27 +367,27 @@ function renderMember(
 
   if (member.visibility) {
     spans.push(
-      `<tspan fill="${faint}">${escapeXml(member.visibility)} </tspan>`,
+      f`<tspan fill="${faint}">${escapeXml(member.visibility)} </tspan>`,
     )
   }
 
   // Add parentheses for methods to distinguish from attributes, including parameters if present
   const displayName = member.isMethod
-    ? `${member.name}(${member.params || ''})`
+    ? f`${member.name}(${member.params || ''})`
     : member.name
   // False positive: displayName is passed through escapeXml() (see packages/core/src/multiline-utils.ts),
   // which escapes &, <, >, ", ' before interpolation, so this is not raw/unescaped HTML.
-  spans.push(`<tspan fill="${secondary}">${escapeXml(displayName)}</tspan>`) // nosemgrep: javascript.express.security.injection.raw-html-format.raw-html-format
+  spans.push(f`<tspan fill="${secondary}">${escapeXml(displayName)}</tspan>`) // nosemgrep: javascript.express.security.injection.raw-html-format.raw-html-format
 
   if (member.type) {
-    spans.push(`<tspan fill="${faint}">: </tspan>`)
-    spans.push(`<tspan fill="${muted}">${escapeXml(member.type)}</tspan>`)
+    spans.push(f`<tspan fill="${faint}">: </tspan>`)
+    spans.push(f`<tspan fill="${muted}">${escapeXml(member.type)}</tspan>`)
   }
 
   return (
-    `<text x="${x}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
-    `font-size="${CLS_FONT.memberSize}" font-weight="${CLS_FONT.memberWeight}"${fontStyle}${decoration}>` +
-    `${spans.join('')}</text>`
+    f`<text x="${x}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
+    f`font-size="${CLS_FONT.memberSize}" font-weight="${CLS_FONT.memberWeight}"${fontStyle}${decoration}>` +
+    f`${spans.join('')}</text>`
   )
 }
 
@@ -408,33 +409,33 @@ function renderNote(note: PositionedClassNote, fontSizes: FontSizes): string {
   const { x, y, width: w, height: h } = note
   const forAttr =
     note.forClass !== undefined
-      ? ` data-for="${escapeAttr(note.forClass)}"`
+      ? f` data-for="${escapeAttr(note.forClass)}"`
       : ''
 
   // Note body: (x,y) → (x+w-fold,y) → (x+w,y+fold) → (x+w,y+h) → (x,y+h)
   const bodyPoints = [
-    `${x},${y}`,
-    `${x + w - NOTE_FOLD},${y}`,
-    `${x + w},${y + NOTE_FOLD}`,
-    `${x + w},${y + h}`,
-    `${x},${y + h}`,
+    f`${x},${y}`,
+    f`${x + w - NOTE_FOLD},${y}`,
+    f`${x + w},${y + NOTE_FOLD}`,
+    f`${x + w},${y + h}`,
+    f`${x},${y + h}`,
   ].join(' ')
   const foldPoints =
-    `${x + w - NOTE_FOLD},${y} ${x + w},${y + NOTE_FOLD} ` +
-    `${x + w - NOTE_FOLD},${y + NOTE_FOLD}`
+    f`${x + w - NOTE_FOLD},${y} ${x + w},${y + NOTE_FOLD} ` +
+    f`${x + w - NOTE_FOLD},${y + NOTE_FOLD}`
 
   return (
-    `<g class="class-note"${forAttr}>` +
-    `\n  <polygon points="${bodyPoints}" ` +
-    `fill="var(--bg)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
-    `\n  <polygon points="${foldPoints}" ` +
-    `fill="var(--_inner-stroke)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
-    `\n  ${renderMultilineText(
+    f`<g class="class-note"${forAttr}>` +
+    f`\n  <polygon points="${bodyPoints}" ` +
+    f`fill="var(--bg)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`\n  <polygon points="${foldPoints}" ` +
+    f`fill="var(--_inner-stroke)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`\n  ${renderMultilineText(
       note.text,
       x + w / 2,
       y + h / 2,
       fontSizes.edgeLabel,
-      `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+      f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
     )}` +
     `\n</g>`
   )
@@ -446,14 +447,14 @@ function renderNote(note: PositionedClassNote, fontSizes: FontSizes): string {
  */
 function renderNoteLink(note: PositionedClassNote): string {
   if (!note.linkPoints || note.linkPoints.length < 2) return ''
-  const pathData = note.linkPoints.map((p) => `${p.x},${p.y}`).join(' ')
+  const pathData = note.linkPoints.map((p) => f`${p.x},${p.y}`).join(' ')
   const forAttr =
     note.forClass !== undefined
-      ? ` data-for="${escapeAttr(note.forClass)}"`
+      ? f` data-for="${escapeAttr(note.forClass)}"`
       : ''
   return (
-    `<polyline class="class-note-link"${forAttr} points="${pathData}" ` +
-    `fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}" stroke-dasharray="2 3" />`
+    f`<polyline class="class-note-link"${forAttr} points="${pathData}" ` +
+    f`fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}" stroke-dasharray="2 3" />`
   )
 }
 
@@ -468,7 +469,7 @@ function renderNoteLink(note: PositionedClassNote): string {
 function renderRelationship(rel: PositionedClassRelationship): 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 isDashed = rel.type === 'dependency' || rel.type === 'realization'
   const dashArray = isDashed ? ' stroke-dasharray="6 4"' : ''
 
@@ -484,24 +485,26 @@ function renderRelationship(rel: PositionedClassRelationship): string {
   // - data-label: relationship label if present
   const dataAttrs = [
     'class="class-relationship"',
-    `data-from="${escapeAttr(rel.from)}"`,
-    `data-to="${escapeAttr(rel.to)}"`,
-    `data-type="${rel.type}"`,
-    `data-marker-at="${rel.markerAt}"`,
+    f`data-from="${escapeAttr(rel.from)}"`,
+    f`data-to="${escapeAttr(rel.to)}"`,
+    f`data-type="${rel.type}"`,
+    f`data-marker-at="${rel.markerAt}"`,
   ]
   if (rel.label) {
-    dataAttrs.push(`data-label="${escapeAttr(rel.label)}"`)
+    dataAttrs.push(f`data-label="${escapeAttr(rel.label)}"`)
   }
   if (rel.fromCardinality) {
-    dataAttrs.push(`data-from-cardinality="${escapeAttr(rel.fromCardinality)}"`)
+    dataAttrs.push(
+      f`data-from-cardinality="${escapeAttr(rel.fromCardinality)}"`,
+    )
   }
   if (rel.toCardinality) {
-    dataAttrs.push(`data-to-cardinality="${escapeAttr(rel.toCardinality)}"`)
+    dataAttrs.push(f`data-to-cardinality="${escapeAttr(rel.toCardinality)}"`)
   }
 
   return (
-    `<polyline ${dataAttrs.join(' ')} points="${pathData}" fill="none" stroke="var(--_line)" ` +
-    `stroke-width="${STROKE_WIDTHS.connector}"${dashArray}${markers} />`
+    f`<polyline ${dataAttrs.join(' ')} points="${pathData}" fill="none" stroke="var(--_line)" ` +
+    f`stroke-width="${STROKE_WIDTHS.connector}"${dashArray}${markers} />`
   )
 }
 
@@ -519,9 +522,9 @@ function getRelationshipMarkers(
   if (!markerId) return ''
 
   if (markerAt === 'from') {
-    return ` marker-start="url(#${markerId})"`
+    return f` marker-start="url(#${markerId})"`
   } else {
-    return ` marker-end="url(#${markerId})"`
+    return f` marker-end="url(#${markerId})"`
   }
 }
 
@@ -562,7 +565,7 @@ function renderRelationshipLabels(
         pos.x,
         pos.y - 8,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+        f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
       ),
     )
   }
@@ -578,7 +581,7 @@ function renderRelationshipLabels(
         p.x + offset.x,
         p.y + offset.y,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+        f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
       ),
     )
   }
@@ -594,7 +597,7 @@ function renderRelationshipLabels(
         p.x + offset.x,
         p.y + offset.y,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+        f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
       ),
     )
   }

package/src/edge-curves.ts

@@ -10,10 +10,11 @@
 // ============================================================================
 
 import type { Point, CurveStyle } from '@zombie-mermaid/core'
+import { f } from '@zombie-mermaid/core'
 
 /** `M x y` for the first point. */
 function moveTo(p: Point): string {
-  return `M ${p.x} ${p.y}`
+  return f`M ${p.x} ${p.y}`
 }
 
 /** Straight segments through every point — the historical default. */
@@ -22,7 +23,7 @@ function linearPath(points: Point[]): string {
     moveTo(points[0]!) +
     points
       .slice(1)
-      .map((p) => ` L ${p.x} ${p.y}`)
+      .map((p) => f` L ${p.x} ${p.y}`)
       .join('')
   )
 }
@@ -51,14 +52,14 @@ function basisPath(points: Point[]): string {
 
   /** One B-spline segment across three successive control points. */
   const segment = (p0: Point, p1: Point, p2: Point): string =>
-    ` C ${(2 * p0.x + p1.x) / 3} ${(2 * p0.y + p1.y) / 3},` +
-    ` ${(p0.x + 2 * p1.x) / 3} ${(p0.y + 2 * p1.y) / 3},` +
-    ` ${(p0.x + 4 * p1.x + p2.x) / 6} ${(p0.y + 4 * p1.y + p2.y) / 6}`
+    f` C ${(2 * p0.x + p1.x) / 3} ${(2 * p0.y + p1.y) / 3},` +
+    f` ${(p0.x + 2 * p1.x) / 3} ${(p0.y + 2 * p1.y) / 3},` +
+    f` ${(p0.x + 4 * p1.x + p2.x) / 6} ${(p0.y + 4 * p1.y + p2.y) / 6}`
 
   // Lead-in to the first knot, one sixth of the way along the opening leg.
   parts.push(
-    ` L ${(5 * points[0]!.x + points[1]!.x) / 6}` +
-      ` ${(5 * points[0]!.y + points[1]!.y) / 6}`,
+    f` L ${(5 * points[0]!.x + points[1]!.x) / 6}` +
+      f` ${(5 * points[0]!.y + points[1]!.y) / 6}`,
   )
 
   for (let i = 2; i < points.length; i++) {
@@ -67,7 +68,7 @@ function basisPath(points: Point[]): string {
 
   // d3 closes by feeding the last point twice, then drawing to it.
   parts.push(segment(points[points.length - 2]!, last, last))
-  parts.push(` L ${last.x} ${last.y}`)
+  parts.push(f` L ${last.x} ${last.y}`)
 
   return parts.join('')
 }
@@ -109,7 +110,7 @@ function naturalPath(points: Point[]): string {
     // A zero-length leg means duplicated routed points; there is no corner
     // to round, so pass straight through.
     if (inLen === 0 || outLen === 0) {
-      parts.push(` L ${corner.x} ${corner.y}`)
+      parts.push(f` L ${corner.x} ${corner.y}`)
       continue
     }
 
@@ -123,12 +124,12 @@ function naturalPath(points: Point[]): string {
     const endY = corner.y + ((next.y - corner.y) / outLen) * radius
 
     // Straight up to the fillet, then a quadratic through the corner.
-    parts.push(` L ${startX} ${startY}`)
-    parts.push(` Q ${corner.x} ${corner.y}, ${endX} ${endY}`)
+    parts.push(f` L ${startX} ${startY}`)
+    parts.push(f` Q ${corner.x} ${corner.y}, ${endX} ${endY}`)
   }
 
   const last = points[points.length - 1]!
-  parts.push(` L ${last.x} ${last.y}`)
+  parts.push(f` L ${last.x} ${last.y}`)
 
   return parts.join('')
 }
@@ -155,17 +156,17 @@ function stepPath(points: Point[], where: 'mid' | 'before' | 'after'): string {
     const b = points[i + 1]!
 
     if (i === lastIndex - 1) {
-      parts.push(` L ${b.x} ${b.y}`)
+      parts.push(f` L ${b.x} ${b.y}`)
       break
     }
 
     if (where === 'before') {
-      parts.push(` L ${a.x} ${b.y} L ${b.x} ${b.y}`)
+      parts.push(f` L ${a.x} ${b.y} L ${b.x} ${b.y}`)
     } else if (where === 'after') {
-      parts.push(` L ${b.x} ${a.y} L ${b.x} ${b.y}`)
+      parts.push(f` L ${b.x} ${a.y} L ${b.x} ${b.y}`)
     } else {
       const midY = (a.y + b.y) / 2
-      parts.push(` L ${a.x} ${midY} L ${b.x} ${midY} L ${b.x} ${b.y}`)
+      parts.push(f` L ${a.x} ${midY} L ${b.x} ${midY} L ${b.x} ${b.y}`)
     }
   }
 

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}" />`,
     )
   }