@transitrix/diagrams 1.0.0 → 1.1.0

package/src/webview/render-blocks.ts

@@ -14,11 +14,16 @@
  */
 import { layoutNestedBlocks } from '../blocks/layout.js';
 import type { BlocksFile, BlocksLayout, LaidOutBlock } from '../blocks/types.js';
-import { generateSvgEmbedCss } from '../theme/index.js';
+import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
 
 const PAD = 24;
 
+// Approximate character width (px) at text-primary size (12px/600).
+const CHAR_W = 7;
+// Approximate character width (px) at text-id size (10px/600) — used for ID suffix.
+const CHAR_W_ID = 6;
+
 export interface RenderBlocksOptions {
   title?: string;
 }
@@ -36,27 +41,89 @@ function levelClassForDepth(depth: number): string {
   return `level-${idx}`;
 }
 
-function truncate(text: string, maxChars: number): string {
+/** Truncate at a word boundary so labels never break in the middle of a word. */
+function wordTruncate(text: string, maxChars: number): string {
   if (text.length <= maxChars) return text;
-  return text.slice(0, Math.max(0, maxChars - 1)) + '…';
+  const cut = text.slice(0, maxChars - 1);
+  const lastSpace = cut.lastIndexOf(' ');
+  return (lastSpace > maxChars / 2 ? cut.slice(0, lastSpace) : cut) + '…';
 }
 
 function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]): void {
   const cls = levelClassForDepth(b.depth);
+  const cx = b.x + ox + b.width / 2;
   parts.push(
     `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="6"/>`,
   );
 
-  // Header label, centred horizontally within the block's header strip.
-  const headerY = b.y + oy + b.headerHeight / 2;
-  const maxChars = Math.max(4, Math.floor(b.width / 8));
-  parts.push(
-    `<text class="text-header" x="${b.x + ox + b.width / 2}" y="${headerY}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(b.name, maxChars))}</text>`,
-  );
+  const isLeaf = b.children.length === 0;
+  if (isLeaf) {
+    // Leaf block: name on upper line, ID on lower line — both centred.
+    const nameY = b.y + oy + Math.round(b.height * 0.38);
+    const idY = b.y + oy + Math.round(b.height * 0.66);
+    const maxChars = Math.max(4, Math.floor(b.width / CHAR_W));
+    parts.push(
+      `<text class="text-primary" x="${cx}" y="${nameY}" text-anchor="middle" dominant-baseline="central">${escXml(wordTruncate(b.name, maxChars))}</text>`,
+      `<text class="text-id" x="${cx}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(b.id)}</text>`,
+    );
+  } else {
+    // Container block: name + (ID) on the single header line; ID in grey.
+    const headerY = b.y + oy + b.headerHeight / 2;
+    const idSuffix = ` (${b.id})`;
+    const idSuffixW = idSuffix.length * CHAR_W_ID;
+    const nameMaxChars = Math.max(4, Math.floor((b.width - idSuffixW) / CHAR_W));
+    const nameText = wordTruncate(b.name, nameMaxChars);
+    parts.push(
+      `<text class="text-primary" x="${cx}" y="${headerY}" text-anchor="middle" dominant-baseline="central">${escXml(nameText)}<tspan fill="var(--ts-text-secondary, #64748b)" font-size="10" font-weight="600">${escXml(idSuffix)}</tspan></text>`,
+    );
+    for (const c of b.children) emitBlockSvg(c, ox, oy, parts);
+  }
+}
 
-  for (const c of b.children) emitBlockSvg(c, ox, oy, parts);
+export interface RenderBlocksLayoutOptions {
+  /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+  topInset?: number;
+  /** Raw SVG injected immediately after the opening tag — a header line or a full title block. */
+  title?: string;
+  /** When set, the theme CSS is embedded as `<style>` so the SVG is self-contained. */
+  embedCssTheme?: ThemeId;
 }
 
+/**
+ * The single Nested Blocks SVG emitter shared by every host. Takes an
+ * already-computed {@link BlocksLayout} (callers decide the layout options) and
+ * produces the `<svg>`. Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderBlocksSvg} (embedded CSS + simple header);
+ *   - VS Code's blocks preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export function renderBlocksLayoutSvg(
+  layout: BlocksLayout,
+  options: RenderBlocksLayoutOptions = {},
+): string {
+  const { topInset = 0, title = '', embedCssTheme } = options;
+
+  const w = layout.bounds.width + PAD * 2;
+  const h = layout.bounds.height + PAD * 2 + topInset;
+  const ox = -layout.bounds.x + PAD;
+  const oy = -layout.bounds.y + PAD + topInset;
+
+  const parts: string[] = [];
+  for (const top of layout.blocks) emitBlockSvg(top, ox, oy, parts);
+
+  const styleLine = embedCssTheme ? `\n<style>${generateSvgEmbedCss(embedCssTheme)}</style>` : '';
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${styleLine}
+${title}
+${parts.join('\n')}
+</svg>`;
+}
+
+/**
+ * Host-neutral blocks renderer (IntelliJ/UI). Lays the doc out with the default
+ * spacing, then delegates the actual SVG emission to {@link renderBlocksLayoutSvg}
+ * with the shared theme CSS embedded so the output is self-contained.
+ */
 export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions = {}): string {
   const { title = '' } = options;
 
@@ -66,26 +133,9 @@ export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions =
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
   }
 
-  const w = layout.bounds.width + PAD * 2;
-  const h = layout.bounds.height + PAD * 2;
-  const ox = -layout.bounds.x + PAD;
-  const oy = -layout.bounds.y + PAD;
-
-  const parts: string[] = [];
-  for (const top of layout.blocks) emitBlockSvg(top, ox, oy, parts);
-
   const titleSvg = title
     ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Nested Blocks — ${title}`)}</text>`
     : '';
 
-  // Embed the shared theme CSS inside the SVG so the rendered output is
-  // self-contained — the JCEF host page only needs to drop the SVG into the
-  // DOM and styling resolves without any cooperation from the host stylesheet.
-  const embedCss = generateSvgEmbedCss('transitrix');
-
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-${titleSvg}
-${parts.join('\n')}
-</svg>`;
+  return renderBlocksLayoutSvg(layout, { title: titleSvg, embedCssTheme: 'transitrix' });
 }

package/src/webview/render-fgca.ts

@@ -26,29 +26,30 @@ import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
 
 const COL_LABELS: Record<FGCAPreviewColumn, string> = {
-  factor: 'Factors (F)',
+  driver: 'Drivers (D)',
   goal: 'Goals (G)',
   change: 'Changes (C)',
   activity: 'Activities (A)',
 };
 
-export interface RenderFgcaOptions {
-  /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
-  variant?: 'fgca' | 'fga';
-  /** Optional heading rendered as a left-anchored `text-header` line. */
-  title?: string;
-}
-
-export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): string {
-  const { variant = 'fgca', title = '' } = options;
-  const hideChanges = variant === 'fga';
-
-  const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
-
-  if (nodes.length === 0) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
-  }
+type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
 
+/**
+ * Canonical FGCA/FGA body — the column headers, node rects and edge paths that
+ * go inside the `<svg>`, shared verbatim by the VS Code preview (`buildSvg`)
+ * and the host-neutral wrapper below. Excludes the host-specific title block
+ * and the (identical) `<defs>` arrow marker. Coordinates are absolute (the
+ * layout's own); the VS Code path wraps this in a `translate(0, titleH)` group
+ * to make room for its title block, while the host-neutral wrapper renders it
+ * untranslated.
+ */
+export function renderFgcaBody(
+  columns: FgcaLayout['columns'],
+  nodes: FgcaLayout['nodes'],
+  edges: FgcaLayout['edges'],
+  curvature: number,
+  entryCurvature: number | undefined,
+): string {
   const headerSvg = columns
     .map(({ col, x }) =>
       [
@@ -58,13 +59,10 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
     )
     .join('\n');
 
-  // Cubic bezier with horizontal control handles (shared geometry in
-  // @transitrix/diagrams). Uses the package default curvature — the
-  // interactive curvature control is a VS Code-only concern.
   const edgeSvg = edges
     .map(
       (e) =>
-        `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, DEFAULT_EDGE_CURVATURE)}" class="diagram-edge" marker-end="url(#arrow)"/>`,
+        `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`,
     )
     .join('\n');
 
@@ -84,20 +82,49 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
         }
       }
       const twoLines = line2.length > 0;
-      const y1 = twoLines ? n.y + NODE_H / 2 - 8 : n.y + NODE_H / 2 + 5;
-      const y2 = y1 + 18;
+      const y1 = twoLines ? n.y + 16 : n.y + 26;
+      const y2 = n.y + 32;
+      const idY = twoLines ? n.y + 54 : n.y + 50;
+      const entityId = n.id.slice(n.id.indexOf('_') + 1);
       return [
         `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${NODE_W}" height="${NODE_H}" rx="8"/>`,
-        `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y1}" text-anchor="middle">${escXml(line1)}</text>`,
+        `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
         twoLines
-          ? `<text class="text-secondary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle">${escXml(line2)}</text>`
+          ? `<text class="text-secondary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
           : '',
+        `<text class="text-id" x="${n.x + NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(entityId)}</text>`,
       ]
         .filter(Boolean)
         .join('\n');
     })
     .join('\n');
 
+  return `${headerSvg}\n${nodeSvg}\n${edgeSvg}`;
+}
+
+export interface RenderFgcaOptions {
+  /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
+  variant?: 'fgca' | 'fga';
+  /** Optional heading rendered as a left-anchored `text-header` line. */
+  title?: string;
+  /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
+  curvature?: number;
+  /** Entry curvature at the target node; defaults to `curvature` when omitted. */
+  entryCurvature?: number;
+}
+
+export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): string {
+  const { variant = 'fgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
+  const hideChanges = variant === 'fga';
+
+  const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
+
+  if (nodes.length === 0) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+  }
+
+  const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature);
+
   const titleSvg = title
     ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
     : '';
@@ -115,8 +142,6 @@ export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): st
   </marker>
 </defs>
 ${titleSvg}
-${headerSvg}
-${nodeSvg}
-${edgeSvg}
+${body}
 </svg>`;
 }

package/src/webview/render-goals.ts

@@ -1,110 +1,133 @@
-/**
- * Browser-safe SVG renderer for the canonical Goals notation.
- *
- * Step 3 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated GoalTree into renderable SVG so JCEF can drop it into the preview
- * panel. The VS Code path lives in `extension/src/goals-preview.ts` and pulls
- * in VS Code-specific concerns (themes, title block, save dialogs); this
- * module is the host-neutral subset — pure layout → SVG with no VS Code APIs,
- * no `node:fs`, no `node:path`.
- *
- * Step 4 will follow the same shape for the remaining ten notations.
- */
-import { layoutGoalTree } from '../goals/layout.js';
-import type { GoalTree, GoalTreeLayout, LaidOutEdge } from '../goals/types.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
-import { generateSvgEmbedCss } from '../theme/index.js';
-
-const NODE_W = 250;
-const NODE_H = 60;
-const RANK_SEP = 100;
-const NODE_SEP = 24;
-const PAD = 24;
-const LABEL_MAX = 36;
-const LABEL_TRIM = 34;
-
-function escXml(s: string): string {
-  return s
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-export interface RenderGoalsOptions {
-  treeName?: string;
-  curvature?: number;
-}
-
-export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {}): string {
-  const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE } = options;
-
-  const layout: GoalTreeLayout = layoutGoalTree(tree, {
-    nodeWidth: NODE_W,
-    nodeHeight: NODE_H,
-    rankSep: RANK_SEP,
-    nodeSep: NODE_SEP,
-  });
-
-  if (layout.nodes.length === 0) {
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
-  }
-
-  const w = layout.bounds.width + PAD * 2;
-  const h = layout.bounds.height + PAD * 2;
-  const ox = -layout.bounds.x + PAD;
-  const oy = -layout.bounds.y + PAD;
-
-  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
-
-  function edgePath(e: LaidOutEdge): string {
-    const s = nodeMap.get(e.source);
-    const t = nodeMap.get(e.target);
-    if (!s || !t) return '';
-    const sx = s.x + ox + s.width;
-    const sy = s.y + oy + s.height / 2;
-    const tx = t.x + ox;
-    const ty = t.y + oy + t.height / 2;
-    return horizontalCubicEdgePath(sx, sy, tx, ty, curvature);
-  }
-
-  const edgeSvg = layout.edges
-    .map((e) => `<path d="${edgePath(e)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
-    .join('\n');
-
-  const nodeSvg = layout.nodes
-    .map((n) => {
-      const x = n.x + ox;
-      const y = n.y + oy;
-      const level = n.data.level % 8;
-      const labelText = n.data.name ?? String(n.id);
-      const label = labelText.length > LABEL_MAX ? labelText.slice(0, LABEL_TRIM) + '…' : labelText;
-      return `<g>
-  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
-  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
-</g>`;
-    })
-    .join('\n');
-
-  const titleSvg = treeName
-    ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
-    : '';
-
-  // Embed the shared theme CSS inside the SVG so the rendered output is
-  // self-contained — the JCEF host page only needs to drop the SVG into the
-  // DOM and styling resolves without any cooperation from the host stylesheet.
-  // Matches what the VS Code path produces via `prepareSvgForExport`.
-  const embedCss = generateSvgEmbedCss('transitrix');
-
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-<defs>
-  <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
-  </marker>
-</defs>
-${titleSvg}
-${nodeSvg}
-${edgeSvg}
-</svg>`;
-}
+/**
+ * Browser-safe SVG renderer for the canonical Goals notation.
+ *
+ * Step 3 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
+ * validated GoalTree into renderable SVG so JCEF can drop it into the preview
+ * panel. The VS Code path lives in `extension/src/goals-preview.ts` and pulls
+ * in VS Code-specific concerns (themes, title block, save dialogs); this
+ * module is the host-neutral subset — pure layout → SVG with no VS Code APIs,
+ * no `node:fs`, no `node:path`.
+ *
+ * Step 4 will follow the same shape for the remaining ten notations.
+ */
+import { layoutGoalTree } from '../goals/layout.js';
+import type { GoalTree, GoalTreeLayout, LaidOutEdge } from '../goals/types.js';
+import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
+import { escXml } from './render-util.js';
+
+const NODE_W = 250;
+const NODE_H = 60;
+const RANK_SEP = 100;
+const NODE_SEP = 24;
+const PAD = 24;
+const LABEL_MAX = 36;
+const LABEL_TRIM = 34;
+
+export interface RenderGoalsOptions {
+  treeName?: string;
+  curvature?: number;
+  entryCurvature?: number;
+}
+
+/**
+ * Host-neutral goals renderer (IntelliJ/UI). Lays the tree out with the default
+ * spacing, then delegates the actual SVG emission to {@link renderGoalsLayoutSvg}
+ * with the shared theme CSS embedded so the output is self-contained.
+ */
+export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {}): string {
+  const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
+
+  const layout: GoalTreeLayout = layoutGoalTree(tree, {
+    nodeWidth: NODE_W,
+    nodeHeight: NODE_H,
+    rankSep: RANK_SEP,
+    nodeSep: NODE_SEP,
+  });
+
+  if (layout.nodes.length === 0) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+  }
+
+  const title = treeName
+    ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
+    : '';
+
+  // Embed the shared theme CSS so the JCEF host page only needs to drop the SVG
+  // into the DOM — styling resolves without help from the host stylesheet. The
+  // VS Code preview omits this (its webview supplies the CSS) and embeds it only
+  // on export via `prepareSvgForExport`.
+  return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, title, embedCssTheme: 'transitrix' });
+}
+
+export interface RenderGoalsLayoutOptions {
+  curvature?: number;
+  entryCurvature?: number;
+  /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+  topInset?: number;
+  /** Raw SVG injected immediately after `<defs>` — a header line or a full title block. */
+  title?: string;
+  /** When set, the theme CSS is embedded as `<style>` so the SVG is self-contained. */
+  embedCssTheme?: ThemeId;
+}
+
+/**
+ * The single goals SVG emitter shared by every host. Takes an already-computed
+ * {@link GoalTreeLayout} (callers decide spacing/scope) and produces the `<svg>`.
+ * Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderGoalsSvg} (embedded CSS + simple header);
+ *   - VS Code's goals preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export function renderGoalsLayoutSvg(layout: GoalTreeLayout, options: RenderGoalsLayoutOptions = {}): string {
+  const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, topInset = 0, title = '', embedCssTheme } = options;
+
+  const w = layout.bounds.width + PAD * 2;
+  const h = layout.bounds.height + PAD * 2 + topInset;
+  const ox = -layout.bounds.x + PAD;
+  const oy = -layout.bounds.y + PAD + topInset;
+
+  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+
+  function edgePath(e: LaidOutEdge): string {
+    const s = nodeMap.get(e.source);
+    const t = nodeMap.get(e.target);
+    if (!s || !t) return '';
+    const sx = s.x + ox + s.width;
+    const sy = s.y + oy + s.height / 2;
+    const tx = t.x + ox;
+    const ty = t.y + oy + t.height / 2;
+    return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+  }
+
+  const edgeSvg = layout.edges
+    .map((e) => `<path d="${edgePath(e)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
+    .join('\n');
+
+  const nodeSvg = layout.nodes
+    .map((n) => {
+      const x = n.x + ox;
+      const y = n.y + oy;
+      const level = n.data.level % 8;
+      const labelText = n.data.name ?? String(n.id);
+      const label = labelText.length > LABEL_MAX ? labelText.slice(0, LABEL_TRIM) + '…' : labelText;
+      return `<g>
+  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
+  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
+</g>`;
+    })
+    .join('\n');
+
+  const styleLine = embedCssTheme ? `\n<style>${generateSvgEmbedCss(embedCssTheme)}</style>` : '';
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${styleLine}
+<defs>
+  <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
+  </marker>
+</defs>
+${title}
+${nodeSvg}
+${edgeSvg}
+</svg>`;
+}