diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 45d8f052a..861754ef5 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -109,6 +109,11 @@ jobs:
           packages/ui/components/MarkdownEditor.extensions.test.tsx
           packages/ui/components/ThemeProvider.favicon.test.tsx
           packages/ui/components/MermaidBlock.theme.test.tsx
+          packages/ui/components/DiagramBlock.anchor.test.tsx
+          packages/ui/components/diagram/DiagramViewer.test.tsx
+          packages/ui/utils/diagramAnchor.test.ts
+          packages/ui/utils/diagramAnchorGraphviz.test.ts
+          packages/ui/hooks/useAnnotationHighlighter.diagramSkip.test.tsx
           packages/ui/components/CommentPopover.skillReferences.test.tsx
           packages/ui/components/SkillReferenceMenu.placement.test.tsx
           packages/ui/components/sidebar/FileBrowser.test.ts
diff --git a/AGENTS.md b/AGENTS.md
index da6a18e4c..a5526d782 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -73,6 +73,7 @@ plannotator/
 │   │   ├── theme.css             # Single source of truth for color tokens + Tailwind bridge
 │   │   ├── components/           # Viewer, Toolbar, Settings, etc.
 │   │   │   ├── icons/            # Shared SVG icon components (themeIcons, etc.)
+│   │   │   ├── diagram/          # The diagram engine's viewer (DiagramViewer, DiagramCanvas, DiagramOverlay, DiagramComposer, DiagramSourcePane, DiagramPopout + hooks); DiagramBlock.tsx is the fence side
 │   │   │   ├── plan-diff/        # PlanDiffBadge, PlanDiffViewer, clean/raw diff views
 │   │   │   └── sidebar/          # SidebarContainer, SidebarTabs, VersionBrowser, ArchiveBrowser
 │   │   ├── shortcuts/            # Keyboard shortcut registry (see Keyboard Shortcuts section below)
@@ -896,6 +897,7 @@ interface Annotation {
   diffContext?: 'added' | 'removed' | 'modified'; // Set when annotation created in plan diff view
   htmlAnchor?: HtmlElementAnchor; // Raw-HTML pinpoint: serialized element anchor for reliable restoration
   htmlAdditionalTargets?: HtmlAnnotationTarget[]; // Raw-HTML shift-click multi-select: extra elements this one comment covers
+  diagramAnchor?: DiagramAnchor; // A comment on a rendered diagram part: { v: 1, family, kind, id | from + to, label, sourceLine } (document lines); see "Diagram comments"
   startMeta?: { parentTagName; parentIndex; textOffset };
   endMeta?: { parentTagName; parentIndex; textOffset };
 }
@@ -964,6 +966,8 @@ Text highlighting uses `web-highlighter` library. Code blocks use manual `<mark>
 
 *Counts:* the panel header shows the scoped count, but the session total the decision control runs on (`feedbackAnnotationCount`) is computed from session state and is unaffected by the toggle — switching scope never changes what is submitted. Not covered: code review, single-document plan review, and live-app multi-page sessions (which already group their export by page). The compact/touch sheet reuses `AnnotationPanel`, so it gets the same toggle in its own header bar. Every panel prop is optional and additive, so a host that passes none of them (Workspaces) renders the previous panel, legacy affordance included.
 
+**Diagram comments (Mermaid and Graphviz fences).** A comment composed on a rendered diagram part — a click on a node, edge or cluster in the inline canvas or the popout — becomes an `Annotation` on the document with ONE additive field, `diagramAnchor` (`DiagramAnchor` from `@plannotator/core/diagram-anchor`, the `htmlAnchor` precedent): `{ v: 1, family, kind, id | from + to, label, sourceLine }` (families: flowchart, state, class, er, requirement, sequence, other, graphviz; kinds: node, edge, cluster, and `diagram` for the whole diagram, which has no id), where the anchor is the diagram's OWN id for the part (sequence parts carry classes, not ids, so the codec's ids are the actor's `name`, `msg-<n>`, `note-<n>`, `frame-<n>` by document order, restored with a label check because an ordinal moves) (never the rendered element id with its trailing counter, never geometry) and `sourceLine` names 1-based DOCUMENT lines (the fence's opening line is the offset, `Block.startLine`). The annotation carries the fence's `blockId`, `startOffset`/`endOffset` 0, the label as `originalText`, `type: COMMENT` and the tater identity, so it lists in the annotations rail beside text comments, exports, persists in drafts (opaque JSON), and restores after a reload: `useAnnotationHighlighter` skips rows carrying `diagramAnchor` (neither attempted nor unanchored), and `DiagramBlock` re-resolves them against every render through the engine's finder — id, then label, then unanchored — and reports through `Viewer.onRestoreReport` with its own comments as `attempted`, so App's `markdownUnanchoredIds` shows the same "Unanchored" chip a text comment gets. All three export paths (`exportAnnotations`, `exportLinkedDocAnnotations`, `exportAnnotationEntry`) print the location line `Diagram node <label> (<id>), line <n>` (whole diagram: `Diagram (<family>), lines a–b`) under the comment's heading; a WebMCP reply inherits its parent's `diagramAnchor`; the diagram block is `annotation-exclude`, so text restore can never wrap a `<mark>` inside the svg. The line comes from (`diagramAnchorLocationLine`; edges name both ends); the feedback archive records the validated anchor as `diagramAnchor`; `POST /api/external-annotations` accepts a validated `diagramAnchor` on plan comments (both runtimes, `400` when malformed; such rows carry `blockId: "external"`, and like a comment whose fence was deleted they are resolved BY ANCHOR against every diagram block through `DiagramAnchorClaims` (`components/diagram/anchorClaims`, provided by `Viewer`): the first block in document order whose finder resolves it shows it, and when every block answered and none did it is reported unanchored); share links drop the anchor exactly like `htmlAnchor` (`sharing.multiTarget.test.ts`). Selecting a diagram comment in the rail pulses its ring, pans it into view and scrolls the block into view. Plannotator passes `maxAdditionalTargets` 0 (one part per comment; the viewer's shift-click multi-select is a host opt-in) and no `onSave` (no Source pane; the in-block Show-source toggle keeps the fence readable). Read-only documents (archive) open no composer.
+
 **Raw-HTML annotate:** the sandboxed viewer never mutates the visited page's DOM. Committed annotations render as numbered placed comment markers plus overlay-projected highlight rectangles inside a shadow-rooted fixed overlay host: the durable anchor data (element selector, text snapshot, normalized selected point) is persisted, and the markers/highlights are disposable projections re-resolved from it on every reconcile. Shift-click multi-select joins additional elements to one comment (`htmlAdditionalTargets`).
 
 **Element context (agent-facing).** A pinpoint also captures a bounded description of the element at click time, `elementContext` on the annotation (`HtmlElementContext` in `packages/ui/types.ts`; extra targets carry a smaller one as `context`), built by `buildElementContext` in the bridge and re-validated at the parent trust boundary by `parseHtmlElementContext`, which lives in `packages/core/html-anchor.ts` beside `parseHtmlElementAnchor` (#1549); `useHtmlAnnotation.ts` imports and re-exports it rather than mirroring it, and the host persistence helpers in that same core module (`buildPersistedHtmlAnchor`, `projectHostThreads`) run it too, so a host that persists and projects through core keeps the field instead of dropping it on save. It is purely descriptive, never read by restore. Fields: tag, id, author classes, an ancestor `path`, explicit-or-implicit `role`, accessible `name`, an ALLOWLISTED attribute set (href/src scrubbed of query and fragment, `data:` truncated to its media type), rendered `text` (300), a collapsed HTML `outline` (600 chars; two child levels, then one, then a per-tag count, whichever first fits), child count, viewport `rect`, nearest `landmark` and `heading`, a `component` hint from `data-component`/`data-testid` ancestry (deliberately no React fiber reads), and in live-app sessions the `page` route and title. Never captured: form values, `on*` handlers, `style`, script/style/template contents, full innerHTML. Hard cap 2 KiB serialized per primary (1 KiB per extra target), shedding outline → text → attrs → classes → path → heading → landmark → component. Under the persisted anchor's own 16 KiB budget `buildPersistedHtmlAnchor` sheds contexts — per-target first, from the end, then the primary — BEFORE it drops any target, since a context is descriptive and re-derivable on the next click while a dropped target loses a marker the reviewer placed; `DEFAULT_HTML_ANCHOR_MAX_BYTES` is unchanged and the dropped-target counts still count targets only. The export (`elementContextExportBlock` in `packages/ui/utils/parser.ts`) prints a 4-backtick `html` fence of the outline plus `selector` / `path` / `role` · `name` · `component` / `attrs` / `text` / `box` / `near` lines under the comment; a text-less pinpoint's placeholder quote (`[element: Navigation]`) becomes `Feedback on the <nav> element — "Primary"` in the heading, while a pinpoint with real quoted text keeps its quote line and gains the block. Annotations without the field export byte-identically. The grouped live-app export omits the `route` line (the `## Page:` heading carries it); `exportAnnotationEntry` (one annotation, no number) includes it; it is a pure helper for hosts and tests, and the annotation panel's card chrome is unchanged. Both helpers also take `includeOutline` (default `true`): `false` prints the identity lines without the fenced outline, for model turns where the 600-char outline is the expensive part per annotation. Share links drop `elementContext` exactly like anchors. The feedback archive records identity only (`elementTag`, `elementSelector`, `elementPath`, `elementRole`, `elementName`, `pageUrl`), never the outline. No `BRIDGE_PROTOCOL_VERSION` bump: the field is additive in both directions.
@@ -1085,7 +1089,9 @@ There is **one** highlighter in the app: the Shiki instance `@pierre/diffs` alre
 
 **Mermaid runtime (12.x, lazy):** `@plannotator/ui` pins `mermaid` exactly (12.0.0 since ui 0.40.0; Mermaid 12 lays flowchart/state/class/ER/requirement diagrams out with ELK by default and targets Safari 17.4+ / ES2024 — we take its defaults rather than pinning the 11.x ones). The runtime is loaded lazily on the first diagram through `packages/ui/utils/mermaid.ts`'s own `import('mermaid')`: `packages/editor/App.tsx` deliberately does NOT import `@plannotator/ui/utils/mermaid-eager` (it did through ui 0.39.0), so a plan with no diagram never downloads the ~2 MB runtime + ELK on the share portal or in a host build, and `tests/entry-assets.test.ts` fails if the eager import creeps back into either app. The single-file builds (`apps/hook`, `apps/review`, opencode, the compiled binary) still inline the runtime through `inlineDynamicImports`, so the lazy import saves nothing there and resolves from the bundle itself; the Mermaid 12 cost in those builds is the runtime's own growth. `MermaidBlock` shows the source fence under a "Rendering diagram" status until the first render lands (never the error panel as a placeholder), and `applyMermaidTheme` is keyed on the runtime object, so the lazily loaded runtime is themed on its first render exactly like an eagerly registered one. `mermaid-eager` stays exported for hosts that want the old startup registration.
 
-**Diagram theming (Mermaid):** diagrams follow the palette and mode the same way fences do, through ONE dynamic mapping rather than per-palette themes. `packages/ui/utils/mermaidTheme.ts` reads the live CSS tokens off the document element (`readThemeTokens`: `--background`, `--foreground`, `--card`, `--border`, `--muted`, `--muted-foreground`, `--primary`, the accent tokens, `--font-sans`), derives a complete Mermaid `themeVariables` set for every diagram family from them (`buildMermaidThemeVariables(tokens, mode)`, pure; base theme `dark` under a dark resolved mode, `default` under light; node fill from `card`, borders from `border`, edges and arrowheads from `muted-foreground`, text from `foreground`/`card-foreground`, clusters from `muted`, twelve categorical fills for pie/git/mindmap/journey seeded from `primary`, `accent`, `success`, `warning`, `destructive` and normalized to one lightness per page polarity), and `MermaidBlock` runs the global `mermaid.initialize` through `applyMermaidTheme` once per `(palette, mode)` key from `useTheme()` before each render, re-rendering mounted diagrams when the key changes. Every colour handed to Mermaid is opaque hex (its colour library does not read `oklch()`), and a contrast guard (`ensureContrast`) repairs any text-on-fill pair under WCAG 4.5:1 or line-on-canvas pair under 3:1 (plus 0.1 headroom) by the smallest OKLab step toward `foreground`, then `background`, then pure black/white — guarding page-level text and lines against every surface they can cross (the `bg-muted/30` canvas over the document card and over the bare page, `card`, `muted`, `popover`, ER rows), not the page background alone; `mermaidTheme.test.ts` sweeps every palette in `packages/ui/themes` in both modes against that rule, so a new palette cannot regress it. The pure toolkit behind it is `packages/ui/utils/cssColor.ts`. **Host fallback:** with no theme tokens on the document `readThemeTokens` returns `undefined` and the runtime keeps the static `MERMAID_CONFIG` (still `securityLevel: 'strict'`, pinned) with no extra `initialize`, so a host without `ThemeProvider`/`theme.css` renders exactly as before. Do not add per-palette Mermaid themes or per-theme `.mermaid` CSS — extend the token mapping instead. `GraphvizBlock` already rewrites its SVG to `var(--foreground)` / `var(--muted-foreground)` / `var(--muted)` and needs no equivalent.
+**Diagram engine (ui 0.41.0):** every Mermaid and Graphviz diagram renders through ONE renderer slot and ONE canvas, the viewer moved in from Workspaces (owner ruling: the new engine, not an option). `MermaidBlock` and `GraphvizBlock` are thin wrappers over `packages/ui/components/DiagramBlock.tsx`, which keeps the fence side (`diagramLanguages.ts`, the pending fence under "Rendering diagram…", the error panel with the source, the per-engine Retry epoch, the Show-source toggle, the natural-height box) and renders `DiagramViewer` (`packages/ui/components/diagram/`) inline and again at full size in `DiagramPopout` (the `TablePopout` chrome; one code path). The renderer slot is `packages/ui/utils/diagram-render.ts`: `renderDiagram(kind, renderId, source, theme)` loads the engine through its runtime slot (`utils/mermaid.ts` as before, with `applyMermaidTheme` per (palette, mode) before every render; `utils/graphviz.ts`, new, the same shape, `@viz-js/viz` pinned exactly `3.30.0`), sanitizes the output into a NODE (`sanitizeDiagramSvg` = DOMPurify `parseDiagramSvg` + the in-place `scrubDiagramSvg` belt: no script, no `on*`, no `javascript:`/`data:` reference, no `<a href>` — a Mermaid click binding must never turn a pinpoint click into a navigation), and pairs it with the engine's finder (`utils/diagram-anchor.ts` for Mermaid's id grammar, `utils/diagram-anchor-graphviz.ts` keyed on `g.node > title`, never `nodeN`). A load failure is a value (`runtimeUnavailable: true`), which is the one failure Retry can change; one automatic re-attempt runs after the slot's retry delay. The canvas (`DiagramCanvas`) mounts the node with `replaceChildren` inside a CSS-transformed wrapper — wheel/drag/`+`/`-`/`0`/arrow keys; click-to-select vs drag-to-pan on a pointer-type-aware threshold (4 px mouse, 10 px finger); NO hover targeting on a plain mouse-over (owner ruling: it read as messy and fought the pan hand — the ring under the pointer appears only while the platform modifier is held, `isModKeyHeld`, and disarms on its release, on any other key, and on blur); canvas keys ignore Meta/Ctrl/Alt so browser chords pass through; inline the canvas is `touch-action: pan-y` (a finger scrolls the page past it) and only the popout is `touch-none`; the zoom strip is `data-print-hide` while rings and badges print. Every edge gets an invisible 14 px hit path in ONE layer appended last in the svg root (`widenEdgeHitAreas`: bare geometry, ancestors' transforms composed, no id/class/`data-*`, `diagramHitSource` maps it back) — measured in Chromium, the only thing painted over an edge is its OWN label box, centred on its midpoint, so a label is a target that resolves to its edge, and because the hit layer sits over the nodes the canvas resolves a click by PRIORITY over `elementsFromPoint` (node, then edge, then cluster), never by `event.target`. A click that resolves no part comments on the WHOLE diagram (kind `diagram`), so a click never does nothing. The scrub also scopes every `<style>` to rules under the svg's own root id (`scopeDiagramCss`: no `@import`, no fetching `url(`, no rule that could restyle the page). And the overlay (`DiagramOverlay`) reprojects rings and badges from `getBBox` through `getScreenCTM` each frame (`utils/diagram-projection.ts`), so they keep constant pixel size at every zoom. `components/mermaidSvg.ts` is gone. Under happy-dom DOMPurify is not functional (foreign-realm fragment, mislabelled svg namespaces, a cached `Node.prototype.nodeName` getter), so DOM tests swap the parse step for an inert XML parse through `__setDiagramSvgParserForTests` (`packages/ui/test-setup/diagramSvg.ts`) while the scrub still runs; the DOMPurify parse is proven in Chromium (the parity run in the PR that landed it). Real rendered svgs for the codec tests live in `packages/ui/test-setup/fixtures/diagrams/` with Chromium-measured geometry beside them.
+
+**Diagram theming (Mermaid):** diagrams follow the palette and mode the same way fences do, through ONE dynamic mapping rather than per-palette themes. `packages/ui/utils/mermaidTheme.ts` reads the live CSS tokens off the document element (`readThemeTokens`: `--background`, `--foreground`, `--card`, `--border`, `--muted`, `--muted-foreground`, `--primary`, the accent tokens, `--font-sans`), derives a complete Mermaid `themeVariables` set for every diagram family from them (`buildMermaidThemeVariables(tokens, mode)`, pure; base theme `dark` under a dark resolved mode, `default` under light; node fill from `card`, borders from `border`, edges and arrowheads from `muted-foreground`, text from `foreground`/`card-foreground`, clusters from `muted`, twelve categorical fills for pie/git/mindmap/journey seeded from `primary`, `accent`, `success`, `warning`, `destructive` and normalized to one lightness per page polarity), and `MermaidBlock` runs the global `mermaid.initialize` through `applyMermaidTheme` once per `(palette, mode)` key from `useTheme()` before each render, re-rendering mounted diagrams when the key changes. Every colour handed to Mermaid is opaque hex (its colour library does not read `oklch()`), and a contrast guard (`ensureContrast`) repairs any text-on-fill pair under WCAG 4.5:1 or line-on-canvas pair under 3:1 (plus 0.1 headroom) by the smallest OKLab step toward `foreground`, then `background`, then pure black/white — guarding page-level text and lines against every surface they can cross (the `bg-muted/30` canvas over the document card and over the bare page, `card`, `muted`, `popover`, ER rows), not the page background alone; `mermaidTheme.test.ts` sweeps every palette in `packages/ui/themes` in both modes against that rule, so a new palette cannot regress it. The pure toolkit behind it is `packages/ui/utils/cssColor.ts`. **Host fallback:** with no theme tokens on the document `readThemeTokens` returns `undefined` and the runtime keeps the static `MERMAID_CONFIG` (still `securityLevel: 'strict'`, pinned) with no extra `initialize`, so a host without `ThemeProvider`/`theme.css` renders exactly as before. Do not add per-palette Mermaid themes or per-theme `.mermaid` CSS — extend the token mapping instead. Graphviz has no theme system, so the renderer slot's `themeGraphvizSvg` recolors the DOT DEFAULTS onto the tokens after the scrub (the white page polygon removed, `fill="none"` → `var(--card)`, default black strokes → `var(--foreground)` on nodes and edges and `var(--border)` on clusters, `lightgrey` → `var(--muted)`, text → `var(--foreground)`) and leaves every author color alone; it needs no per-palette equivalent.
 
 **Bundle note:** Pierre imports Shiki's full bundle, so every grammar and theme is already inlined in the single-file builds; reusing its shared highlighter costs no extra bytes and needs no CDN or runtime wasm fetch. The Oniguruma WASM engine is dead weight under `shiki-js` and is aliased to `build/shiki-wasm-stub.ts` in the review, hook and portal Vite configs (via `resolve.alias`, which — unlike `plugins` — is shared with Vite's worker build).
 
diff --git a/apps/pi-extension/server/external-annotations.test.ts b/apps/pi-extension/server/external-annotations.test.ts
index 997f8e631..e76a83fdd 100644
--- a/apps/pi-extension/server/external-annotations.test.ts
+++ b/apps/pi-extension/server/external-annotations.test.ts
@@ -43,6 +43,28 @@ describe("pi external annotations: PATCH inReplyTo", () => {
 		return { status: res.status, body: (await res.json()) as { error?: string; annotation?: { inReplyTo?: string } } };
 	};
 
+	test("POST accepts a validated diagramAnchor and refuses a malformed one (Node mirror of the Bun case)", async () => {
+		const post = async (body: unknown) => {
+			const res = await fetch(`${base}/api/external-annotations`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(body),
+			});
+			return { status: res.status, body: (await res.json()) as { ids?: string[]; error?: string } };
+		};
+		const anchor = { v: 1, family: "flowchart", kind: "node", id: "D", label: "Approve?", sourceLine: [7, 7] };
+		const ok = await post({ source: "review-bot", type: "COMMENT", text: "rename", originalText: "Approve?", diagramAnchor: anchor });
+		expect(ok.status).toBe(201);
+		const snapshot = (await (await fetch(`${base}/api/external-annotations`)).json()) as {
+			annotations: Array<{ id: string; diagramAnchor?: unknown }>;
+		};
+		expect(snapshot.annotations.find((a) => a.id === ok.body.ids?.[0])?.diagramAnchor).toEqual(anchor);
+
+		const bad = await post({ source: "review-bot", type: "COMMENT", text: "rename", originalText: "Approve?", diagramAnchor: { kind: "node" } });
+		expect(bad.status).toBe(400);
+		expect(bad.body.error).toContain("diagramAnchor");
+	});
+
 	test("refuses an inReplyTo that is self, missing, or would close a cycle; accepts a valid reply", async () => {
 		const added = handler.addAnnotations({
 			annotations: [
diff --git a/apps/pi-extension/vendor.sh b/apps/pi-extension/vendor.sh
index 347a446e3..d1f31a780 100755
--- a/apps/pi-extension/vendor.sh
+++ b/apps/pi-extension/vendor.sh
@@ -8,7 +8,7 @@ rm -rf generated
 mkdir -p generated generated/ai/providers
 
 # Modules that MOVED to @plannotator/core — vendor the real impl from core.
-for f in feedback-templates project favicon code-file annotatable annotation-threads external-annotation agent-jobs agent-terminal source-save open-in-apps diff-paths diff-files guide guide-format guide-viewer-manifest compress crypto; do
+for f in feedback-templates project favicon code-file annotatable annotation-threads diagram-anchor external-annotation agent-jobs agent-terminal source-save open-in-apps diff-paths diff-files guide guide-format guide-viewer-manifest compress crypto; do
   src="../../packages/core/$f.ts"
   printf '// @generated — DO NOT EDIT. Source: packages/core/%s.ts\n' "$f" | cat - "$src" > "generated/$f.ts"
 done
diff --git a/bun.lock b/bun.lock
index 4a1cdee4c..7b002dc30 100644
--- a/bun.lock
+++ b/bun.lock
@@ -191,7 +191,7 @@
     },
     "packages/core": {
       "name": "@plannotator/core",
-      "version": "0.25.3",
+      "version": "0.25.4",
       "devDependencies": {
         "typescript": "~5.8.2",
       },
@@ -290,7 +290,7 @@
     },
     "packages/ui": {
       "name": "@plannotator/ui",
-      "version": "0.40.0",
+      "version": "0.41.0",
       "dependencies": {
         "@base-ui/react": "^1.7.0",
         "@codemirror/autocomplete": "^6.20.3",
@@ -316,7 +316,7 @@
         "@plannotator/markdown-editor": "^0.4.0",
         "@plannotator/web-highlighter": "^0.8.1",
         "@tanstack/react-table": "^8.21.3",
-        "@viz-js/viz": "^3.29.0",
+        "@viz-js/viz": "3.30.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "diff": "^8.0.4",
@@ -1181,7 +1181,7 @@
 
     "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
 
-    "@types/bun": ["@types/bun@1.4.0", "", { "dependencies": { "bun-types": "1.4.0" } }, "sha512-K+lZULY23vRgK/CfTjFIV+tyifaNdSMlPh9j+6mQ/cLfpOznLyAuzgV/JQysyECpkBQLVMSyvjlr2fBUSA9wFQ=="],
+    "@types/bun": ["@types/bun@1.4.2", "", { "dependencies": { "bun-types": "1.4.2" } }, "sha512-GimotNn7+ZV0uVArItBbriZsR1oNf0+WTzPkdcFrzShI7k2norL0uzEaJT8T33dWr7O/c9ZDuAFQrctKCi72oQ=="],
 
     "@types/d3": ["@types/d3@7.4.3", "", { "dependencies": { "@types/d3-array": "*", "@types/d3-axis": "*", "@types/d3-brush": "*", "@types/d3-chord": "*", "@types/d3-color": "*", "@types/d3-contour": "*", "@types/d3-delaunay": "*", "@types/d3-dispatch": "*", "@types/d3-drag": "*", "@types/d3-dsv": "*", "@types/d3-ease": "*", "@types/d3-fetch": "*", "@types/d3-force": "*", "@types/d3-format": "*", "@types/d3-geo": "*", "@types/d3-hierarchy": "*", "@types/d3-interpolate": "*", "@types/d3-path": "*", "@types/d3-polygon": "*", "@types/d3-quadtree": "*", "@types/d3-random": "*", "@types/d3-scale": "*", "@types/d3-scale-chromatic": "*", "@types/d3-selection": "*", "@types/d3-shape": "*", "@types/d3-time": "*", "@types/d3-time-format": "*", "@types/d3-timer": "*", "@types/d3-transition": "*", "@types/d3-zoom": "*" } }, "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww=="],
 
@@ -2579,6 +2579,8 @@
 
     "@textlint/linter-formatter/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "@types/bun/bun-types": ["bun-types@1.4.2", "", { "dependencies": { "@types/node": "*" } }, "sha512-bxV1FgK7yBIzjRe5zBozIM4Bem11ZJcCXSrjWRG3YWLt8yFDePu4cLjpebO8OvPeIE9trbyPF4fuj3Cia4Fj3w=="],
+
     "@vscode/vsce/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "@vscode/vsce/commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
@@ -2663,8 +2665,6 @@
 
     "parse-semver/semver": ["semver@5.7.2", "", { "bin": { "semver": "bin/semver" } }, "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="],
 
-    "plannotator-webview/@types/bun": ["@types/bun@1.4.2", "", { "dependencies": { "bun-types": "1.4.2" } }, "sha512-GimotNn7+ZV0uVArItBbriZsR1oNf0+WTzPkdcFrzShI7k2norL0uzEaJT8T33dWr7O/c9ZDuAFQrctKCi72oQ=="],
-
     "rc/ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
     "read-pkg/unicorn-magic": ["unicorn-magic@0.1.0", "", {}, "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ=="],
@@ -2797,8 +2797,6 @@
 
     "normalize-package-data/hosted-git-info/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
-    "plannotator-webview/@types/bun/bun-types": ["bun-types@1.4.2", "", { "dependencies": { "@types/node": "*" } }, "sha512-bxV1FgK7yBIzjRe5zBozIM4Bem11ZJcCXSrjWRG3YWLt8yFDePu4cLjpebO8OvPeIE9trbyPF4fuj3Cia4Fj3w=="],
-
     "rimraf/glob/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
     "rimraf/glob/path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
diff --git a/packages/core/diagram-anchor.test.ts b/packages/core/diagram-anchor.test.ts
new file mode 100644
index 000000000..eaecf6417
--- /dev/null
+++ b/packages/core/diagram-anchor.test.ts
@@ -0,0 +1,178 @@
+/**
+ * The diagram anchor codec, pure half.
+ *
+ * What regresses if these fail:
+ * - the anchor a viewer writes is not what `parseDiagramAnchor` reads back,
+ *   so every diagram comment lists as unanchored on the next load;
+ * - a foreign, partial or unversioned value throws instead of degrading to
+ *   null (the standing rule: unanchored but listed) — the external-annotation
+ *   POST, the feedback archive and the export all run this parser on data
+ *   another writer produced;
+ * - `diagramSourceLine` points at the wrong line (`D` matching `DR`), so the
+ *   Source pane's gutter mark and an agent's grep land on the wrong text;
+ * - the export's location line loses the part id an agent greps the fence for.
+ */
+import { describe, expect, test } from 'bun:test';
+import {
+  buildDiagramAnchor,
+  buildDiagramAnchorValue,
+  diagramAnchorLocationLine,
+  diagramFirstSourceLine,
+  diagramSourceLine,
+  diagramTargetName,
+  diagramTargetText,
+  lineMentions,
+  parseDiagramAdditionalTargets,
+  parseDiagramAnchor,
+  sameTarget,
+  type DiagramTarget,
+} from './diagram-anchor';
+
+const node: DiagramTarget = { family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?' };
+const edge: DiagramTarget = { family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: 'Yes' };
+
+describe('the wire codec', () => {
+  test('the anchor value round-trips through JSON and the parser', () => {
+    const value = buildDiagramAnchorValue(node, [4, 4]);
+    expect(value).toEqual({ v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [4, 4] });
+    expect(parseDiagramAnchor(JSON.parse(JSON.stringify(value)))).toEqual(value);
+    const edgeValue = buildDiagramAnchorValue({ ...edge, label: '' }, null);
+    expect(edgeValue).toEqual({ v: 1, family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: '', sourceLine: null });
+    expect(parseDiagramAnchor(edgeValue)).toEqual(edgeValue);
+  });
+
+  test('the opaque-blob shape a host stores carries originalText, the anchor and the extra targets', () => {
+    const wire = buildDiagramAnchor(node, [2, 2], [edge]);
+    expect(wire).toEqual({
+      originalText: 'Approve?',
+      diagram: { v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [2, 2] },
+      diagramAdditionalTargets: [{ family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: 'Yes' }],
+    });
+    expect(buildDiagramAnchor({ ...edge, label: '' }, null, [])).toEqual({
+      originalText: 'D → M',
+      diagram: { v: 1, family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: '', sourceLine: null },
+    });
+  });
+
+  test('degrades a foreign, partial or unversioned value to null, never a throw', () => {
+    expect(parseDiagramAnchor(undefined)).toBeNull();
+    expect(parseDiagramAnchor('node D')).toBeNull();
+    expect(parseDiagramAnchor({ kind: 'node', id: 'D' })).toBeNull();
+    expect(parseDiagramAnchor({ v: 2, family: 'flowchart', kind: 'node', id: 'D' })).toBeNull();
+    expect(parseDiagramAnchor({ v: 1, family: 'flowchart', kind: 'edge', from: 'D' })).toBeNull();
+    expect(parseDiagramAnchor({ v: 1, family: 'plantuml', kind: 'node', id: 'D' })).toBeNull();
+    // A bad sourceLine drops to null; the target survives.
+    expect(parseDiagramAnchor({ v: 1, family: 'flowchart', kind: 'node', id: 'D', sourceLine: [0] })).toEqual({
+      v: 1,
+      family: 'flowchart',
+      kind: 'node',
+      id: 'D',
+      label: '',
+      sourceLine: null,
+    });
+  });
+
+  test('caps oversized strings and the additional targets, and drops junk entries', () => {
+    const long = 'x'.repeat(1000);
+    expect(parseDiagramAnchor({ v: 1, family: 'graphviz', kind: 'node', id: long, label: long })?.id).toHaveLength(400);
+    const many = Array.from({ length: 20 }, (_, i) => ({ family: 'flowchart', kind: 'node', id: `N${i}`, label: '' }));
+    expect(parseDiagramAdditionalTargets(many, 16)).toHaveLength(16);
+    expect(parseDiagramAdditionalTargets([null, 4, { kind: 'node' }, edge], 16)).toEqual([edge]);
+    expect(parseDiagramAdditionalTargets('nope', 16)).toEqual([]);
+  });
+
+  test('sameTarget compares the id, else both ends, never the family', () => {
+    expect(sameTarget(node, { ...node, family: 'class', label: 'other' })).toBe(true);
+    expect(sameTarget(edge, { ...edge, label: '' })).toBe(true);
+    expect(sameTarget(edge, { ...edge, to: 'R' })).toBe(false);
+    expect(sameTarget(node, edge)).toBe(false);
+  });
+
+  test('names parts for chips, the composer and the export', () => {
+    expect(diagramTargetText(node)).toBe('Approve?');
+    expect(diagramTargetText({ ...edge, label: '' })).toBe('D → M');
+    expect(diagramTargetName(node)).toBe('node D');
+    expect(diagramTargetName(edge)).toBe('edge D → M');
+    expect(diagramTargetName({ family: 'state', kind: 'edge', id: 'edge3', label: '' })).toBe('edge edge3');
+    // The export line names the label, the id in parentheses, and the line.
+    expect(diagramAnchorLocationLine(buildDiagramAnchorValue(node, [4, 4]))).toBe('Diagram node Approve? (D), line 4');
+    expect(diagramAnchorLocationLine(buildDiagramAnchorValue(edge, [5, 6]))).toBe('Diagram edge Yes (D → M), lines 5–6');
+    expect(diagramAnchorLocationLine(buildDiagramAnchorValue({ ...edge, label: '' }, null))).toBe('Diagram edge D → M');
+    expect(diagramAnchorLocationLine(buildDiagramAnchorValue({ family: 'graphviz', kind: 'node', id: 'Ship', label: 'Ship' }, [3, 3]))).toBe(
+      'Diagram node Ship, line 3',
+    );
+  });
+});
+
+describe('diagramSourceLine', () => {
+  const source = [
+    'flowchart LR',
+    '  U([Reviewer]) --> D{Approve?}',
+    '  D -->|Yes| M[(Merge)]',
+    '  D -->|No| R[Revise]',
+    '  subgraph Later["Later"]',
+    '    R --> DR[Re-review]',
+    '  end',
+  ].join('\n');
+
+  test('finds the first line that names a node, both ends of an edge, or a subgraph', () => {
+    expect(diagramSourceLine(source, { family: 'flowchart', kind: 'node', id: 'D', label: '' })).toEqual([2, 2]);
+    expect(diagramSourceLine(source, { family: 'flowchart', kind: 'node', id: 'R', label: '' })).toEqual([4, 4]);
+    expect(diagramSourceLine(source, { family: 'flowchart', kind: 'edge', from: 'D', to: 'R', label: '' })).toEqual([4, 4]);
+    expect(diagramSourceLine(source, { family: 'flowchart', kind: 'cluster', id: 'Later', label: '' })).toEqual([5, 5]);
+  });
+
+  test('matches whole tokens only (D is not DR) and answers null for a part not in the text', () => {
+    expect(diagramSourceLine(source, { family: 'flowchart', kind: 'node', id: 'DR', label: '' })).toEqual([6, 6]);
+    expect(diagramSourceLine(source, { family: 'flowchart', kind: 'node', id: 'Z', label: '' })).toBeNull();
+    expect(diagramSourceLine(source, { family: 'state', kind: 'edge', id: 'edge2', label: '' })).toBeNull();
+    // Plain string scanning: an id with a regex metacharacter is a token,
+    // not a pattern.
+    expect(lineMentions('  A.b(1) --> C', 'A.b(1)')).toBe(true);
+    expect(lineMentions('  Ab1 --> C', 'A.b(1)')).toBe(false);
+  });
+});
+
+describe('the sequence family and the whole-diagram kind (additive within v: 1)', () => {
+  const source = [
+    'sequenceDiagram',
+    '  participant H as Hook',
+    '  participant S as Server',
+    '  H->>S: plan (stdin JSON)',
+    '  Note over S: stops on decision',
+    '  alt approved',
+    '    S-->>H: allow',
+    '  else denied',
+    '    S--xH: deny',
+    '  end',
+    '',
+  ].join('\n');
+
+  test('sequence ordinals map to the n-th statement of their kind; an actor to the first line that names it', () => {
+    // What regresses: the pane's gutter mark and an agent's grep land on the
+    // wrong message because `msg-2` was looked up as a token, not an ordinal.
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'edge', id: 'msg-1', label: '' })).toEqual([4, 4]);
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'edge', id: 'msg-2', label: '' })).toEqual([7, 7]);
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'edge', id: 'msg-3', label: '' })).toEqual([9, 9]);
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'edge', id: 'msg-4', label: '' })).toBeNull();
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'node', id: 'note-1', label: '' })).toEqual([5, 5]);
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'cluster', id: 'frame-1', label: '' })).toEqual([6, 6]);
+    expect(diagramSourceLine(source, { family: 'sequence', kind: 'node', id: 'S', label: 'Server' })).toEqual([3, 3]);
+  });
+
+  test('a whole-diagram anchor has no id, spans the source, and round-trips', () => {
+    // What regresses: a click that resolves no part does nothing, or the
+    // parser refuses the id-less anchor and the comment lists as unanchored.
+    const whole: DiagramTarget = { family: 'sequence', kind: 'diagram', label: diagramFirstSourceLine(source) };
+    expect(whole.label).toBe('sequenceDiagram');
+    expect(diagramSourceLine(source, whole)).toEqual([1, 10]);
+    const value = buildDiagramAnchorValue(whole, [12, 21]);
+    expect(parseDiagramAnchor(JSON.parse(JSON.stringify(value)))).toEqual(value);
+    expect(diagramAnchorLocationLine(value)).toBe('Diagram (sequence), lines 12–21');
+    expect(diagramTargetName(whole)).toBe('whole diagram');
+    expect(sameTarget(whole, { family: 'other', kind: 'diagram', label: 'pie' })).toBe(true);
+    expect(sameTarget(whole, node)).toBe(false);
+    // A part still needs its id: only the whole-diagram kind may omit it.
+    expect(parseDiagramAnchor({ v: 1, family: 'sequence', kind: 'node', label: 'x' })).toBeNull();
+  });
+});
diff --git a/packages/core/diagram-anchor.ts b/packages/core/diagram-anchor.ts
new file mode 100644
index 000000000..8d7d671ec
--- /dev/null
+++ b/packages/core/diagram-anchor.ts
@@ -0,0 +1,372 @@
+/**
+ * Diagram anchors: the pure, browser-safe half of the diagram comment codec
+ * (the DOM half — the finders that walk a rendered svg — lives in
+ * `@plannotator/ui/utils/diagram-anchor` and `diagram-anchor-graphviz`).
+ *
+ * A comment on a rendered diagram part is stored as ONE additive field on
+ * the annotation, `diagramAnchor`:
+ *
+ *   { v: 1, family: "flowchart", kind: "node", id: "B",
+ *     label: "Validate order", sourceLine: [4, 4] }
+ *
+ * The anchor is the diagram's own id for the part (edges: `from` and `to`
+ * where the family writes both into the element id, `id` alone where it
+ * only numbers them), never the rendered element id whole (`flowchart-B-3`:
+ * the trailing counter moves when nodes are added) and never geometry (ELK
+ * and dagre place the same node at different coordinates). Restore order,
+ * run by the ui finders: (1) the element whose id names the part, (2) a
+ * node whose label text equals the stored label, (3) the source line as a
+ * gutter mark in the Source pane, (4) none: unanchored but listed.
+ *
+ * `sourceLine` is 1-based and names DOCUMENT lines (a fence's lines are
+ * offset by the fence's position in the markdown), so an agent's grep and
+ * the pane's gutter mark land on real text.
+ *
+ * Same contract as `html-anchor.ts`: the types here are what
+ * `@plannotator/ui/types`'s `Annotation.diagramAnchor` carries, and
+ * `parseDiagramAnchor` is the one fail-closed validator every ingest
+ * (external-annotation POST, the feedback archive, the ui codec) runs.
+ */
+
+export type DiagramFamily =
+  | 'flowchart'
+  | 'state'
+  | 'class'
+  | 'er'
+  | 'requirement'
+  // A sequence diagram. Mermaid gives its parts classes, not ids, so the
+  // ids are ours: an actor is its `name`, a message is `msg-<n>`, a note
+  // `note-<n>`, a loop/alt/opt frame `frame-<n>`, each by document order.
+  | 'sequence'
+  | 'other'
+  // A Graphviz graph: the id is the DOT node name.
+  | 'graphviz';
+
+/** `diagram` is the WHOLE diagram: no id, the label is the diagram's first
+ * source line and `sourceLine` is the fence's full range. It is what a click
+ * that resolves no part anchors to, so a click never does nothing (gitGraph,
+ * pie, anything a family does not address). Additive within `v: 1`. */
+export type DiagramTargetKind = 'node' | 'edge' | 'cluster' | 'diagram';
+
+/** One addressable part of a rendered diagram. `id` names a node, cluster,
+ * class, entity or state; edges carry `from` and `to` where the family
+ * writes them into the element id (flowchart, class, er, graphviz) and `id`
+ * alone where it only numbers them (state `edge{n}`, requirement `{a}-{b}`). */
+export interface DiagramTarget {
+  readonly family: DiagramFamily;
+  readonly kind: DiagramTargetKind;
+  readonly id?: string;
+  readonly from?: string;
+  readonly to?: string;
+  /** The part's text at write time: the node label, or the edge label. */
+  readonly label: string;
+}
+
+export interface DiagramAnchor extends DiagramTarget {
+  readonly v: 1;
+  /** 1-based lines in the document that holds the source, or null when
+   * the writer could not locate the part in the text. */
+  readonly sourceLine: readonly [number, number] | null;
+}
+
+/** The diagram kinds the renderer slot knows. */
+export type DiagramKind = 'mermaid' | 'graphviz';
+
+const FAMILIES: ReadonlySet<string> = new Set<DiagramFamily>([
+  'flowchart',
+  'state',
+  'class',
+  'er',
+  'requirement',
+  'sequence',
+  'other',
+  'graphviz',
+]);
+const KINDS: ReadonlySet<string> = new Set<DiagramTargetKind>(['node', 'edge', 'cluster', 'diagram']);
+
+/** Longest id, from, to or label the parser keeps; a rendered svg never
+ * produces more, and the anchor is persisted (drafts, the archive). */
+export const MAX_DIAGRAM_ANCHOR_STRING_LENGTH = 400;
+
+/** The wire keys a host that stores anchors as an opaque JSON blob uses
+ * (Workspaces' `anchor_json`); Plannotator carries the anchor on the
+ * annotation itself under `diagramAnchor`. */
+export const DIAGRAM_ANCHOR_KEY = 'diagram';
+export const DIAGRAM_ADDITIONAL_TARGETS_KEY = 'diagramAdditionalTargets';
+
+/** Two targets name the same part: same kind and the same id, or the same
+ * from and to. The family is not compared: a foreign family with the same
+ * id grammar would match by construction, and the render decides. */
+export function sameTarget(a: DiagramTarget, b: DiagramTarget): boolean {
+  if (a.kind !== b.kind) return false;
+  if (a.kind === 'diagram') return true;
+  if (a.id !== undefined || b.id !== undefined) return a.id === b.id;
+  return a.from === b.from && a.to === b.to;
+}
+
+/** The comment's context line: the node label, else the edge's ends. */
+export function diagramTargetText(target: DiagramTarget): string {
+  if (target.label !== '') return target.label;
+  if (target.from !== undefined && target.to !== undefined) return `${target.from} → ${target.to}`;
+  return target.id ?? '';
+}
+
+/** The short part name for chips and the composer ("node C", "edge B → C"). */
+export function diagramTargetName(target: DiagramTarget): string {
+  if (target.kind === 'diagram') return 'whole diagram';
+  if (target.kind === 'edge') {
+    return target.from !== undefined && target.to !== undefined
+      ? `edge ${target.from} → ${target.to}`
+      : `edge ${target.id ?? ''}`;
+  }
+  return `${target.kind} ${target.id ?? ''}`;
+}
+
+/**
+ * The one-line location an export prints under a diagram comment:
+ * `Diagram node Approve? (D), line 4`. Edges name both ends, a part with no
+ * label falls back to its id, and a null `sourceLine` prints no line.
+ */
+export function diagramAnchorLocationLine(anchor: DiagramAnchor): string {
+  if (anchor.kind === 'diagram') {
+    // The whole diagram: `Diagram (flowchart), lines 7–12`.
+    let whole = `Diagram (${anchor.family})`;
+    if (anchor.sourceLine !== null) {
+      const [first, last] = anchor.sourceLine;
+      whole += last > first ? `, lines ${first}–${last}` : `, line ${first}`;
+    }
+    return whole;
+  }
+  const ref =
+    anchor.id !== undefined
+      ? anchor.id
+      : anchor.from !== undefined && anchor.to !== undefined
+        ? `${anchor.from} → ${anchor.to}`
+        : '';
+  const label = anchor.label !== '' ? anchor.label : ref;
+  let line = `Diagram ${anchor.kind} ${label}`;
+  if (ref !== '' && ref !== label) line += ` (${ref})`;
+  if (anchor.sourceLine !== null) {
+    const [first, last] = anchor.sourceLine;
+    line += last > first ? `, lines ${first}–${last}` : `, line ${first}`;
+  }
+  return line;
+}
+
+/** A word character for token matching: the `\w` class, spelled out so the
+ * match below stays plain string work. A node id built from any other
+ * character (a dot, a dash) ends the token, which is what the source text
+ * does too. */
+function isWordChar(ch: string | undefined): boolean {
+  if (ch === undefined) return false;
+  return (
+    (ch >= 'a' && ch <= 'z') ||
+    (ch >= 'A' && ch <= 'Z') ||
+    (ch >= '0' && ch <= '9') ||
+    ch === '_'
+  );
+}
+
+/**
+ * `line` names `token` as a WHOLE token (D does not match DR). Plain string
+ * scanning, never a RegExp built from the token: the id comes from a
+ * rendered svg and a `.` or `(` in it would otherwise compile into the
+ * pattern.
+ */
+export function lineMentions(line: string, token: string): boolean {
+  if (token === '') return false;
+  for (let at = line.indexOf(token); at !== -1; at = line.indexOf(token, at + 1)) {
+    const before = at === 0 ? undefined : line[at - 1];
+    const after = line[at + token.length];
+    if (!isWordChar(before) && !isWordChar(after)) return true;
+  }
+  return false;
+}
+
+/**
+ * The 1-based line range that declares the part in the source text: the
+ * first line that names the node id (a cluster: its `subgraph` line), or
+ * the first line that names both ends of an edge. Null when the part is
+ * not found as a token, which is what a node that exists only in an unsaved
+ * draft reads as until it is saved. Mermaid grammar; the Graphviz finder
+ * has its own (`subgraph` may sit mid-line there).
+ */
+/** A sequence message statement: `A->>B: text`, every arrow Mermaid has
+ * (`->`, `-->`, `->>`, `-->>`, `-x`, `--x`, `-)`, `--)`, `<<->>`, `<<-->>`),
+ * with the optional activation `+` / `-` on the receiver. */
+const SEQUENCE_MESSAGE = /^\s*[^\s:][^:]*?\s*(?:<<)?--?(?:>>|>|x|\))\s*[+-]?\s*[^:]+:/u;
+const SEQUENCE_NOTE = /^\s*note\s+(?:left\s+of|right\s+of|over)\b/iu;
+const SEQUENCE_FRAME = /^\s*(?:loop|alt|opt|par|critical|break|rect)\b/iu;
+
+/** The n-th (1-based) line that matches, as a line range. */
+function nthMatchingLine(lines: readonly string[], pattern: RegExp, n: number): readonly [number, number] | null {
+  let seen = 0;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (!pattern.test(lines[i] ?? '')) continue;
+    seen += 1;
+    if (seen === n) return [i + 1, i + 1];
+  }
+  return null;
+}
+
+/** The whole source as a line range (leading and trailing blank lines
+ * excluded); null for an empty source. */
+export function diagramWholeSourceLines(source: string): readonly [number, number] | null {
+  const lines = source.split('\n');
+  let last = lines.length;
+  while (last > 0 && (lines[last - 1] ?? '').trim() === '') last -= 1;
+  let first = 1;
+  while (first <= last && (lines[first - 1] ?? '').trim() === '') first += 1;
+  return last === 0 || first > last ? null : [first, last];
+}
+
+/** The diagram's first non-blank source line: the whole-diagram label. */
+export function diagramFirstSourceLine(source: string): string {
+  for (const line of source.split('\n')) {
+    const trimmed = line.trim();
+    if (trimmed !== '') return trimmed.length > 120 ? `${trimmed.slice(0, 120)}…` : trimmed;
+  }
+  return '';
+}
+
+export function diagramSourceLine(
+  source: string,
+  target: DiagramTarget,
+): readonly [number, number] | null {
+  if (target.kind === 'diagram') return diagramWholeSourceLines(source);
+  const lines = source.split('\n');
+  if (target.family === 'sequence' && target.id !== undefined) {
+    // Sequence ids are ordinals by document order, and the statements of a
+    // sequence diagram sit in that same order in the text.
+    const ordinal = /^(msg|note|frame)-(\d+)$/u.exec(target.id);
+    if (ordinal !== null) {
+      const pattern = ordinal[1] === 'msg' ? SEQUENCE_MESSAGE : ordinal[1] === 'note' ? SEQUENCE_NOTE : SEQUENCE_FRAME;
+      return nthMatchingLine(lines, pattern, Number(ordinal[2]));
+    }
+  }
+  const matches = (line: string): boolean => {
+    if (target.kind === 'edge') {
+      if (target.from !== undefined && target.to !== undefined) {
+        return lineMentions(line, target.from) && lineMentions(line, target.to);
+      }
+      return false;
+    }
+    if (target.id === undefined) return false;
+    if (target.kind === 'cluster') {
+      return /^\s*subgraph\b/u.test(line) && lineMentions(line, target.id);
+    }
+    return lineMentions(line, target.id);
+  };
+  const index = lines.findIndex(matches);
+  return index === -1 ? null : [index + 1, index + 1];
+}
+
+/** The wire shape of one target (no `sourceLine`, no version). */
+function targetWire(target: DiagramTarget): Record<string, unknown> {
+  return {
+    family: target.family,
+    kind: target.kind,
+    ...(target.id !== undefined ? { id: target.id } : {}),
+    ...(target.from !== undefined ? { from: target.from } : {}),
+    ...(target.to !== undefined ? { to: target.to } : {}),
+    label: target.label,
+  };
+}
+
+/** The anchor value itself, as `Annotation.diagramAnchor` carries it. */
+export function buildDiagramAnchorValue(
+  primary: DiagramTarget,
+  sourceLine: readonly [number, number] | null,
+): DiagramAnchor {
+  return {
+    v: 1,
+    family: primary.family,
+    kind: primary.kind,
+    ...(primary.id !== undefined ? { id: primary.id } : {}),
+    ...(primary.from !== undefined ? { from: primary.from } : {}),
+    ...(primary.to !== undefined ? { to: primary.to } : {}),
+    label: primary.label,
+    sourceLine: sourceLine === null ? null : [sourceLine[0], sourceLine[1]],
+  };
+}
+
+/**
+ * The opaque-blob wire shape a host that stores every anchor kind in one
+ * JSON column writes (`originalText` is the primary target's label so a
+ * comments panel's context line reads the same as a markdown or html
+ * comment). Plannotator does not use this shape itself.
+ */
+export function buildDiagramAnchor(
+  primary: DiagramTarget,
+  sourceLine: readonly [number, number] | null,
+  additional: readonly DiagramTarget[],
+): Record<string, unknown> {
+  return {
+    originalText: diagramTargetText(primary),
+    [DIAGRAM_ANCHOR_KEY]: buildDiagramAnchorValue(primary, sourceLine),
+    ...(additional.length > 0
+      ? { [DIAGRAM_ADDITIONAL_TARGETS_KEY]: additional.map(targetWire) }
+      : {}),
+  };
+}
+
+function boundedString(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  return value.length > MAX_DIAGRAM_ANCHOR_STRING_LENGTH
+    ? value.slice(0, MAX_DIAGRAM_ANCHOR_STRING_LENGTH)
+    : value;
+}
+
+/** Read one target tolerantly: a foreign or partial value is null. */
+export function parseDiagramTarget(value: unknown): DiagramTarget | null {
+  if (typeof value !== 'object' || value === null) return null;
+  const raw = value as Record<string, unknown>;
+  const family = raw['family'];
+  const kind = raw['kind'];
+  if (typeof family !== 'string' || !FAMILIES.has(family)) return null;
+  if (typeof kind !== 'string' || !KINDS.has(kind)) return null;
+  const id = boundedString(raw['id']);
+  const from = boundedString(raw['from']);
+  const to = boundedString(raw['to']);
+  if (kind !== 'diagram' && id === undefined && (from === undefined || to === undefined)) return null;
+  const label = boundedString(raw['label']) ?? '';
+  return {
+    family: family as DiagramFamily,
+    kind: kind as DiagramTargetKind,
+    ...(id !== undefined ? { id } : {}),
+    ...(from !== undefined ? { from } : {}),
+    ...(to !== undefined ? { to } : {}),
+    label,
+  };
+}
+
+/** Read an anchor tolerantly: a foreign, partial or unversioned value is
+ * null, never a throw (the comment then lists as unanchored, the standing
+ * rule). A malformed `sourceLine` drops to null while the target survives. */
+export function parseDiagramAnchor(value: unknown): DiagramAnchor | null {
+  const target = parseDiagramTarget(value);
+  if (target === null) return null;
+  const raw = value as Record<string, unknown>;
+  if (raw['v'] !== 1) return null;
+  const line = raw['sourceLine'];
+  const sourceLine =
+    Array.isArray(line) &&
+    line.length === 2 &&
+    line.every((n) => typeof n === 'number' && Number.isInteger(n) && n > 0)
+      ? ([line[0] as number, line[1] as number] as const)
+      : null;
+  return { ...target, v: 1, sourceLine };
+}
+
+/** Read additional targets, capped at `max` entries; junk entries are
+ * dropped, never thrown. */
+export function parseDiagramAdditionalTargets(value: unknown, max: number): DiagramTarget[] {
+  if (!Array.isArray(value)) return [];
+  const targets: DiagramTarget[] = [];
+  for (const entry of value) {
+    if (targets.length >= max) break;
+    const target = parseDiagramTarget(entry);
+    if (target !== null) targets.push(target);
+  }
+  return targets;
+}
diff --git a/packages/core/external-annotation.ts b/packages/core/external-annotation.ts
index da2e8c568..5804bfe08 100644
--- a/packages/core/external-annotation.ts
+++ b/packages/core/external-annotation.ts
@@ -14,6 +14,8 @@
 // adapters import it from the module they already use.
 export { validateReplyTarget } from "./annotation-threads";
 
+import { parseDiagramAnchor, type DiagramAnchor } from "./diagram-anchor";
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -113,6 +115,10 @@ interface PlanAnnotation {
   createdA: number;
   author?: string;
   source?: string;
+  /** A comment on a rendered diagram part (see `diagram-anchor.ts`). The
+   *  diagram blocks resolve it against their render; a row that resolves in
+   *  no diagram lists as unanchored. */
+  diagramAnchor?: DiagramAnchor;
 }
 
 const VALID_PLAN_TYPES = ["DELETION", "COMMENT", "GLOBAL_COMMENT"];
@@ -158,6 +164,18 @@ export function transformPlanInput(
       };
     }
 
+    // A diagram anchor is validated by the same fail-closed parser the ui
+    // codec and the feedback archive run; a malformed one is refused rather
+    // than stored as an anchor nothing can restore.
+    let diagramAnchor: DiagramAnchor | undefined;
+    if (obj.diagramAnchor !== undefined) {
+      const parsed = parseDiagramAnchor(obj.diagramAnchor);
+      if (parsed === null) {
+        return { error: `annotations[${i}] invalid "diagramAnchor" (expected { v: 1, family, kind, id | from + to, label, sourceLine })` };
+      }
+      diagramAnchor = parsed;
+    }
+
     annotations.push({
       id: crypto.randomUUID(),
       blockId: "external",
@@ -169,6 +187,7 @@ export function transformPlanInput(
       createdA: Date.now(),
       author: typeof obj.author === "string" ? obj.author : undefined,
       source,
+      ...(diagramAnchor !== undefined && { diagramAnchor }),
     });
   }
 
diff --git a/packages/core/guide-viewer-manifest.ts b/packages/core/guide-viewer-manifest.ts
index 4445ebc92..7964c74eb 100644
--- a/packages/core/guide-viewer-manifest.ts
+++ b/packages/core/guide-viewer-manifest.ts
@@ -6,9 +6,9 @@ import type { GuideViewerAssets } from "./guide-format";
 
 export const GUIDE_VIEWER_MANIFEST: Omit<GuideViewerAssets, "baseUrl"> = {
   js: "viewer.KTNT-M2b.js",
-  css: "viewer.NkTIi4sR.css",
+  css: "viewer.rBaHmEce.css",
   jsIntegrity: "sha384-UGxkmDjeL0LMAKSAnleY0ewq4d4vtotFlHvHYWaK6UGIWmV30DyT5wSKQEz2NHdV",
-  cssIntegrity: "sha384-2tINtoWgdpcbwUZudhmxJiiW7Tu+29vXj6P12fLLkRtc2sWERGoHl71K35L+UR9f",
+  cssIntegrity: "sha384-MUYjuzvWVsshgfdFVhu23g5bvStgBgVsvEoCbBy/E/4r92db454BsDQQjs4fcu+F",
   langs: {
     "astro": "chunks/astro.Ts5EKq2l.js",
     "c": "chunks/c.BIGW1oBm.js",
diff --git a/packages/core/package.json b/packages/core/package.json
index 567520422..34188942d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/core",
-  "version": "0.25.3",
+  "version": "0.25.4",
   "type": "module",
   "exports": {
     "./agents": "./agents.ts",
@@ -23,6 +23,7 @@
     "./feedback-templates": "./feedback-templates.ts",
     "./goal-setup": "./goal-setup.ts",
     "./html-anchor": "./html-anchor.ts",
+    "./diagram-anchor": "./diagram-anchor.ts",
     "./open-in-apps": "./open-in-apps.ts",
     "./project": "./project.ts",
     "./source-save": "./source-save.ts",
diff --git a/packages/editor/webmcp/documentTools.test.ts b/packages/editor/webmcp/documentTools.test.ts
index 6e40622c5..00329e02a 100644
--- a/packages/editor/webmcp/documentTools.test.ts
+++ b/packages/editor/webmcp/documentTools.test.ts
@@ -319,6 +319,18 @@ describe('add_comments anchoring cascade', () => {
     expect(fx.annotations[1]!.type).toBe(AnnotationType.GLOBAL_COMMENT);
   });
 
+  test('a reply to a diagram comment inherits the diagram anchor', async () => {
+    // What regresses: the reply has no anchor, falls to text search on the
+    // node's label, and the highlighter wraps a <mark> wherever the prose
+    // (or the svg) repeats it.
+    const fx = fake();
+    const diagramAnchor = { v: 1 as const, family: 'flowchart' as const, kind: 'node' as const, id: 'D', label: 'Approve?', sourceLine: [7, 7] as const };
+    const parent = humanComment(fx, 'Ship behind a flag', 'Rename this step', { diagramAnchor });
+    dataOf(await fx.call('add_comments', { comments: [{ inReplyTo: parent.id, text: 'Agreed.' }] }));
+    expect(fx.annotations[1]!.diagramAnchor).toEqual(diagramAnchor);
+    expect(fx.annotations[1]!.blockId).toBe(parent.blockId);
+  });
+
   test('inReplyTo inherits the parent anchor and threads under it', async () => {
     const fx = fake();
     const parent = humanComment(fx, 'Ship behind a flag', 'Which flag?', { startMeta: { parentTagName: 'P', parentIndex: 3, textOffset: 0 } });
diff --git a/packages/editor/webmcp/documentTools.ts b/packages/editor/webmcp/documentTools.ts
index ff8d88779..d00cbad0c 100644
--- a/packages/editor/webmcp/documentTools.ts
+++ b/packages/editor/webmcp/documentTools.ts
@@ -592,6 +592,10 @@ export function buildDocumentTools(adapter: DocumentToolAdapter, state: Document
             ...(parent.startMeta ? { startMeta: parent.startMeta } : {}),
             ...(parent.endMeta ? { endMeta: parent.endMeta } : {}),
             ...(parent.htmlAnchor ? { htmlAnchor: parent.htmlAnchor } : {}),
+            // A reply to a diagram comment is a diagram comment: without the
+            // anchor it would fall to text search and paint the node's label
+            // wherever the prose repeats it.
+            ...(parent.diagramAnchor ? { diagramAnchor: parent.diagramAnchor } : {}),
             ...(parent.pageUrl ? { pageUrl: parent.pageUrl } : {}),
             ...(parent.diffContext ? { diffContext: parent.diffContext } : {}),
           };
diff --git a/packages/server/external-annotations.test.ts b/packages/server/external-annotations.test.ts
index 61a055705..c26fcd86f 100644
--- a/packages/server/external-annotations.test.ts
+++ b/packages/server/external-annotations.test.ts
@@ -17,6 +17,32 @@ describe("external annotations SSE", () => {
   });
 });
 
+describe("POST /api/external-annotations: diagram anchors", () => {
+  test("accepts a valid diagramAnchor on a plan comment and refuses a malformed one", async () => {
+    const handler = createExternalAnnotationHandler("plan");
+    const post = async (body: unknown) => {
+      const url = "http://localhost/api/external-annotations";
+      const res = await handler.handle(
+        new Request(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }),
+        new URL(url),
+      );
+      return { status: res?.status, body: (await res!.json()) as { ids?: string[]; error?: string } };
+    };
+    const anchor = { v: 1, family: "flowchart", kind: "node", id: "D", label: "Approve?", sourceLine: [7, 7] };
+    const ok = await post({ source: "review-bot", type: "COMMENT", text: "rename", originalText: "Approve?", diagramAnchor: anchor });
+    expect(ok.status).toBe(201);
+    const snapshotUrl = "http://localhost/api/external-annotations";
+    const snapshot = (await (await handler.handle(new Request(snapshotUrl), new URL(snapshotUrl)))!.json()) as {
+      annotations: Array<{ id: string; diagramAnchor?: unknown }>;
+    };
+    expect(snapshot.annotations.find((a) => a.id === ok.body.ids?.[0])?.diagramAnchor).toEqual(anchor);
+
+    const bad = await post({ source: "review-bot", type: "COMMENT", text: "rename", originalText: "Approve?", diagramAnchor: { kind: "node", id: "D" } });
+    expect(bad.status).toBe(400);
+    expect(bad.body.error).toContain("diagramAnchor");
+  });
+});
+
 describe("PATCH /api/external-annotations", () => {
   test("cannot clear or change the source marker (skill-injection guard, reproduced end-to-end)", async () => {
     const handler = createExternalAnnotationHandler("review");
diff --git a/packages/shared/feedback-archive.test.ts b/packages/shared/feedback-archive.test.ts
index fe9519442..0333ba784 100644
--- a/packages/shared/feedback-archive.test.ts
+++ b/packages/shared/feedback-archive.test.ts
@@ -313,6 +313,33 @@ describe("feedback archive: project bucketing", () => {
   });
 });
 
+describe("feedback archive: diagram anchors", () => {
+  test("a diagram comment records its validated anchor; a malformed one and a text comment stay anchor-free", () => {
+    // Regression: without the field a comment on a flowchart node archives
+    // as the quote "Approve?" and the index cannot say WHICH node, in WHICH
+    // fence line, the comment was about.
+    const dataDir = useTempDataDir();
+    const anchor = { v: 1, family: "flowchart", kind: "node", id: "D", label: "Approve?", sourceLine: [7, 7] };
+    appendFeedbackRecord({
+      project: PROJECT,
+      origin: "claude-code",
+      surface: "plan",
+      decision: "deny",
+      target: { slug: "plan-2026-09-17" },
+      feedback: "rename",
+      annotations: [
+        { id: "d1", type: "COMMENT", text: "rename", originalText: "Approve?", blockId: "block-4", diagramAnchor: anchor },
+        { id: "d2", type: "COMMENT", text: "junk", originalText: "x", diagramAnchor: { kind: "node" } },
+        { id: "t1", type: "COMMENT", text: "plain", originalText: "some words" },
+      ],
+    });
+    const record = readIndex(dataDir)[0]!;
+    expect(record.annotations?.[0]?.diagramAnchor).toEqual(anchor);
+    expect(record.annotations?.[1]).not.toHaveProperty("diagramAnchor");
+    expect(record.annotations?.[2]).not.toHaveProperty("diagramAnchor");
+  });
+});
+
 describe("feedback archive: element identity", () => {
   test("a raw-HTML pinpoint records its element identity and route; other annotations stay identity-free", () => {
     // Regression: without these fields a pinpoint archives as the bridge's
diff --git a/packages/shared/feedback-archive.ts b/packages/shared/feedback-archive.ts
index f0616a1a9..cce55165d 100644
--- a/packages/shared/feedback-archive.ts
+++ b/packages/shared/feedback-archive.ts
@@ -47,6 +47,7 @@
 
 import { appendFileSync, mkdirSync, writeFileSync } from "fs";
 import { join } from "path";
+import { parseDiagramAnchor, type DiagramAnchor } from "@plannotator/core/diagram-anchor";
 import { getPlannotatorDataDir } from "./data-dir";
 import { extractDirName, extractRepoName, sanitizeTag } from "./project";
 
@@ -181,6 +182,11 @@ export interface FeedbackAnnotationRecord {
   elementName?: string;
   /** Live-app sessions: the route the annotation was made on. */
   pageUrl?: string;
+  /** A comment on a rendered diagram part (a Mermaid or Graphviz fence):
+   *  the part's own id, label and document source line, validated by the
+   *  same parser the ui codec runs. Additive per the field contract above;
+   *  absent for every other annotation kind. */
+  diagramAnchor?: DiagramAnchor;
   images?: number;
 }
 
@@ -326,6 +332,8 @@ function normalizeAnnotation(raw: unknown): FeedbackAnnotationRecord {
   if (elementName) record.elementName = elementName;
   const pageUrl = asString(a.pageUrl);
   if (pageUrl) record.pageUrl = pageUrl;
+  const diagramAnchor = a.diagramAnchor === undefined ? null : parseDiagramAnchor(a.diagramAnchor);
+  if (diagramAnchor !== null) record.diagramAnchor = diagramAnchor;
   return record;
 }
 
diff --git a/packages/ui/HANDOFF.md b/packages/ui/HANDOFF.md
index fc1e54b9d..32be0e915 100644
--- a/packages/ui/HANDOFF.md
+++ b/packages/ui/HANDOFF.md
@@ -717,14 +717,15 @@ Behavior is pinned by `../core/html-anchor.test.ts` (the wire fingerprint of a c
 
 ## Mermaid 12 (0.40.0)
 
-`@plannotator/ui` 0.40.0 moves the diagram runtime from `mermaid` `^11.17.2` to an exact `mermaid` `12.0.0` and, in the same release, stops registering it eagerly in Plannotator's own plan editor. The theme mapping from 0.39.x (see "Theme-aware Mermaid diagrams") is unchanged and was re-swept on 12: all 52 palettes in `packages/ui/themes` in both modes (104 combinations, 15 diagrams each), 17,160 text-on-fill pairs and 9,880 line-on-canvas pairs measured from the rendered SVG in Chromium, **0 failures** against the 4.5:1 / 3:1 rule and 0 render errors. This section is the contract a host needs to adopt 0.40.0; the publish order is at the end.
+`@plannotator/ui` 0.40.0 moves the diagram runtime from `mermaid` `^11.17.2` to an exact `mermaid` `12.0.0` and, in the same release, stops registering it eagerly in Plannotator's own plan editor. The theme mapping from 0.39.x (see "Theme-aware Mermaid diagrams") is unchanged and was re-swept on 12: all 52 palettes in `packages/ui/themes` in every mode they define (78 combinations — 26 palette halves do not exist, 22 palettes being dark-only and 4 light-only — 15 diagrams each), 12,870 text-on-fill pairs and 7,410 line-on-canvas pairs measured from the rendered SVG in Chromium, **0 failures** against the 4.5:1 / 3:1 rule and 0 render errors. This section is the contract a host needs to adopt 0.40.0; the publish order is at the end.
 
 **What Mermaid 12 changes, and what we took.** We take 12's defaults rather than pinning the 11 ones (owner ruling). Concretely:
 
-- **ELK is the default layout** for flowchart (`graph`, `flowchart`), state, class, ER and requirement diagrams: orthogonal right-angle edge routing, tighter node boxes with more label wrapping, different subgraph packing, and a different rendered `viewBox` for the same source. ELK is now part of `mermaid` itself (`elkjs` is a dependency; the separate `@mermaid-js/layout-elk` package is gone) and is loaded by Mermaid's own internal `import()` on the first ELK layout, so in a chunked host build it is a separate `elk-*.js` chunk (1,435 KB, 438 KB gzip) whether or not you import `mermaid-eager`. `flowchart-elk` as a diagram id still parses and renders (`aria-roledescription="flowchart-elk"`). The `defaultRenderer` option under `flowchart` / `class` / `state` config is removed upstream; use the top-level `layout` option if you need dagre back (`mermaid.initialize({ ..., layout: 'dagre' })` on the runtime after ours; `MERMAID_CONFIG` does not set `layout`).
+- **ELK is the effective default layout** for flowchart (`graph`, `flowchart`), state, class, ER and requirement diagrams — through Mermaid 12's per-diagram defaults, while the top-level `config.layout` still reads `dagre` (so do not infer the renderer from that key): orthogonal right-angle edge routing, tighter node boxes with more label wrapping, different subgraph packing, and a different rendered `viewBox` for the same source. ELK is now part of `mermaid` itself (`elkjs` is a dependency; the separate `@mermaid-js/layout-elk` package is gone) and is loaded by Mermaid's own internal `import()` on the first ELK layout, so in a chunked host build it is a separate `elk-*.js` chunk (1,435 KB, 438 KB gzip) whether or not you import `mermaid-eager`. `flowchart-elk` as a diagram id still parses and renders (`aria-roledescription="flowchart-elk"`). The `defaultRenderer` option under `flowchart` / `class` / `state` config is removed upstream; use the top-level `layout` option if you need dagre back (`mermaid.initialize({ ..., layout: 'dagre' })` on the runtime after ours; `MERMAID_CONFIG` does not set `layout`).
 - **Per-diagram default theme/look** (`redux-color` theme and the `neo` look for flowchart, class, state, ER, requirement, sequence, use case, swimlane, Venn and agentflow) does not reach a Plannotator-themed document: `applyMermaidTheme` passes an explicit base theme (`dark` / `default`) and a complete `themeVariables` set, and `MERMAID_CONFIG` passes `theme: 'dark'`, so the rendered look is the classic one in the 0.39 sweep and in the 0.40 sweep alike. A host that renders with no theme tokens keeps `MERMAID_CONFIG` (still `theme: 'dark'`, still `securityLevel: 'strict'`, pinned by `components/MermaidBlock.test.ts`).
 - **Legacy diagram ids** `flowchart`, `class`, `state` are gone from `detectType`; `flowchart-v2`, `classDiagram`, `stateDiagram` are what 11 already returned for the same sources, and every `aria-roledescription` in the sweep is identical 11 → 12.
 - **Removed public exports** (`clearLayoutRenderState`, `createCommonLayoutRenderer`, `defaultMeasureLayout`, `paintLayoutData`, the `CommonLayout*` types) are internal layout helpers that nothing in `@plannotator/ui` used or re-exported.
+- **`lodash-es` override does not travel.** This repo pins `lodash-es` to `4.18.1` through a root `overrides` entry (the Mermaid 12 dependency tree pulls an older range); npm does not apply a dependency's `overrides`, so a consumer adds its own root `"overrides": { "lodash-es": "4.18.1" }` (pnpm: `pnpm.overrides`) to get the same tree.
 - **Browser floor: Safari 17.4+ and ES2024.** Mermaid 12 is built to that target ("Mermaid is now built to target Safari 17.4+ and ES2024"; Node 22.12+ for anything that imports it server-side, e.g. a test harness). A host that must render diagrams on an older Safari stays on ui 0.39.x. Nothing else in `@plannotator/ui` moved its floor.
 
 **SVG ids are byte-identical 11 → 12** (measured from the real rendered SVG in the plan editor across 15 diagrams in 7 families, all 12 ids per diagram matched). `MermaidBlock` renders with `mermaid.render("mermaid-" + block.id, source)`, so every id below is prefixed by that render id (`{renderId}`), and a host that anchors on these keeps working:
@@ -736,7 +737,7 @@ Behavior is pinned by `../core/html-anchor.test.ts` (the wire fingerprint of a c
 |  | subgraph | `<g id="{renderId}-{subgraphId}" class="cluster">` under `g.clusters` |
 |  | markers | `<marker id="{renderId}_flowchart-v2-{pointEnd\|pointStart\|circleEnd\|circleStart\|crossEnd\|crossStart}[-margin]">` |
 | state (`stateDiagram-v2`) | state | `{renderId}-state-{stateId}-{n}` (`.node.default.statediagram-state`); pseudo-states `{renderId}-state-{scope}_start-{n}` / `_end-{n}`; composite cluster `{renderId}-state-{stateId}-{n}` (`.statediagram-cluster`) |
-|  | transition | `<path id="{renderId}-edge{n}" class="transition">` (note `edge{n}`, not `L_a_b_0`) |
+|  | transition | `<path id="{renderId}-edge{n}" class="transition">` (note `edge{n}`, not `L_a_b_0`); markers `{renderId}_stateDiagram-barbEnd` and, new under 12, `{renderId}_stateDiagram-barbEnd-margin` |
 | class | class box | `{renderId}-classId-{ClassName}-{n}` |
 |  | relation | `<path id="{renderId}-id_{From}_{To}_{n}" class="relation">`; markers `{renderId}_classDiagram-{kind}[-margin]` |
 | ER | entity | `{renderId}-entity-{ENTITY}-{n}` |
@@ -758,15 +759,55 @@ Three class-level deltas, none of which breaks an id- or class-based selector: `
 - `applyMermaidTheme(mermaid, key)` is keyed on the **runtime object** as well as the `(palette, mode)` key, so a lazily loaded runtime is themed on its first render exactly like an eagerly registered one, and a host that swaps runtimes gets a fresh `initialize` (pinned by `components/MermaidBlock.theme.test.tsx`).
 - Single-file builds gain nothing from the lazy import: `inlineDynamicImports` inlines the `import('mermaid')` target (and ELK) into the one HTML file, and the import resolves from the bundle. Plannotator's own hook bundle is 21.74 MB → 23.50 MB (+1.76 MB, +8.1%; gzip 6.66 MB → 7.19 MB); that delta is Mermaid 12's own size, not the loading strategy, and the review bundle is unchanged (17.43 MB, byte-identical to main) because it never carried Mermaid. On the chunked share portal the entry chunk goes 4,688 KB → 4,044 KB (-645 KB, -13.7%) with `mermaid.core` moving to its own chunk.
 
-**Theming contract, restated for 12.** `MermaidBlock` calls `applyMermaidTheme(runtime, mermaidThemeKey(colorTheme, mode))` before every render. `readThemeTokens()` reads `--background`, `--foreground`, `--card`, `--card-foreground`, `--popover`, `--border`, `--muted`, `--muted-foreground`, `--primary`, `--primary-foreground`, `--secondary`, `--accent`, `--destructive`, `--success`, `--warning` and `--font-sans` off the document element (resolving `color-mix()` / `var()` chains through a probe element); `buildMermaidThemeVariables(tokens, mode)` turns them into the base theme (`dark` / `default`) plus a complete `themeVariables` set for every family (node fills ← `card`, text ← `foreground` / `card-foreground`, borders ← `border`, edges and arrowheads ← `muted-foreground`, clusters ← `muted`, twelve categorical fills seeded from `primary`, `accent`, `success`, `warning`, `destructive`, `secondary`; every colour opaque hex, every text-on-fill pair guarded to 4.5:1 and every line 3:1 against every surface it can cross), and `mermaid.initialize(buildMermaidConfig(spec))` runs once per key change. **Without tokens** (no `ThemeProvider`, no `theme.css`, or the tokens kept off the document element) `readThemeTokens` returns `undefined`, `buildMermaidThemeVariables` returns `null`, nothing is re-initialized, and the runtime keeps the static `MERMAID_CONFIG` it was initialized with (12's own `dark` base theme with the slate `themeVariables`, ELK layout). None of the variable names changed between 11 and 12; the 0.40 sweep (104 combinations, 17,160 text pairs, 9,880 line pairs, 0 failures) is the proof that the mapping holds under ELK's re-laid-out geometry.
+**Theming contract, restated for 12.** `MermaidBlock` calls `applyMermaidTheme(runtime, mermaidThemeKey(colorTheme, mode))` before every render. `readThemeTokens()` reads `--background`, `--foreground`, `--card`, `--card-foreground`, `--popover`, `--border`, `--muted`, `--muted-foreground`, `--primary`, `--primary-foreground`, `--secondary`, `--accent`, `--destructive`, `--success`, `--warning` and `--font-sans` off the document element (resolving `color-mix()` / `var()` chains through a probe element); `buildMermaidThemeVariables(tokens, mode)` turns them into the base theme (`dark` / `default`) plus a complete `themeVariables` set for every family (node fills ← `card`, text ← `foreground` / `card-foreground`, borders ← `border`, edges and arrowheads ← `muted-foreground`, clusters ← `muted`, twelve categorical fills seeded from `primary`, `accent`, `success`, `warning`, `destructive`, `secondary`; every colour opaque hex, every text-on-fill pair guarded to 4.5:1 and every line 3:1 against every surface it can cross), and `mermaid.initialize(buildMermaidConfig(spec))` runs once per key change. **Without tokens** (no `ThemeProvider`, no `theme.css`, or the tokens kept off the document element) `readThemeTokens` returns `undefined`, `buildMermaidThemeVariables` returns `null`, nothing is re-initialized, and the runtime keeps the static `MERMAID_CONFIG` it was initialized with (12's own `dark` base theme with the slate `themeVariables`, ELK layout). None of the variable names changed between 11 and 12; the 0.40 sweep (78 combinations, 12,870 text pairs, 7,410 line pairs, 0 failures) is the proof that the mapping holds under ELK's re-laid-out geometry.
 
 **Publish order.** `@plannotator/ui` 0.40.0 pins `@plannotator/core` `0.25.3` exactly, so **publish `core` 0.25.3 first, then `ui` 0.40.0** (`npm publish` in `packages/core`, then in `packages/ui`; both by hand from `main` after merge — CI never publishes these packages). Nothing under `packages/core` changed for Mermaid 12 itself. Core 0.25.3 also carries #1549 (`parseHtmlElementContext`, `MAX_ELEMENT_CONTEXT_BYTES`, `MAX_PAGE_URL_LENGTH` on `@plannotator/core/html-anchor`, and the element-context round trip; see "Element context through the host seam"), which is why the ui pin moves: a ui 0.40.0 on a published core 0.25.2 would fail to compile in a consumer.
 
 ---
 
+## Diagram engine (0.41.0)
+
+`@plannotator/ui` 0.41.0 makes the Workspaces diagram viewer THE diagram engine of the package (owner ruling: "the new engine, not an option"). `MermaidBlock` and `GraphvizBlock` keep fence parsing, `diagramLanguages.ts` and the lazy-retry contract, and render through ONE renderer slot and ONE canvas: their own viewBox math, `applyView` and per-block zoom controls are gone, and the popout is the same `DiagramViewer` at full size over the document (the `TablePopout` chrome). A host that installs 0.41.0 gets the viewer, its overlay and Source pane, the anchor codecs and the runtime slots as supported surface; a host that already renders the copies Workspaces carried re-pins onto these exports and deletes the copies. Requires `@plannotator/core` 0.25.4 (the `diagram-anchor` subpath), so **publish core 0.25.4 first, then ui 0.41.0**.
+
+**New exports.**
+
+- `@plannotator/ui/components/diagram` (barrel; the components also resolve as `components/diagram/<Name>`): `DiagramViewer` (+ `DiagramViewerProps`), `DiagramPopout`, `DiagramCanvas` (+ `DiagramCanvasHandle`, `DiagramEscapeOutcome`, `svgContentSize`, `KEY_PAN_PX`; props `pickTarget`, `className`), `DiagramOverlay`, `DiagramComposer`, `DiagramSourcePane`, `useDiagramComments` (+ `DiagramComment`, `DiagramCreateComment`, `DiagramComposerDraft`, `DiagramHover`, `ResolvedDiagramComment`), `useDiagramRender` (+ `DiagramRenderState`), `useDiagramSourceDraft` (+ `DiagramSourceDraft`, `SaveResult`, `PREVIEW_DEBOUNCE_MS`), `useDiagramViewport` (+ `Viewport`, `ContentSize`, `ZOOM_MIN`, `ZOOM_MAX`, `ZOOM_STEP`, `WHEEL_ZOOM_SENSITIVITY`, `DRAG_THRESHOLD_PX`, `TOUCH_DRAG_THRESHOLD_PX`, `FIT_PADDING_PX`). Also `components/diagram/anchorClaims`: `DiagramAnchorClaims`, `DiagramAnchorClaimsContext`.
+- `@plannotator/ui/utils/diagram-render`: `renderDiagram(kind, renderId, source, theme)`, `diagramFinder(kind)`, `sanitizeDiagramSvg`, `parseDiagramSvg`, `scrubDiagramSvg`, `scopeDiagramCss`, `widenEdgeHitAreas`, `diagramHitSource`, `DIAGRAM_HIT_ATTR`, `DIAGRAM_HIT_LAYER_ATTR`, `EDGE_HIT_STROKE_WIDTH`, `themeGraphvizSvg`, types `DiagramTheme`, `DiagramRenderResult`, `DiagramRenderError`, `DiagramKind`; test hook `__setDiagramSvgParserForTests`.
+- `@plannotator/ui/utils/graphviz`: the Graphviz runtime slot, the same shape as `utils/mermaid` — `loadGraphvizRuntime`, `setGraphvizRuntime`, `getGraphvizRuntime`, `getGraphvizRuntimeSource`, `getGraphvizRetryDelayMs`, `__setGraphvizRuntimeLoaderForTests`, types `GraphvizRuntime`, `GraphvizRuntimeSource`, `GraphvizRuntimeLoader`. `@viz-js/viz` is pinned exactly at `3.30.0`; the only runtime spelling of the package is the slot's `import('@viz-js/viz')`.
+- `@plannotator/ui/utils/diagram-anchor`: the Mermaid finder over a rendered svg — `DiagramFinder` (the seam: `targetSelector`, `targetFromElement`, `findTarget`, `sourceLine`), `MERMAID_FINDER`, `DIAGRAM_TARGET_SELECTOR`, `diagramFamilyOf`, `nodeIdsOf`, `splitEdgeStem`, `targetFromElement`, `findDiagramTarget`; it re-exports everything from `@plannotator/core/diagram-anchor` so a host imports one module.
+- `@plannotator/ui/utils/diagram-anchor-graphviz`: `GRAPHVIZ_FINDER`, `GRAPHVIZ_TARGET_SELECTOR`, `graphvizTargetFromElement`, `graphvizFindTarget`, `graphvizSourceLine`.
+- `@plannotator/ui/utils/diagram-projection`: `projectElement(el, hostRect)` (+ `ScreenRect`).
+- `@plannotator/core/diagram-anchor` (core 0.25.4): types `DiagramFamily`, `DiagramTargetKind`, `DiagramTarget`, `DiagramAnchor`, `DiagramKind`; `parseDiagramAnchor`, `parseDiagramTarget`, `parseDiagramAdditionalTargets`, `buildDiagramAnchorValue`, `buildDiagramAnchor` (the opaque-blob shape a host that stores every anchor kind in one JSON column writes), `sameTarget`, `diagramTargetText`, `diagramTargetName`, `diagramAnchorLocationLine`, `lineMentions`, `diagramSourceLine`, `diagramWholeSourceLines`, `diagramFirstSourceLine`, `DIAGRAM_ANCHOR_KEY`, `DIAGRAM_ADDITIONAL_TARGETS_KEY`, `MAX_DIAGRAM_ANCHOR_STRING_LENGTH`.
+- `Annotation.diagramAnchor?: DiagramAnchor` on `@plannotator/ui/types` (also re-exported there as a type), and additive `annotations`, `selectedAnnotationId`, `onSelectAnnotation`, `onAddAnnotation`, `readOnly`, `onRestoreReport` props on `MermaidBlock` / `GraphvizBlock` (`DiagramBlockProps`; `Viewer` passes its own).
+
+**Removed.** `components/mermaidSvg` (`normalizeMermaidSvgMarkup`) is gone: it never sanitized anything (it baked `max-width: none`, `preserveAspectRatio` and `height="100%"` into the root tag for the old innerHTML mount), and the canvas now sizes the mounted node itself. A host that imported it drops the import. `GraphvizBlock` no longer exports `__setVizLoaderForTests` as its own function; the name is kept as an alias of `__setGraphvizRuntimeLoaderForTests`.
+
+**The adapter (`DiagramViewer` props).** `kind: 'mermaid' | 'graphviz'`, `source: string`, `theme: { colorTheme, mode: 'dark' | 'light' }` (the pair `useTheme()` resolves; a host without `ThemeProvider` passes any palette id with the mode it renders in — with no tokens on the document the Mermaid entry keeps the static `MERMAID_CONFIG`), `comments: DiagramComment[]` (`{ id, anchor: DiagramAnchor, additionalTargets?, text, author?, resolved? }`; array order is the badge numbering), `onCreateComment?(anchor, text, additionalTargets)` (absent: clicks open nothing; `anchor.sourceLine` already carries `sourceLineOffset`), `onSave?(source) => Promise<SaveResult>` with `SaveResult = { status: 'ok' } | { status: 'stale', currentSource }` (absent: no Source pane; a thrown error is the save error shown in the pane; `stale` shows the Reload strip, holds Save and keeps the draft, and Reload adopts `currentSource` as the baseline), `readOnlySource?` (pane shown, no Save), `sourceOpen?` (the host owns the toggle; `DiagramPopout` renders one), `selectedCommentId?` / `onSelectComment?`, `onUnanchoredChange?(ids)` (once per membership change after every render, the `HtmlViewer` contract), `onResolutionChange?(map)` (every comment's verdict, whenever one changes or the list does), `canvasClassName?` (the canvas is `touch-action: pan-y` so a finger can scroll the page past an inline diagram; a viewer that owns the screen passes `touch-none`, as `DiagramPopout` does), `onDismiss?` (Escape with nothing left to close), `renderId?` (two viewers over one document need two), `sourceLineOffset?` (0 when the document IS the diagram; a fence's opening line for a fence, so `sourceLine` names document lines), `maxAdditionalTargets?` (default 0: a comment covers one part; pass 16 to keep shift-click multi-select — Workspaces' `MAX_PERSISTED_ADDITIONAL_TARGETS`), `commentingDisabledReason?` (the composer shows the reason and a Close instead of a textarea — what `CommentingPolicy.reason` was), `retryToken?`, `onRenderState?`, `renderFallback?` (what to show while there is no svg yet), `autoFocus?`, `className?`. Nothing else reaches the viewer: identity, storage, the comments rail and the save transport are the host's.
+
+**The anchor shape** (`DiagramAnchor`; Workspaces' `diagram` value plus two additive members within `v: 1`, the `sequence` family and the `diagram` kind): `{ v: 1, family: 'flowchart' | 'state' | 'class' | 'er' | 'requirement' | 'sequence' | 'other' | 'graphviz', kind: 'node' | 'edge' | 'cluster' | 'diagram', id?, from?, to?, label, sourceLine: [first, last] | null }` — the diagram's own id for the part (never the rendered element id with its counter, never geometry), the label at write time, and 1-based DOCUMENT lines. Restore order: id, label, source line (the pane's gutter mark), unanchored but listed. `parseDiagramAnchor` is the one fail-closed validator (strings capped at 400, a bad `sourceLine` drops to null while the target survives); the external-annotations POST (both runtimes), the feedback archive and the export all run it. Share links drop the anchor exactly like `htmlAnchor` (pinned by `sharing.multiTarget.test.ts`).
+
+**Codec families.** Flowchart, state, class, ER and requirement parts are addressed by Mermaid's own ids (table in "Mermaid 12"). **Sequence** diagrams carry classes, not ids, so the ids are the codec's: an actor is a `node` whose id is the actor's `name` attribute (`rect.actor`, `text.actor`, `line.actor-line`; the top and bottom boxes of one actor are the same target, and the element is the top box); a message is an `edge` `msg-<n>` by document order (`.messageLine0/1`, and its `text.messageText` resolves to the same message; `from` / `to` come from the line's `data-from` / `data-to` when the renderer wrote them; the label is the message text); a note is a `node` `note-<n>` (`rect.note` + `text.noteText`); a loop / alt / opt frame is a `cluster` `frame-<n>` (the group that holds its `line.loopLine`s, label from `text.labelText` + `text.loopText`). `sourceLine` for an ordinal is the n-th statement of its kind in the text (`diagramSourceLine`). Because an ordinal moves when a statement is inserted above it, sequence restore checks the label too: the part at the ordinal when its label still matches, else the ONE part that carries the stored label, else the part at the ordinal (its text was edited in place). Everywhere, the label fallback (restore step 2) applies only while the label names exactly one part; with duplicates it is skipped and the comment falls through to the source line. gitGraph and pie carry neither ids nor stable classes: a comment there is a whole-diagram comment.
+
+**Comments that name no diagram block.** A comment composed in a block carries that block's `blockId`. One posted through `POST /api/external-annotations` carries `blockId: "external"`, and one whose fence was deleted carries a dead id. `Viewer` provides `DiagramAnchorClaimsContext` (`components/diagram/anchorClaims`, a `DiagramAnchorClaims` over the document's diagram block ids in order); every diagram block tries such a comment against its own render (`onResolutionChange`, the per-comment verdict map the viewer reports whenever a verdict or the list changes) and reports to the coordinator; the FIRST block in document order whose finder resolves it shows it, and when every block has answered and none did, the first block reports it unanchored (a document with no diagram at all: `Viewer` reports it). A block rendered without the context coordinates with itself only. A Graphviz-family anchor is only ever tried against dot fences.
+
+**The runtime slots.** Mermaid: `utils/mermaid` as before (`loadMermaidRuntime`, `setMermaidRuntime`; the eager entry unchanged), with `applyMermaidTheme(runtime, mermaidThemeKey(colorTheme, mode))` still called per (palette, mode) before every render — `MermaidBlock.theme.test.tsx` and the `securityLevel: 'strict'` pin are unchanged. Graphviz: `utils/graphviz`, the same shape, filled lazily on the first dot fence or by a host through `setGraphvizRuntime(await import('@viz-js/viz').then((m) => m.instance()), 'host')`. Both are loaded with ONE automatic re-attempt after the slot's retry delay; a load failure resolves the render to `{ ok: false, runtimeUnavailable: true }`, which is the one failure the block's Retry (a shared epoch per engine, so one Retry re-attempts every failed sibling) can change.
+
+**The sanitizer, and the delta.** `sanitizeDiagramSvg` = `parseDiagramSvg` (DOMPurify under the svg, svg-filter and html profiles with `foreignobject` added back the way Mermaid's own pass adds it, `RETURN_DOM_FRAGMENT`, the root adopted into the page document) + `scrubDiagramSvg` (in place on the tree about to be mounted: `script`/`iframe`/`object`/`embed`/`link`/`meta` removed, every `<style>` reduced by `scopeDiagramCss(css, rootId)` to the rules scoped under the svg's own root id plus `@keyframes` — `@import` and every other statement at-rule dropped, any rule that fetches dropped (`url(` that is not a `#fragment`, `image-set(`, `image(`, `src(`, `cross-fade(`, `paint(`, `element(`; CSS escapes are decoded first, so `u\72l(` is caught), any rule with a selector NOT starting at `#<rootId>` dropped (it could restyle the page around the diagram), `@media` / `@supports` / `@container` / `@layer` filtered recursively, `@font-face` and the rest dropped; a style element left empty is removed. Mermaid scopes every rule it emits under the render id, so all of its rules survive: pinned over six captured families, and in Chromium the computed node, label and edge styles equal main's on three palettes with identical rule counts, every `<a>` loses `href`/`xlink:href` so a `click A "https://…"` binding cannot turn a pinpoint click into a navigation, every `on*` attribute removed, `href`/`xlink:href`/`src` kept only for `#fragment` or `http(s)` values). No markup string ever reaches the app DOM: the canvas mounts the node with `replaceChildren`. Delta against what Plannotator had: nothing to merge in the security direction (the old `normalizeMermaidSvgMarkup` and the old Graphviz regex rewrite did no sanitizing); the one case ours covered that the moved code did not — a Graphviz root whose size is only `width="206pt" height="188pt"` with no `viewBox` — is now handled in `svgContentSize`, which accepts `pt`/`px`-suffixed lengths as the fallback. Also consolidated: the old Graphviz stroke color `var(--muted-foreground)` becomes `var(--foreground)` (the moved `themeGraphvizSvg`), so dot fences and Workspaces' `.dot` documents draw the same line. **Test note:** happy-dom cannot host DOMPurify (its `DOMParser` lands the fragment in a foreign realm and mislabels svg namespaces; in-place mode reads `nodeName` through a cached `Node.prototype` getter happy-dom overrides on `Element`), so DOM tests parse through an inert XML/`<template>` parse via `__setDiagramSvgParserForTests` (`test-setup/diagramSvg.ts`) while `scrubDiagramSvg` still runs on every test render; the DOMPurify parse is proven in Chromium.
+
+**Interaction (owner feedback, twice: watching the first runs, then testing the build by hand).** Click-to-select, drag-to-pan: a press that travels under the drag threshold is a click and opens the composer (so a slightly moving click still selects); one that travels further is a pan and never opens it. The threshold is pointer-type aware: `DRAG_THRESHOLD_PX` (4 px) for a mouse or pen, `TOUCH_DRAG_THRESHOLD_PX` (10 px) for a finger. **Hover targeting was removed at the owner's request** — it read as messy and fought the pan hand — so nothing highlights on a plain mouse-over; the one pre-click affordance left is the ring and label chip under the pointer while the platform modifier is held (Cmd on macOS, Ctrl elsewhere; `isModKeyHeld`), and it disarms on the modifier's release, on any other key while it is held, and on window blur, like the code review's token cards. Canvas keys (`+` `-` `0`, arrows) ignore events carrying Meta, Ctrl or Alt, so `Mod+0`, `Mod+-` and `Alt+Arrow` stay the browser's. The wheel ignores `|deltaY| < 0.1`.
+
+**The hit layer and the priority rule.** Edges were nearly impossible to click. Measured cause (headless Chromium, `elementsFromPoint` at 20 points along every edge of a flowchart with nested subgraphs, a state, a class and an ER diagram): the ONLY thing painted over an edge is that edge's **own label** (`g.edgeLabel > foreignObject > … > p`), which covers 5–40% of every labelled edge, centred on its midpoint — exactly where a person clicks an edge; unlabelled edges were reachable at 20 of 20 points. Mermaid 12 + ELK emits ONE `g.root` even with nested subgraphs, and clusters are painted before the edge paths, so nested roots and cluster rects cover nothing. The fix is structural anyway, so it also holds for a renderer that does nest: `widenEdgeHitAreas(svg)` (exported from `utils/diagram-render`, with `DIAGRAM_HIT_ATTR`, `DIAGRAM_HIT_LAYER_ATTR`, `EDGE_HIT_STROKE_WIDTH`, `diagramHitSource`) collects one invisible hit path per edge into ONE `<g data-diagram-hit-layer>` appended LAST in the svg root. Each hit path is a bare element of the edge's tag carrying only its geometry (`d` / `x1 y1 x2 y2` / `points`), a `transform` that re-creates the ancestors' placement (every ancestor's `transform` attribute joined outermost first, plus the edge's own: an svg transform list composes left to right, so this needs no layout and runs on the detached node), `data-diagram-hit="<index>"`, `stroke: transparent`, `fill: none`, `stroke-width: 14`, `pointer-events: stroke`, the width, stroke, dash pattern and markers also set `!important` inline. It keeps NO `id`, `class`, marker, inline style or `data-*` of the edge, so a host's `[data-id="L_A_B_0"]` still matches exactly what it matched before. `diagramHitSource(hitEl)` (a WeakMap) maps one back to its visible edge. Covered: Mermaid `g.edgePaths > path`, `path.flowchart-link`, `path.transition`, `path.relation`, `path.relationshipLine`, the sequence `.messageLine0/1`; Graphviz `g.edge > path`. Because the layer sits over the nodes too, `DiagramCanvas` never trusts the topmost element: it takes `document.elementsFromPoint` at the pointer, maps hit paths to their edges, reduces each element to its addressable ancestor, and hands the candidates (topmost first) to `pickTarget`, which the viewer implements as **node, then edge, then cluster** (`useDiagramComments.pickTarget`). An edge LABEL is a target too and resolves to its edge (`g.edgeLabel` → the edge whose id its `data-id` names); the composer and the ring always land on the part's ONE element (`finder.findTarget` canonicalizes). Numbered badges and rings for existing comments are unchanged.
+
+**A click never does nothing: the `diagram` kind.** A click that resolves no part opens the composer on the WHOLE diagram (with a draft already open it closes the draft instead): `{ kind: 'diagram', family, label: <the diagram's first source line>, sourceLine: <the source's full range, offset into the document> }`, no `id`. This covers gitGraph, pie, and any family the codec does not address. Its ring is the svg's content bounds and its badge sits top-left; it is never unanchored while the diagram renders (`findTarget` returns the svg root). The export line reads `Diagram (<family>), lines a–b`.
+
+**Migration for a host that carried the copies.** `useDiagramRender(kind, documentId, source, theme, { retryToken })` now takes the `{ colorTheme, mode }` theme and reports `error.runtimeUnavailable`; `useDiagramAnnotations` becomes the host's projection of its rows onto `comments` plus its mutation behind `onCreateComment` (the viewer half is `useDiagramComments`); `useDiagramDraft`'s `preview`/`dirty`/`stale`/`reload` semantics live in `useDiagramSourceDraft` behind `onSave` (the PATCH, `If-Match`, the query cache and the fence slice stay host-side; answer `stale` on a 412); `DiagramComposer` takes `disabledReason`/`error` instead of a `CommentingPolicy`; the canvas's `onEscape` returns `'consumed' | 'pass'` so a popout can walk the Escape ladder; arrow keys pan (`KEY_PAN_PX`, Shift ×5) in addition to `+` `-` `0`. Icons come from `lucide-react` (already a dependency).
+
+---
+
 ## Publishing & versioning
 
-- **The current pair is `@plannotator/ui` `0.40.0` on `@plannotator/core` `0.25.3`. Publish `core` 0.25.3 first, then `ui` 0.40.0** (both by hand from `main` after merge; CI never publishes these packages). Three things ship in 0.40.0: (1) **Mermaid 12.0.0**, pinned exactly (was `^11.17.2`): ELK layout by default for flowchart/state/class/ER/requirement, Safari 17.4+ / ES2024 floor, SVG ids byte-identical to 11 but `g.edgePaths` children now in declaration order, and the plan editor no longer imports `utils/mermaid-eager` (the lazy path is the default for everyone; hosts that want startup registration import the eager entry themselves) — see "Mermaid 12 (0.40.0)"; (2) **theme-aware Mermaid diagrams**: New additive exports `utils/mermaidTheme` (`buildMermaidThemeVariables`, `readThemeTokens`, `applyMermaidTheme`, `mermaidThemeKey`, `buildMermaidConfig`, `ensureContrast`, `isDarkBackground`, `MERMAID_THEME_TOKEN_NAMES`) and `utils/cssColor` (parser + OKLab/contrast toolkit). `MermaidBlock` now calls `useTheme()` and `applyMermaidTheme` before each render; `MERMAID_CONFIG`, `loadMermaidRuntime`, `mermaid-eager` and `securityLevel: 'strict'` are unchanged. A host whose document carries no theme tokens renders diagrams byte-identically to 0.39.0; a host that mounts `ThemeProvider` with `theme.css` gets diagrams in its palette and mode with no configuration. No new peer dependencies; core unchanged. See "Theme-aware Mermaid diagrams (0.40.0)".; (3) **element context through the host seam (#1521, #1549), which is what moves `core` to 0.25.3:** `@plannotator/core/html-anchor` gains `parseHtmlElementContext`, `MAX_ELEMENT_CONTEXT_BYTES` and `MAX_PAGE_URL_LENGTH`; `PersistedHtmlAnchor.elementContext?` and `HtmlAnnotationTarget.context?` now round-trip through `buildPersistedHtmlAnchor` and `projectHostThreads`. **Core changes here, so bump and publish `core` first** and update UI's exact core dependency before packing ui — a ui build that imports these from an older published core fails to compile in a consumer, the 0.38.0 failure mode. `@plannotator/ui/components/html-viewer` re-exports the validator, so 0.39.0's import site is unchanged, and rows without context stay byte-identical on the wire. `utils/parser` gains `includeOutline` on `elementContextExportBlock` / `exportAnnotationEntry`, and `exportAnnotationEntry`'s `includeRoute` now defaults to true per field. See "Element context through the host seam".
+- **The current pair is `@plannotator/ui` `0.41.0` on `@plannotator/core` `0.25.4`. Publish `core` 0.25.4 first, then `ui` 0.41.0** (both by hand from `main` after merge; CI never publishes these packages). 0.41.0 is the diagram engine (see "Diagram engine (0.41.0)"): one renderer slot and one canvas behind `MermaidBlock` / `GraphvizBlock`, the `components/diagram` surface, the Graphviz runtime slot with `@viz-js/viz` pinned `3.30.0`, and `Annotation.diagramAnchor`; core 0.25.4 adds the `diagram-anchor` subpath ui imports, so a ui 0.41.0 on a published core 0.25.3 would fail to compile in a consumer.
+- The previous pair was `@plannotator/ui` `0.40.0` on `@plannotator/core` `0.25.3` (publish order the same). Three things shipped in 0.40.0: (1) **Mermaid 12.0.0**, pinned exactly (was `^11.17.2`): ELK layout by default for flowchart/state/class/ER/requirement, Safari 17.4+ / ES2024 floor, SVG ids byte-identical to 11 but `g.edgePaths` children now in declaration order, and the plan editor no longer imports `utils/mermaid-eager` (the lazy path is the default for everyone; hosts that want startup registration import the eager entry themselves) — see "Mermaid 12 (0.40.0)"; (2) **theme-aware Mermaid diagrams**: New additive exports `utils/mermaidTheme` (`buildMermaidThemeVariables`, `readThemeTokens`, `applyMermaidTheme`, `mermaidThemeKey`, `buildMermaidConfig`, `ensureContrast`, `isDarkBackground`, `MERMAID_THEME_TOKEN_NAMES`) and `utils/cssColor` (parser + OKLab/contrast toolkit). `MermaidBlock` now calls `useTheme()` and `applyMermaidTheme` before each render; `MERMAID_CONFIG`, `loadMermaidRuntime`, `mermaid-eager` and `securityLevel: 'strict'` are unchanged. A host whose document carries no theme tokens renders diagrams byte-identically to 0.39.0; a host that mounts `ThemeProvider` with `theme.css` gets diagrams in its palette and mode with no configuration. No new peer dependencies; core unchanged. See "Theme-aware Mermaid diagrams (0.40.0)".; (3) **element context through the host seam (#1521, #1549), which is what moves `core` to 0.25.3:** `@plannotator/core/html-anchor` gains `parseHtmlElementContext`, `MAX_ELEMENT_CONTEXT_BYTES` and `MAX_PAGE_URL_LENGTH`; `PersistedHtmlAnchor.elementContext?` and `HtmlAnnotationTarget.context?` now round-trip through `buildPersistedHtmlAnchor` and `projectHostThreads`. **Core changes here, so bump and publish `core` first** and update UI's exact core dependency before packing ui — a ui build that imports these from an older published core fails to compile in a consumer, the 0.38.0 failure mode. `@plannotator/ui/components/html-viewer` re-exports the validator, so 0.39.0's import site is unchanged, and rows without context stay byte-identical on the wire. `utils/parser` gains `includeOutline` on `elementContextExportBlock` / `exportAnnotationEntry`, and `exportAnnotationEntry`'s `includeRoute` now defaults to true per field. See "Element context through the host seam".
 - The previous pair was `@plannotator/ui` `0.39.0` on `@plannotator/core` `0.25.2` (core unchanged; nothing under `packages/core` moved). UI 0.39.0 adds **element context** to raw-HTML and live-app pinpoint annotations (#1517, #1520): a new optional `Annotation.elementContext` (`HtmlElementContext` in `@plannotator/ui/types`) and `HtmlAnnotationTarget.context`, captured by the bridge at click time (tag, id, author classes, ancestor `path`, `role`, accessible `name`, an allowlisted `attrs` set with href/src scrubbed of query and fragment, rendered `text`, an adaptive collapsed HTML `outline`, child count, viewport `rect`, nearest `landmark` and `heading`, a `component` hint, and in live-app sessions `page`), hard-capped at 2 KiB serialized per primary and 1 KiB per extra target, and re-validated at the parent trust boundary by the new `parseHtmlElementContext` export of `@plannotator/ui/components/html-viewer`. New helpers on `@plannotator/ui/utils/parser`: `elementContextExportBlock(ann, { includeRoute })` (the fenced skeleton plus selector/path/role/name/attrs/text/box/near lines the full export now prints under a context-bearing comment) and `exportAnnotationEntry(ann, { includeRoute })` (one annotation as a standalone feedback entry, a pure helper for hosts; `AnnotationPanel`'s card chrome is unchanged from 0.38.2). The field is purely descriptive: `HtmlElementAnchor` and restore are untouched, no `BRIDGE_PROTOCOL_VERSION` bump, share links drop it like anchors, annotations without it export byte-identically, and the repaint path posts only anchors to the bridge. **Host persistence gap in 0.39.0 itself, closed in the next publish (#1521, #1549)**: as shipped, 0.39.0's `@plannotator/core/html-anchor` (`buildPersistedHtmlAnchor`, `projectHostThreads`) does not carry `elementContext`, so a host pinned to 0.39.0 that persists through those helpers drops it on save and must persist and project the field itself. The next publish carries it end to end — see "Element context through the host seam". Peer ranges are unchanged from 0.38.2: `react` / `react-dom` `^19.2.3`, `tailwindcss` as before, and `@codemirror/state ^6.7.2` beside `@codemirror/view ^6.43.10`. Decision-control change in the same window (#1516): the header primary reads `Send Feedback` / `Post Comments` with no inline count (`DecisionPrimary.count` removed; internal, not host-supported surface).
 - Before that, `@plannotator/ui` `0.38.2` on `@plannotator/core` `0.25.2`. UI 0.38.2 keeps the type word in a titled alert's accessible name through a visually hidden `sr-only` span before the title instead of an `aria-label` on the title row (naming a generic `div` is prohibited by ARIA and WebKit drops it, so VoiceOver on Safari read only the bold title in 0.38.1), and loosens the React peer back to `^19.2.3` (0.38.1 declared `^19.2.8` only because the dependency batch moved it; nothing in the package needs a newer API). **Do not consume ui 0.38.0**: it imports `@plannotator/core/token-hover` (the hover-card trigger settings, #1462) but pins core 0.25.1, which never exported that subpath, so it fails to compile in any consumer; 0.38.1 is the same UI pinning core 0.25.2, which publishes `./token-hover`, the rotated `guide-viewer-manifest` pin, and the `config-types` hover fields (core 0.25.2 is the first core publish since 0.25.1 even though those changes landed over several releases; the package smoke now diffs the UI's core imports against the registry so an unpublished core subpath fails preflight instead of the consumer). UI 0.38.1 also aligns `@codemirror/state` to `^6.7.2` beside `@codemirror/view ^6.43.10`, so a consumer can no longer resolve two state copies. UI 0.38.0 also renders a GitHub alert's bold-only first body line as its title on the icon row (an emoji on that line becomes the icon; `<!-- icon: name -->` is stripped and resolved through the new `alertIconRenderer` seam, null by default; grammar in `utils/alertTitle`, importable by a host editor so it writes the bytes the reader parses; a fenced code block inside an alert body still renders as text, deferred because nesting a `CodeBlock` inside a block interacts with the positional annotation anchors and needs its own design). UI 0.38.0 carries the whole unified decision-control stack: the internal primitives (`DecisionControl`, `utils/decisionSpec`, `hooks/useDismissablePopover` — not host-supported surface, see the unsupported list; `useDismissablePopover` also replaced the hand-rolled dismissal inside `ActionMenu`/`ApproveDropdown`, both likewise unsupported) plus one blessed-barrel addition: `decisionControlShortcuts` on `@plannotator/ui/shortcuts` (pure scope data, fetch-free, same contract as the other scopes). The removal of `ToolbarButtons`' platform-mode `muted` prop is internal — `ToolbarButtons` is not host-supported surface. UI 0.37.0 added the Viewer-owned document-header seam (a new public API, hence the minor bump; 0.36.1 was reserved for it but never published) while retaining the `hideQuickLabel` and `StickyHeaderLane` seams from the 0.35.x and 0.36.0 releases; core 0.25.1 publishes the `annotation-threads` subpath already used by `AnnotationPanel` and `utils/parser`, and UI pins that corrected core exactly.
 - Recent pairs, for the consumer's install matrix: ui 0.32.0 on core 0.25.0 (lockstep, `html-anchor`), ui 0.33.0 and ui 0.34.0 on core 0.25.0 (ui only), and ui 0.35.2, ui 0.36.0, and ui 0.37.0 on core 0.25.1 (0.36.1 was never published), ui 0.38.1, ui 0.38.2, and ui 0.39.0 on core 0.25.2, and ui 0.40.0 on core 0.25.3 (lockstep, `html-anchor` element context). Do not consume ui 0.35.0 externally because its published manifest contains `workspace:*`; do not consume ui 0.35.1 because its exact core 0.25.0 dependency lacks the `annotation-threads` export. Do not consume ui 0.38.0 because its exact core 0.25.1 dependency lacks the `token-hover` export.
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 72572710d..0eeca2832 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -53,7 +53,7 @@ Building your own tooltip and removing the built-in double-click reset are host-
 
 ### Lazy renderers and the eager entries (`utils/math`, `utils/generateIdentity`, `utils/mermaid`; 0.32.0)
 
-The Mermaid runtime, the Graphviz engine, KaTeX and the username dictionary are off the static import graph of `Viewer`, so a host that bundles by route does not download them for a plain markdown read. Graphviz needs nothing from you (the block imports the engine inside its render effect and shows the source fence until the SVG lands, as it always did). Mermaid, KaTeX and the dictionary sit behind synchronous slots:
+The Mermaid runtime, the Graphviz engine, KaTeX and the username dictionary are off the static import graph of `Viewer`, so a host that bundles by route does not download them for a plain markdown read. Graphviz has its own slot since 0.41.0 (`utils/graphviz`, the same shape as Mermaid's: lazy `import('@viz-js/viz')` on the first dot fence, or `setGraphvizRuntime` from the host) and the block shows the source fence under a status until the SVG lands. Mermaid, Graphviz, KaTeX and the dictionary sit behind synchronous slots:
 
 - **Math.** Without registration, a math node renders its TeX as text in the same wrapper (same `data-math-tex` / `data-math-display` / `aria-label` / class names), loads KaTeX via `import('katex')`, and re-renders typeset. To keep math typeset on the very first commit, as Plannotator does, add one line to your entry: `import "@plannotator/ui/utils/math-eager";`. To put KaTeX and its stylesheet on one lazy chunk instead, pass `mathRendererLoader`. The stylesheet remains your job either way (see "Consuming it", step 3). The default `import('katex')` is the only runtime mention of `katex` in the package and lives in `utils/math-default-loader` (0.33.0), called only while no loader is registered; a registered loader is never backfilled by it, though a default load already in flight at registration still fills the slot (pre-existing), so register the loader before the first math render. Chunk emission is static, so a bundler still emits that chunk (never requested) unless you alias the module away; see HANDOFF.md "Lazy renderers and eager entries" for the two-line alias. The Mermaid runtime has its own `import("katex")` for `$$` labels, which leaves a second, shared KaTeX chunk in a host build even with the alias; since 0.34.0 a host redirects that one import (for importers inside the `mermaid` package only) to `@plannotator/ui/utils/mermaid-math-slot`, which typesets the labels through your registered renderer, so one KaTeX chunk remains and it is yours. Recipe and measurement in HANDOFF.md, same section. `resetMathRenderer()` empties the slot only and keeps a registered loader (0.34.0); `setMathRendererLoader(null)` is the explicit way back to the package default.
 - **Mermaid.** Without registration, the first diagram on a page fetches the runtime through `import('mermaid')` and the block shows the source fence under a "Rendering diagram" status until the SVG lands; a failed import is dropped from the memo, re-attempted once after a short delay, and the error panel (with the source) offers Retry, which issues another fresh attempt. **Since 0.40.0 (Mermaid 12.0.0, ELK layout by default, Safari 17.4+) this lazy path is Plannotator's own**: the plan editor no longer imports the eager entry, so a document with no diagram never downloads the runtime in a chunked build. `import "@plannotator/ui/utils/mermaid-eager";` in your entry registers and initializes the runtime at startup instead, if you would rather it never fail separately from the app. Mermaid 12 lays flowchart, state, class, ER and requirement diagrams out with ELK (orthogonal edges, different packing); every generated SVG `id` keeps its 11.x shape, but children of `g.edgePaths` are now in declaration order, so select edges by id (`{renderId}-L_{from}_{to}_{n}`, `{renderId}-edge{n}`), never by DOM position. Details in HANDOFF.md "Mermaid 12 (0.40.0)". **Diagrams follow the colour theme.** Before every render `MermaidBlock` calls `applyMermaidTheme` (`utils/mermaidTheme`), which reads the theme tokens off the document (`--background`, `--foreground`, `--card`, `--border`, `--muted`, `--muted-foreground`, `--primary`, the accent tokens and `--font-sans`; `readThemeTokens`), derives a complete `themeVariables` set for every diagram family from them (`buildMermaidThemeVariables(tokens, mode)`, pure; base theme `dark` under a dark resolved mode, `default` under light; every text-on-fill pair guarded to WCAG 4.5:1 and every line 3:1, rule in the module doc) and runs the global `mermaid.initialize` once per `(palette, mode)` key, re-rendering mounted diagrams when the key changes. The key comes from `useTheme()`, so a host that mounts `ThemeProvider` and ships `theme.css` gets diagrams in its palette with nothing to configure. **Fallback contract:** with no tokens on the document (no `ThemeProvider`, no `theme.css`) `readThemeTokens` returns `undefined`, nothing is re-initialized, and the runtime keeps the static `MERMAID_CONFIG` it was initialized with, so such a host renders byte-identically to 0.39.0. `MERMAID_CONFIG` keeps its value and meaning (`securityLevel: 'strict'` pinned); the new exports are additive. Honest limit of any in-page retry: a browser records a failed module fetch in its module map for the page lifetime, so a fresh `import()` of the same chunk URL rejects without a request; the retry recovers failures after the fetch (engine instantiation, initialize) and hosts that version chunk URLs. A host that needs recovery from a failed first fetch uses versioned chunk URLs or a `vite:preloadError` reload at app level.
@@ -216,6 +216,10 @@ exactly. The standalone `StickyHeaderLane` remains supported for Plannotator's
 hidden-at-rest ghost lane, but its always-visible mode is an overlay and is not
 the in-flow host integration.
 
+### Diagram engine (`components/diagram`; 0.41.0)
+
+One renderer slot and one canvas render every Mermaid and Graphviz diagram — the fences in `Viewer` (`MermaidBlock`, `GraphvizBlock`), their popout, and whatever a host renders itself. `DiagramViewer` from `@plannotator/ui/components/diagram` takes `kind`, `source`, `theme` (`{ colorTheme, mode }`), `comments: DiagramComment[]` and `onCreateComment(anchor, text, additionalTargets)`; pass `onSave(source) => Promise<{ status: 'ok' } | { status: 'stale', currentSource }>` to get the Source pane (left of the canvas on desktop, under it on the phone; `readOnlySource` shows it without Save), and `sourceOpen` to toggle it. Zoom, pan and fit are the canvas's (wheel, drag, `+` `-` `0`, arrow keys); a click opens the composer at the part beneath while a drag pans (4 px threshold, 10 px for a finger), nothing highlights on a plain mouse-over (the ring under the pointer needs the platform modifier held), every edge carries an invisible 14 px hit path in one top layer and a click is resolved by priority over everything under the pointer (node, then edge, then cluster; an edge label is its edge), a click on no part comments on the whole diagram (kind `diagram`), sequence diagrams are addressable (actors, messages, notes, frames), a saved comment paints a ring and a numbered badge from the array order, and every comment re-resolves against each render through the engine's finder (id, then label, then unanchored — reported through `onUnanchoredChange`). The anchor is `DiagramAnchor` from `@plannotator/core/diagram-anchor` (`{ v: 1, family, kind, id | from + to, label, sourceLine }`, document lines), and Plannotator stores it as `Annotation.diagramAnchor`. Runtime slots: `utils/mermaid` (as before) and `utils/graphviz` (new, same shape, `@viz-js/viz` pinned `3.30.0`), each lazy on first use or filled by the host. `DiagramPopout` is the full-size viewer in the `PopoutDialog` chrome. See HANDOFF.md § "Diagram engine (0.41.0)" for every export, the adapter, the sanitizer and the migration notes.
+
 ### WebMCP provider (`@plannotator/ui/webmcp`; 0.32.0)
 
 The engine that lets a browser-integrated agent (Chrome/Edge WebMCP, `document.modelContext`) call in-page tools on a document surface. Feature-detected once; a browser without the API sees no registration, no DOM, no network, no timers. Seam: `configurePlannotatorUI({ webmcp: { enabled, namePrefix } })`, default enabled with the `plannotator.` prefix; pass `enabled: false` to keep a host page tool-free, or your own prefix to namespace the tools beside your own. There is deliberately no confirmation seam: the catalog is read-and-comment only (no approve / submit / close tools), and the agent may only edit or remove comments stamped `source: "browser-agent"`.
@@ -251,7 +255,7 @@ npm install @plannotator/ui @plannotator/core
 - `@plannotator/core` — pure utils + types, zero deps, browser-safe (CI enforces no `node:` imports). Published.
 - `@plannotator/ui` — React components/hooks + theme + `configure()`. Depends on an exact published `@plannotator/core` version. Published.
 - `@plannotator/shared`, `@plannotator/ai` — stay private to the monorepo; `shared` re-exports `core`'s modules via shims so Plannotator's internals are untouched.
-- Currently `@plannotator/ui` 0.39.0 depends exactly on `@plannotator/core` 0.25.2. `core` is bumped only when something under `packages/core` changes, so `ui` can advance alone. Keep the published core version exact in `packages/ui/package.json`; do not use a `workspace:` protocol there, because a directly published manifest must remain installable outside this monorepo. Bun still links the matching local workspace during development. When both packages change, publish `core` first, then build and publish the UI tarball. See HANDOFF.md "Publishing & versioning" for the verification command.
+- Currently `@plannotator/ui` 0.41.0 depends exactly on `@plannotator/core` 0.25.4. `core` is bumped only when something under `packages/core` changes, so `ui` can advance alone. Keep the published core version exact in `packages/ui/package.json`; do not use a `workspace:` protocol there, because a directly published manifest must remain installable outside this monorepo. Bun still links the matching local workspace during development. When both packages change, publish `core` first, then build and publish the UI tarball. See HANDOFF.md "Publishing & versioning" for the verification command.
 
 ## The one rule
 
diff --git a/packages/ui/components/DiagramBlock.anchor.test.tsx b/packages/ui/components/DiagramBlock.anchor.test.tsx
new file mode 100644
index 000000000..547839481
--- /dev/null
+++ b/packages/ui/components/DiagramBlock.anchor.test.tsx
@@ -0,0 +1,325 @@
+/**
+ * The bridge between a comment composed on a diagram part and an annotation
+ * on the document: a mermaid fence parsed from real markdown (so the fence's
+ * `startLine` is the parser's own), the captured Chromium svg through the
+ * host runtime slot, Chromium's geometry for the parts.
+ *
+ * What regresses if these fail:
+ * - the annotation the block mints does not carry `diagramAnchor`, the
+ *   fence's `blockId`, the label as `originalText`, or a `sourceLine` that
+ *   names the DOCUMENT line (the fence offset lost, so the export and an
+ *   agent's grep land on the wrong line);
+ * - a stored annotation with a diagram anchor does not restore onto its
+ *   node after a reload, or one whose part is gone is not reported through
+ *   `onRestoreReport` (so the panel never shows the "Unanchored" chip);
+ * - the popout does not open the same viewer at full size, or Escape on the
+ *   canvas closes it while a draft is open;
+ * - read-only (an archive) still opens a composer.
+ *
+ * DOM-gated (DOM_TESTS=1).
+ */
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import type { AnnotationRestoreReport } from '../hooks/useAnnotationHighlighter';
+import { installInertDiagramSvgParser } from '../test-setup/diagramSvg';
+import { AnnotationType, type Annotation, type Block } from '../types';
+import { __setMermaidRuntimeLoaderForTests, setMermaidRuntime } from '../utils/mermaid';
+import { parseMarkdownToBlocks } from '../utils/parser';
+import { DiagramAnchorClaims, DiagramAnchorClaimsContext } from './diagram/anchorClaims';
+import { MermaidBlock } from './MermaidBlock';
+
+const hasDom = typeof document !== 'undefined';
+const FIXTURES = join(import.meta.dir, '..', 'test-setup', 'fixtures', 'diagrams');
+const CAPTURE_ID = 'diagram-fixture';
+const SVG = readFileSync(join(FIXTURES, '06-flowchart-review-decision.svg'), 'utf8');
+const GEOMETRY = JSON.parse(readFileSync(join(FIXTURES, '06-flowchart-review-decision.geometry.json'), 'utf8')) as {
+  elements: Record<string, { bbox: { x: number; y: number; width: number; height: number }; ctm: DOMMatrix }>;
+};
+const CAPTURED = Object.entries(GEOMETRY.elements).map(([id, entry]) => [id.slice(CAPTURE_ID.length), entry] as const);
+
+const MARKDOWN = [
+  '# Plan',
+  '',
+  'Some prose before the diagram.',
+  '',
+  '```mermaid',
+  'flowchart LR',
+  '  U([Reviewer]) --> D{Approve?}',
+  '  D -->|Yes| M[(Merge)]',
+  '  D -->|No| R[Revise]',
+  '```',
+  '',
+  'Some prose after.',
+].join('\n');
+/** `D` is declared on line 7 of the document (1-based). */
+const D_DOCUMENT_LINE = 7;
+
+let root: Root | null = null;
+let host: HTMLElement | null = null;
+let restoreParser: (() => void) | null = null;
+// happy-dom defines the two geometry methods on SVGGraphicsElement, which
+// would shadow a stub on SVGElement; install where the engine defines them.
+const svgProto = (hasDom ? ((globalThis as { SVGGraphicsElement?: typeof SVGElement }).SVGGraphicsElement ?? SVGElement).prototype : {}) as unknown as Record<string, unknown>;
+const elementProto = (hasDom ? Element.prototype : {}) as unknown as Record<string, unknown>;
+const saved = { getBBox: svgProto['getBBox'], getScreenCTM: svgProto['getScreenCTM'] };
+const noop = (): void => {};
+
+beforeAll(() => {
+  if (!hasDom) return;
+  restoreParser = installInertDiagramSvgParser();
+  setMermaidRuntime(
+    { initialize: noop, render: (id: string) => Promise.resolve({ svg: SVG.replaceAll(CAPTURE_ID, id) }) } as unknown as Parameters<typeof setMermaidRuntime>[0],
+    'host',
+  );
+  elementProto['setPointerCapture'] ??= noop;
+  elementProto['releasePointerCapture'] ??= noop;
+  elementProto['hasPointerCapture'] ??= () => false;
+  svgProto['getBBox'] = function (this: Element) {
+    if (this.tagName.toLowerCase() === 'svg') return { x: 0, y: 0, width: 452, height: 182 };
+    const found = CAPTURED.find(([suffix]) => this.id.endsWith(suffix));
+    if (found === undefined) throw new Error(`no captured geometry for ${this.id}`);
+    return { ...found[1].bbox };
+  };
+  svgProto['getScreenCTM'] = function (this: Element) {
+    if (this.tagName.toLowerCase() === 'svg') return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+    return CAPTURED.find(([suffix]) => this.id.endsWith(suffix))?.[1].ctm ?? null;
+  };
+});
+
+afterAll(() => {
+  if (!hasDom) return;
+  svgProto['getBBox'] = saved.getBBox;
+  svgProto['getScreenCTM'] = saved.getScreenCTM;
+  __setMermaidRuntimeLoaderForTests(undefined);
+  restoreParser?.();
+});
+
+afterEach(async () => {
+  if (root !== null) {
+    const finished = root;
+    await act(async () => {
+      finished.unmount();
+    });
+    root = null;
+  }
+  host?.remove();
+  host = null;
+});
+
+function fence(): Block {
+  const block = parseMarkdownToBlocks(MARKDOWN).find((b) => b.type === 'code');
+  if (block === undefined) throw new Error('no fence');
+  return block;
+}
+
+async function mount(element: React.ReactElement): Promise<void> {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () => {
+    root!.render(element);
+  });
+}
+
+async function settle(ms = 25): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+async function waitFor(check: () => void, tries = 40): Promise<void> {
+  let lastError: unknown;
+  for (let i = 0; i < tries; i += 1) {
+    try {
+      check();
+      return;
+    } catch (error) {
+      lastError = error;
+      await settle();
+    }
+  }
+  throw lastError;
+}
+
+function pointer(type: string, target: Element): void {
+  const Ctor = (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+  target.dispatchEvent(
+    new Ctor(type, { bubbles: true, cancelable: true, clientX: 10, clientY: 10, button: 0, ...(Ctor !== MouseEvent ? { pointerId: 1 } : {}) } as MouseEventInit),
+  );
+}
+
+async function clickNodeD(scope: ParentNode): Promise<void> {
+  const node = scope.querySelector('[id$="-flowchart-D-1"]');
+  if (node === null) throw new Error('no node D');
+  await act(async () => {
+    pointer('pointerdown', node);
+    pointer('pointerup', node);
+  });
+}
+
+async function typeAndSubmit(scope: ParentNode, text: string): Promise<void> {
+  const textarea = scope.querySelector<HTMLTextAreaElement>('[data-diagram-composer] textarea');
+  if (textarea === null) throw new Error('no composer');
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, text);
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+  });
+}
+
+describe.if(hasDom)('DiagramBlock: comments become annotations on the document', () => {
+  test('a comment on node D is an annotation on the fence with the anchor and the document line', async () => {
+    const block = fence();
+    expect(block.startLine).toBe(5);
+    const added: Annotation[] = [];
+    await mount(<MermaidBlock block={block} annotations={[]} onAddAnnotation={(ann) => added.push(ann)} />);
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await clickNodeD(host!);
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    expect(host!.querySelector('[data-diagram-composer]')!.textContent).toContain(`line ${D_DOCUMENT_LINE}`);
+    await typeAndSubmit(host!, 'Rename this step');
+    await waitFor(() => expect(added).toHaveLength(1));
+    const ann = added[0]!;
+    expect(ann.blockId).toBe(block.id);
+    expect(ann.type).toBe(AnnotationType.COMMENT);
+    expect(ann.text).toBe('Rename this step');
+    expect(ann.originalText).toBe('Approve?');
+    expect(ann.diagramAnchor).toEqual({ v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [D_DOCUMENT_LINE, D_DOCUMENT_LINE] });
+    expect(ann.startMeta).toBeUndefined();
+  });
+
+  test('stored annotations restore onto their nodes after a reload, and the gone ones are reported unanchored', async () => {
+    const block = fence();
+    const reports: AnnotationRestoreReport[] = [];
+    const restored: Annotation = {
+      id: 'a1',
+      blockId: block.id,
+      startOffset: 0,
+      endOffset: 0,
+      type: AnnotationType.COMMENT,
+      text: 'kept',
+      originalText: 'Approve?',
+      createdA: 1,
+      diagramAnchor: { v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [7, 7] },
+    };
+    const gone: Annotation = {
+      ...restored,
+      id: 'a2',
+      originalText: 'Nowhere',
+      diagramAnchor: { v: 1, family: 'flowchart', kind: 'node', id: 'Gone', label: 'Nowhere', sourceLine: null },
+    };
+    const other: Annotation = { ...restored, id: 'a3', blockId: 'block-other' };
+    // Viewer tells the blocks which diagram blocks the document has, so a
+    // comment that names ANOTHER diagram is left to that diagram.
+    await mount(
+      <DiagramAnchorClaimsContext.Provider value={new DiagramAnchorClaims([block.id, 'block-other'])}>
+        <MermaidBlock block={block} annotations={[restored, gone, other]} onRestoreReport={(r) => reports.push(r)} />
+      </DiagramAnchorClaimsContext.Provider>,
+    );
+    await waitFor(() => expect(host!.querySelector('[data-diagram-badge="a1"]')).not.toBeNull());
+    expect(host!.querySelector('[data-diagram-badge="a2"]')).toBeNull();
+    // Another fence's comment is not this block's.
+    expect(host!.querySelector('[data-diagram-badge="a3"]')).toBeNull();
+    await waitFor(() => expect(reports.length).toBeGreaterThan(0));
+    const last = reports[reports.length - 1]!;
+    expect([...last.attempted].sort()).toEqual(['a1', 'a2']);
+    expect(last.unanchored).toEqual(['a2']);
+  });
+
+  test('read-only opens no composer', async () => {
+    const block = fence();
+    const added: Annotation[] = [];
+    await mount(<MermaidBlock block={block} annotations={[]} onAddAnnotation={(ann) => added.push(ann)} readOnly />);
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await clickNodeD(host!);
+    await settle();
+    expect(host!.querySelector('[data-diagram-composer]')).toBeNull();
+    expect(added).toEqual([]);
+  });
+
+  test('the popout is the same viewer at full size; a comment made there lands on the document; Escape walks the draft before the dialog', async () => {
+    const block = fence();
+    const added: Annotation[] = [];
+    await mount(<MermaidBlock block={block} annotations={[]} onAddAnnotation={(ann) => added.push(ann)} />);
+    await waitFor(() => expect(host!.querySelector('[data-diagram-expand]')).not.toBeNull());
+    await act(async () => {
+      host!.querySelector<HTMLButtonElement>('[data-diagram-expand]')!.click();
+    });
+    await waitFor(() => expect(document.querySelector('[data-diagram-popout]')).not.toBeNull());
+    const popout = document.querySelector('[data-diagram-popout]')!;
+    await waitFor(() => expect(popout.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    // Two viewers over one fence carry two render ids.
+    expect(popout.querySelector('[id$="-flowchart-D-1"]')!.id).not.toBe(host!.querySelector('[id$="-flowchart-D-1"]')!.id);
+    await clickNodeD(popout);
+    await waitFor(() => expect(popout.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await act(async () => {
+      popout.querySelector('[data-diagram-composer] textarea')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(popout.querySelector('[data-diagram-composer]')).toBeNull());
+    expect(document.querySelector('[data-diagram-popout]')).not.toBeNull();
+    await clickNodeD(popout);
+    await waitFor(() => expect(popout.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await typeAndSubmit(popout, 'from the popout');
+    await waitFor(() => expect(added).toHaveLength(1));
+    expect(added[0]!.blockId).toBe(block.id);
+    expect(added[0]!.diagramAnchor?.id).toBe('D');
+  });
+});
+
+describe.if(hasDom)('DiagramBlock: comments that name no diagram block', () => {
+  const external = (id: string, anchorId: string, label: string): Annotation => ({
+    id,
+    blockId: 'external',
+    startOffset: 0,
+    endOffset: 0,
+    type: AnnotationType.COMMENT,
+    text: 'from a tool',
+    originalText: label,
+    createdA: 1,
+    source: 'review-bot',
+    diagramAnchor: { v: 1, family: 'flowchart', kind: 'node', id: anchorId, label, sourceLine: null },
+  });
+
+  test('an externally posted diagram comment is shown by the first diagram that resolves it; one nobody resolves is unanchored', async () => {
+    // What regresses: `blockId: "external"` matches no block, so the comment
+    // is shown by no diagram and is never reported unanchored either.
+    const first = fence();
+    const second: Block = { ...first, id: 'block-second' };
+    const reports: AnnotationRestoreReport[] = [];
+    const annotations = [external('e1', 'D', 'Approve?'), external('e2', 'Nowhere', 'Nothing has this label')];
+    await mount(
+      <DiagramAnchorClaimsContext.Provider value={new DiagramAnchorClaims([first.id, second.id])}>
+        <div id="first"><MermaidBlock block={first} annotations={annotations} onRestoreReport={(r) => reports.push(r)} /></div>
+        <div id="second"><MermaidBlock block={second} annotations={annotations} onRestoreReport={(r) => reports.push(r)} /></div>
+      </DiagramAnchorClaimsContext.Provider>,
+    );
+    await waitFor(() => expect(host!.querySelector('#first [data-diagram-badge="e1"]')).not.toBeNull());
+    // Both diagrams could resolve node D; only the first in document order shows it.
+    await waitFor(() => expect(host!.querySelector('#second [data-diagram-badge="e1"]')).toBeNull());
+    expect(host!.querySelector('[data-diagram-badge="e2"]')).toBeNull();
+    await waitFor(() => {
+      const unanchored = new Set<string>();
+      for (const report of reports) {
+        for (const id of report.attempted) unanchored.delete(id);
+        for (const id of report.unanchored) unanchored.add(id);
+      }
+      expect([...unanchored]).toEqual(['e2']);
+    });
+  });
+
+  test('the diagram is closed to the document\'s text highlighter, and only the popout takes every touch drag', async () => {
+    const block = fence();
+    await mount(<MermaidBlock block={block} annotations={[]} onAddAnnotation={noop} />);
+    await waitFor(() => expect(host!.querySelector('[data-diagram-expand]')).not.toBeNull());
+    expect(host!.querySelector('[data-diagram-block]')!.classList.contains('annotation-exclude')).toBe(true);
+    expect(host!.querySelector('[data-diagram-canvas]')!.classList.contains('touch-none')).toBe(false);
+    await act(async () => {
+      host!.querySelector<HTMLButtonElement>('[data-diagram-expand]')!.click();
+    });
+    await waitFor(() => expect(document.querySelector('[data-diagram-popout] [data-diagram-canvas]')).not.toBeNull());
+    expect(document.querySelector('[data-diagram-popout] [data-diagram-canvas]')!.classList.contains('touch-none')).toBe(true);
+  });
+});
diff --git a/packages/ui/components/DiagramBlock.lazyRetry.test.tsx b/packages/ui/components/DiagramBlock.lazyRetry.test.tsx
index a616f6f83..f3d171d0f 100644
--- a/packages/ui/components/DiagramBlock.lazyRetry.test.tsx
+++ b/packages/ui/components/DiagramBlock.lazyRetry.test.tsx
@@ -16,12 +16,21 @@
  *
  * DOM-gated (DOM_TESTS=1).
  */
-import { afterEach, describe, expect, test } from 'bun:test';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
 import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import type { Block } from '../types';
+import { installInertDiagramSvgParser } from '../test-setup/diagramSvg';
 import { MermaidBlock, __setMermaidRuntimeLoaderForTests } from './MermaidBlock';
 import { GraphvizBlock, __setVizLoaderForTests } from './GraphvizBlock';
+
+// happy-dom cannot host DOMPurify: the render slot's parse step is the inert
+// template parse for these tests (the scrub still runs).
+let restoreParser: (() => void) | null = null;
+beforeAll(() => {
+  if (hasDom) restoreParser = installInertDiagramSvgParser();
+});
+afterAll(() => restoreParser?.());
 import {
   getMathRenderer,
   getMathRendererSource,
@@ -39,7 +48,10 @@ const mermaidBlock: Block = { id: 'm1', type: 'code', language: 'mermaid', conte
 const dotBlock: Block = { id: 'g1', type: 'code', language: 'dot', content: 'digraph { A -> B }', order: 0, startLine: 1 };
 
 const fakeMermaid = { initialize() {}, render: async () => ({ svg: SVG }) } as never;
-const fakeViz = { renderString: async () => SVG } as never;
+// The renderer slot drives the engine through `render()` (a value with the
+// status and the errors, never a throw for a bad graph), so the stand-in
+// answers that shape.
+const fakeViz = { render: () => ({ status: 'success', output: SVG, errors: [] }) } as never;
 
 let root: Root | null = null;
 let host: HTMLElement | null = null;
@@ -214,7 +226,7 @@ describe.each(cases)('$name lazy runtime', ({ install, runtime, element, source,
   });
 
   test.skipIf(!hasDom)('a diagram syntax error keeps the existing panel without a Retry button', async () => {
-    const broken = { initialize() {}, render: async () => { throw new Error('Parse error'); }, renderString: async () => { throw new Error('Parse error'); } } as never;
+    const broken = { initialize() {}, render: () => { throw new Error('Parse error'); } } as never;
     let calls = 0;
     install(() => { calls += 1; return Promise.resolve(broken); });
     const el = await mount(element);
diff --git a/packages/ui/components/DiagramBlock.tsx b/packages/ui/components/DiagramBlock.tsx
new file mode 100644
index 000000000..d08561525
--- /dev/null
+++ b/packages/ui/components/DiagramBlock.tsx
@@ -0,0 +1,376 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { diagramTargetText, type DiagramKind } from '@plannotator/core/diagram-anchor';
+import type { AnnotationRestoreReport } from '../hooks/useAnnotationHighlighter';
+import { AnnotationType, type Annotation, type Block } from '../types';
+import type { DiagramTheme } from '../utils/diagram-render';
+import { getIdentity } from '../utils/identity';
+import { createRuntimeRetryEpoch } from '../utils/runtimeRetry';
+import { DiagramAnchorClaims, DiagramAnchorClaimsContext } from './diagram/anchorClaims';
+import { svgContentSize } from './diagram/DiagramCanvas';
+import { DiagramPopout } from './diagram/DiagramPopout';
+import { DiagramViewer } from './diagram/DiagramViewer';
+import type { DiagramComment, DiagramCreateComment } from './diagram/useDiagramComments';
+import type { DiagramRenderState } from './diagram/useDiagramRender';
+import { useTheme } from './ThemeProvider';
+
+/**
+ * A diagram fence in the document: the fence's language picks the engine
+ * (`MermaidBlock`, `GraphvizBlock`), and everything else is one code path
+ * through the renderer slot and `DiagramViewer` — the canvas with zoom, pan
+ * and fit, the comment overlay, and the same viewer at full size in the
+ * popout. What this block owns is the document side: the source fence under
+ * a status until the first render lands (never the error panel as a
+ * placeholder), the error panel with the source and a Retry for a failed
+ * engine load, the "Show source" toggle, and the bridge between a comment
+ * composed on a part and an `Annotation` on the document (`diagramAnchor`
+ * plus the fence's document lines), so it lists in the rail beside text
+ * comments, exports, drafts and restores after a reload.
+ */
+
+/** One Retry re-attempts every block whose engine import failed (see utils/runtimeRetry). */
+const RETRY_EPOCHS: Record<DiagramKind, ReturnType<typeof createRuntimeRetryEpoch>> = {
+  mermaid: createRuntimeRetryEpoch(),
+  graphviz: createRuntimeRetryEpoch(),
+};
+
+const LABELS: Record<DiagramKind, string> = { mermaid: 'Mermaid', graphviz: 'Graphviz' };
+
+/** The inline box height from the diagram's aspect at a nominal width, so
+ * a wide flowchart is not letterboxed in a tall box and a tall state
+ * diagram is not squeezed into a short one; clamped so neither extreme
+ * takes the page. The canvas fits the diagram inside whatever it gets. */
+const NOMINAL_WIDTH_PX = 800;
+const MIN_HEIGHT_PX = 16 * 16;
+const MAX_HEIGHT_PX = 36 * 16;
+
+function inlineHeight(state: DiagramRenderState | null): string {
+  const size = state?.svgNode ? svgContentSize(state.svgNode) : null;
+  if (size === null) return 'min(65vh, 24rem)';
+  const px = Math.round(size.height * (NOMINAL_WIDTH_PX / size.width)) + 48;
+  return `min(65vh, ${Math.min(MAX_HEIGHT_PX, Math.max(MIN_HEIGHT_PX, px))}px)`;
+}
+
+function newAnnotationId(): string {
+  const c = globalThis.crypto;
+  if (c && typeof c.randomUUID === 'function') return c.randomUUID();
+  return `ann-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export interface DiagramBlockProps {
+  block: Block;
+  /** The document's annotations; the block keeps the ones anchored on this
+   * fence (`diagramAnchor` + its `blockId`). */
+  annotations?: readonly Annotation[];
+  selectedAnnotationId?: string | null;
+  onSelectAnnotation?: (id: string | null) => void;
+  /** A comment composed on a part becomes an annotation on the document. */
+  onAddAnnotation?: (annotation: Annotation) => void;
+  readOnly?: boolean;
+  /** The block's restore verdict after every render: its own comments as
+   * `attempted`, the ones whose part is gone as `unanchored`, so the host's
+   * panel shows the same "Unanchored" chip a text comment gets. */
+  onRestoreReport?: (report: AnnotationRestoreReport) => void;
+}
+
+const NO_ANNOTATIONS: readonly Annotation[] = [];
+
+export const DiagramBlock: React.FC<DiagramBlockProps & { kind: DiagramKind }> = ({
+  kind,
+  block,
+  annotations = NO_ANNOTATIONS,
+  selectedAnnotationId = null,
+  onSelectAnnotation,
+  onAddAnnotation,
+  readOnly = false,
+  onRestoreReport,
+}) => {
+  const label = LABELS[kind];
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [showSource, setShowSource] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [retryToken, setRetryToken] = useState(0);
+  const [renderState, setRenderState] = useState<DiagramRenderState | null>(null);
+
+  // The (palette, mode) the diagram must follow: the same resolution the
+  // code fences use (see useFenceTheme). Outside a ThemeProvider the default
+  // context yields the Plannotator dark pair, and with no theme tokens on the
+  // document the renderer keeps the static config, so a host without the
+  // provider renders exactly as before. A key change re-runs the render,
+  // which is what re-themes an already rendered diagram.
+  const { colorTheme, resolvedMode } = useTheme();
+  const theme = useMemo<DiagramTheme>(
+    () => ({ colorTheme, mode: resolvedMode === 'light' ? 'light' : 'dark' }),
+    [colorTheme, resolvedMode],
+  );
+
+  // A sibling's Retry re-attempts this block too, but only while its own
+  // failure was the shared engine import; a healthy block or a diagram
+  // syntax error is left alone.
+  const runtimeUnavailableRef = useRef(false);
+  runtimeUnavailableRef.current = renderState?.error?.runtimeUnavailable ?? false;
+  useEffect(
+    () =>
+      RETRY_EPOCHS[kind].subscribe(() => {
+        if (!runtimeUnavailableRef.current) return;
+        setRetryToken((token) => token + 1);
+      }),
+    [kind],
+  );
+
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [block.content]);
+
+  // Comments that name no diagram block of the document (an external POST
+  // carries `blockId: "external"`; a deleted fence leaves a dead id) belong
+  // to whichever diagram resolves their anchor first: see anchorClaims.
+  const sharedClaims = useContext(DiagramAnchorClaimsContext);
+  const ownClaims = useMemo(() => new DiagramAnchorClaims([block.id]), [block.id]);
+  const claims = sharedClaims ?? ownClaims;
+  const claimsVersion = useSyncExternalStore(claims.subscribe, claims.getVersion, claims.getVersion);
+
+  const ownAnnotations = useMemo(
+    () => annotations.filter((ann) => ann.diagramAnchor !== undefined && ann.blockId === block.id),
+    [annotations, block.id],
+  );
+  const unownedAnnotations = useMemo(
+    () =>
+      annotations.filter(
+        (ann) =>
+          ann.diagramAnchor !== undefined &&
+          ann.blockId !== block.id &&
+          !claims.blockIds.includes(ann.blockId) &&
+          // A Graphviz anchor names a DOT part; it is never a Mermaid one.
+          (ann.diagramAnchor.family === 'graphviz') === (kind === 'graphviz'),
+      ),
+    [annotations, block.id, claims, kind],
+  );
+
+  // The comments on this fence, in document order (the badge numbers): its
+  // own, then the unowned ones it shows or is still trying.
+  const comments = useMemo<readonly DiagramComment[]>(() => {
+    void claimsVersion;
+    const tried = unownedAnnotations.filter((ann) => {
+      const owner = claims.owner(ann.id);
+      return owner === undefined || owner === block.id;
+    });
+    return [...ownAnnotations, ...tried].map((ann) => ({
+      id: ann.id,
+      anchor: ann.diagramAnchor!,
+      text: ann.text ?? '',
+      author: ann.author,
+    }));
+  }, [block.id, claims, claimsVersion, ownAnnotations, unownedAnnotations]);
+
+  const selectedCommentId = useMemo(
+    () => (selectedAnnotationId !== null && comments.some((c) => c.id === selectedAnnotationId) ? selectedAnnotationId : null),
+    [comments, selectedAnnotationId],
+  );
+  useEffect(() => {
+    if (selectedCommentId === null) return;
+    rootRef.current?.scrollIntoView?.({ block: 'nearest' });
+  }, [selectedCommentId]);
+
+  const handleCreate = useMemo<DiagramCreateComment | undefined>(() => {
+    if (readOnly || onAddAnnotation === undefined) return undefined;
+    return (anchor, text) => {
+      onAddAnnotation({
+        id: newAnnotationId(),
+        blockId: block.id,
+        startOffset: 0,
+        endOffset: 0,
+        type: AnnotationType.COMMENT,
+        text,
+        originalText: diagramTargetText(anchor),
+        createdA: Date.now(),
+        author: getIdentity(),
+        diagramAnchor: anchor,
+      });
+    };
+  }, [block.id, onAddAnnotation, readOnly]);
+
+  const [resolution, setResolution] = useState<ReadonlyMap<string, boolean> | null>(null);
+  const svgReady = renderState?.svgNode != null;
+  const renderFailed = renderState !== null && renderState.error !== null && !svgReady;
+
+  // This block's verdicts for the unowned comments. A diagram that failed
+  // to render resolves nothing, and must say so or the verdict stays
+  // pending forever.
+  useEffect(() => {
+    if (unownedAnnotations.length === 0) return;
+    const results = new Map<string, boolean>();
+    for (const ann of unownedAnnotations) {
+      if (renderFailed) results.set(ann.id, false);
+      else if (resolution?.has(ann.id)) results.set(ann.id, resolution.get(ann.id) === true);
+    }
+    if (results.size > 0) claims.report(block.id, results);
+  }, [block.id, claims, renderFailed, resolution, unownedAnnotations]);
+
+  // The restore verdict the panel's "Unanchored" chip runs on: this block's
+  // own comments, the unowned ones it shows, and (from the first diagram
+  // block only, so it is said once) the unowned ones nobody resolved.
+  useEffect(() => {
+    if (onRestoreReport === undefined || (resolution === null && !renderFailed)) return;
+    const attempted: string[] = [];
+    const unanchored: string[] = [];
+    for (const ann of ownAnnotations) {
+      attempted.push(ann.id);
+      if (renderFailed || resolution?.get(ann.id) === false) unanchored.push(ann.id);
+    }
+    for (const ann of unownedAnnotations) {
+      const owner = claims.owner(ann.id);
+      if (owner === block.id) attempted.push(ann.id);
+      else if (owner === null && claims.blockIds[0] === block.id) {
+        attempted.push(ann.id);
+        unanchored.push(ann.id);
+      }
+    }
+    if (attempted.length > 0) onRestoreReport({ attempted, unanchored });
+  }, [block.id, claims, claimsVersion, onRestoreReport, ownAnnotations, renderFailed, resolution, unownedAnnotations]);
+
+  const renderFallback = useCallback(
+    (state: DiagramRenderState) => {
+      if (state.error !== null) {
+        return (
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 overflow-hidden">
+            <div className="px-3 py-2 bg-destructive/10 border-b border-destructive/20 flex items-center gap-2">
+              <svg className="w-4 h-4 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <span className="text-xs text-destructive font-medium">{label} Error</span>
+              {state.error.runtimeUnavailable && (
+                <button
+                  type="button"
+                  onClick={() => RETRY_EPOCHS[kind].bump()}
+                  className="ml-auto rounded-md border border-destructive/30 px-2 py-0.5 text-xs text-destructive hover:bg-destructive/10"
+                  title="Retry loading the diagram renderer"
+                >
+                  Retry
+                </button>
+              )}
+            </div>
+            <pre className="p-3 text-xs text-destructive/80 overflow-x-auto">{state.error.message}</pre>
+            <pre className="p-3 text-xs text-muted-foreground bg-muted/30 border-t border-border/30 overflow-x-auto">
+              <code>{block.content}</code>
+            </pre>
+          </div>
+        );
+      }
+      // First render still in flight (the engine import on the lazy path,
+      // then the render itself): the source stays readable under a quiet
+      // status line. A re-render for a theme change keeps the previous SVG,
+      // so this shows only before the first diagram lands.
+      return (
+        <>
+          <div
+            role="status"
+            aria-live="polite"
+            data-diagram-pending=""
+            {...(kind === 'mermaid' ? { 'data-mermaid-pending': '' } : {})}
+            className="mb-1.5 flex items-center gap-1.5 text-xs text-muted-foreground"
+          >
+            <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground/70" aria-hidden="true" />
+            Rendering diagram…
+          </div>
+          <InlineSource block={block} kind={kind} />
+        </>
+      );
+    },
+    [block, kind, label],
+  );
+
+  const viewerProps = {
+    kind,
+    source: block.content,
+    theme,
+    comments,
+    onCreateComment: handleCreate,
+    selectedCommentId,
+    onSelectComment: onSelectAnnotation,
+    sourceLineOffset: block.startLine,
+    retryToken,
+  };
+
+  return (
+    <>
+      {/* `annotation-exclude`: the text highlighter never enters a diagram,
+          so a text restore (a reply that lost its anchor, a quote that also
+          appears in a node label) can never wrap a <mark> inside the svg. */}
+      <div ref={rootRef} className="annotation-exclude my-5 group relative" data-block-id={block.id} data-pinpoint-ignore="" data-diagram-block={kind}>
+        {svgReady && !showSource && (
+          <div data-print-hide="" className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
+            <button
+              type="button"
+              onClick={() => setShowSource(true)}
+              className="p-1.5 rounded-md bg-muted/85 hover:bg-muted text-muted-foreground hover:text-foreground"
+              title="Show source"
+              aria-label="Show source"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsExpanded(true)}
+              className="p-1.5 rounded-md bg-muted/85 hover:bg-muted text-muted-foreground hover:text-foreground"
+              title="Expand diagram"
+              aria-label="Expand diagram"
+              data-diagram-expand=""
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
+              </svg>
+            </button>
+          </div>
+        )}
+        {showSource ? (
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setShowSource(false)}
+              className="absolute top-2 right-2 z-10 p-1.5 rounded-md bg-muted/85 hover:bg-muted text-muted-foreground hover:text-foreground"
+              title="Show diagram"
+              aria-label="Show diagram"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            </button>
+            <InlineSource block={block} kind={kind} />
+          </div>
+        ) : (
+          <div
+            data-diagram-inline=""
+            className={svgReady ? 'rounded-xl bg-muted/30 border border-border/30 overflow-hidden' : undefined}
+            style={svgReady ? { height: inlineHeight(renderState) } : undefined}
+          >
+            <DiagramViewer
+              {...viewerProps}
+              renderId={`${kind}-${block.id}`}
+              onResolutionChange={setResolution}
+              onRenderState={setRenderState}
+              renderFallback={renderFallback}
+            />
+          </div>
+        )}
+      </div>
+      {isExpanded && svgReady && typeof document !== 'undefined' && (
+        <DiagramPopout
+          {...viewerProps}
+          open
+          onClose={() => setIsExpanded(false)}
+          title={`${label} diagram`}
+          renderId={`${kind}-${block.id}-popout`}
+          dataAttributes={{ 'data-block-id': block.id }}
+        />
+      )}
+    </>
+  );
+};
+
+const InlineSource: React.FC<{ block: Block; kind: DiagramKind }> = ({ block, kind }) => (
+  <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30 p-4">
+    <code className={`pn-code font-mono language-${block.language?.trim().split(/\s+/, 1)[0] ?? kind}`}>{block.content}</code>
+  </pre>
+);
diff --git a/packages/ui/components/GraphvizBlock.tsx b/packages/ui/components/GraphvizBlock.tsx
index 7d0044f42..e905d8a6c 100644
--- a/packages/ui/components/GraphvizBlock.tsx
+++ b/packages/ui/components/GraphvizBlock.tsx
@@ -1,601 +1,26 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import type { Viz } from '@viz-js/viz';
-import type { Block } from '../types';
-import { createRuntimeRetryEpoch } from '../utils/runtimeRetry';
+import React from 'react';
+import { __setGraphvizRuntimeLoaderForTests } from '../utils/graphviz';
+import { DiagramBlock, type DiagramBlockProps } from './DiagramBlock';
 
-interface ViewBox {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-const ZOOM_STEP = 0.25;
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 8;
-
-/**
- * The Graphviz engine (about 1.2 MB of Emscripten JS) is imported inside the
- * render effect, not statically, so a host that bundles by route only fetches
- * it when a dot fence is on the page. WASM instantiation was already deferred
- * to first render; in Plannotator's single-file builds the import is inlined
- * and resolves in a microtask ahead of a render that was already asynchronous.
- */
-const loadVizInstance = (): Promise<Viz> => import('@viz-js/viz').then((m) => m.instance());
-
-let vizLoader = loadVizInstance;
-let vizInstancePromise: Promise<Viz> | null = null;
+/** Test hook: stand in for the engine import and shorten the retry delay
+ * (the slot's, re-exported under the name the lazy-retry test uses). */
+export const __setVizLoaderForTests = __setGraphvizRuntimeLoaderForTests;
 
 /**
- * Delay before the one automatic re-attempt after a failed engine import.
- * Only chunking hosts can fail here (a single-file build never fetches).
+ * A dot fence. The engine comes from the slot in `utils/graphviz` (lazy on
+ * the first dot fence); the canvas, the comment overlay and the popout are
+ * `DiagramBlock`'s, one code path with `MermaidBlock`.
  */
-let runtimeRetryDelayMs = 750;
-
-/**
- * Memoized engine. A rejected load is dropped from the memo so the next call
- * (the automatic re-attempt, a later mount, or the Retry button) issues a
- * fresh import() instead of replaying the cached rejection.
- */
-function getVizInstance(): Promise<Viz> {
-  if (!vizInstancePromise) {
-    const attempt = vizLoader().catch((err: unknown) => {
-      if (vizInstancePromise === attempt) vizInstancePromise = null;
-      throw err;
-    });
-    vizInstancePromise = attempt;
-  }
-  return vizInstancePromise;
-}
-
-/** Test hook: stand in for the engine import and shorten the retry delay. */
-export function __setVizLoaderForTests(
-  loader: (() => Promise<Viz>) | undefined,
-  options?: { retryDelayMs?: number },
-): void {
-  vizLoader = loader ?? loadVizInstance;
-  vizInstancePromise = null;
-  runtimeRetryDelayMs = options?.retryDelayMs ?? 750;
-}
-
-const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
-
-/** One Retry re-attempts every block whose engine import failed (see utils/runtimeRetry). */
-const vizRetryEpoch = createRuntimeRetryEpoch();
-
-function parseViewBox(svgEl: SVGSVGElement): ViewBox | null {
-  const raw = svgEl.getAttribute('viewBox');
-  if (!raw) return null;
-
-  const values = raw
-    .trim()
-    .split(/[\s,]+/)
-    .map((value) => Number.parseFloat(value));
-
-  if (values.length !== 4 || values.some((value) => Number.isNaN(value))) {
-    return null;
-  }
-
-  const [x, y, width, height] = values;
-  if (width <= 0 || height <= 0) return null;
-  return { x, y, width, height };
-}
-
-function parseViewBoxFromMarkup(markup: string): ViewBox | null {
-  const viewBoxMatch = markup.match(/viewBox\s*=\s*"([^"]+)"/i);
-  if (viewBoxMatch?.[1]) {
-    const values = viewBoxMatch[1]
-      .trim()
-      .split(/[\s,]+/)
-      .map((value) => Number.parseFloat(value));
-
-    if (values.length === 4 && values.every((value) => Number.isFinite(value))) {
-      const [x, y, width, height] = values;
-      if (width > 0 && height > 0) {
-        return { x, y, width, height };
-      }
-    }
-  }
-
-  const widthMatch = markup.match(/\bwidth\s*=\s*"([0-9.]+)(?:px|pt)?"/i);
-  const heightMatch = markup.match(/\bheight\s*=\s*"([0-9.]+)(?:px|pt)?"/i);
-  const width = widthMatch?.[1] ? Number.parseFloat(widthMatch[1]) : NaN;
-  const height = heightMatch?.[1] ? Number.parseFloat(heightMatch[1]) : NaN;
-  if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
-    return { x: 0, y: 0, width, height };
-  }
-
-  return null;
-}
-
-function applyView(svgEl: SVGSVGElement, base: ViewBox, zoom: number, pan: { x: number; y: number }): void {
-  const zoomedWidth = base.width / zoom;
-  const zoomedHeight = base.height / zoom;
-  const centerX = base.x + base.width / 2;
-  const centerY = base.y + base.height / 2;
-  const vbX = centerX - zoomedWidth / 2 + pan.x;
-  const vbY = centerY - zoomedHeight / 2 + pan.y;
-  svgEl.setAttribute('viewBox', `${vbX} ${vbY} ${zoomedWidth} ${zoomedHeight}`);
-}
-
-function fitBoundsToContainer(bounds: ViewBox, containerRect: DOMRect): ViewBox {
-  const containerWidth = Math.max(containerRect.width, 1);
-  const containerHeight = Math.max(containerRect.height, 1);
-  const contentRatio = bounds.width / bounds.height;
-  const containerRatio = containerWidth / containerHeight;
-
-  if (contentRatio > containerRatio) {
-    const targetHeight = bounds.width / containerRatio;
-    const extra = (targetHeight - bounds.height) / 2;
-    return {
-      x: bounds.x,
-      y: bounds.y - extra,
-      width: bounds.width,
-      height: targetHeight,
-    };
-  }
-
-  const targetWidth = bounds.height * containerRatio;
-  const extra = (targetWidth - bounds.width) / 2;
-  return {
-    x: bounds.x - extra,
-    y: bounds.y,
-    width: targetWidth,
-    height: bounds.height,
-  };
-}
-
-export const GraphvizBlock: React.FC<{ block: Block }> = ({ block }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [svg, setSvg] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  // True when the failure was the engine import itself (a chunking host's
-  // fetch), which is the only failure a Retry can change; a dot syntax error
-  // keeps the panel exactly as it always was.
-  const [runtimeUnavailable, setRuntimeUnavailable] = useState(false);
-  const [retryToken, setRetryToken] = useState(0);
-  const [showSource, setShowSource] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
-  // A sibling's Retry re-attempts this block too, but only while its own
-  // failure was the shared engine import; a healthy block or a dot syntax
-  // error is left alone.
-  const runtimeUnavailableRef = useRef(runtimeUnavailable);
-  runtimeUnavailableRef.current = runtimeUnavailable;
-  useEffect(() => vizRetryEpoch.subscribe(() => {
-    if (!runtimeUnavailableRef.current) return;
-    setError(null);
-    setRetryToken((token) => token + 1);
-  }), []);
-
-  const zoomLevelRef = useRef(1);
-  const isDraggingRef = useRef(false);
-  const naturalBoundsRef = useRef<ViewBox | null>(null);
-  const baseViewBoxRef = useRef<ViewBox | null>(null);
-  const panOffsetRef = useRef({ x: 0, y: 0 });
-  const dragStartRef = useRef({ x: 0, y: 0 });
-  const panStartRef = useRef({ x: 0, y: 0 });
-
-  const zoomInBtnRef = useRef<HTMLButtonElement>(null);
-  const zoomOutBtnRef = useRef<HTMLButtonElement>(null);
-  const zoomDisplayRef = useRef<HTMLSpanElement>(null);
-
-  const updateZoom = useCallback((newZoom: number) => {
-    zoomLevelRef.current = newZoom;
-
-    if (containerRef.current && baseViewBoxRef.current) {
-      const svgEl = containerRef.current.querySelector('svg');
-      if (svgEl instanceof SVGSVGElement) {
-        applyView(svgEl, baseViewBoxRef.current, newZoom, panOffsetRef.current);
-      }
-    }
-
-    if (zoomInBtnRef.current) zoomInBtnRef.current.disabled = newZoom >= MAX_ZOOM;
-    if (zoomOutBtnRef.current) zoomOutBtnRef.current.disabled = newZoom <= MIN_ZOOM;
-    if (zoomDisplayRef.current) {
-      const show = Math.abs(newZoom - 1) > 0.001;
-      zoomDisplayRef.current.textContent = show ? `${Math.round(newZoom * 100)}%` : '';
-      zoomDisplayRef.current.hidden = !show;
-    }
-  }, []);
-
-  const fitToCurrentViewport = useCallback(() => {
-    if (!containerRef.current || !naturalBoundsRef.current) return;
-
-    const svgEl = containerRef.current.querySelector('svg');
-    if (!(svgEl instanceof SVGSVGElement)) return;
-
-    const fitted = fitBoundsToContainer(naturalBoundsRef.current, containerRef.current.getBoundingClientRect());
-    baseViewBoxRef.current = fitted;
-    panOffsetRef.current = { x: 0, y: 0 };
-    updateZoom(1);
-    applyView(svgEl, fitted, 1, { x: 0, y: 0 });
-  }, [updateZoom]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const renderDiagram = async () => {
-      let viz: Viz;
-      try {
-        try {
-          viz = await getVizInstance();
-        } catch {
-          // Transient chunk failure on a chunking host: one automatic
-          // re-attempt with a fresh import() after a short delay. In a
-          // single-file build the first await never rejects, so this branch
-          // is unreachable there and the success path is unchanged.
-          await wait(runtimeRetryDelayMs);
-          if (cancelled) return;
-          viz = await getVizInstance();
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : 'Failed to render diagram');
-          setRuntimeUnavailable(true);
-          setSvg('');
-        }
-        return;
-      }
-      try {
-        const renderedSvg = await viz.renderString(block.content, { format: 'svg' });
-        const cleaned = renderedSvg
-          .replace(/ width="[^"]*"/, ' width="100%"')
-          .replace(/ height="[^"]*"/, ' height="100%"')
-          .replace(/ style="[^"]*"/, '')
-          .replace(/<polygon[^>]*fill="white"[^>]*\/>/, '')
-          .replace(/fill="black"/g, 'fill="var(--foreground)"')
-          .replace(/fill="#000000"/g, 'fill="var(--foreground)"')
-          .replace(/stroke="black"/g, 'stroke="var(--muted-foreground)"')
-          .replace(/stroke="#000000"/g, 'stroke="var(--muted-foreground)"')
-          .replace(/fill="lightgrey"/g, 'fill="var(--muted)"')
-          .replace(/fill="lightgray"/g, 'fill="var(--muted)"');
-
-        if (!cancelled) {
-          naturalBoundsRef.current = parseViewBoxFromMarkup(cleaned);
-          setSvg(cleaned);
-          setError(null);
-          setRuntimeUnavailable(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : 'Failed to render diagram');
-          setRuntimeUnavailable(false);
-          setSvg('');
-        }
-      }
-    };
-
-    renderDiagram();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [block.content, retryToken]);
-
-  useEffect(() => {
-    zoomLevelRef.current = 1;
-    naturalBoundsRef.current = null;
-    baseViewBoxRef.current = null;
-    panOffsetRef.current = { x: 0, y: 0 };
-    setIsExpanded(false);
-  }, [block.content]);
-
-  useEffect(() => {
-    if (showSource) {
-      setIsExpanded(false);
-      return;
-    }
-
-    zoomLevelRef.current = 1;
-    panOffsetRef.current = { x: 0, y: 0 };
-    baseViewBoxRef.current = null;
-  }, [showSource]);
-
-  useEffect(() => {
-    if (!isExpanded) return undefined;
-
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsExpanded(false);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isExpanded]);
-
-  useEffect(() => {
-    if (!svg || showSource || !containerRef.current) return;
-
-    const svgEl = containerRef.current.querySelector('svg');
-    if (!(svgEl instanceof SVGSVGElement)) return;
-
-    svgEl.style.maxWidth = 'none';
-    svgEl.style.width = '100%';
-    svgEl.style.height = '100%';
-    svgEl.style.display = 'block';
-    svgEl.style.filter = 'none';
-    svgEl.style.willChange = 'auto';
-    svgEl.setAttribute('width', '100%');
-    svgEl.setAttribute('height', '100%');
-    svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-
-    let cancelled = false;
-
-    const applyInitialView = () => {
-      if (cancelled) return;
-
-      try {
-        const base = naturalBoundsRef.current ?? parseViewBox(svgEl);
-
-        if (!base) return;
-
-        naturalBoundsRef.current = base;
-        fitToCurrentViewport();
-      } catch {
-        setError('Failed to measure diagram bounds');
-        setSvg('');
-      }
-    };
-
-    const raf = requestAnimationFrame(() => requestAnimationFrame(applyInitialView));
-    const timer = window.setTimeout(applyInitialView, 120);
-
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(raf);
-      window.clearTimeout(timer);
-    };
-  }, [fitToCurrentViewport, isExpanded, showSource, svg]);
-
-  useEffect(() => {
-    if (showSource || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const handleWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
-      const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoomLevelRef.current + delta));
-      updateZoom(newZoom);
-    };
-
-    container.addEventListener('wheel', handleWheel, { passive: false });
-    return () => container.removeEventListener('wheel', handleWheel);
-  }, [showSource, isExpanded, updateZoom]);
-
-  const handleZoomIn = useCallback(() => {
-    updateZoom(Math.min(zoomLevelRef.current + ZOOM_STEP, MAX_ZOOM));
-  }, [updateZoom]);
-
-  const handleZoomOut = useCallback(() => {
-    updateZoom(Math.max(zoomLevelRef.current - ZOOM_STEP, MIN_ZOOM));
-  }, [updateZoom]);
-
-  const handleFitToScreen = useCallback(() => {
-    fitToCurrentViewport();
-  }, [fitToCurrentViewport]);
-
-  useEffect(() => {
-    if (showSource || !containerRef.current || !naturalBoundsRef.current) return;
-    if (typeof ResizeObserver === 'undefined') return;
-
-    const observer = new ResizeObserver(() => {
-      if (Math.abs(zoomLevelRef.current - 1) > 0.001) return;
-      fitToCurrentViewport();
-    });
-
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, [fitToCurrentViewport, isExpanded, showSource, svg]);
-
-  const handleMouseDown = useCallback((event: React.MouseEvent) => {
-    if (event.button !== 0) return;
-    event.preventDefault();
-    isDraggingRef.current = true;
-    dragStartRef.current = { x: event.clientX, y: event.clientY };
-    panStartRef.current = { ...panOffsetRef.current };
-    if (containerRef.current) containerRef.current.style.cursor = 'grabbing';
-  }, []);
-
-  const handleMouseMove = useCallback((event: React.MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current || !baseViewBoxRef.current) return;
-
-    const svgEl = containerRef.current.querySelector('svg');
-    if (!(svgEl instanceof SVGSVGElement)) return;
-
-    const rect = svgEl.getBoundingClientRect();
-    const base = baseViewBoxRef.current;
-    const zoom = zoomLevelRef.current;
-    const scaleX = (base.width / zoom) / rect.width;
-    const scaleY = (base.height / zoom) / rect.height;
-
-    const dx = event.clientX - dragStartRef.current.x;
-    const dy = event.clientY - dragStartRef.current.y;
-
-    panOffsetRef.current = {
-      x: panStartRef.current.x - dx * scaleX,
-      y: panStartRef.current.y - dy * scaleY,
-    };
-
-    applyView(svgEl, base, zoom, panOffsetRef.current);
-  }, []);
-
-  const stopDragging = useCallback(() => {
-    if (!isDraggingRef.current) return;
-    isDraggingRef.current = false;
-    if (containerRef.current) containerRef.current.style.cursor = 'grab';
-  }, []);
-
-  if (error) {
-    return (
-      <div className="my-5 rounded-lg border border-destructive/30 bg-destructive/5 overflow-hidden">
-        <div className="px-3 py-2 bg-destructive/10 border-b border-destructive/20 flex items-center gap-2">
-          <svg className="w-4 h-4 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-          </svg>
-          <span className="text-xs text-destructive font-medium">Graphviz Error</span>
-          {runtimeUnavailable && (
-            <button
-              type="button"
-              onClick={() => vizRetryEpoch.bump()}
-              className="ml-auto rounded-md border border-destructive/30 px-2 py-0.5 text-xs text-destructive hover:bg-destructive/10"
-              title="Retry loading the diagram renderer"
-            >
-              Retry
-            </button>
-          )}
-        </div>
-        <pre className="p-3 text-xs text-destructive/80 overflow-x-auto">{error}</pre>
-        <pre className="p-3 text-xs text-muted-foreground bg-muted/30 border-t border-border/30 overflow-x-auto">
-          <code>{block.content}</code>
-        </pre>
-      </div>
-    );
-  }
-
-  const controls = (
-    <div className={`absolute top-2 right-2 flex flex-col gap-1 items-center z-10 ${isExpanded ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 transition-opacity'}`}>
-      <button
-        onClick={() => setShowSource(!showSource)}
-        className="p-1.5 rounded-md bg-muted/85 hover:bg-muted text-muted-foreground hover:text-foreground"
-        title={showSource ? 'Show diagram' : 'Show source'}
-      >
-        {showSource ? (
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        ) : (
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-        )}
-      </button>
-
-      {!showSource && svg && (
-        <>
-          <div className="flex w-10 flex-col items-center gap-0.5 bg-muted/85 rounded-md p-0.5">
-            <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
-              title={isExpanded ? 'Exit expanded view' : 'Expand diagram'}
-              aria-label={isExpanded ? 'Exit expanded view' : 'Expand diagram'}
-            >
-              {isExpanded ? (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 10h4V6M18 10h-4V6M6 14h4v4M18 14h-4v4" />
-                </svg>
-              ) : (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
-                </svg>
-              )}
-            </button>
-
-            <button
-              ref={zoomInBtnRef}
-              onClick={handleZoomIn}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
-              title="Zoom in"
-              aria-label="Zoom in"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14M5 12h14" />
-              </svg>
-            </button>
-
-            <button
-              onClick={handleFitToScreen}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
-              title="Fit to view"
-              aria-label="Fit to view"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <circle cx="12" cy="12" r="4" strokeLinecap="round" strokeLinejoin="round" />
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 2v4M12 18v4M2 12h4M18 12h4" />
-              </svg>
-            </button>
-
-            <button
-              ref={zoomOutBtnRef}
-              onClick={handleZoomOut}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
-              title="Zoom out"
-              aria-label="Zoom out"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
-              </svg>
-            </button>
-          </div>
-
-          <span
-            ref={zoomDisplayRef}
-            hidden
-            className="min-w-10 rounded bg-muted/85 px-1 py-0.5 text-[10px] text-center text-muted-foreground tabular-nums leading-tight"
-          />
-        </>
-      )}
-    </div>
-  );
-
-  const inlineSource = (
-    <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30 p-4">
-      <code className={`pn-code font-mono language-${block.language ?? 'graphviz'}`}>{block.content}</code>
-    </pre>
-  );
-
-  const naturalHeight = naturalBoundsRef.current
-    ? `min(65vh, ${Math.min(36 * 16, Math.max(4 * 16, Math.round(naturalBoundsRef.current.height * (800 / naturalBoundsRef.current.width))))}px)`
-    : 'min(65vh, 36rem)';
-
-  const diagramBody = (
-    <div
-      ref={containerRef}
-      className={`rounded-xl bg-muted/30 border border-border/30 overflow-hidden select-none cursor-grab ${isExpanded ? 'h-full min-h-0' : ''}`}
-      style={isExpanded ? undefined : { height: naturalHeight }}
-      dangerouslySetInnerHTML={{ __html: svg }}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={stopDragging}
-      onMouseLeave={stopDragging}
-    />
-  );
-
-  return (
-    <>
-      <div className="my-5 group relative" data-block-id={block.id}>
-        {!isExpanded && controls}
-        {showSource || !svg ? inlineSource : !isExpanded ? diagramBody : <div className="rounded-xl border border-border/30 bg-muted/10" style={{ height: naturalHeight }} />}
-      </div>
-
-      {!showSource && svg && isExpanded && typeof document !== 'undefined' && createPortal(
-        <div className="fixed inset-0 z-[9999] bg-background/90 backdrop-blur-sm p-4 md:p-6">
-          <div className="mx-auto flex h-full max-w-[min(96vw,110rem)] flex-col gap-3">
-            <div className="flex items-center justify-between gap-4 text-xs text-muted-foreground">
-              <span className="truncate">Graphviz diagram</span>
-              <button
-                onClick={() => setIsExpanded(false)}
-                className="rounded-md border border-border/60 bg-card/70 px-2.5 py-1.5 text-foreground hover:bg-card"
-              >
-                Close
-              </button>
-            </div>
-            <div className="group relative flex-1 min-h-0">
-              {controls}
-              {diagramBody}
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </>
-  );
-};
+export const GraphvizBlock = React.memo(
+  (props: DiagramBlockProps) => <DiagramBlock kind="graphviz" {...props} />,
+  (prev, next) =>
+    prev.block.id === next.block.id &&
+    prev.block.content === next.block.content &&
+    prev.block.startLine === next.block.startLine &&
+    prev.annotations === next.annotations &&
+    prev.selectedAnnotationId === next.selectedAnnotationId &&
+    prev.onSelectAnnotation === next.onSelectAnnotation &&
+    prev.onAddAnnotation === next.onAddAnnotation &&
+    prev.readOnly === next.readOnly &&
+    prev.onRestoreReport === next.onRestoreReport,
+);
diff --git a/packages/ui/components/MermaidBlock.test.ts b/packages/ui/components/MermaidBlock.test.ts
index fbb23be6c..f4a81ad3b 100644
--- a/packages/ui/components/MermaidBlock.test.ts
+++ b/packages/ui/components/MermaidBlock.test.ts
@@ -1,5 +1,4 @@
 import { describe, expect, test } from 'bun:test';
-import { normalizeMermaidSvgMarkup } from './mermaidSvg';
 import { MERMAID_CONFIG } from './MermaidBlock';
 
 describe('MERMAID_CONFIG', () => {
@@ -11,61 +10,3 @@ describe('MERMAID_CONFIG', () => {
     expect(MERMAID_CONFIG.startOnLoad).toBe(false);
   });
 });
-
-describe('normalizeMermaidSvgMarkup', () => {
-  test('replaces natural max-width with max-width:none', () => {
-    const input = '<svg style="max-width: 85.125px;" viewBox="0 0 346 278" width="100%"><g/></svg>';
-    const expected =
-      '<svg style="max-width: none" viewBox="0 0 346 278" width="100%" preserveAspectRatio="xMidYMid meet" height="100%"><g/></svg>';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-
-  test('adds preserveAspectRatio when missing', () => {
-    const input = '<svg viewBox="0 0 1 1"></svg>';
-    const expected =
-      '<svg viewBox="0 0 1 1" style="max-width: none" preserveAspectRatio="xMidYMid meet" height="100%"></svg>';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-
-  test('adds height=100% when missing', () => {
-    const input = '<svg viewBox="0 0 1 1" preserveAspectRatio="none"></svg>';
-    const expected =
-      '<svg viewBox="0 0 1 1" preserveAspectRatio="none" style="max-width: none" height="100%"></svg>';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-
-  test('preserves existing preserveAspectRatio and height', () => {
-    const input = '<svg viewBox="0 0 1 1" preserveAspectRatio="none" height="200"></svg>';
-    const expected =
-      '<svg viewBox="0 0 1 1" preserveAspectRatio="none" height="200" style="max-width: none"></svg>';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-
-  test('injects style attribute when mermaid omits one', () => {
-    const input = '<svg viewBox="0 0 1 1" width="100%"></svg>';
-    const expected =
-      '<svg viewBox="0 0 1 1" width="100%" style="max-width: none" preserveAspectRatio="xMidYMid meet" height="100%"></svg>';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-
-  test('only normalizes the root <svg> tag', () => {
-    const input =
-      '<svg style="max-width: 100px;" viewBox="0 0 1 1"><defs><marker><svg viewBox="0 0 5 5"/></marker></defs></svg>';
-    const expected =
-      '<svg style="max-width: none" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet" height="100%"><defs><marker><svg viewBox="0 0 5 5"/></marker></defs></svg>';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-
-  test('leaves non-svg input unchanged', () => {
-    const input = 'plain text';
-    const expected = 'plain text';
-
-    expect(normalizeMermaidSvgMarkup(input)).toBe(expected);
-  });
-});
diff --git a/packages/ui/components/MermaidBlock.theme.test.tsx b/packages/ui/components/MermaidBlock.theme.test.tsx
index fa898ca05..42f83bad9 100644
--- a/packages/ui/components/MermaidBlock.theme.test.tsx
+++ b/packages/ui/components/MermaidBlock.theme.test.tsx
@@ -18,10 +18,11 @@
  *
  * DOM-gated (DOM_TESTS=1).
  */
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
 import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import type { Block } from '../types';
+import { installInertDiagramSvgParser } from '../test-setup/diagramSvg';
 import { MermaidBlock, __setMermaidRuntimeLoaderForTests } from './MermaidBlock';
 import { ThemeProvider, useTheme } from './ThemeProvider';
 import { __resetMermaidThemeForTests } from '../utils/mermaidTheme';
@@ -29,6 +30,14 @@ import { resetStorageBackend, setStorageBackend } from '../utils/storage';
 
 const hasDom = typeof document !== 'undefined';
 
+// happy-dom cannot host DOMPurify: the render slot's parse step is the inert
+// template parse for these tests (the scrub still runs).
+let restoreParser: (() => void) | null = null;
+beforeAll(() => {
+  if (hasDom) restoreParser = installInertDiagramSvgParser();
+});
+afterAll(() => restoreParser?.());
+
 const block: Block = { id: 'themeSweep', type: 'code', language: 'mermaid', content: 'flowchart LR\n  A --> B', order: 0, startLine: 1 };
 const SVG = '<svg viewBox="0 0 10 10" data-sentinel="diagram"><rect width="10" height="10"/></svg>';
 
diff --git a/packages/ui/components/MermaidBlock.tsx b/packages/ui/components/MermaidBlock.tsx
index 9e606e882..343e56d29 100644
--- a/packages/ui/components/MermaidBlock.tsx
+++ b/packages/ui/components/MermaidBlock.tsx
@@ -1,674 +1,27 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import type { Mermaid } from 'mermaid';
-import type { Block } from '../types';
-import { normalizeMermaidSvgMarkup } from './mermaidSvg';
-import {
-  MERMAID_CONFIG,
-  getMermaidRetryDelayMs,
-  loadMermaidRuntime,
-  __setMermaidRuntimeLoaderForTests,
-} from '../utils/mermaid';
-import { loadMathRenderer } from '../utils/math';
-import { hasMermaidMath } from '../utils/mermaid-math-slot';
-import { applyMermaidTheme, mermaidThemeKey } from '../utils/mermaidTheme';
-import { createRuntimeRetryEpoch } from '../utils/runtimeRetry';
-import { useTheme } from './ThemeProvider';
-
-/** One Retry re-attempts every block whose runtime import failed (see utils/runtimeRetry). */
-const mermaidRetryEpoch = createRuntimeRetryEpoch();
+import React from 'react';
+import { MERMAID_CONFIG, __setMermaidRuntimeLoaderForTests } from '../utils/mermaid';
+import { DiagramBlock, type DiagramBlockProps } from './DiagramBlock';
 
 // Re-exported: the config pin test and the lazy-retry test import them from here.
 export { MERMAID_CONFIG, __setMermaidRuntimeLoaderForTests };
 
 /**
- * The runtime comes from the slot in utils/mermaid: loaded lazily on the
- * first diagram (Plannotator's own path since Mermaid 12), or already filled
- * by a host that imported utils/mermaid-eager. See that module for the retry
- * contract. Until the first render lands the block shows the source fence
- * under a "Rendering diagram" status; the error panel appears only for a
- * failure, never as a placeholder.
- */
-const getMermaid = loadMermaidRuntime;
-
-const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
-
-interface ViewBox {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-const ZOOM_STEP = 0.25;
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 8;
-
-function parseViewBox(svgEl: SVGSVGElement): ViewBox | null {
-  const raw = svgEl.getAttribute('viewBox');
-  if (!raw) return null;
-
-  const values = raw
-    .trim()
-    .split(/[\s,]+/)
-    .map((value) => Number.parseFloat(value));
-
-  if (values.length !== 4 || values.some((value) => Number.isNaN(value))) {
-    return null;
-  }
-
-  const [x, y, width, height] = values;
-  if (width <= 0 || height <= 0) return null;
-  return { x, y, width, height };
-}
-
-// Parse base viewBox from Mermaid SVG markup before DOM mount
-function parseViewBoxFromMarkup(markup: string): ViewBox | null {
-  const viewBoxMatch = markup.match(/viewBox\s*=\s*"([^"]+)"/i);
-  if (viewBoxMatch?.[1]) {
-    const values = viewBoxMatch[1]
-      .trim()
-      .split(/[\s,]+/)
-      .map((value) => Number.parseFloat(value));
-
-    if (values.length === 4 && values.every((value) => Number.isFinite(value))) {
-      const [x, y, width, height] = values;
-      if (width > 0 && height > 0) {
-        return { x, y, width, height };
-      }
-    }
-  }
-
-  const widthMatch = markup.match(/\bwidth\s*=\s*"([0-9.]+)(?:px)?"/i);
-  const heightMatch = markup.match(/\bheight\s*=\s*"([0-9.]+)(?:px)?"/i);
-  const width = widthMatch?.[1] ? Number.parseFloat(widthMatch[1]) : NaN;
-  const height = heightMatch?.[1] ? Number.parseFloat(heightMatch[1]) : NaN;
-  if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
-    return { x: 0, y: 0, width, height };
-  }
-
-  return null;
-}
-
-// Apply calculated viewBox from zoom and pan state
-function applyView(svgEl: SVGSVGElement, base: ViewBox, zoom: number, pan: { x: number; y: number }): void {
-  const zoomedWidth = base.width / zoom;
-  const zoomedHeight = base.height / zoom;
-  const centerX = base.x + base.width / 2;
-  const centerY = base.y + base.height / 2;
-  const vbX = centerX - zoomedWidth / 2 + pan.x;
-  const vbY = centerY - zoomedHeight / 2 + pan.y;
-  svgEl.setAttribute('viewBox', `${vbX} ${vbY} ${zoomedWidth} ${zoomedHeight}`);
-}
-
-// Compute a fitted base viewBox for the current container ratio
-function fitBoundsToContainer(bounds: ViewBox, containerRect: DOMRect): ViewBox {
-  const containerWidth = Math.max(containerRect.width, 1);
-  const containerHeight = Math.max(containerRect.height, 1);
-  const contentRatio = bounds.width / bounds.height;
-  const containerRatio = containerWidth / containerHeight;
-
-  if (contentRatio > containerRatio) {
-    const targetHeight = bounds.width / containerRatio;
-    const extra = (targetHeight - bounds.height) / 2;
-    return {
-      x: bounds.x,
-      y: bounds.y - extra,
-      width: bounds.width,
-      height: targetHeight,
-    };
-  }
-
-  const targetWidth = bounds.height * containerRatio;
-  const extra = (targetWidth - bounds.width) / 2;
-  return {
-    x: bounds.x - extra,
-    y: bounds.y,
-    width: targetWidth,
-    height: bounds.height,
-  };
-}
-
-/**
- * Renders a mermaid diagram block with zoom controls.
+ * A mermaid fence. The engine, the canvas, the comment overlay and the
+ * popout are `DiagramBlock`'s (one code path with `GraphvizBlock`); this
+ * file keeps the fence's name and the test hooks. The runtime comes from the
+ * slot in `utils/mermaid`: loaded lazily on the first diagram, or already
+ * filled by a host that imported `utils/mermaid-eager`.
  */
-const MermaidBlockImpl: React.FC<{ block: Block }> = ({ block }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const expandedOverlayRef = useRef<HTMLDivElement>(null);
-  const [svg, setSvg] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  // True when the failure was the runtime import itself (a chunking host's
-  // fetch), which is the only failure a Retry can change; a diagram syntax
-  // error keeps the panel exactly as it always was.
-  const [runtimeUnavailable, setRuntimeUnavailable] = useState(false);
-  const [retryToken, setRetryToken] = useState(0);
-  const [showSource, setShowSource] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
-  // The (palette, mode) the diagram must follow: the same resolution the
-  // code fences use (see useFenceTheme). Outside a ThemeProvider the default
-  // context yields the Plannotator dark pair, and with no theme tokens on the
-  // document `applyMermaidTheme` keeps the static config, so a host without
-  // the provider renders exactly as before. A key change re-runs the render
-  // effect below, which is what re-themes an already rendered diagram.
-  const { colorTheme, resolvedMode } = useTheme();
-  const themeKey = mermaidThemeKey(colorTheme, resolvedMode === 'light' ? 'light' : 'dark');
-  // A sibling's Retry re-attempts this block too, but only while its own
-  // failure was the shared runtime import; a healthy block or a diagram
-  // syntax error is left alone.
-  const runtimeUnavailableRef = useRef(runtimeUnavailable);
-  runtimeUnavailableRef.current = runtimeUnavailable;
-  useEffect(() => mermaidRetryEpoch.subscribe(() => {
-    if (!runtimeUnavailableRef.current) return;
-    setError(null);
-    setRetryToken((token) => token + 1);
-  }), []);
-
-  // All zoom/pan state as refs to avoid re-renders
-  const zoomLevelRef = useRef(1);
-  const isDraggingRef = useRef(false);
-  const naturalBoundsRef = useRef<ViewBox | null>(null);
-  const baseViewBoxRef = useRef<ViewBox | null>(null);
-  const panOffsetRef = useRef({ x: 0, y: 0 });
-  const dragStartRef = useRef({ x: 0, y: 0 });
-  const panStartRef = useRef({ x: 0, y: 0 });
-
-  // UI refs for zoom controls
-  const zoomInBtnRef = useRef<HTMLButtonElement>(null);
-  const zoomOutBtnRef = useRef<HTMLButtonElement>(null);
-  const zoomDisplayRef = useRef<HTMLSpanElement>(null);
-
-  // Update zoom level, viewBox, and UI without React re-render
-  const updateZoom = useCallback((newZoom: number) => {
-    zoomLevelRef.current = newZoom;
-
-    if (containerRef.current && baseViewBoxRef.current) {
-      const svgEl = containerRef.current.querySelector('svg');
-      if (svgEl instanceof SVGSVGElement) {
-        applyView(svgEl, baseViewBoxRef.current, newZoom, panOffsetRef.current);
-      }
-    }
-
-    if (zoomInBtnRef.current) zoomInBtnRef.current.disabled = newZoom >= MAX_ZOOM;
-    if (zoomOutBtnRef.current) zoomOutBtnRef.current.disabled = newZoom <= MIN_ZOOM;
-    if (zoomDisplayRef.current) {
-      const show = Math.abs(newZoom - 1) > 0.001;
-      zoomDisplayRef.current.textContent = show ? `${Math.round(newZoom * 100)}%` : '';
-      zoomDisplayRef.current.hidden = !show;
-    }
-  }, []);
-
-  const fitToCurrentViewport = useCallback(() => {
-    if (!containerRef.current || !naturalBoundsRef.current) return;
-
-    const svgEl = containerRef.current.querySelector('svg');
-    if (!(svgEl instanceof SVGSVGElement)) return;
-
-    const fitted = fitBoundsToContainer(naturalBoundsRef.current, containerRef.current.getBoundingClientRect());
-    baseViewBoxRef.current = fitted;
-    panOffsetRef.current = { x: 0, y: 0 };
-    updateZoom(1);
-    applyView(svgEl, fitted, 1, { x: 0, y: 0 });
-  }, [updateZoom]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    // Render mermaid diagram
-    const renderDiagram = async () => {
-      let mermaid: Mermaid;
-      try {
-        try {
-          mermaid = await getMermaid();
-        } catch {
-          // Transient chunk failure on a chunking host: one automatic
-          // re-attempt with a fresh import() after a short delay. In a
-          // single-file build the first await never rejects, so this branch
-          // is unreachable there and the success path is unchanged.
-          await wait(getMermaidRetryDelayMs());
-          if (cancelled) return;
-          mermaid = await getMermaid();
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : 'Failed to render diagram');
-          setRuntimeUnavailable(true);
-          setSvg('');
-        }
-        return;
-      }
-      try {
-        // A `$$` label makes Mermaid render KaTeX. On a host that redirects
-        // Mermaid's `katex` import to `utils/mermaid-math-slot` the label is
-        // typeset through the math slot, which must be filled by then: warm
-        // it with the registered loader first. A filled slot (Plannotator's
-        // eager entry) resolves at once; a load failure is left to the
-        // render, whose error panel names it with the source.
-        if (hasMermaidMath(block.content)) {
-          try {
-            await loadMathRenderer();
-          } catch {
-            // Reported by the render below.
-          }
-          if (cancelled) return;
-        }
-        // Global initialize, once per (palette, mode) change, before render.
-        applyMermaidTheme(mermaid, themeKey);
-        const id = `mermaid-${block.id}`;
-        const { svg: renderedSvg } = await mermaid.render(id, block.content);
-        if (!cancelled) {
-          const normalizedSvg = normalizeMermaidSvgMarkup(renderedSvg);
-          naturalBoundsRef.current = parseViewBoxFromMarkup(normalizedSvg);
-          setSvg(normalizedSvg);
-          setError(null);
-          setRuntimeUnavailable(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : 'Failed to render diagram');
-          setRuntimeUnavailable(false);
-          setSvg('');
-        }
-      }
-    };
-
-    renderDiagram();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [block.content, block.id, retryToken, themeKey]);
-
-  // Reset zoom and pan when content changes
-  useEffect(() => {
-    zoomLevelRef.current = 1;
-    naturalBoundsRef.current = null;
-    baseViewBoxRef.current = null;
-    panOffsetRef.current = { x: 0, y: 0 };
-    setIsExpanded(false);
-  }, [block.content]);
-
-  // Reset zoom and pan when switching from source back to diagram
-  useEffect(() => {
-    if (showSource) {
-      setIsExpanded(false);
-      return;
-    }
-
-    zoomLevelRef.current = 1;
-    panOffsetRef.current = { x: 0, y: 0 };
-    baseViewBoxRef.current = null;
-  }, [showSource]);
-
-  useEffect(() => {
-    if (!isExpanded) return undefined;
-
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsExpanded(false);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isExpanded]);
-
-  // Compute base viewBox from rendered SVG and apply initial view
-  useEffect(() => {
-    if (!svg || showSource || !containerRef.current) return;
-
-    const svgEl = containerRef.current.querySelector('svg');
-    if (!(svgEl instanceof SVGSVGElement)) return;
-
-    svgEl.style.maxWidth = 'none';
-    svgEl.style.width = '100%';
-    svgEl.style.height = '100%';
-    svgEl.style.display = 'block';
-    svgEl.style.filter = 'none';
-    svgEl.style.willChange = 'auto';
-    svgEl.setAttribute('width', '100%');
-    svgEl.setAttribute('height', '100%');
-    svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-
-    let cancelled = false;
-
-    const applyInitialView = () => {
-      if (cancelled) return;
-
-      try {
-        const base = naturalBoundsRef.current ?? parseViewBox(svgEl);
-
-        if (!base) return;
-
-        naturalBoundsRef.current = base;
-        fitToCurrentViewport();
-      } catch {
-        setError('Failed to measure diagram bounds');
-        setSvg('');
-      }
-    };
-
-    const raf = requestAnimationFrame(() => requestAnimationFrame(applyInitialView));
-    const timer = window.setTimeout(applyInitialView, 120);
-
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(raf);
-      window.clearTimeout(timer);
-    };
-  }, [fitToCurrentViewport, isExpanded, showSource, svg]);
-
-  const applyWheelZoomDelta = useCallback((deltaY: number) => {
-    if (Math.abs(deltaY) < 0.1) {
-      return;
-    }
-
-    const delta = deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
-    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoomLevelRef.current + delta));
-    updateZoom(newZoom);
-  }, [updateZoom]);
-
-  useEffect(() => {
-    if (showSource || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const handleWheel = (event: WheelEvent) => {
-      if (Math.abs(event.deltaY) < 0.1) return;
-      event.preventDefault();
-      applyWheelZoomDelta(event.deltaY);
-    };
-
-    container.addEventListener('wheel', handleWheel, { passive: false });
-
-    return () => {
-      container.removeEventListener('wheel', handleWheel);
-    };
-  }, [applyWheelZoomDelta, showSource]);
-
-  useEffect(() => {
-    if (showSource || !isExpanded) return;
-
-    const handleExpandedPinchWheel = (event: WheelEvent) => {
-      if (!event.ctrlKey && !event.metaKey) return;
-      if (!expandedOverlayRef.current) return;
-
-      const eventTarget = event.target;
-      if (!(eventTarget instanceof Node) || !expandedOverlayRef.current.contains(eventTarget)) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-      applyWheelZoomDelta(event.deltaY);
-    };
-
-    window.addEventListener('wheel', handleExpandedPinchWheel, { passive: false, capture: true });
-
-    return () => {
-      window.removeEventListener('wheel', handleExpandedPinchWheel, { capture: true });
-    };
-  }, [applyWheelZoomDelta, isExpanded, showSource]);
-
-  const handleZoomIn = useCallback(() => {
-    updateZoom(Math.min(zoomLevelRef.current + ZOOM_STEP, MAX_ZOOM));
-  }, [updateZoom]);
-
-  const handleZoomOut = useCallback(() => {
-    updateZoom(Math.max(zoomLevelRef.current - ZOOM_STEP, MIN_ZOOM));
-  }, [updateZoom]);
-
-  const handleFitToScreen = useCallback(() => {
-    fitToCurrentViewport();
-  }, [fitToCurrentViewport]);
-
-  useEffect(() => {
-    if (showSource || !containerRef.current || !naturalBoundsRef.current) return;
-    if (typeof ResizeObserver === 'undefined') return;
-
-    const observer = new ResizeObserver(() => {
-      if (Math.abs(zoomLevelRef.current - 1) > 0.001) return;
-      fitToCurrentViewport();
-    });
-
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, [fitToCurrentViewport, isExpanded, showSource, svg]);
-
-  // Drag-to-pan handlers (all ref-based to avoid re-renders)
-  const handleMouseDown = useCallback((event: React.MouseEvent) => {
-    if (event.button !== 0) return;
-    event.preventDefault();
-    isDraggingRef.current = true;
-    dragStartRef.current = { x: event.clientX, y: event.clientY };
-    panStartRef.current = { ...panOffsetRef.current };
-    if (containerRef.current) containerRef.current.style.cursor = 'grabbing';
-  }, []);
-
-  const handleMouseMove = useCallback((event: React.MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current || !baseViewBoxRef.current) return;
-
-    const svgEl = containerRef.current.querySelector('svg');
-    if (!(svgEl instanceof SVGSVGElement)) return;
-
-    const rect = svgEl.getBoundingClientRect();
-    const base = baseViewBoxRef.current;
-    const zoom = zoomLevelRef.current;
-    const scaleX = (base.width / zoom) / rect.width;
-    const scaleY = (base.height / zoom) / rect.height;
-
-    const dx = event.clientX - dragStartRef.current.x;
-    const dy = event.clientY - dragStartRef.current.y;
-
-    panOffsetRef.current = {
-      x: panStartRef.current.x - dx * scaleX,
-      y: panStartRef.current.y - dy * scaleY,
-    };
-
-    applyView(svgEl, base, zoom, panOffsetRef.current);
-  }, []);
-
-  const stopDragging = useCallback(() => {
-    if (!isDraggingRef.current) return;
-    isDraggingRef.current = false;
-    if (containerRef.current) containerRef.current.style.cursor = 'grab';
-  }, []);
-
-  if (error) {
-    return (
-      <div className="my-5 rounded-lg border border-destructive/30 bg-destructive/5 overflow-hidden">
-        <div className="px-3 py-2 bg-destructive/10 border-b border-destructive/20 flex items-center gap-2">
-          <svg className="w-4 h-4 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-          </svg>
-          <span className="text-xs text-destructive font-medium">Mermaid Error</span>
-          {runtimeUnavailable && (
-            <button
-              type="button"
-              onClick={() => mermaidRetryEpoch.bump()}
-              className="ml-auto rounded-md border border-destructive/30 px-2 py-0.5 text-xs text-destructive hover:bg-destructive/10"
-              title="Retry loading the diagram renderer"
-            >
-              Retry
-            </button>
-          )}
-        </div>
-        <pre className="p-3 text-xs text-destructive/80 overflow-x-auto">{error}</pre>
-        <pre className="p-3 text-xs text-muted-foreground bg-muted/30 border-t border-border/30 overflow-x-auto">
-          <code>{block.content}</code>
-        </pre>
-      </div>
-    );
-  }
-
-  const controls = (
-    /* Controls container */
-    <div className={`absolute top-2 right-2 flex flex-col gap-1 items-center z-10 ${isExpanded ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 transition-opacity'}`}>
-      {/* Toggle source/diagram button */}
-      <button
-        onClick={() => setShowSource(!showSource)}
-        className="p-1.5 rounded-md bg-muted/85 hover:bg-muted text-muted-foreground hover:text-foreground"
-        title={showSource ? 'Show diagram' : 'Show source'}
-      >
-        {showSource ? (
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        ) : (
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-        )}
-      </button>
-
-      {!showSource && svg && (
-        <>
-          {/* Diagram interaction controls */}
-          <div className="flex w-10 flex-col items-center gap-0.5 bg-muted/85 rounded-md p-0.5">
-            {/* Expand/exit expanded button */}
-            <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
-              title={isExpanded ? 'Exit expanded view' : 'Expand diagram'}
-              aria-label={isExpanded ? 'Exit expanded view' : 'Expand diagram'}
-            >
-              {isExpanded ? (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 10h4V6M18 10h-4V6M6 14h4v4M18 14h-4v4" />
-                </svg>
-              ) : (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
-                </svg>
-              )}
-            </button>
-
-            {/* Zoom in button */}
-            <button
-              ref={zoomInBtnRef}
-              onClick={handleZoomIn}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
-              title="Zoom in"
-              aria-label="Zoom in"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14M5 12h14" />
-              </svg>
-            </button>
-
-            {/* Fit to view button */}
-            <button
-              onClick={handleFitToScreen}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
-              title="Fit to view"
-              aria-label="Fit to view"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <circle cx="12" cy="12" r="4" strokeLinecap="round" strokeLinejoin="round" />
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 2v4M12 18v4M2 12h4M18 12h4" />
-              </svg>
-            </button>
-
-            {/* Zoom out button */}
-            <button
-              ref={zoomOutBtnRef}
-              onClick={handleZoomOut}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
-              title="Zoom out"
-              aria-label="Zoom out"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
-              </svg>
-            </button>
-          </div>
-
-          {/* Zoom percentage badge */}
-          <span
-            ref={zoomDisplayRef}
-            hidden
-            className="min-w-10 rounded bg-muted/85 px-1 py-0.5 text-[10px] text-center text-muted-foreground tabular-nums leading-tight"
-          />
-        </>
-      )}
-    </div>
-  );
-
-  const inlineSource = (
-    <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30 p-4">
-      <code className="pn-code font-mono language-mermaid">{block.content}</code>
-    </pre>
-  );
-
-  // First render still in flight (the runtime import on the lazy path, then
-  // the render itself): the source stays readable under a quiet status line.
-  // A re-render for a theme change keeps the previous SVG, so this shows only
-  // before the first diagram lands.
-  const pendingSource = (
-    <>
-      <div
-        role="status"
-        aria-live="polite"
-        data-mermaid-pending=""
-        className="mb-1.5 flex items-center gap-1.5 text-xs text-muted-foreground"
-      >
-        <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground/70" aria-hidden="true" />
-        Rendering diagram…
-      </div>
-      {inlineSource}
-    </>
-  );
-
-  const diagramBody = (
-    <div
-      ref={containerRef}
-      data-pinpoint-ignore=""
-      className={`rounded-xl bg-muted/30 border border-border/30 overflow-hidden select-none cursor-grab ${isExpanded ? 'h-full min-h-0' : 'h-[min(65vh,36rem)] min-h-[20rem]'}`}
-      dangerouslySetInnerHTML={{ __html: svg }}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={stopDragging}
-      onMouseLeave={stopDragging}
-    />
-  );
-
-  return (
-    <>
-      <div className="my-5 group relative" data-block-id={block.id}>
-        {!isExpanded && controls}
-        {showSource ? inlineSource : !svg ? pendingSource : !isExpanded ? diagramBody : <div className="rounded-xl border border-border/30 bg-muted/10 h-[min(65vh,36rem)] min-h-[20rem]" />}
-      </div>
-
-      {!showSource && svg && isExpanded && typeof document !== 'undefined' && createPortal(
-        <div ref={expandedOverlayRef} className="fixed inset-0 z-[9999] bg-background/90 backdrop-blur-sm p-4 md:p-6">
-          <div className="mx-auto flex h-full max-w-[min(96vw,110rem)] flex-col gap-3">
-            <div className="flex items-center justify-between gap-4 text-xs text-muted-foreground">
-              <span className="truncate">Mermaid diagram</span>
-              <button
-                onClick={() => setIsExpanded(false)}
-                className="rounded-md border border-border/60 bg-card/70 px-2.5 py-1.5 text-foreground hover:bg-card"
-              >
-                Close
-              </button>
-            </div>
-            <div className="group relative flex-1 min-h-0">
-              {controls}
-              {diagramBody}
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </>
-  );
-};
-
 export const MermaidBlock = React.memo(
-  MermaidBlockImpl,
+  (props: DiagramBlockProps) => <DiagramBlock kind="mermaid" {...props} />,
   (prev, next) =>
     prev.block.id === next.block.id &&
-    prev.block.content === next.block.content,
+    prev.block.content === next.block.content &&
+    prev.block.startLine === next.block.startLine &&
+    prev.annotations === next.annotations &&
+    prev.selectedAnnotationId === next.selectedAnnotationId &&
+    prev.onSelectAnnotation === next.onSelectAnnotation &&
+    prev.onAddAnnotation === next.onAddAnnotation &&
+    prev.readOnly === next.readOnly &&
+    prev.onRestoreReport === next.onRestoreReport,
 );
diff --git a/packages/ui/components/Viewer.tsx b/packages/ui/components/Viewer.tsx
index b094f0466..302d9b675 100644
--- a/packages/ui/components/Viewer.tsx
+++ b/packages/ui/components/Viewer.tsx
@@ -40,6 +40,7 @@ import { CommentPopover, type CommentAskAIHandler } from './CommentPopover';
 import { TaterSpriteSitting } from './TaterSpriteSitting';
 import { AttachmentsButton } from './AttachmentsButton';
 import { MessagesIcon } from './icons/MessagesIcon';
+import { DiagramAnchorClaims, DiagramAnchorClaimsContext } from './diagram/anchorClaims';
 import { GraphvizBlock } from './GraphvizBlock';
 import { MermaidBlock } from './MermaidBlock';
 import { isGraphvizLanguage, isMermaidLanguage } from './diagramLanguages';
@@ -1042,8 +1043,28 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     </>
   );
 
+  // The document's diagram blocks, in order: a diagram comment that names
+  // none of them (an external POST, a deleted fence) is resolved by anchor
+  // against each, first resolver wins (see diagram/anchorClaims).
+  const diagramBlockKey = blocks
+    .filter((b) => b.type === 'code' && (isMermaidLanguage(b.language) || isGraphvizLanguage(b.language)))
+    .map((b) => b.id)
+    .join('\n');
+  const diagramClaims = useMemo(
+    () => new DiagramAnchorClaims(diagramBlockKey === '' ? [] : diagramBlockKey.split('\n')),
+    [diagramBlockKey],
+  );
+  // With no diagram in the document nobody can resolve a diagram comment:
+  // it is unanchored, and the highlighter (which skips it) will not say so.
+  useEffect(() => {
+    if (diagramBlockKey !== '' || onRestoreReport === undefined) return;
+    const ids = annotations.filter((ann) => ann.diagramAnchor !== undefined).map((ann) => ann.id);
+    if (ids.length > 0) onRestoreReport({ attempted: ids, unanchored: ids });
+  }, [annotations, diagramBlockKey, onRestoreReport]);
+
   return (
     <CodePathValidationContext.Provider value={codePathValidation}>
+    <DiagramAnchorClaimsContext.Provider value={diagramClaims}>
     <div className="relative z-50 w-full" style={maxWidth === null ? undefined : { maxWidth: maxWidth ?? 832 }}>
       {taterMode && <TaterSpriteSitting />}
       <article
@@ -1147,9 +1168,27 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               );
             })()
           ) : group.block.type === 'code' && isMermaidLanguage(group.block.language) ? (
-            <MermaidBlock key={group.block.id} block={group.block} />
+            <MermaidBlock
+              key={group.block.id}
+              block={group.block}
+              annotations={annotations}
+              selectedAnnotationId={selectedAnnotationId}
+              onSelectAnnotation={onSelectAnnotation}
+              onAddAnnotation={readOnly ? undefined : onAddAnnotation}
+              readOnly={readOnly}
+              onRestoreReport={onRestoreReport}
+            />
           ) : group.block.type === 'code' && isGraphvizLanguage(group.block.language) ? (
-            <GraphvizBlock key={group.block.id} block={group.block} />
+            <GraphvizBlock
+              key={group.block.id}
+              block={group.block}
+              annotations={annotations}
+              selectedAnnotationId={selectedAnnotationId}
+              onSelectAnnotation={onSelectAnnotation}
+              onAddAnnotation={readOnly ? undefined : onAddAnnotation}
+              readOnly={readOnly}
+              onRestoreReport={onRestoreReport}
+            />
           ) : group.block.type === 'table' ? (
             <TableBlock
               key={group.block.id}
@@ -1444,6 +1483,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
         document.body
       )}
     </div>
+    </DiagramAnchorClaimsContext.Provider>
     </CodePathValidationContext.Provider>
   );
 });
diff --git a/packages/ui/components/diagram/DiagramCanvas.tsx b/packages/ui/components/diagram/DiagramCanvas.tsx
new file mode 100644
index 000000000..f677e2dd2
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramCanvas.tsx
@@ -0,0 +1,431 @@
+import { Maximize2, Minus, Plus } from 'lucide-react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react';
+import { cn } from '../../lib/utils';
+import { diagramHitSource } from '../../utils/diagram-render';
+import { isMac, isModKeyHeld } from '../../utils/platform';
+import { Button } from '../ui/button';
+import {
+  DRAG_THRESHOLD_PX,
+  TOUCH_DRAG_THRESHOLD_PX,
+  useDiagramViewport,
+  WHEEL_ZOOM_SENSITIVITY,
+  ZOOM_STEP,
+  type ContentSize,
+  type Viewport,
+} from './useDiagramViewport';
+
+/**
+ * The canvas: the rendered svg inside a transformed wrapper, edge to edge in
+ * its host. Wheel and pinch zoom about the pointer, drag pans, `+` `-` `0`
+ * (fit) and the arrow keys on the keyboard, a small control in the corner.
+ * Click-to-select, drag-to-pan: a press that does not travel the drag
+ * threshold (4 px for a mouse or pen, 10 px for a finger) is a click and
+ * opens the composer; one that travels is a pan and never opens it. Nothing
+ * highlights on a plain mouse-over (the owner removed hover targeting: it
+ * read as messy and fought the pan hand); the only pre-click affordance is
+ * the ring under the pointer while the platform modifier is held, and it
+ * disarms on the key's release, on any other key, and on window blur.
+ *
+ * What a click means is decided over EVERYTHING under the pointer
+ * (`elementsFromPoint`), never the topmost element alone: every edge has an
+ * invisible 14 px hit path in a layer above the diagram (the render slot's
+ * `widenEdgeHitAreas`), so where an edge meets a node both are under the
+ * pointer, and the caller's `pickTarget` takes the node first, then an edge,
+ * then a cluster.
+ *
+ * In the document flow the canvas lets a finger scroll the page vertically
+ * (`touch-action: pan-y`); a full-size host that owns the screen passes
+ * `touch-none` through `className`. Under strict Mermaid disables click
+ * callbacks, and a `click A "https://..."` link binding still renders an
+ * `<a href>` that the render slot's sanitizer strips, so the canvas owns
+ * every click and there is no armed switch.
+ *
+ * The render slot hands over a sanitized svg NODE, not markup: the wrapper
+ * mounts it with `replaceChildren` once per render, so no html string ever
+ * crosses into the app DOM here. The overlay (a sibling of the wrapper,
+ * unscaled) is the caller's, rendered through `overlay` with the live
+ * viewport so rings reproject on every change.
+ */
+
+/** A numeric svg length: `206`, `206pt`, `206px`. */
+function svgLength(value: string | null): number {
+  if (value === null) return Number.NaN;
+  return Number.parseFloat(value);
+}
+
+/** The svg's intrinsic size, from its viewBox (Mermaid and Graphviz always
+ * write one), else its `width` / `height` attributes (a `pt` or `px` suffix
+ * is accepted, as Graphviz writes them). */
+export function svgContentSize(svg: SVGSVGElement): ContentSize | null {
+  const viewBox = svg.getAttribute('viewBox');
+  if (viewBox !== null) {
+    const parts = viewBox
+      .trim()
+      .split(/[\s,]+/u)
+      .map(Number);
+    const width = parts[2];
+    const height = parts[3];
+    if (
+      parts.length === 4 &&
+      width !== undefined &&
+      height !== undefined &&
+      Number.isFinite(width) &&
+      Number.isFinite(height) &&
+      width > 0 &&
+      height > 0
+    ) {
+      return { width, height };
+    }
+  }
+  const width = svgLength(svg.getAttribute('width'));
+  const height = svgLength(svg.getAttribute('height'));
+  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0 ? { width, height } : null;
+}
+
+/** One arrow-key press pans this far (the diagram moves WITH the arrow, as
+ * a scroll would); Shift multiplies it by five. */
+export const KEY_PAN_PX = 40;
+
+export interface DiagramCanvasHandle {
+  readonly viewport: Viewport;
+  readonly hostRef: React.RefObject<HTMLDivElement | null>;
+  readonly panIntoView: ReturnType<typeof useDiagramViewport>['panIntoView'];
+}
+
+/** What an Escape on the canvas did: `consumed` closed something the viewer
+ * owns (a draft, a selection) and the key goes no further; `pass` lets it
+ * reach whatever holds the canvas (a popout's close). */
+export type DiagramEscapeOutcome = 'consumed' | 'pass';
+
+export function DiagramCanvas({
+  svgNode,
+  targetSelector,
+  pickTarget,
+  dimmed,
+  onSvgRoot,
+  onHoverElement,
+  onClickElement,
+  onEscape,
+  overlay,
+  children,
+  autoFocus,
+  className,
+}: {
+  /** The last good render's sanitized svg root, or null before the first. */
+  svgNode: SVGSVGElement | null;
+  /** The engine's selector of every element the pointer can address
+   * (the finder's, through the renderer slot). */
+  targetSelector: string;
+  /** Choose among the addressable elements under the pointer, topmost
+   * first (the viewer's rule: a node, then an edge, then a cluster).
+   * Default: the topmost. */
+  pickTarget?: (candidates: readonly Element[]) => Element | null;
+  /** A parse error keeps the last render under the strip, dimmed. */
+  dimmed: boolean;
+  /** The mounted svg root after each injection (null on unmount). */
+  onSvgRoot: (root: SVGSVGElement | null) => void;
+  onHoverElement: (element: Element | null) => void;
+  onClickElement: (element: Element | null, shiftKey: boolean) => void;
+  onEscape: () => DiagramEscapeOutcome;
+  /** The overlay layer, given the live viewport and host. */
+  overlay: (handle: DiagramCanvasHandle) => ReactNode;
+  children?: ReactNode;
+  /** Take the keyboard on mount so `+`, `-`, `0` and Escape work at once
+   * (a popout). Off in the document flow, where it would steal the focus
+   * from the reader. */
+  autoFocus?: boolean;
+  /** `touch-none` for a host that owns the whole screen (a popout); the
+   * default lets a finger scroll the page past an inline diagram. */
+  className?: string;
+}) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [content, setContent] = useState<ContentSize | null>(null);
+  const { viewport, fit, zoomBy, panBy, panIntoView } = useDiagramViewport(hostRef, content);
+
+  // Mount the sanitized node once per render and size the wrapper to the
+  // diagram's own box so the transform scales real pixels.
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (wrapper === null) return;
+    if (svgNode === null) {
+      wrapper.replaceChildren();
+      setContent(null);
+      onSvgRoot(null);
+      return;
+    }
+    wrapper.replaceChildren(svgNode);
+    const size = svgContentSize(svgNode);
+    if (size !== null) {
+      svgNode.style.width = '100%';
+      svgNode.style.height = '100%';
+      svgNode.style.maxWidth = 'none';
+    }
+    setContent(size);
+    onSvgRoot(svgNode);
+    return () => onSvgRoot(null);
+  }, [onSvgRoot, svgNode]);
+
+  useEffect(() => {
+    if (autoFocus) hostRef.current?.focus();
+  }, [autoFocus]);
+
+  // Wheel zoom needs a non-passive listener (React's onWheel is passive,
+  // so preventDefault there cannot stop the page from scrolling).
+  useEffect(() => {
+    const host = hostRef.current;
+    if (host === null) return;
+    const onWheel = (event: WheelEvent) => {
+      // A sub-pixel delta (a trackpad coming to rest, a horizontal swipe)
+      // is neither a zoom nor a reason to hold the page's scroll.
+      if (Math.abs(event.deltaY) < 0.1) return;
+      event.preventDefault();
+      zoomBy(Math.exp(-event.deltaY * WHEEL_ZOOM_SENSITIVITY), event.clientX, event.clientY);
+    };
+    host.addEventListener('wheel', onWheel, { passive: false });
+    return () => host.removeEventListener('wheel', onWheel);
+  }, [zoomBy]);
+
+  const targetUnder = useCallback(
+    (event: ReactPointerEvent): Element | null => {
+      const wrapper = wrapperRef.current;
+      if (wrapper === null) return null;
+      // Everything under the pointer, topmost first. Without a layout
+      // engine (happy-dom) the event's own target is all there is.
+      const doc = wrapper.ownerDocument;
+      const stack =
+        typeof doc.elementsFromPoint === 'function' ? doc.elementsFromPoint(event.clientX, event.clientY) : [];
+      const under = stack.length > 0 ? stack : event.target instanceof Element ? [event.target] : [];
+      const candidates: Element[] = [];
+      for (const el of under) {
+        if (!wrapper.contains(el)) continue;
+        // A hit path stands for the visible edge it was made from.
+        const node = diagramHitSource(el) ?? el;
+        const target = node.closest(targetSelector);
+        if (target !== null && wrapper.contains(target) && !candidates.includes(target)) candidates.push(target);
+      }
+      if (candidates.length === 0) return null;
+      return pickTarget ? pickTarget(candidates) : (candidates[0] ?? null);
+    },
+    [pickTarget, targetSelector],
+  );
+
+  // The modifier-gated ring disarms the way the token hover cards do: on
+  // the modifier's release, on any other key while it is held (Cmd+C is a
+  // copy, not a question about the part under the pointer), and on blur.
+  useEffect(() => {
+    const win = hostRef.current?.ownerDocument.defaultView;
+    if (!win) return;
+    const modKey = isMac ? 'Meta' : 'Control';
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.key === modKey) onHoverElement(null);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== modKey) onHoverElement(null);
+    };
+    const onBlur = () => onHoverElement(null);
+    win.addEventListener('keyup', onKeyUp);
+    win.addEventListener('keydown', onKeyDown);
+    win.addEventListener('blur', onBlur);
+    return () => {
+      win.removeEventListener('keyup', onKeyUp);
+      win.removeEventListener('keydown', onKeyDown);
+      win.removeEventListener('blur', onBlur);
+    };
+  }, [onHoverElement]);
+
+  // Press bookkeeping: where the pointer went down and whether it became a
+  // pan. Pointer capture keeps the pan alive past the host's edge.
+  const pressRef = useRef<{
+    id: number;
+    x: number;
+    y: number;
+    lastX: number;
+    lastY: number;
+    threshold: number;
+    panning: boolean;
+  } | null>(null);
+  const [panning, setPanning] = useState(false);
+
+  const onPointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    pressRef.current = {
+      id: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      lastX: event.clientX,
+      lastY: event.clientY,
+      // A fingertip wobbles more than a mouse: a tap must still be a tap.
+      threshold: event.pointerType === 'touch' ? TOUCH_DRAG_THRESHOLD_PX : DRAG_THRESHOLD_PX,
+      panning: false,
+    };
+  }, []);
+
+  const onPointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const press = pressRef.current;
+      if (press === null || press.id !== event.pointerId) {
+        // Nothing highlights on a plain mouse-over; the ring under the
+        // pointer exists only under the platform modifier.
+        onHoverElement(isModKeyHeld(event) ? targetUnder(event) : null);
+        return;
+      }
+      if (!press.panning) {
+        const travelled = Math.hypot(event.clientX - press.x, event.clientY - press.y);
+        if (travelled < press.threshold) return;
+        press.panning = true;
+        setPanning(true);
+        onHoverElement(null);
+        if (typeof event.currentTarget.setPointerCapture === 'function') {
+          event.currentTarget.setPointerCapture(event.pointerId);
+        }
+      }
+      panBy(event.clientX - press.lastX, event.clientY - press.lastY);
+      press.lastX = event.clientX;
+      press.lastY = event.clientY;
+    },
+    [onHoverElement, panBy, targetUnder],
+  );
+
+  const endPress = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>, click: boolean) => {
+      const press = pressRef.current;
+      if (press === null || press.id !== event.pointerId) return;
+      pressRef.current = null;
+      if (press.panning) {
+        setPanning(false);
+        const target = event.currentTarget;
+        if (typeof target.hasPointerCapture === 'function' && target.hasPointerCapture(event.pointerId)) {
+          target.releasePointerCapture(event.pointerId);
+        }
+        return;
+      }
+      if (click) onClickElement(targetUnder(event), event.shiftKey);
+    },
+    [onClickElement, targetUnder],
+  );
+
+  const onKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      // Keys act on the canvas itself, never on the composer's textarea.
+      if (event.target !== event.currentTarget) return;
+      // Mod+0, Mod+-, Alt+Arrow belong to the browser (page zoom, history).
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      switch (event.key) {
+        case '+':
+        case '=':
+          zoomBy(ZOOM_STEP);
+          break;
+        case '-':
+        case '_':
+          zoomBy(1 / ZOOM_STEP);
+          break;
+        case '0':
+          fit();
+          break;
+        case 'ArrowLeft':
+          panBy(event.shiftKey ? KEY_PAN_PX * 5 : KEY_PAN_PX, 0);
+          break;
+        case 'ArrowRight':
+          panBy(event.shiftKey ? -KEY_PAN_PX * 5 : -KEY_PAN_PX, 0);
+          break;
+        case 'ArrowUp':
+          panBy(0, event.shiftKey ? KEY_PAN_PX * 5 : KEY_PAN_PX);
+          break;
+        case 'ArrowDown':
+          panBy(0, event.shiftKey ? -KEY_PAN_PX * 5 : -KEY_PAN_PX);
+          break;
+        case 'Escape': {
+          if (onEscape() !== 'consumed') return;
+          event.stopPropagation();
+          break;
+        }
+        default:
+          return;
+      }
+      event.preventDefault();
+    },
+    [fit, onEscape, panBy, zoomBy],
+  );
+
+  const handle = useMemo<DiagramCanvasHandle>(() => ({ viewport, hostRef, panIntoView }), [panIntoView, viewport]);
+
+  return (
+    <div
+      ref={hostRef}
+      data-diagram-canvas=""
+      tabIndex={0}
+      aria-label="Diagram canvas. Drag or arrow keys to pan, wheel or plus and minus to zoom, 0 to fit, click a part to comment."
+      className={cn(
+        'relative h-full w-full touch-pan-y select-none overflow-hidden outline-none',
+        panning ? 'cursor-grabbing' : 'cursor-grab',
+        className,
+      )}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={(event) => endPress(event, true)}
+      onPointerCancel={(event) => endPress(event, false)}
+      onPointerLeave={() => onHoverElement(null)}
+      onKeyDown={onKeyDown}
+    >
+      <div
+        ref={wrapperRef}
+        data-diagram-svg=""
+        className={cn('absolute left-0 top-0 origin-top-left transition-opacity duration-150', dimmed && 'opacity-40')}
+        style={{
+          width: content?.width,
+          height: content?.height,
+          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.scale})`,
+        }}
+      />
+      {overlay(handle)}
+      {children}
+      <div
+        // Screen chrome: never printed (rings and badges are, they are the
+        // comments). On a narrow screen the strip takes the left edge so it
+        // never stacks under a host's own bottom-right controls.
+        data-print-hide=""
+        data-diagram-zoom-strip=""
+        className="absolute bottom-3 right-3 z-10 flex items-center gap-0.5 rounded-md border border-border bg-card/85 p-0.5 backdrop-blur max-md:bottom-4 max-md:left-4 max-md:right-auto"
+        role="group"
+        aria-label="Zoom"
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-7"
+          aria-label="Zoom out"
+          title="Zoom out (-)"
+          onClick={() => zoomBy(1 / ZOOM_STEP)}
+        >
+          <Minus aria-hidden="true" />
+        </Button>
+        <Button type="button" variant="ghost" size="icon" className="size-7" aria-label="Fit diagram" title="Fit (0)" onClick={fit}>
+          <Maximize2 aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-7"
+          aria-label="Zoom in"
+          title="Zoom in (+)"
+          onClick={() => zoomBy(ZOOM_STEP)}
+        >
+          <Plus aria-hidden="true" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/components/diagram/DiagramComposer.tsx b/packages/ui/components/diagram/DiagramComposer.tsx
new file mode 100644
index 000000000..75fef2b61
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramComposer.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { diagramTargetName, diagramTargetText } from '@plannotator/core/diagram-anchor';
+import { cn } from '../../lib/utils';
+import type { ScreenRect } from '../../utils/diagram-projection';
+import { Button } from '../ui/button';
+import type { DiagramComposerDraft } from './useDiagramComments';
+
+/**
+ * The inline composer beside the ring: the part's label as the context
+ * line, a textarea, Cancel and Comment. Enter saves, Shift+Enter breaks a
+ * line and Esc discards, and none of the three is spelled on screen (owner
+ * ruling; the markdown composer shows no hint either). It lives here
+ * because the markdown composer is bound to web-highlighter's selection and
+ * the html composer to the sandbox bridge; neither reaches an app-owned svg.
+ */
+
+/** The composer's width; it sits to the right of the ring and flips left
+ * when the host is too narrow there. */
+const COMPOSER_WIDTH_PX = 288;
+
+export function DiagramComposer({
+  draft,
+  anchorRect,
+  hostWidth,
+  sourceDirty,
+  submitting,
+  error,
+  disabledReason,
+  onSubmit,
+  onCancel,
+}: {
+  draft: DiagramComposerDraft;
+  anchorRect: ScreenRect;
+  hostWidth: number;
+  sourceDirty: boolean;
+  submitting: boolean;
+  /** The last submit's failure, shown under the textarea. */
+  error: string | null;
+  /** When set, commenting is off for this viewer and the composer says
+   * why instead of offering a textarea. */
+  disabledReason?: string;
+  onSubmit: (body: string) => void;
+  onCancel: () => void;
+}) {
+  const [text, setText] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const target = draft.primary.target;
+  const unsavedPart = draft.sourceLine === null && sourceDirty;
+  const canWrite = disabledReason === undefined && !unsavedPart;
+  const rightFits = anchorRect.left + anchorRect.width + 12 + COMPOSER_WIDTH_PX <= hostWidth;
+  const left = rightFits ? anchorRect.left + anchorRect.width + 12 : Math.max(0, anchorRect.left - COMPOSER_WIDTH_PX - 12);
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      // Ours: the canvas and whatever holds it (a popout) must not also
+      // act on this Escape.
+      event.preventDefault();
+      event.stopPropagation();
+      onCancel();
+      return;
+    }
+    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      if (canWrite && text.trim() !== '') onSubmit(text);
+    }
+  };
+
+  return (
+    <div
+      data-diagram-composer=""
+      role="dialog"
+      aria-label={`Comment on ${diagramTargetText(target)}`}
+      className="pointer-events-auto absolute z-10 flex w-72 flex-col gap-1.5 rounded-md border border-border bg-card p-2 shadow-lg"
+      style={{ left, top: Math.max(0, anchorRect.top) }}
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerUp={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        // Keys inside the composer never reach the canvas's zoom keys.
+        event.stopPropagation();
+      }}
+    >
+      <div className="text-[10px] text-muted-foreground">
+        On <span className="font-medium text-foreground">{diagramTargetText(target)}</span> ({diagramTargetName(target)})
+        {draft.sourceLine !== null && ` · line ${draft.sourceLine[0]}`}
+        {draft.additional.length > 0 && ` · +${draft.additional.length} more`}
+      </div>
+      {disabledReason === undefined ? (
+        <>
+          {unsavedPart && (
+            <p className="text-[10px] text-warning">This part is only in your unsaved draft. Save the diagram to comment on it.</p>
+          )}
+          <textarea
+            ref={textareaRef}
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder="Add a comment..."
+            rows={3}
+            disabled={submitting}
+            className={cn(
+              'w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground',
+              'outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+            )}
+          />
+          {error !== null && (
+            <p role="alert" className="text-[10px] text-destructive">
+              {error}
+            </p>
+          )}
+          <div className="flex items-center justify-end gap-1">
+            <Button type="button" variant="ghost" size="xs" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button type="button" size="xs" disabled={!canWrite || submitting || text.trim() === ''} onClick={() => onSubmit(text)}>
+              Comment
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <p className="text-xs text-muted-foreground">{disabledReason}</p>
+          <div className="flex justify-end">
+            <Button type="button" variant="ghost" size="xs" onClick={onCancel}>
+              Close
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/components/diagram/DiagramOverlay.tsx b/packages/ui/components/diagram/DiagramOverlay.tsx
new file mode 100644
index 000000000..5d65d40bc
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramOverlay.tsx
@@ -0,0 +1,215 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { diagramTargetName } from '@plannotator/core/diagram-anchor';
+import { cn } from '../../lib/utils';
+import { projectElement, type ScreenRect } from '../../utils/diagram-projection';
+import type { DiagramCanvasHandle } from './DiagramCanvas';
+import type { DiagramComposerDraft, DiagramHover, ResolvedDiagramComment } from './useDiagramComments';
+
+/**
+ * Rings, numbered badges, the hover chip and the composer's anchor point,
+ * projected from each part's `getBBox()` through `getScreenCTM()`. The
+ * layer is a sibling of the transformed wrapper, so a ring is the same 2px
+ * at every zoom. Reprojection is one requestAnimationFrame pass per change
+ * (viewport, host resize, a new render, a new comment list): a design
+ * constant, not a limit.
+ */
+
+/** Ring inset from the part's box, in overlay pixels. */
+const RING_PAD_PX = 3;
+
+interface Projected {
+  readonly id: string;
+  readonly number: number;
+  readonly label: string;
+  readonly resolved: boolean;
+  readonly whole: boolean;
+  readonly rect: ScreenRect;
+  readonly additional: readonly ScreenRect[];
+}
+
+function pad(rect: ScreenRect): ScreenRect {
+  return {
+    left: rect.left - RING_PAD_PX,
+    top: rect.top - RING_PAD_PX,
+    width: rect.width + RING_PAD_PX * 2,
+    height: rect.height + RING_PAD_PX * 2,
+  };
+}
+
+function ringStyle(rect: ScreenRect): React.CSSProperties {
+  return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+}
+
+export function DiagramOverlay({
+  handle,
+  resolved,
+  hover,
+  composer,
+  selectedCommentId,
+  onSelectComment,
+  renderComposer,
+}: {
+  handle: DiagramCanvasHandle;
+  resolved: readonly ResolvedDiagramComment[];
+  hover: DiagramHover | null;
+  composer: DiagramComposerDraft | null;
+  selectedCommentId: string | null;
+  onSelectComment: ((id: string | null) => void) | undefined;
+  /** The composer, given the primary ring's rectangle to sit beside. */
+  renderComposer: (anchorRect: ScreenRect) => React.ReactNode;
+}) {
+  const [projected, setProjected] = useState<readonly Projected[]>([]);
+  const [hoverRect, setHoverRect] = useState<ScreenRect | null>(null);
+  const [draftRects, setDraftRects] = useState<{
+    primary: ScreenRect;
+    additional: readonly ScreenRect[];
+  } | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const { viewport, hostRef, panIntoView } = handle;
+
+  // One projection pass per change, after the wrapper's transform has
+  // been written to the DOM (layout effect), on the next frame.
+  useLayoutEffect(() => {
+    const run = () => {
+      frameRef.current = null;
+      const host = hostRef.current;
+      if (host === null) return;
+      const hostRect = host.getBoundingClientRect();
+      const next: Projected[] = [];
+      for (const entry of resolved) {
+        if (entry.element === null) continue;
+        const rect = projectElement(entry.element, hostRect);
+        if (rect === null) continue;
+        next.push({
+          id: entry.id,
+          number: entry.number,
+          label: entry.label,
+          resolved: entry.resolved,
+          whole: entry.whole,
+          rect: pad(rect),
+          additional: entry.additional
+            .map((el) => projectElement(el, hostRect))
+            .filter((r): r is ScreenRect => r !== null)
+            .map(pad),
+        });
+      }
+      setProjected(next);
+      const hovered = hover === null ? null : projectElement(hover.element, hostRect);
+      setHoverRect(hovered === null ? null : pad(hovered));
+      if (composer === null) {
+        setDraftRects(null);
+      } else {
+        const primary = projectElement(composer.primary.element, hostRect);
+        setDraftRects(
+          primary === null
+            ? null
+            : {
+                primary: pad(primary),
+                additional: composer.additional
+                  .map((extra) => projectElement(extra.element, hostRect))
+                  .filter((r): r is ScreenRect => r !== null)
+                  .map(pad),
+              },
+        );
+      }
+    };
+    if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    if (typeof requestAnimationFrame === 'function') {
+      frameRef.current = requestAnimationFrame(run);
+    } else {
+      run();
+    }
+    return () => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    };
+  }, [composer, hostRef, hover, resolved, viewport]);
+
+  // Selecting a comment in the panel pans its part into view; the ring
+  // pulses through the selected class below.
+  const selectedRect = projected.find((entry) => entry.id === selectedCommentId)?.rect;
+  const pannedForRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (selectedRect === undefined || selectedCommentId === null) return;
+    if (pannedForRef.current === selectedCommentId) return;
+    pannedForRef.current = selectedCommentId;
+    panIntoView(selectedRect);
+  }, [panIntoView, selectedCommentId, selectedRect]);
+  useEffect(() => {
+    if (selectedCommentId === null) pannedForRef.current = null;
+  }, [selectedCommentId]);
+
+  return (
+    <div data-diagram-overlay="" className="pointer-events-none absolute inset-0 z-[1]">
+      {projected.map((entry) => (
+        <div key={entry.id} data-diagram-mark={entry.id} data-number={entry.number}>
+          <div
+            className={cn(
+              'absolute rounded-sm border-2',
+              entry.resolved ? 'border-muted-foreground/50' : 'border-primary/70',
+              entry.id === selectedCommentId && 'animate-pulse border-primary',
+            )}
+            style={ringStyle(entry.rect)}
+            aria-hidden="true"
+          />
+          {entry.additional.map((rect, index) => (
+            <div
+              key={index}
+              className="absolute rounded-sm border-2 border-dashed border-primary/60"
+              style={ringStyle(rect)}
+              aria-hidden="true"
+            />
+          ))}
+          <button
+            type="button"
+            data-diagram-badge={entry.id}
+            className={cn(
+              'pointer-events-auto absolute flex size-5 -translate-y-1/2 items-center justify-center rounded-full border font-mono text-[10px] font-medium tabular-nums',
+              // A part's badge rides its top-right corner; the whole
+              // diagram's sits top-left, clear of the parts' badges.
+              entry.whole ? '-translate-x-1/2' : 'translate-x-1/2',
+              entry.resolved
+                ? 'border-border bg-muted text-muted-foreground'
+                : 'border-primary-foreground/40 bg-primary text-primary-foreground',
+              entry.id === selectedCommentId && 'ring-2 ring-primary/40',
+            )}
+            style={{ left: entry.whole ? entry.rect.left : entry.rect.left + entry.rect.width, top: entry.rect.top }}
+            aria-label={`Comment ${entry.number}: ${entry.label}`}
+            title={entry.label}
+            onClick={(event) => {
+              event.stopPropagation();
+              onSelectComment?.(entry.id);
+            }}
+            onPointerDown={(event) => event.stopPropagation()}
+            onPointerUp={(event) => event.stopPropagation()}
+          >
+            {entry.number}
+          </button>
+        </div>
+      ))}
+      {hoverRect !== null && hover !== null && composer === null && (
+        <div data-diagram-hover="">
+          <div className="absolute rounded-sm border-2 border-primary/50" style={ringStyle(hoverRect)} aria-hidden="true" />
+          <span
+            className="absolute -translate-y-full whitespace-nowrap rounded-sm border border-border bg-card px-1.5 py-0.5 text-[10px] text-muted-foreground"
+            style={{ left: hoverRect.left, top: hoverRect.top - 4 }}
+          >
+            {hover.target.label !== '' ? hover.target.label : diagramTargetName(hover.target)}
+            {hover.target.label !== '' && (
+              <span className="text-muted-foreground/70"> · {diagramTargetName(hover.target)}</span>
+            )}
+          </span>
+        </div>
+      )}
+      {draftRects !== null && composer !== null && (
+        <div data-diagram-draft="">
+          <div className="absolute rounded-sm border-2 border-primary" style={ringStyle(draftRects.primary)} aria-hidden="true" />
+          {draftRects.additional.map((rect, index) => (
+            <div key={index} className="absolute rounded-sm border-2 border-dashed border-primary" style={ringStyle(rect)} aria-hidden="true" />
+          ))}
+          {renderComposer(draftRects.primary)}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/components/diagram/DiagramPopout.tsx b/packages/ui/components/diagram/DiagramPopout.tsx
new file mode 100644
index 000000000..b5d331d4e
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramPopout.tsx
@@ -0,0 +1,70 @@
+import { Code } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../lib/utils';
+import { PopoutDialog } from '../PopoutDialog';
+import { Button } from '../ui/button';
+import { DiagramViewer, type DiagramViewerProps } from './DiagramViewer';
+
+/**
+ * The diagram at full size over the document: the SAME `DiagramViewer` the
+ * fence renders inline, in the `TablePopout` chrome (a non-modal Base UI
+ * dialog with the dark scrim; annotation toolbars that portal outside it
+ * stay interactive). One code path: everything the popout can do, the
+ * inline canvas can do, only larger. The canvas takes the keyboard on
+ * arrival so `+`, `-`, `0` and Escape work without a click; Escape walks
+ * the viewer's ladder first (a draft, a selection) and closes the popout
+ * only when nothing else is left to close.
+ */
+export function DiagramPopout({
+  open,
+  onClose,
+  title,
+  container,
+  dataAttributes,
+  ...viewer
+}: Omit<DiagramViewerProps, 'onDismiss' | 'autoFocus' | 'sourceOpen' | 'className' | 'canvasClassName'> & {
+  open: boolean;
+  onClose: () => void;
+  /** The dialog's accessible name and the header label. */
+  title: string;
+  /** Portal target; null falls back to body. */
+  container?: HTMLElement | null;
+  dataAttributes?: Record<string, string>;
+}) {
+  const [sourceOpen, setSourceOpen] = useState(false);
+  const hasPane = viewer.onSave !== undefined;
+  return (
+    <PopoutDialog
+      open={open}
+      onClose={onClose}
+      title={title}
+      container={container}
+      className="h-[calc(100vh-2rem)] w-[calc(100vw-2rem)] max-w-none"
+      dataAttributes={{ 'data-diagram-popout': '', ...dataAttributes }}
+    >
+      <div className="flex h-9 shrink-0 items-center gap-2 border-b border-border pl-4 pr-12">
+        <span className="truncate text-xs font-medium text-foreground">{title}</span>
+        <span className="flex-1" />
+        {hasPane && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            data-diagram-source-toggle=""
+            aria-pressed={sourceOpen}
+            className={cn('shrink-0', sourceOpen && 'bg-primary/15 text-primary')}
+            title={sourceOpen ? 'Close the source pane' : 'Open the diagram source beside the canvas'}
+            onClick={() => setSourceOpen((value) => !value)}
+          >
+            <Code className="size-3.5" aria-hidden="true" />
+            <span>Source</span>
+          </Button>
+        )}
+      </div>
+      <div className="min-h-0 flex-1">
+        {/* The popout owns the screen: every touch drag is a pan. */}
+        <DiagramViewer {...viewer} sourceOpen={sourceOpen} onDismiss={onClose} autoFocus canvasClassName="touch-none" />
+      </div>
+    </PopoutDialog>
+  );
+}
diff --git a/packages/ui/components/diagram/DiagramSourcePane.tsx b/packages/ui/components/diagram/DiagramSourcePane.tsx
new file mode 100644
index 000000000..afe21c723
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramSourcePane.tsx
@@ -0,0 +1,244 @@
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { Compartment, EditorState, type Extension } from '@codemirror/state';
+import { Decoration, EditorView, keymap, lineNumbers, type DecorationSet } from '@codemirror/view';
+import React, { useEffect, useRef } from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import type { DiagramSourceDraft } from './useDiagramSourceDraft';
+
+/**
+ * The Source pane beside the canvas (owner ruling: source and diagram are
+ * one view; the pane opens beside the canvas and never replaces it). It
+ * opens on the LEFT of the canvas on the desktop row and stacks UNDER it on
+ * the phone; the caller (DiagramViewer) owns that placement through this
+ * component's `className`. A plain-text CodeMirror buffer, read-only
+ * without edit access and never hidden. Save, Discard, "Draft · unsaved"
+ * and the Reload strip live here; the canvas is the live preview. The
+ * selected comment's source line shows as a line mark.
+ *
+ * Not the package MarkdownEditor (markdown extensions, continuous save):
+ * the draft is local until Save.
+ */
+
+const LINE_MARK_CLASS = 'cm-diagram-comment-line';
+
+const paneTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    backgroundColor: 'var(--card)',
+    color: 'var(--card-foreground)',
+    fontFamily: 'var(--font-mono)',
+  },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { fontFamily: 'var(--font-mono)' },
+  '.cm-gutters': {
+    backgroundColor: 'var(--card)',
+    color: 'var(--muted-foreground)',
+    borderRight: '1px solid var(--border)',
+  },
+  '.cm-activeLineGutter': { backgroundColor: 'transparent' },
+  '.cm-content': { padding: '8px 0' },
+  '.cm-line': { padding: '0 12px' },
+  [`.${LINE_MARK_CLASS}`]: { backgroundColor: 'color-mix(in oklab, var(--primary) 18%, transparent)' },
+});
+
+function lineMarks(state: EditorState, range: readonly [number, number] | null): DecorationSet {
+  if (range === null) return Decoration.none;
+  const first = Math.max(1, Math.min(range[0], state.doc.lines));
+  const last = Math.max(first, Math.min(range[1], state.doc.lines));
+  const marks = [];
+  for (let n = first; n <= last; n += 1) {
+    marks.push(Decoration.line({ class: LINE_MARK_CLASS }).range(state.doc.line(n).from));
+  }
+  return Decoration.set(marks);
+}
+
+function Strip({
+  tone,
+  title,
+  children,
+  action,
+  dataAttr,
+}: {
+  tone: 'accent' | 'destructive';
+  title: string;
+  children?: React.ReactNode;
+  action?: React.ReactNode;
+  dataAttr: string;
+}) {
+  return (
+    <div
+      {...{ [dataAttr]: '' }}
+      role={tone === 'destructive' ? 'alert' : 'status'}
+      className={cn(
+        'flex items-start gap-2 rounded-md border px-2.5 py-2 text-xs',
+        tone === 'destructive' ? 'border-destructive/40 bg-destructive/5 text-destructive' : 'border-primary/30 bg-primary/5 text-foreground',
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        <div className="font-medium">{title}</div>
+        {children !== undefined && <div className="mt-0.5 text-muted-foreground">{children}</div>}
+      </div>
+      {action}
+    </div>
+  );
+}
+
+export function DiagramSourcePane({
+  draft,
+  editable,
+  markedLines,
+  className,
+}: {
+  draft: DiagramSourceDraft;
+  editable: boolean;
+  /** The selected comment's source line range, marked in the gutter. */
+  markedLines: readonly [number, number] | null;
+  className?: string;
+}) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const editableCompartment = useRef(new Compartment());
+  const marksCompartment = useRef(new Compartment());
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+
+  // One view for the pane's life; props reconfigure compartments.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (host === null) return;
+    const editableExtensions = (on: boolean): Extension => [EditorView.editable.of(on), EditorState.readOnly.of(!on)];
+    const view = new EditorView({
+      parent: host,
+      state: EditorState.create({
+        doc: draftRef.current.draft,
+        extensions: [
+          lineNumbers(),
+          history(),
+          EditorView.lineWrapping,
+          paneTheme,
+          keymap.of([
+            {
+              key: 'Mod-s',
+              run: () => {
+                void draftRef.current.save();
+                return true;
+              },
+            },
+            ...historyKeymap,
+            ...defaultKeymap,
+          ]),
+          editableCompartment.current.of(editableExtensions(editable)),
+          marksCompartment.current.of(EditorView.decorations.of(Decoration.none)),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) draftRef.current.setDraft(update.state.doc.toString());
+          }),
+        ],
+      }),
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // The initial doc and editable value seed the state; later values
+    // flow through the effects below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: editableCompartment.current.reconfigure([EditorView.editable.of(editable), EditorState.readOnly.of(!editable)]),
+    });
+  }, [editable]);
+
+  // Discard and Reload replace the buffer from outside; typing never
+  // round-trips (the listener above already reported it).
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view === null) return;
+    const current = view.state.doc.toString();
+    if (current === draft.draft) return;
+    view.dispatch({
+      changes: { from: 0, to: current.length, insert: draft.draft },
+    });
+  }, [draft.draft]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view === null) return;
+    view.dispatch({
+      effects: marksCompartment.current.reconfigure(EditorView.decorations.of(lineMarks(view.state, markedLines))),
+    });
+    if (markedLines !== null && markedLines[0] <= view.state.doc.lines) {
+      view.dispatch({
+        effects: EditorView.scrollIntoView(view.state.doc.line(markedLines[0]).from, { y: 'center' }),
+      });
+    }
+  }, [markedLines]);
+
+  return (
+    <section
+      data-diagram-source-pane=""
+      aria-label="Diagram source"
+      className={cn('flex min-h-0 flex-col bg-card', className)}
+      // Escape LEAVES the buffer; it never reaches whatever is behind
+      // the pane. In a popout that outer handler closes it, and one
+      // keystroke mid-draft would take the pane, the preview and the
+      // person's place with it.
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || event.defaultPrevented) return;
+        event.preventDefault();
+        event.stopPropagation();
+        viewRef.current?.contentDOM.blur();
+      }}
+    >
+      <div className="flex h-9 shrink-0 items-center gap-2 border-b border-border px-3">
+        <span className="text-xs font-medium text-foreground">Source</span>
+        {editable && draft.dirty && (
+          <span data-diagram-draft-state="" className="text-[10px] text-muted-foreground">
+            Draft · unsaved
+          </span>
+        )}
+        {!editable && <span className="text-[10px] text-muted-foreground">Read only</span>}
+        <span className="flex-1" />
+        {editable && (
+          <>
+            <Button type="button" variant="ghost" size="xs" disabled={!draft.dirty || draft.saving} onClick={draft.discard}>
+              Discard
+            </Button>
+            <Button type="button" size="xs" disabled={!draft.dirty || draft.saving || draft.stale} onClick={() => void draft.save()}>
+              {draft.saving ? 'Saving…' : 'Save'}
+            </Button>
+          </>
+        )}
+      </div>
+      {draft.stale && (
+        <div className="shrink-0 border-b border-border p-2">
+          <Strip
+            tone="accent"
+            dataAttr="data-diagram-reload-strip"
+            title="Changed since you opened"
+            action={
+              <Button variant="outline" size="xs" onClick={draft.reload}>
+                Reload
+              </Button>
+            }
+          >
+            {draft.dirty
+              ? 'Someone saved a newer version. Reload to see it; your draft stays in the pane and Save is held until you do.'
+              : 'Someone saved a newer version. Reload to see it.'}
+          </Strip>
+        </div>
+      )}
+      {draft.saveError !== null && (
+        <div className="shrink-0 border-b border-border p-2">
+          <Strip tone="destructive" dataAttr="data-diagram-save-error" title="The diagram was not saved">
+            {draft.saveError}
+          </Strip>
+        </div>
+      )}
+      <div ref={hostRef} data-diagram-source-editor="" className="min-h-0 flex-1 overflow-hidden text-xs" />
+    </section>
+  );
+}
diff --git a/packages/ui/components/diagram/DiagramViewer.test.tsx b/packages/ui/components/diagram/DiagramViewer.test.tsx
new file mode 100644
index 000000000..cad0adeeb
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramViewer.test.tsx
@@ -0,0 +1,688 @@
+/**
+ * The diagram viewer over a REAL rendered svg with REAL geometry: the svg is
+ * mermaid's own output for test-setup/fixtures/diagrams/06-flowchart-
+ * review-decision (captured from a headless Chromium, render id
+ * "diagram-fixture"); the numbers beside it are the `getBBox()` and
+ * `getScreenCTM()` Chromium measured for every element.
+ *
+ * Three browser APIs happy-dom does not have are stood in, and nothing
+ * else: (a) the layout engine's answer for a rendered diagram — the captured
+ * svg is handed to the viewer through the package's public host slot
+ * (`setMermaidRuntime(runtime, "host")`), so `renderDiagram` runs the real
+ * slot code over the real bytes and only the layout step is Chromium's;
+ * (b) `SVGGraphicsElement.getBBox` and `getScreenCTM`, installed from the
+ * captured numbers, keyed by the element's rendered id suffix; (c) the
+ * DOMPurify parse step, which happy-dom cannot host (the scrub still runs).
+ * Pointer capture is a no-op stand-in.
+ *
+ * What regresses if these fail:
+ * - rings and badges are placed from stored pixels instead of the current
+ *   CTM, so they drift off their nodes on the first zoom or pan;
+ * - hover and click describe the wrong part (a marker, a label group, the
+ *   background) or the wrong node;
+ * - Enter does not hand the host the anchor: the Mermaid id, the label, the
+ *   DOCUMENT source line (offset applied), the additional targets;
+ * - badge numbers do not follow the `comments` array order;
+ * - a comment whose part is gone is not reported unanchored, or one whose
+ *   id is gone but whose label survives is (restore step 2 runs first);
+ * - a drag pans instead of opening the composer, or a plain click on the
+ *   background does not close an open draft;
+ * - keyboard zoom loses a manual zoom on the next render;
+ * - the Source pane: typing does not preview after the debounce, Save does
+ *   not hand the host the draft, a stale answer does not show Reload while
+ *   keeping the draft, Discard does not restore the baseline.
+ *
+ * DOM-gated (DOM_TESTS=1).
+ */
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { EditorView } from '@codemirror/view';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { installInertDiagramSvgParser } from '../../test-setup/diagramSvg';
+import type { DiagramAnchor, DiagramTarget } from '../../utils/diagram-anchor';
+import { projectElement } from '../../utils/diagram-projection';
+import { __setMermaidRuntimeLoaderForTests, setMermaidRuntime } from '../../utils/mermaid';
+import { DiagramViewer, type DiagramViewerProps } from './DiagramViewer';
+import type { DiagramComment } from './useDiagramComments';
+import { PREVIEW_DEBOUNCE_MS, type SaveResult } from './useDiagramSourceDraft';
+
+const hasDom = typeof document !== 'undefined';
+const FIXTURES = join(import.meta.dir, '..', '..', 'test-setup', 'fixtures', 'diagrams');
+const FIXTURE = '06-flowchart-review-decision';
+const CAPTURE_ID = 'diagram-fixture';
+const SVG = readFileSync(join(FIXTURES, `${FIXTURE}.svg`), 'utf8');
+const SOURCE = ['flowchart LR', '  U([Reviewer]) --> D{Approve?}', '  D -->|Yes| M[(Merge)]', '  D -->|No| R[Revise]', ''].join('\n');
+const THEME = { colorTheme: 'plannotator', mode: 'dark' } as const;
+
+interface CapturedElement {
+  readonly bbox: { x: number; y: number; width: number; height: number };
+  readonly ctm: { a: number; b: number; c: number; d: number; e: number; f: number };
+}
+const GEOMETRY = JSON.parse(readFileSync(join(FIXTURES, `${FIXTURE}.geometry.json`), 'utf8')) as {
+  elements: Record<string, CapturedElement>;
+};
+/** Captured entries keyed by the id suffix after the render id, so they
+ * apply whatever render id the viewer minted. */
+const CAPTURED = Object.entries(GEOMETRY.elements).map(([id, entry]) => [id.slice(CAPTURE_ID.length), entry] as const);
+function capturedFor(el: Element): CapturedElement | null {
+  const found = CAPTURED.find(([suffix]) => el.id.endsWith(suffix));
+  return found === undefined ? null : found[1];
+}
+
+const NODE_D: DiagramAnchor = { v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [2, 2] };
+const NODE_GONE_LABEL_REVISE: DiagramAnchor = { v: 1, family: 'flowchart', kind: 'node', id: 'Gone', label: 'Revise', sourceLine: null };
+const NODE_GONE: DiagramAnchor = { v: 1, family: 'flowchart', kind: 'node', id: 'Gone', label: 'Nowhere', sourceLine: null };
+
+function comment(id: string, anchor: DiagramAnchor): DiagramComment {
+  return { id, anchor, text: 'a comment', author: 'reviewer' };
+}
+
+let root: Root | null = null;
+let host: HTMLElement | null = null;
+let restoreParser: (() => void) | null = null;
+let renderCalls: string[] = [];
+// happy-dom defines the two geometry methods on SVGGraphicsElement, which
+// would shadow a stub on SVGElement; install where the engine defines them.
+const svgProto = (hasDom ? ((globalThis as { SVGGraphicsElement?: typeof SVGElement }).SVGGraphicsElement ?? SVGElement).prototype : {}) as unknown as Record<string, unknown>;
+const elementProto = (hasDom ? Element.prototype : {}) as unknown as Record<string, unknown>;
+const saved = { getBBox: svgProto['getBBox'], getScreenCTM: svgProto['getScreenCTM'] };
+const noop = (): void => {};
+
+beforeAll(() => {
+  if (!hasDom) return;
+  restoreParser = installInertDiagramSvgParser();
+  setMermaidRuntime(
+    {
+      initialize: noop,
+      render: (id: string, source: string) => {
+        renderCalls.push(source);
+        return Promise.resolve({ svg: SVG.replaceAll(CAPTURE_ID, id) });
+      },
+    } as unknown as Parameters<typeof setMermaidRuntime>[0],
+    'host',
+  );
+  elementProto['setPointerCapture'] ??= noop;
+  elementProto['releasePointerCapture'] ??= noop;
+  elementProto['hasPointerCapture'] ??= () => false;
+  svgProto['getBBox'] = function (this: Element) {
+    // The svg root's content bounds: the whole-diagram ring.
+    if (this.tagName.toLowerCase() === 'svg') return { x: 0, y: 0, width: 452, height: 182 };
+    const captured = capturedFor(this);
+    if (captured === null) throw new Error(`no captured geometry for ${this.id}`);
+    return { ...captured.bbox };
+  };
+  svgProto['getScreenCTM'] = function (this: Element) {
+    if (this.tagName.toLowerCase() === 'svg') return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+    return capturedFor(this)?.ctm ?? null;
+  };
+});
+
+afterAll(() => {
+  if (!hasDom) return;
+  svgProto['getBBox'] = saved.getBBox;
+  svgProto['getScreenCTM'] = saved.getScreenCTM;
+  __setMermaidRuntimeLoaderForTests(undefined);
+  restoreParser?.();
+});
+
+afterEach(async () => {
+  if (root !== null) {
+    const finished = root;
+    await act(async () => {
+      finished.unmount();
+    });
+    root = null;
+  }
+  host?.remove();
+  host = null;
+  renderCalls = [];
+});
+
+async function mount(element: React.ReactElement): Promise<{ rerender: (next: React.ReactElement) => Promise<void> }> {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () => {
+    root!.render(element);
+  });
+  return {
+    rerender: async (next) => {
+      await act(async () => {
+        root!.render(next);
+      });
+    },
+  };
+}
+
+async function settle(ms = 25): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+async function waitFor(check: () => void, tries = 40): Promise<void> {
+  let lastError: unknown;
+  for (let i = 0; i < tries; i += 1) {
+    try {
+      check();
+      return;
+    } catch (error) {
+      lastError = error;
+      await settle();
+    }
+  }
+  throw lastError;
+}
+
+function q<T extends Element = HTMLElement>(selector: string): T {
+  const el = host!.querySelector<T>(selector);
+  if (el === null) throw new Error(`missing ${selector}`);
+  return el;
+}
+
+function pointer(type: string, target: Element, init: { x: number; y: number; shift?: boolean; mod?: boolean; pointerId?: number }): void {
+  const Ctor = (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+  const event = new Ctor(type, {
+    bubbles: true,
+    cancelable: true,
+    clientX: init.x,
+    clientY: init.y,
+    button: 0,
+    shiftKey: init.shift ?? false,
+    // The platform modifier, whichever platform happy-dom reports.
+    metaKey: init.mod ?? false,
+    ctrlKey: init.mod ?? false,
+    ...(Ctor !== MouseEvent ? { pointerId: init.pointerId ?? 1 } : {}),
+  } as MouseEventInit);
+  target.dispatchEvent(event);
+}
+
+async function clickPart(target: Element, shift = false): Promise<void> {
+  await act(async () => {
+    pointer('pointerdown', target, { x: 10, y: 10, shift });
+    pointer('pointerup', target, { x: 10, y: 10, shift });
+  });
+}
+
+function viewer(props: Partial<DiagramViewerProps> & { comments?: readonly DiagramComment[] }): React.ReactElement {
+  return <DiagramViewer kind="mermaid" source={SOURCE} theme={THEME} comments={[]} renderId="t" {...props} />;
+}
+
+function nodeD(): Element {
+  return q('[id$="-flowchart-D-1"]');
+}
+
+describe.if(hasDom)('restore and paint', () => {
+  test('paints rings and numbered badges where Chromium put the parts, numbers from array order, and reports the gone ones', async () => {
+    const unanchored: string[][] = [];
+    const rows = [comment('a1', NODE_D), comment('a2', NODE_GONE_LABEL_REVISE), comment('a3', NODE_GONE)];
+    const onUnanchoredChange = (ids: ReadonlySet<string>) => unanchored.push([...ids].sort());
+    const { rerender } = await mount(viewer({ comments: rows, onUnanchoredChange }));
+
+    await waitFor(() => {
+      expect(q('[data-diagram-badge="a1"]').textContent).toBe('1');
+      expect(q('[data-diagram-badge="a2"]').textContent).toBe('2');
+    });
+    expect(host!.querySelector('[data-diagram-badge="a3"]')).toBeNull();
+    expect(unanchored[unanchored.length - 1]).toEqual(['a3']);
+
+    // The ring for node D: Chromium measured the node's box at
+    // (-58.76, -59.26, 118.52 x 118.52) in user units under a CTM that
+    // translates by (207.36, 93.59) and scales by 0.99996, so the screen
+    // rectangle is (148.6, 34.3, 118.5 x 118.5); the ring pads it by 3px.
+    const ring = q<HTMLElement>('[data-diagram-mark="a1"] > div');
+    expect(Number.parseFloat(ring.style.left)).toBeCloseTo(148.6 - 3, 0);
+    expect(Number.parseFloat(ring.style.top)).toBeCloseTo(34.3 - 3, 0);
+    expect(Number.parseFloat(ring.style.width)).toBeCloseTo(118.5 + 6, 0);
+    expect(Number.parseFloat(ring.style.height)).toBeCloseTo(118.5 + 6, 0);
+    // The label fallback ring (a2) sits on node R, not on D.
+    const ringR = q<HTMLElement>('[data-diagram-mark="a2"] > div');
+    expect(Number.parseFloat(ringR.style.left)).toBeCloseTo(339.3 - 3, 0);
+    expect(Number.parseFloat(ringR.style.top)).toBeCloseTo(120.8 - 3, 0);
+
+    // Array order is the number: swap the first two rows.
+    await rerender(viewer({ comments: [rows[1]!, rows[0]!, rows[2]!], onUnanchoredChange }));
+    await waitFor(() => {
+      expect(q('[data-diagram-badge="a2"]').textContent).toBe('1');
+      expect(q('[data-diagram-badge="a1"]').textContent).toBe('2');
+    });
+  });
+
+  test('clicking a badge selects that comment', async () => {
+    const selected: Array<string | null> = [];
+    await mount(viewer({ comments: [comment('a1', NODE_D)], onSelectComment: (id) => selected.push(id) }));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-badge="a1"]')).not.toBeNull());
+    await act(async () => {
+      q<HTMLButtonElement>('[data-diagram-badge="a1"]').click();
+    });
+    expect(selected).toEqual(['a1']);
+  });
+});
+
+describe.if(hasDom)('the projection', () => {
+  test('reprojects from the live CTM (a 2x zoom doubles the rectangle) and answers null with no geometry', async () => {
+    await mount(viewer({}));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    const node = nodeD() as SVGGraphicsElement;
+    const base = projectElement(node, { left: 0, top: 0 })!;
+    expect(base.left).toBeCloseTo(148.6, 0);
+    expect(base.width).toBeCloseTo(118.5, 0);
+    const captured = capturedFor(node)!;
+    const zoomed = { ...captured.ctm, a: captured.ctm.a * 2, d: captured.ctm.d * 2, e: captured.ctm.e * 2, f: captured.ctm.f * 2 };
+    const original = node.getScreenCTM;
+    (node as unknown as Record<string, unknown>)['getScreenCTM'] = () => zoomed;
+    const doubled = projectElement(node, { left: 0, top: 0 })!;
+    expect(doubled.left).toBeCloseTo(base.left * 2, 0);
+    expect(doubled.width).toBeCloseTo(base.width * 2, 0);
+    (node as unknown as Record<string, unknown>)['getScreenCTM'] = () => null;
+    expect(projectElement(node, { left: 0, top: 0 })).toBeNull();
+    (node as unknown as Record<string, unknown>)['getScreenCTM'] = original;
+  });
+});
+
+describe.if(hasDom)('hover, click, compose', () => {
+  test('a plain mouse-over highlights nothing; the ring under the pointer appears only with the platform modifier held', async () => {
+    // Owner feedback: hover targeting read as messy and fought the pan
+    // hand, so nothing paints on a plain move.
+    await mount(viewer({ onCreateComment: noop }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await act(async () => {
+      pointer('pointermove', nodeD(), { x: 10, y: 10 });
+    });
+    await settle();
+    expect(host!.querySelector('[data-diagram-hover]')).toBeNull();
+    await act(async () => {
+      pointer('pointermove', nodeD(), { x: 10, y: 10, mod: true });
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-hover]')).not.toBeNull());
+    expect(q('[data-diagram-hover]').textContent).toContain('Approve?');
+    expect(q('[data-diagram-hover]').textContent).toContain('node D');
+    await act(async () => {
+      pointer('pointermove', nodeD(), { x: 11, y: 10 });
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-hover]')).toBeNull());
+  });
+
+  test('a click on an edge\'s widened hit path, or on its label, opens the composer for that edge', async () => {
+    // Owner feedback: a 1–2 px stroke was only catchable at random spots,
+    // and the label painted over the edge (where a person clicks it) was
+    // not a target at all.
+    const created: Array<{ anchor: DiagramAnchor }> = [];
+    await mount(viewer({ onCreateComment: (anchor) => { created.push({ anchor }); } }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    const edges = Array.from(host!.querySelectorAll('path.flowchart-link'));
+    const hits = Array.from(host!.querySelectorAll('[data-diagram-hit-layer] > [data-diagram-hit]'));
+    expect(hits.length).toBe(edges.length);
+    expect(hits.length).toBe(3);
+    // The pointer lands on the widened path (what a click 6 px off the
+    // visible stroke hits in a browser); the canvas resolves the edge.
+    const edgeDM = q('[id$="-L_D_M_0"]');
+    await clickPart(hits[edges.indexOf(edgeDM)]!);
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    expect(q('[data-diagram-composer]').textContent).toContain('edge D → M');
+    const textarea = q<HTMLTextAreaElement>('[data-diagram-composer] textarea');
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, 'on the edge');
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(created).toHaveLength(1));
+    expect(created[0]!.anchor).toMatchObject({ kind: 'edge', from: 'D', to: 'M', label: 'Yes' });
+
+    // The label "No" is the D → R edge.
+    const labelNo = Array.from(host!.querySelectorAll('g.edgeLabel')).find((g) => g.textContent?.trim() === 'No')!;
+    await clickPart(labelNo.querySelector('p, span, text') ?? labelNo);
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    expect(q('[data-diagram-composer]').textContent).toContain('edge D → R');
+  });
+
+  test('where an edge meets a node the node wins: targets resolve by priority over everything under the pointer', async () => {
+    // The hit layer sits above the nodes, so at an edge's end both are under
+    // the pointer; the topmost element alone would pick the edge.
+    await mount(viewer({ onCreateComment: noop }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    const hit = host!.querySelector('[data-diagram-hit-layer] > [data-diagram-hit]')!;
+    const doc = host!.ownerDocument as Document & { elementsFromPoint?: (x: number, y: number) => Element[] };
+    const original = doc.elementsFromPoint;
+    doc.elementsFromPoint = () => [hit, nodeD().querySelector('polygon, rect, path') ?? nodeD(), q('[data-diagram-canvas]')];
+    try {
+      await clickPart(hit);
+      await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+      expect(q('[data-diagram-composer]').textContent).toContain('node D');
+    } finally {
+      doc.elementsFromPoint = original;
+    }
+  });
+
+  test('a click that resolves no part comments on the WHOLE diagram, so a click never does nothing', async () => {
+    const created: Array<{ anchor: DiagramAnchor }> = [];
+    const { rerender } = await mount(viewer({ sourceLineOffset: 10, onCreateComment: (anchor) => { created.push({ anchor }); } }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await clickPart(q('[data-diagram-svg] > svg'));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    expect(q('[data-diagram-composer]').textContent).toContain('whole diagram');
+    const textarea = q<HTMLTextAreaElement>('[data-diagram-composer] textarea');
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, 'the whole flow is backwards');
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(created).toHaveLength(1));
+    // No id; the label is the first source line; the range is the whole
+    // source, offset into the host's document.
+    expect(created[0]!.anchor).toEqual({ v: 1, family: 'flowchart', kind: 'diagram', label: 'flowchart LR', sourceLine: [11, 14] });
+
+    // Restored, it rings the content bounds and is never unanchored.
+    const unanchored: string[][] = [];
+    await rerender(viewer({ comments: [comment('w1', created[0]!.anchor)], onUnanchoredChange: (ids) => unanchored.push([...ids]) }));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-badge="w1"]')).not.toBeNull());
+    expect(unanchored[unanchored.length - 1] ?? []).toEqual([]);
+  });
+
+  test('click opens the composer at the part; Enter hands the host the anchor with the document line offset and selects nothing else', async () => {
+    const created: Array<{ anchor: DiagramAnchor; text: string; additional: readonly DiagramTarget[] }> = [];
+    await mount(
+      viewer({
+        sourceLineOffset: 10,
+        onCreateComment: (anchor, text, additional) => {
+          created.push({ anchor, text, additional });
+        },
+      }),
+    );
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await clickPart(nodeD());
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    const composer = q('[data-diagram-composer]');
+    expect(composer.textContent).toContain('Approve?');
+    expect(composer.textContent).toContain('node D');
+    // The declaring line of D in the source is 2; the host's offset makes
+    // it a document line.
+    expect(composer.textContent).toContain('line 12');
+    const textarea = q<HTMLTextAreaElement>('[data-diagram-composer] textarea');
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!;
+      setter.call(textarea, 'Rename this step');
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await act(async () => {
+      textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(created).toHaveLength(1));
+    expect(created[0]!.anchor).toEqual({ v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [12, 12] });
+    expect(created[0]!.text).toBe('Rename this step');
+    expect(created[0]!.additional).toEqual([]);
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).toBeNull());
+  });
+
+  test('shift-click adds an edge to the one draft when the host allows extra targets; the default cap of 0 refuses', async () => {
+    const created: Array<{ additional: readonly DiagramTarget[] }> = [];
+    const { rerender } = await mount(
+      viewer({
+        maxAdditionalTargets: 16,
+        onCreateComment: (_anchor, _text, additional) => {
+          created.push({ additional });
+        },
+      }),
+    );
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await clickPart(nodeD());
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await clickPart(q('[id$="-L_D_M_0"]'), true);
+    await waitFor(() => expect(q('[data-diagram-composer]').textContent).toContain('+1 more'));
+    const textarea = q<HTMLTextAreaElement>('[data-diagram-composer] textarea');
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, 'both');
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(created).toHaveLength(1));
+    expect(created[0]!.additional).toEqual([{ family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: 'Yes' }]);
+
+    // The default cap: a shift-click extends nothing.
+    await rerender(viewer({ onCreateComment: noop }));
+    await clickPart(nodeD());
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await clickPart(q('[id$="-L_D_M_0"]'), true);
+    await settle();
+    expect(q('[data-diagram-composer]').textContent).not.toContain('more');
+  });
+
+  test('a 20 px press is a pan and never opens the composer; a 2 px one is a click; a plain click on the background closes the draft; Escape closes it too', async () => {
+    await mount(viewer({ onCreateComment: noop }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    const wrapper = q<HTMLElement>('[data-diagram-svg]');
+    const before = wrapper.style.transform;
+    // A 20 px drag is a pan, never a click.
+    await act(async () => {
+      pointer('pointerdown', nodeD(), { x: 10, y: 10 });
+      pointer('pointermove', nodeD(), { x: 30, y: 10 });
+      pointer('pointerup', nodeD(), { x: 30, y: 10 });
+    });
+    await settle();
+    expect(host!.querySelector('[data-diagram-composer]')).toBeNull();
+    expect(wrapper.style.transform).not.toBe(before);
+    expect(wrapper.style.transform).toContain('translate(20px, 0px)');
+    // A slightly moving press (under the 4 px threshold) is still a click.
+    await act(async () => {
+      pointer('pointerdown', nodeD(), { x: 10, y: 10 });
+      pointer('pointermove', nodeD(), { x: 12, y: 11 });
+      pointer('pointerup', nodeD(), { x: 12, y: 11 });
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await act(async () => {
+      q('[data-diagram-canvas]').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).toBeNull());
+
+    await clickPart(nodeD());
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await clickPart(q('[data-diagram-canvas]'));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).toBeNull());
+
+    await clickPart(nodeD());
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    await act(async () => {
+      q('[data-diagram-canvas]').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).toBeNull());
+  });
+
+  test('refuses honestly when the host disables commenting: the reason, no textarea; and opens nothing with no handler at all', async () => {
+    const { rerender } = await mount(viewer({ commentingDisabledReason: 'You have view access here.' }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    await clickPart(nodeD());
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+    expect(q('[data-diagram-composer]').textContent).toContain('You have view access here.');
+    expect(host!.querySelector('[data-diagram-composer] textarea')).toBeNull();
+
+    await rerender(viewer({}));
+    await settle();
+    await clickPart(nodeD());
+    await settle();
+    expect(host!.querySelector('[data-diagram-composer]')).toBeNull();
+  });
+
+  test('keyboard zoom and fit act on the canvas transform; a re-render keeps a manual zoom until the next fit', async () => {
+    const { rerender } = await mount(viewer({}));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-canvas]')).not.toBeNull());
+    const canvas = q('[data-diagram-canvas]');
+    const wrapper = q<HTMLElement>('[data-diagram-svg]');
+    await act(async () => {
+      canvas.dispatchEvent(new KeyboardEvent('keydown', { key: '+', bubbles: true }));
+    });
+    expect(wrapper.style.transform).toContain('scale(1.25)');
+    await rerender(viewer({ source: SOURCE + '  R --> Q[Queued]\n', comments: [comment('a1', NODE_D)] }));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-badge="a1"]')).not.toBeNull());
+    expect(wrapper.style.transform).toContain('scale(1.25)');
+    await act(async () => {
+      canvas.dispatchEvent(new KeyboardEvent('keydown', { key: '0', bubbles: true }));
+    });
+    expect(wrapper.style.transform).toContain('scale(1)');
+  });
+});
+
+describe.if(hasDom)('the Source pane', () => {
+  function editor(): EditorView {
+    const view = EditorView.findFromDOM(q('[data-diagram-source-editor] .cm-editor'));
+    if (view === null) throw new Error('no editor');
+    return view;
+  }
+
+  async function type(text: string): Promise<void> {
+    await act(async () => {
+      const view = editor();
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } });
+    });
+  }
+
+  test('no onSave means no pane; with onSave the pane previews the draft, saves it, and Discard restores the baseline', async () => {
+    const saves: string[] = [];
+    const onSave = async (source: string): Promise<SaveResult> => {
+      saves.push(source);
+      return { status: 'ok' };
+    };
+    const { rerender } = await mount(viewer({ sourceOpen: true }));
+    await settle();
+    expect(host!.querySelector('[data-diagram-source-pane]')).toBeNull();
+
+    await rerender(viewer({ sourceOpen: true, onSave }));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-source-pane]')).not.toBeNull());
+    expect(editor().state.doc.toString()).toBe(SOURCE);
+    const rendersBefore = renderCalls.length;
+
+    await type(SOURCE + '  R --> Q[Queued]\n');
+    await waitFor(() => expect(host!.querySelector('[data-diagram-draft-state]')).not.toBeNull());
+    // The preview lands after the debounce, once, with the draft.
+    await settle(PREVIEW_DEBOUNCE_MS + 40);
+    await waitFor(() => expect(renderCalls.length).toBe(rendersBefore + 1));
+    expect(renderCalls[renderCalls.length - 1]).toContain('Q[Queued]');
+
+    const save = Array.from(host!.querySelectorAll<HTMLButtonElement>('[data-diagram-source-pane] button')).find((b) => b.textContent === 'Save')!;
+    await act(async () => {
+      save.click();
+    });
+    await waitFor(() => expect(saves).toEqual([SOURCE + '  R --> Q[Queued]\n']));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-draft-state]')).toBeNull());
+
+    await type('flowchart LR\n  A --> B\n');
+    await waitFor(() => expect(host!.querySelector('[data-diagram-draft-state]')).not.toBeNull());
+    const discard = Array.from(host!.querySelectorAll<HTMLButtonElement>('[data-diagram-source-pane] button')).find((b) => b.textContent === 'Discard')!;
+    await act(async () => {
+      discard.click();
+    });
+    await waitFor(() => expect(editor().state.doc.toString()).toBe(SOURCE + '  R --> Q[Queued]\n'));
+    expect(host!.querySelector('[data-diagram-draft-state]')).toBeNull();
+  });
+
+  test('a stale answer shows Reload, holds Save and keeps the draft; Reload adopts the newer text as the baseline', async () => {
+    const NEWER = 'flowchart LR\n  X --> Y\n';
+    const onSave = async (): Promise<SaveResult> => ({ status: 'stale', currentSource: NEWER });
+    await mount(viewer({ sourceOpen: true, onSave }));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-source-pane]')).not.toBeNull());
+    await type(SOURCE + '  R --> Q\n');
+    const buttons = () => Array.from(host!.querySelectorAll<HTMLButtonElement>('[data-diagram-source-pane] button'));
+    await waitFor(() => expect(buttons().find((b) => b.textContent === 'Save')!.disabled).toBe(false));
+    await act(async () => {
+      buttons().find((b) => b.textContent === 'Save')!.click();
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-reload-strip]')).not.toBeNull());
+    expect(buttons().find((b) => b.textContent === 'Save')!.disabled).toBe(true);
+    expect(editor().state.doc.toString()).toBe(SOURCE + '  R --> Q\n');
+    await act(async () => {
+      buttons().find((b) => b.textContent === 'Reload')!.click();
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-reload-strip]')).toBeNull());
+    // The dirty draft stays; the baseline moved, so Save is live again.
+    expect(editor().state.doc.toString()).toBe(SOURCE + '  R --> Q\n');
+    expect(buttons().find((b) => b.textContent === 'Save')!.disabled).toBe(false);
+    await act(async () => {
+      buttons().find((b) => b.textContent === 'Discard')!.click();
+    });
+    await waitFor(() => expect(editor().state.doc.toString()).toBe(NEWER));
+  });
+
+  test('readOnlySource shows the pane without Save', async () => {
+    const onSave = async (): Promise<SaveResult> => ({ status: 'ok' });
+    await mount(viewer({ sourceOpen: true, onSave, readOnlySource: true }));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-source-pane]')).not.toBeNull());
+    expect(q('[data-diagram-source-pane]').textContent).toContain('Read only');
+    expect(Array.from(host!.querySelectorAll('[data-diagram-source-pane] button')).map((b) => b.textContent)).not.toContain('Save');
+  });
+});
+
+describe.if(hasDom)('the canvas as a citizen of the page', () => {
+  test('inline it lets a finger scroll the page (never touch-none); a host that owns the screen opts in; the zoom strip never prints', async () => {
+    // Review blocker: `touch-none` on a diagram up to 65vh tall swallowed
+    // every touch drag, so a phone reader could not scroll past it.
+    const { rerender } = await mount(viewer({}));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-canvas]')).not.toBeNull());
+    expect(q('[data-diagram-canvas]').classList.contains('touch-none')).toBe(false);
+    expect(q('[data-diagram-canvas]').classList.contains('touch-pan-y')).toBe(true);
+    expect(q('[data-diagram-zoom-strip]').hasAttribute('data-print-hide')).toBe(true);
+    await rerender(viewer({ canvasClassName: 'touch-none' }));
+    expect(q('[data-diagram-canvas]').classList.contains('touch-none')).toBe(true);
+    expect(q('[data-diagram-canvas]').classList.contains('touch-pan-y')).toBe(false);
+  });
+
+  test('browser chords pass through: Mod+0, Mod+-, Alt+Arrow are neither handled nor swallowed', async () => {
+    await mount(viewer({}));
+    await waitFor(() => expect(host!.querySelector('[data-diagram-canvas]')).not.toBeNull());
+    const canvas = q('[data-diagram-canvas]');
+    const wrapper = q<HTMLElement>('[data-diagram-svg]');
+    const before = wrapper.style.transform;
+    for (const init of [{ key: '0', metaKey: true }, { key: '-', ctrlKey: true }, { key: 'ArrowLeft', altKey: true }, { key: '+', metaKey: true }]) {
+      const event = new KeyboardEvent('keydown', { ...init, bubbles: true, cancelable: true });
+      await act(async () => {
+        canvas.dispatchEvent(event);
+      });
+      expect(event.defaultPrevented).toBe(false);
+    }
+    expect(wrapper.style.transform).toBe(before);
+    // The bare key still works.
+    await act(async () => {
+      canvas.dispatchEvent(new KeyboardEvent('keydown', { key: '-', bubbles: true, cancelable: true }));
+    });
+    expect(wrapper.style.transform).not.toBe(before);
+  });
+
+  test('the modifier-gated ring disarms on the modifier\'s release, on any other key, and on window blur', async () => {
+    await mount(viewer({ onCreateComment: noop }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    const arm = async () => {
+      await act(async () => {
+        pointer('pointermove', nodeD(), { x: 10, y: 10, mod: true });
+      });
+      await waitFor(() => expect(host!.querySelector('[data-diagram-hover]')).not.toBeNull());
+    };
+    for (const disarm of [
+      () => { window.dispatchEvent(new KeyboardEvent('keyup', { key: 'Meta' })); window.dispatchEvent(new KeyboardEvent('keyup', { key: 'Control' })); },
+      () => window.dispatchEvent(new KeyboardEvent('keydown', { key: 'c', metaKey: true, ctrlKey: true })),
+      () => window.dispatchEvent(new Event('blur')),
+    ]) {
+      await arm();
+      await act(async () => {
+        disarm();
+      });
+      await waitFor(() => expect(host!.querySelector('[data-diagram-hover]')).toBeNull());
+    }
+  });
+
+  test('a finger gets a wider click threshold than a mouse: an 8 px wobble is still a tap', async () => {
+    await mount(viewer({ onCreateComment: noop }));
+    await waitFor(() => expect(host!.querySelector('[id$="-flowchart-D-1"]')).not.toBeNull());
+    const touch = (type: string, x: number) => {
+      const Ctor = (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+      const event = new Ctor(type, { bubbles: true, cancelable: true, clientX: x, clientY: 10, button: 0, ...(Ctor !== MouseEvent ? { pointerId: 7, pointerType: 'touch' } : {}) } as MouseEventInit);
+      if ((event as PointerEvent).pointerType !== 'touch') Object.defineProperty(event, 'pointerType', { value: 'touch' });
+      nodeD().dispatchEvent(event);
+    };
+    await act(async () => {
+      touch('pointerdown', 10);
+      touch('pointermove', 18);
+      touch('pointerup', 18);
+    });
+    await waitFor(() => expect(host!.querySelector('[data-diagram-composer]')).not.toBeNull());
+  });
+});
diff --git a/packages/ui/components/diagram/DiagramViewer.tsx b/packages/ui/components/diagram/DiagramViewer.tsx
new file mode 100644
index 000000000..c2cd4c9f7
--- /dev/null
+++ b/packages/ui/components/diagram/DiagramViewer.tsx
@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+import type { DiagramKind } from '@plannotator/core/diagram-anchor';
+import { cn } from '../../lib/utils';
+import { diagramFamilyOf } from '../../utils/diagram-anchor';
+import { diagramFinder, type DiagramTheme } from '../../utils/diagram-render';
+import { DiagramCanvas, type DiagramCanvasHandle, type DiagramEscapeOutcome } from './DiagramCanvas';
+import { DiagramComposer } from './DiagramComposer';
+import { DiagramOverlay } from './DiagramOverlay';
+import { DiagramSourcePane } from './DiagramSourcePane';
+import { useDiagramComments, type DiagramComment, type DiagramCreateComment } from './useDiagramComments';
+import { useDiagramRender, type DiagramRenderState } from './useDiagramRender';
+import { useDiagramSourceDraft, type SaveResult } from './useDiagramSourceDraft';
+
+/**
+ * The one diagram viewer: the canvas with its overlay, the Source pane on
+ * its LEFT (stacked under it on the phone) when the host can save, the
+ * parse-error strip over a dimmed last-good render. It takes the diagram
+ * source and the host's comments on it, and reports a new comment through
+ * `onCreateComment`; the comments rail, storage and identity are the
+ * host's. Plannotator's fence blocks render through it in the document
+ * (`components/DiagramBlock`) and again at full size in the popout; a host
+ * with its own document store renders it wherever a diagram lives.
+ */
+export interface DiagramViewerProps {
+  readonly kind: DiagramKind;
+  /** The diagram text. With `onSave` this is the saved baseline the pane's
+   * draft starts from; without it, what the canvas renders. */
+  readonly source: string;
+  readonly theme: DiagramTheme;
+  readonly comments: readonly DiagramComment[];
+  /** A comment composed on a part. Absent: clicks open nothing. */
+  readonly onCreateComment?: DiagramCreateComment;
+  /** Save the pane's text. Absent: there is no Source pane. */
+  readonly onSave?: (source: string) => Promise<SaveResult>;
+  /** With `onSave`: show the pane read-only (no edit access). */
+  readonly readOnlySource?: boolean;
+  /** Whether the Source pane is open (the host owns the toggle). */
+  readonly sourceOpen?: boolean;
+  readonly selectedCommentId?: string | null;
+  readonly onSelectComment?: (id: string | null) => void;
+  /** The comments whose part is gone from the current render, once per
+   * membership change, after every render. */
+  readonly onUnanchoredChange?: (ids: ReadonlySet<string>) => void;
+  /** Every comment's verdict (true: its part is in this render), whenever
+   * a verdict or the comment list changes. */
+  readonly onResolutionChange?: (resolution: ReadonlyMap<string, boolean>) => void;
+  /** Escape with no composer open and nothing selected: a popout closes. */
+  readonly onDismiss?: () => void;
+  /** A stable prefix for the rendered element ids; two viewers over one
+   * document need two. */
+  readonly renderId?: string;
+  /** Lines to add so a comment's `sourceLine` names DOCUMENT lines: 0 when
+   * the document is the diagram, the fence's opening line for a fence. */
+  readonly sourceLineOffset?: number;
+  /** Shift-click targets one comment may also cover. Default 0: a comment
+   * covers one part. */
+  readonly maxAdditionalTargets?: number;
+  /** Commenting is off, and this is why (shown in place of the composer). */
+  readonly commentingDisabledReason?: string;
+  /** Bumped by the host's Retry after a failed engine load. */
+  readonly retryToken?: number;
+  /** Every render state change (the host sizes itself, shows its own
+   * pending or error chrome). */
+  readonly onRenderState?: (state: DiagramRenderState) => void;
+  /** What to show while there is no svg yet (the first render pending, or
+   * the first render failed). Default: a quiet status line. */
+  readonly renderFallback?: (state: DiagramRenderState) => ReactNode;
+  /** Take the keyboard on mount (a popout). */
+  readonly autoFocus?: boolean;
+  readonly className?: string;
+  /** Classes for the canvas host. The canvas lets a finger scroll the page
+   * past it (`touch-action: pan-y`); a viewer that owns the whole screen
+   * passes `touch-none`. */
+  readonly canvasClassName?: string;
+}
+
+export function DiagramViewer({
+  kind,
+  source,
+  theme,
+  comments,
+  onCreateComment,
+  onSave,
+  readOnlySource = false,
+  sourceOpen = false,
+  selectedCommentId = null,
+  onSelectComment,
+  onUnanchoredChange,
+  onResolutionChange,
+  onDismiss,
+  renderId = 'diagram',
+  sourceLineOffset = 0,
+  maxAdditionalTargets = 0,
+  commentingDisabledReason,
+  retryToken,
+  onRenderState,
+  renderFallback,
+  autoFocus,
+  className,
+  canvasClassName,
+}: DiagramViewerProps) {
+  const finder = diagramFinder(kind);
+  const familyOf = useCallback((svg: Element) => (kind === 'graphviz' ? ('graphviz' as const) : diagramFamilyOf(svg)), [kind]);
+  const hasPane = onSave !== undefined;
+  const editable = hasPane && !readOnlySource;
+
+  const draft = useDiagramSourceDraft({ source, editable, onSave });
+  const rendered = hasPane ? draft.preview : source;
+  const savedSource = hasPane ? draft.baseline : source;
+  const sourceDirty = hasPane && draft.dirty;
+
+  const render = useDiagramRender(kind, renderId, rendered, theme, { retryToken });
+  useEffect(() => {
+    onRenderState?.(render);
+  }, [onRenderState, render]);
+
+  const [svgRoot, setSvgRoot] = useState<SVGSVGElement | null>(null);
+  const onSvgRoot = useCallback((root: SVGSVGElement | null) => setSvgRoot(root), []);
+
+  const canCreate = onCreateComment !== undefined || commentingDisabledReason !== undefined;
+  const commentsState = useDiagramComments({
+    finder,
+    svgRoot,
+    renderId: render.renderId,
+    renderVersion: render.renderVersion,
+    comments,
+    savedSource,
+    sourceLineOffset,
+    sourceDirty,
+    maxAdditionalTargets,
+    canCreate,
+    onCreateComment,
+    onSelectComment,
+    onUnanchoredChange,
+    onResolutionChange,
+    familyOf,
+  });
+
+  // The selected comment's source line for the pane's gutter mark. The
+  // anchor names DOCUMENT lines; the pane shows the diagram text.
+  const markedLines = useMemo(() => {
+    if (selectedCommentId === null) return null;
+    const line = comments.find((entry) => entry.id === selectedCommentId)?.anchor.sourceLine;
+    if (line === null || line === undefined) return null;
+    return [line[0] - sourceLineOffset, line[1] - sourceLineOffset] as const;
+  }, [comments, selectedCommentId, sourceLineOffset]);
+
+  const onEscape = useCallback((): DiagramEscapeOutcome => {
+    if (commentsState.composer !== null) {
+      commentsState.cancel();
+      return 'consumed';
+    }
+    if (selectedCommentId !== null && onSelectComment !== undefined) {
+      onSelectComment(null);
+      return 'consumed';
+    }
+    onDismiss?.();
+    return 'pass';
+  }, [commentsState, onDismiss, onSelectComment, selectedCommentId]);
+
+  // Closing the pane only closes an open composer so the layout shift does
+  // not strand it; the draft survives a reopen.
+  const cancelComposer = commentsState.cancel;
+  useEffect(() => {
+    if (!sourceOpen) cancelComposer();
+  }, [cancelComposer, sourceOpen]);
+
+  const overlay = useCallback(
+    (handle: DiagramCanvasHandle) => (
+      <DiagramOverlay
+        handle={handle}
+        resolved={commentsState.resolved}
+        hover={commentsState.hover}
+        composer={commentsState.composer}
+        selectedCommentId={selectedCommentId}
+        onSelectComment={onSelectComment}
+        renderComposer={(anchorRect) =>
+          commentsState.composer === null ? null : (
+            <DiagramComposer
+              key={`${commentsState.composer.primary.target.id ?? ''}:${commentsState.composer.primary.target.from ?? ''}:${commentsState.composer.primary.target.to ?? ''}`}
+              draft={commentsState.composer}
+              anchorRect={anchorRect}
+              hostWidth={handle.hostRef.current?.getBoundingClientRect().width ?? 0}
+              sourceDirty={sourceDirty}
+              submitting={commentsState.submitting}
+              error={commentsState.submitError}
+              disabledReason={commentingDisabledReason}
+              onSubmit={(text) => void commentsState.submit(text)}
+              onCancel={commentsState.cancel}
+            />
+          )
+        }
+      />
+    ),
+    [commentingDisabledReason, commentsState, onSelectComment, selectedCommentId, sourceDirty],
+  );
+
+  const showFallback = render.svgNode === null;
+
+  return (
+    // `annotation-exclude`: the document's text highlighter never enters a
+    // diagram, so a text restore can never wrap a <mark> inside the svg.
+    <div data-diagram-viewer="" className={cn('annotation-exclude flex h-full min-h-0 w-full flex-col md:flex-row', className)}>
+      {/* The pane comes FIRST in the row (owner ruling: the source sits on
+          the left of the diagram while editing). On the phone the row is a
+          column and the pane stays stacked UNDER the canvas, which
+          `order-last` keeps while `md:order-first` puts it left from `md`. */}
+      {hasPane && sourceOpen && (
+        <DiagramSourcePane
+          draft={draft}
+          editable={editable}
+          markedLines={markedLines}
+          className="order-last min-h-0 shrink-0 basis-2/5 border-t border-border md:order-first md:w-80 md:basis-auto md:border-r md:border-t-0"
+        />
+      )}
+      <div className="relative min-h-0 min-w-0 flex-1">
+        {showFallback ? (
+          <div data-diagram-fallback="" className="h-full min-h-0 w-full">
+            {renderFallback !== undefined ? (
+              renderFallback(render)
+            ) : (
+              <div className="flex h-full items-center justify-center p-4 text-xs text-muted-foreground" aria-live="polite">
+                {render.error !== null
+                  ? `The diagram does not parse${render.error.line === null ? '' : ` (line ${render.error.line})`}: ${render.error.message}`
+                  : render.pending
+                    ? 'Rendering diagram…'
+                    : 'Nothing to render yet.'}
+              </div>
+            )}
+          </div>
+        ) : (
+          <DiagramCanvas
+            svgNode={render.svgNode}
+            targetSelector={finder.targetSelector}
+            pickTarget={commentsState.pickTarget}
+            className={canvasClassName}
+            dimmed={render.error !== null}
+            onSvgRoot={onSvgRoot}
+            onHoverElement={commentsState.setHoverElement}
+            onClickElement={commentsState.clickElement}
+            onEscape={onEscape}
+            overlay={overlay}
+            autoFocus={autoFocus}
+          >
+            {render.error !== null && (
+              <div
+                data-diagram-parse-error=""
+                role="alert"
+                className="absolute inset-x-3 top-3 z-10 rounded-md border border-warning/40 bg-card/95 px-3 py-2 text-xs shadow-lg backdrop-blur"
+              >
+                <div className="font-medium text-foreground">
+                  {render.error.line === null ? 'The diagram does not parse' : `The diagram does not parse (line ${render.error.line})`}
+                </div>
+                <div className="mt-0.5 text-muted-foreground">
+                  {render.error.message}
+                  {' The last good render stays below.'}
+                </div>
+              </div>
+            )}
+            {/* The chip earns its place only while the pane is closed (the
+                draft survives a close); with the pane open its header carries
+                the one "Draft · unsaved". */}
+            {editable && draft.dirty && !sourceOpen && (
+              <span
+                data-diagram-preview-state=""
+                className="absolute left-3 top-3 z-10 rounded-sm border border-border bg-card/85 px-1.5 py-0.5 text-[10px] text-muted-foreground backdrop-blur"
+              >
+                Draft preview · unsaved
+              </span>
+            )}
+          </DiagramCanvas>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/components/diagram/anchorClaims.ts b/packages/ui/components/diagram/anchorClaims.ts
new file mode 100644
index 000000000..42839478d
--- /dev/null
+++ b/packages/ui/components/diagram/anchorClaims.ts
@@ -0,0 +1,71 @@
+import { createContext } from 'react';
+
+/**
+ * Who shows a diagram comment that names no diagram block of the document.
+ *
+ * A comment composed in a block carries that block's `blockId`. One that
+ * arrives through `POST /api/external-annotations` carries `blockId:
+ * "external"`, and one whose fence was deleted carries an id that no longer
+ * exists; neither says which diagram it belongs to, but its anchor does.
+ * Every diagram block tries such a comment against its own render and
+ * reports the verdict here; the FIRST block in document order whose finder
+ * resolves it shows it, and when every block has answered and none did, it
+ * is unanchored (listed in the rail with the chip, never silently dropped).
+ * A block that has not answered yet keeps the verdict pending, so nothing is
+ * called unanchored while a diagram is still rendering.
+ */
+export class DiagramAnchorClaims {
+  private readonly reports = new Map<string, Map<string, boolean>>();
+  private readonly listeners = new Set<() => void>();
+  private version = 0;
+
+  /** The diagram blocks of the document, in document order. */
+  constructor(readonly blockIds: readonly string[]) {}
+
+  /** A block's verdicts for the unowned comments it tried. Verdicts for ids
+   * it no longer tries are kept: a block stops trying a comment once another
+   * block owns it, and that must not read as "could not resolve". */
+  report(blockId: string, results: ReadonlyMap<string, boolean>): void {
+    let mine = this.reports.get(blockId);
+    let changed = false;
+    if (mine === undefined) {
+      mine = new Map();
+      this.reports.set(blockId, mine);
+      changed = true;
+    }
+    for (const [id, resolved] of results) {
+      if (mine.get(id) !== resolved) {
+        mine.set(id, resolved);
+        changed = true;
+      }
+    }
+    if (!changed) return;
+    this.version += 1;
+    for (const listener of [...this.listeners]) listener();
+  }
+
+  /** The block that shows the comment; `null` when every block answered and
+   * none resolved it (unanchored); `undefined` while an earlier block has
+   * not answered yet. */
+  owner(annotationId: string): string | null | undefined {
+    for (const blockId of this.blockIds) {
+      const verdict = this.reports.get(blockId)?.get(annotationId);
+      if (verdict === undefined) return undefined;
+      if (verdict) return blockId;
+    }
+    return null;
+  }
+
+  readonly subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  readonly getVersion = (): number => this.version;
+}
+
+/** Provided by `Viewer` with the document's diagram block ids; a diagram
+ * block rendered on its own makes a one-block coordinator for itself. */
+export const DiagramAnchorClaimsContext = createContext<DiagramAnchorClaims | null>(null);
diff --git a/packages/ui/components/diagram/index.ts b/packages/ui/components/diagram/index.ts
new file mode 100644
index 000000000..c2af4d13b
--- /dev/null
+++ b/packages/ui/components/diagram/index.ts
@@ -0,0 +1,36 @@
+/**
+ * The diagram engine's host surface (0.41.0): the one viewer over the
+ * renderer slot, its canvas, overlay, composer and Source pane, and the
+ * hooks and types a host wires them with. The renderer slot itself, the
+ * runtime slots and the anchor codecs live under `utils/` (`diagram-render`,
+ * `graphviz`, `mermaid`, `diagram-anchor`, `diagram-anchor-graphviz`,
+ * `diagram-projection`).
+ */
+export { DiagramViewer, type DiagramViewerProps } from './DiagramViewer';
+export { DiagramPopout } from './DiagramPopout';
+export { DiagramCanvas, svgContentSize, KEY_PAN_PX, type DiagramCanvasHandle, type DiagramEscapeOutcome } from './DiagramCanvas';
+export { DiagramOverlay } from './DiagramOverlay';
+export { DiagramComposer } from './DiagramComposer';
+export { DiagramSourcePane } from './DiagramSourcePane';
+export {
+  useDiagramComments,
+  type DiagramComment,
+  type DiagramComposerDraft,
+  type DiagramCreateComment,
+  type DiagramHover,
+  type ResolvedDiagramComment,
+} from './useDiagramComments';
+export { useDiagramRender, type DiagramRenderState } from './useDiagramRender';
+export { useDiagramSourceDraft, PREVIEW_DEBOUNCE_MS, type DiagramSourceDraft, type SaveResult } from './useDiagramSourceDraft';
+export {
+  useDiagramViewport,
+  DRAG_THRESHOLD_PX,
+  TOUCH_DRAG_THRESHOLD_PX,
+  FIT_PADDING_PX,
+  WHEEL_ZOOM_SENSITIVITY,
+  ZOOM_MAX,
+  ZOOM_MIN,
+  ZOOM_STEP,
+  type ContentSize,
+  type Viewport,
+} from './useDiagramViewport';
diff --git a/packages/ui/components/diagram/useDiagramComments.ts b/packages/ui/components/diagram/useDiagramComments.ts
new file mode 100644
index 000000000..f38e0b594
--- /dev/null
+++ b/packages/ui/components/diagram/useDiagramComments.ts
@@ -0,0 +1,341 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildDiagramAnchorValue,
+  diagramFirstSourceLine,
+  type DiagramAnchor,
+  type DiagramFamily,
+  type DiagramTarget,
+} from '@plannotator/core/diagram-anchor';
+import type { DiagramFinder } from '../../utils/diagram-anchor';
+
+/**
+ * Diagram comments: the html-annotation grammar adapted to an app-owned
+ * svg. Hover outlines a part, click opens the composer at it, Enter saves,
+ * shift-click adds targets to the one draft (up to the host's cap); a saved
+ * comment paints as a ring and a numbered badge, numbers from the
+ * `comments` array order. Restore runs the engine's finder
+ * (`finder.findTarget`, from the renderer slot) per comment after every
+ * render (the svg is replaced, so element references are re-resolved), and
+ * the ids that resolve to nothing are reported as the unanchored set,
+ * exactly as the html viewer reports its own.
+ *
+ * The host's storage never enters here: `comments` come in as the adapter
+ * shape and a new comment leaves through `onCreateComment(anchor, text,
+ * additionalTargets)`.
+ */
+
+/** One comment the host holds on this diagram (the adapter's input shape). */
+export interface DiagramComment {
+  readonly id: string;
+  readonly anchor: DiagramAnchor;
+  /** Shift-click targets the one comment also covers; absent for most. */
+  readonly additionalTargets?: readonly DiagramTarget[];
+  readonly text: string;
+  readonly author?: string;
+  readonly resolved?: boolean;
+}
+
+/** The adapter's output: a comment the person composed on a part. The
+ * anchor's `sourceLine` already carries the host's document-line offset. */
+export type DiagramCreateComment = (
+  anchor: DiagramAnchor,
+  text: string,
+  additionalTargets: readonly DiagramTarget[],
+) => void | Promise<unknown>;
+
+export interface ResolvedDiagramComment {
+  readonly id: string;
+  /** Array position in the host's list, 1-based. */
+  readonly number: number;
+  readonly element: Element | null;
+  readonly additional: readonly Element[];
+  readonly label: string;
+  readonly resolved: boolean;
+  /** The comment is on the WHOLE diagram: its ring is the content bounds
+   * and its badge sits top-left. */
+  readonly whole: boolean;
+}
+
+export interface DiagramHover {
+  readonly element: Element;
+  readonly target: DiagramTarget;
+}
+
+export interface DiagramComposerDraft {
+  readonly primary: DiagramHover;
+  readonly additional: readonly DiagramHover[];
+  /** The primary target's line in the SAVED text, offset into the host's
+   * document; null when the part only exists in an unsaved draft (the
+   * composer says so). */
+  readonly sourceLine: readonly [number, number] | null;
+}
+
+export function useDiagramComments({
+  finder,
+  svgRoot,
+  renderId,
+  renderVersion,
+  comments,
+  savedSource,
+  sourceLineOffset,
+  sourceDirty,
+  maxAdditionalTargets,
+  canCreate,
+  onCreateComment,
+  onSelectComment,
+  onUnanchoredChange,
+  onResolutionChange,
+  familyOf,
+}: {
+  /** The engine's id grammar (mermaid or graphviz), from the renderer
+   * slot: the one place the kind reaches this hook. */
+  readonly finder: DiagramFinder;
+  readonly svgRoot: SVGSVGElement | null;
+  readonly renderId: string | null;
+  readonly renderVersion: number;
+  readonly comments: readonly DiagramComment[];
+  /** The baseline (saved) diagram text the anchor's `sourceLine` counts in. */
+  readonly savedSource: string;
+  /** Lines to add so a written `sourceLine` names DOCUMENT lines: 0 when
+   * the document IS the diagram, the fence's opening line for a fence. */
+  readonly sourceLineOffset: number;
+  readonly sourceDirty: boolean;
+  readonly maxAdditionalTargets: number;
+  /** Whether a click may open the composer at all. */
+  readonly canCreate: boolean;
+  readonly onCreateComment: DiagramCreateComment | undefined;
+  readonly onSelectComment: ((id: string | null) => void) | undefined;
+  readonly onUnanchoredChange: ((ids: ReadonlySet<string>) => void) | undefined;
+  /** Every comment's verdict (true: its part is in this render), whenever
+   * any verdict or the comment list changes. `onUnanchoredChange` only
+   * speaks when the unanchored SET changes, which says nothing about a new
+   * comment that resolved. */
+  readonly onResolutionChange: ((resolution: ReadonlyMap<string, boolean>) => void) | undefined;
+  /** The family a whole-diagram comment records (the engine's, from the
+   * rendered svg). */
+  readonly familyOf: (svg: Element) => DiagramFamily;
+}): {
+  readonly resolved: readonly ResolvedDiagramComment[];
+  readonly hover: DiagramHover | null;
+  readonly composer: DiagramComposerDraft | null;
+  readonly submitting: boolean;
+  /** The last submit's failure, shown in the composer; cleared on retry. */
+  readonly submitError: string | null;
+  readonly setHoverElement: (element: Element | null) => void;
+  /** A click without a drag on the canvas: opens or extends the draft. */
+  readonly clickElement: (element: Element | null, shiftKey: boolean) => void;
+  /** The canvas's priority rule over everything under the pointer: a node,
+   * then an edge, then a cluster. */
+  readonly pickTarget: (candidates: readonly Element[]) => Element | null;
+  readonly submit: (body: string) => Promise<void>;
+  readonly cancel: () => void;
+} {
+  const [hover, setHover] = useState<DiagramHover | null>(null);
+  const [composer, setComposer] = useState<DiagramComposerDraft | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const composerOpenRef = useRef(false);
+  composerOpenRef.current = composer !== null;
+
+  // Resolve every comment's parts against the current render. The
+  // renderVersion dependency is the re-resolution after a re-render: the
+  // elements are new objects even when the ids did not change.
+  const resolved = useMemo<readonly ResolvedDiagramComment[]>(() => {
+    void renderVersion;
+    return comments.map((comment, index) => {
+      const anchor = comment.anchor;
+      if (svgRoot === null || renderId === null) {
+        return {
+          id: comment.id,
+          number: index + 1,
+          element: null,
+          additional: [],
+          label: anchor.label,
+          resolved: comment.resolved === true,
+          whole: anchor.kind === 'diagram',
+        };
+      }
+      const element = finder.findTarget(svgRoot, anchor, renderId);
+      const additional = (comment.additionalTargets ?? [])
+        .map((target) => finder.findTarget(svgRoot, target, renderId))
+        .filter((el): el is Element => el !== null);
+      return {
+        id: comment.id,
+        number: index + 1,
+        element,
+        additional,
+        label: anchor.label,
+        resolved: comment.resolved === true,
+        whole: anchor.kind === 'diagram',
+      };
+    });
+  }, [comments, finder, renderId, renderVersion, svgRoot]);
+
+  const lastResolutionRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (svgRoot === null || onResolutionChange === undefined) return;
+    const key = resolved.map((entry) => `${entry.id}:${entry.element === null ? 0 : 1}`).join('\n');
+    if (key === lastResolutionRef.current) return;
+    lastResolutionRef.current = key;
+    onResolutionChange(new Map(resolved.map((entry) => [entry.id, entry.element !== null])));
+  }, [onResolutionChange, resolved, svgRoot]);
+
+  // The unanchored set: comments whose primary part is gone from this
+  // render. Reported only when the membership changes, so the host's state
+  // does not churn per render.
+  const lastReportedRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (svgRoot === null || onUnanchoredChange === undefined) return;
+    const ids = new Set(resolved.filter((entry) => entry.element === null).map((entry) => entry.id));
+    const key = [...ids].sort().join('\n');
+    if (key === lastReportedRef.current) return;
+    lastReportedRef.current = key;
+    onUnanchoredChange(ids);
+  }, [onUnanchoredChange, resolved, svgRoot]);
+
+  // A re-render drops stale element references from the draft and the
+  // hover; the composer re-opens at the same part when it still exists.
+  useEffect(() => {
+    setHover(null);
+    setComposer((current) => {
+      if (current === null || svgRoot === null || renderId === null) return null;
+      const primary = finder.findTarget(svgRoot, current.primary.target, renderId);
+      if (primary === null) return null;
+      return {
+        ...current,
+        primary: { element: primary, target: current.primary.target },
+        additional: current.additional.flatMap((extra) => {
+          const el = finder.findTarget(svgRoot, extra.target, renderId);
+          return el === null ? [] : [{ element: el, target: extra.target }];
+        }),
+      };
+    });
+  }, [finder, renderId, renderVersion, svgRoot]);
+
+  const describe = useCallback(
+    (element: Element | null): DiagramHover | null => {
+      if (element === null || svgRoot === null || renderId === null) return null;
+      const target = finder.targetFromElement(svgRoot, element, renderId);
+      if (target === null) return null;
+      // The part's ONE element: an edge label resolves to its edge, a
+      // sequence actor's bottom box to the same actor as its top box.
+      return { element: finder.findTarget(svgRoot, target, renderId) ?? element, target };
+    },
+    [finder, renderId, svgRoot],
+  );
+
+  const pickTarget = useCallback(
+    (candidates: readonly Element[]): Element | null => {
+      if (svgRoot === null || renderId === null) return candidates[0] ?? null;
+      const kinds = candidates.map((el) => finder.targetFromElement(svgRoot, el, renderId)?.kind ?? null);
+      for (const kind of ['node', 'edge', 'cluster'] as const) {
+        const at = kinds.indexOf(kind);
+        if (at !== -1) return candidates[at] ?? null;
+      }
+      return null;
+    },
+    [finder, renderId, svgRoot],
+  );
+
+  const setHoverElement = useCallback(
+    (element: Element | null) => {
+      setHover((current) => {
+        if (element === null) return current === null ? current : null;
+        if (current !== null && current.element === element) return current;
+        return describe(element);
+      });
+    },
+    [describe],
+  );
+
+  const clickElement = useCallback(
+    (element: Element | null, shiftKey: boolean) => {
+      let part = describe(element);
+      if (part === null) {
+        // The background, a marker, a part no family addresses. A click
+        // there closes an open draft; with none open it comments on the
+        // WHOLE diagram, so a click never does nothing (a sequence note
+        // the codec misses, a gitGraph, a pie, anything future).
+        if (shiftKey) return;
+        if (composerOpenRef.current || !canCreate || svgRoot === null) {
+          setComposer(null);
+          return;
+        }
+        part = {
+          element: svgRoot,
+          target: { family: familyOf(svgRoot), kind: 'diagram', label: diagramFirstSourceLine(savedSource) },
+        };
+      }
+      if (!canCreate) return;
+      setSubmitError(null);
+      setComposer((current) => {
+        if (shiftKey && current !== null && part.target.kind !== 'diagram' && current.primary.target.kind !== 'diagram') {
+          const already =
+            current.primary.element === part.element || current.additional.some((extra) => extra.element === part.element);
+          if (already || current.additional.length >= maxAdditionalTargets) {
+            return current;
+          }
+          return { ...current, additional: [...current.additional, part] };
+        }
+        const line = finder.sourceLine(savedSource, part.target);
+        return {
+          primary: part,
+          additional: [],
+          sourceLine: line === null ? null : [line[0] + sourceLineOffset, line[1] + sourceLineOffset],
+        };
+      });
+    },
+    [canCreate, describe, familyOf, finder, maxAdditionalTargets, savedSource, sourceLineOffset, svgRoot],
+  );
+
+  const cancel = useCallback(() => {
+    setComposer(null);
+    setSubmitError(null);
+  }, []);
+
+  const submit = useCallback(
+    async (body: string) => {
+      if (composer === null || submitting || onCreateComment === undefined) return;
+      if (composer.sourceLine === null && sourceDirty) {
+        setSubmitError('Save the draft before commenting on a part that only exists in it.');
+        return;
+      }
+      const text = body.trim();
+      if (text === '') return;
+      setSubmitting(true);
+      setSubmitError(null);
+      try {
+        await onCreateComment(
+          buildDiagramAnchorValue(composer.primary.target, composer.sourceLine),
+          text,
+          composer.additional.map((extra) => extra.target),
+        );
+        setComposer(null);
+      } catch (error) {
+        // The draft stays open with its text; the person retries.
+        setSubmitError(error instanceof Error && error.message ? error.message : "Couldn't save the comment. Try again.");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [composer, onCreateComment, sourceDirty, submitting],
+  );
+
+  // Selecting through a badge is the host's selection, so the panel and
+  // the ring agree.
+  void onSelectComment;
+
+  return {
+    resolved,
+    hover,
+    composer,
+    submitting,
+    submitError,
+    setHoverElement,
+    clickElement,
+    pickTarget,
+    submit,
+    cancel,
+  };
+}
diff --git a/packages/ui/components/diagram/useDiagramRender.ts b/packages/ui/components/diagram/useDiagramRender.ts
new file mode 100644
index 000000000..2f5445434
--- /dev/null
+++ b/packages/ui/components/diagram/useDiagramRender.ts
@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react';
+import {
+  renderDiagram,
+  type DiagramKind,
+  type DiagramRenderError,
+  type DiagramRenderResult,
+  type DiagramTheme,
+} from '../../utils/diagram-render';
+
+function isRenderError(result: DiagramRenderResult): result is DiagramRenderError {
+  return result.ok === false;
+}
+
+export interface DiagramRenderState {
+  /** The last GOOD render's sanitized svg root, kept (dimmed) under a
+   * parse error. The hook never holds markup: the render slot sanitizes
+   * into a node and the canvas mounts it. */
+  readonly svgNode: SVGSVGElement | null;
+  /** The render id the current svg was rendered with (the id prefix the
+   * anchor finder strips). */
+  readonly renderId: string | null;
+  /** Increments per successful render: the overlay re-resolves elements. */
+  readonly renderVersion: number;
+  readonly error: {
+    readonly message: string;
+    readonly line: number | null;
+    /** The engine could not be loaded: a Retry can change this one. */
+    readonly runtimeUnavailable: boolean;
+  } | null;
+  readonly pending: boolean;
+}
+
+let renderCounter = 0;
+
+/**
+ * Render `source` through the renderer slot whenever it, the kind, the
+ * theme or `retryToken` changes. Each render gets its own id
+ * (`diagram-<documentId>-<n>`): Mermaid removes any existing element with
+ * the id it is asked to render into, so reusing one id would tear the
+ * displayed svg out of the page mid-render.
+ */
+export function useDiagramRender(
+  kind: DiagramKind,
+  documentId: string,
+  source: string,
+  theme: DiagramTheme,
+  options?: { readonly retryToken?: number },
+): DiagramRenderState {
+  const retryToken = options?.retryToken ?? 0;
+  const [state, setState] = useState<DiagramRenderState>({
+    svgNode: null,
+    renderId: null,
+    renderVersion: 0,
+    error: null,
+    pending: true,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+    renderCounter += 1;
+    const renderId = `diagram-${documentId.replace(/[^\w-]/gu, '')}-${renderCounter}`;
+    // A new attempt after a failed engine load (a Retry) shows the pending
+    // state again rather than the stale error; a parse error stays on
+    // screen until the new result lands, so a typing burst does not blink.
+    setState((current) => {
+      const error = current.error?.runtimeUnavailable ? null : current.error;
+      return current.pending && error === current.error ? current : { ...current, error, pending: true };
+    });
+    void renderDiagram(kind, renderId, source, theme).then((result: DiagramRenderResult) => {
+      if (cancelled) return;
+      if (isRenderError(result)) {
+        const error = { message: result.message, line: result.line, runtimeUnavailable: result.runtimeUnavailable };
+        setState((current) => ({ ...current, error, pending: false }));
+        return;
+      }
+      const svgNode = result.svgNode;
+      setState((current) => ({
+        svgNode,
+        renderId,
+        renderVersion: current.renderVersion + 1,
+        error: null,
+        pending: false,
+      }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [documentId, kind, source, theme, retryToken]);
+
+  return state;
+}
diff --git a/packages/ui/components/diagram/useDiagramSourceDraft.ts b/packages/ui/components/diagram/useDiagramSourceDraft.ts
new file mode 100644
index 000000000..a1e2396e6
--- /dev/null
+++ b/packages/ui/components/diagram/useDiagramSourceDraft.ts
@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * The draft-and-save model behind the Source pane: the pane's buffer is
+ * LOCAL until Save. The canvas re-renders from the draft after a short
+ * debounce (the live preview); Save hands the whole text to the host's
+ * `onSave` and makes one save point on the host's side; Discard drops the
+ * draft. A source that changed underneath (the host's `source` prop moved
+ * while the draft was dirty, or `onSave` answered `stale`) shows "Changed
+ * since you opened" with Reload before Save is allowed again; Reload
+ * adopts the newer text as the baseline and keeps a dirty draft's text (no
+ * three-way merge).
+ *
+ * No continuous save exists here on purpose: a diagram mid-edit is a
+ * broken diagram, and every keystroke saved would ship broken versions.
+ */
+
+/** The canvas re-renders the draft this long after the last keystroke. The
+ * runtime re-lays out the whole diagram per render, so a typing burst is
+ * one render, not one per key. A design constant, not a limit on the
+ * person. */
+export const PREVIEW_DEBOUNCE_MS = 250;
+
+/** What the host answers a Save with. `ok` means the text is the new
+ * baseline; `stale` means someone else saved first and the host hands back
+ * what is there now, which Reload adopts. Any other failure is a thrown
+ * error, shown as the save error with its message. */
+export type SaveResult = { readonly status: 'ok' } | { readonly status: 'stale'; readonly currentSource: string };
+
+export interface DiagramSourceDraft {
+  /** The buffer's text. */
+  readonly draft: string;
+  /** The debounced draft the canvas renders. */
+  readonly preview: string;
+  /** The last saved text: the anchor writer's source. */
+  readonly baseline: string;
+  readonly dirty: boolean;
+  readonly saving: boolean;
+  /** The source moved under the draft (the prop, or a stale answer). */
+  readonly stale: boolean;
+  readonly saveError: string | null;
+  readonly setDraft: (next: string) => void;
+  readonly save: () => Promise<void>;
+  readonly discard: () => void;
+  readonly reload: () => void;
+}
+
+export function useDiagramSourceDraft({
+  source,
+  editable,
+  onSave,
+}: {
+  /** The host's current text for the diagram. */
+  readonly source: string;
+  readonly editable: boolean;
+  readonly onSave: ((source: string) => Promise<SaveResult>) | undefined;
+}): DiagramSourceDraft {
+  const [baseline, setBaseline] = useState(source);
+  const [draft, setDraftState] = useState(source);
+  const [preview, setPreview] = useState(source);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  // The newer text the host holds, when it differs from the baseline: a
+  // prop that moved under a dirty draft, or a stale save's answer.
+  const [newer, setNewer] = useState<string | null>(null);
+  const dirty = draft !== baseline;
+  const dirtyRef = useRef(dirty);
+  dirtyRef.current = dirty;
+
+  // A new source (the host's refresh, our own save echoed back) is adopted
+  // when the draft is clean; a dirty draft keeps its text and the strip
+  // asks for Reload.
+  useEffect(() => {
+    if (dirtyRef.current) {
+      setBaseline((current) => {
+        if (current !== source) setNewer(source);
+        return current;
+      });
+      return;
+    }
+    setBaseline(source);
+    setDraftState(source);
+    setPreview(source);
+    setNewer(null);
+  }, [source]);
+
+  // The live preview: one render per typing burst.
+  useEffect(() => {
+    if (draft === preview) return;
+    const timer = setTimeout(() => setPreview(draft), PREVIEW_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft, preview]);
+
+  const setDraft = useCallback(
+    (next: string) => {
+      if (!editable) return;
+      setDraftState(next);
+      setSaveError(null);
+    },
+    [editable],
+  );
+
+  const stale = newer !== null && newer !== baseline;
+
+  const save = useCallback(async () => {
+    if (!editable || saving || !dirtyRef.current || onSave === undefined) return;
+    const text = draft;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      const result = await onSave(text);
+      if (result.status === 'stale') {
+        setNewer(result.currentSource);
+      } else {
+        setBaseline(text);
+        setNewer(null);
+      }
+    } catch (error) {
+      setSaveError(error instanceof Error && error.message ? error.message : 'The diagram could not be saved.');
+    } finally {
+      setSaving(false);
+    }
+  }, [draft, editable, onSave, saving]);
+
+  const discard = useCallback(() => {
+    setDraftState(baseline);
+    setPreview(baseline);
+    setSaveError(null);
+  }, [baseline]);
+
+  const reload = useCallback(() => {
+    if (newer === null) return;
+    setBaseline(newer);
+    setSaveError(null);
+    if (!dirtyRef.current) {
+      setDraftState(newer);
+      setPreview(newer);
+    }
+    setNewer(null);
+  }, [newer]);
+
+  return { draft, preview, baseline, dirty, saving, stale, saveError, setDraft, save, discard, reload };
+}
diff --git a/packages/ui/components/diagram/useDiagramViewport.ts b/packages/ui/components/diagram/useDiagramViewport.ts
new file mode 100644
index 000000000..fa1f4ac3c
--- /dev/null
+++ b/packages/ui/components/diagram/useDiagramViewport.ts
@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
+import type { ScreenRect } from '../../utils/diagram-projection';
+
+/**
+ * The canvas viewport: a translate plus a scale on the wrapper around the
+ * rendered svg (zoom, pan and fit are the primary interaction). Every
+ * constant below is a design constant with its reason, never a cap on what
+ * a person may do with the diagram.
+ */
+
+/** Zoom range. Below 0.1 a 1000px diagram is a 100px smudge and the rings
+ * collapse onto each other; above 8 a node label is a screenful. The
+ * range keeps the render legible and the transform finite. */
+export const ZOOM_MIN = 0.1;
+export const ZOOM_MAX = 8;
+/** One key press or one corner-control click. 1.25 needs four presses to
+ * double, which is fine-grained enough to land on a node. */
+export const ZOOM_STEP = 1.25;
+/** Wheel zoom: factor = exp(-deltaY * sensitivity). One 100px notch is
+ * about 1.22x, close to ZOOM_STEP so keys and wheel feel the same. */
+export const WHEEL_ZOOM_SENSITIVITY = 0.002;
+/** The distance a pointer must travel before a press becomes a pan. Under
+ * it, releasing is a click on the part beneath (the pinpoint). */
+export const DRAG_THRESHOLD_PX = 4;
+/** The same threshold for a finger, which wobbles more than a mouse: a tap
+ * that drifts a few pixels must still be a tap. */
+export const TOUCH_DRAG_THRESHOLD_PX = 10;
+/** Fit leaves this much air on every side of the host so the outermost
+ * node and its ring never touch the edge; the badge (a 20px disc at the
+ * node's top-right corner) stays inside it. */
+export const FIT_PADDING_PX = 24;
+
+export interface Viewport {
+  readonly x: number;
+  readonly y: number;
+  readonly scale: number;
+}
+
+export interface ContentSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+const IDENTITY: Viewport = { x: 0, y: 0, scale: 1 };
+
+function clampScale(scale: number): number {
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, scale));
+}
+
+export function useDiagramViewport(
+  hostRef: RefObject<HTMLElement | null>,
+  content: ContentSize | null,
+): {
+  readonly viewport: Viewport;
+  readonly fit: () => void;
+  readonly zoomBy: (factor: number, clientX?: number, clientY?: number) => void;
+  readonly panBy: (dx: number, dy: number) => void;
+  readonly panIntoView: (rect: ScreenRect) => void;
+} {
+  const [viewport, setViewport] = useState<Viewport>(IDENTITY);
+  const contentRef = useRef(content);
+  contentRef.current = content;
+  // Whether the person zoomed or panned since the last fit. While true, a
+  // new render (the draft preview) or a host resize (the Source pane
+  // opening, the window) keeps their view; a fit (the key, the control, a
+  // first arrival) clears it.
+  const adjustedRef = useRef(false);
+
+  const fit = useCallback(() => {
+    const host = hostRef.current;
+    const size = contentRef.current;
+    if (host === null || size === null || size.width <= 0 || size.height <= 0) {
+      setViewport(IDENTITY);
+      return;
+    }
+    const rect = host.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      // No layout (a hidden tab, happy-dom): identity until a size arrives.
+      setViewport(IDENTITY);
+      return;
+    }
+    const availableWidth = Math.max(1, rect.width - FIT_PADDING_PX * 2);
+    const availableHeight = Math.max(1, rect.height - FIT_PADDING_PX * 2);
+    const scale = clampScale(Math.min(availableWidth / size.width, availableHeight / size.height));
+    adjustedRef.current = false;
+    setViewport({
+      x: (rect.width - size.width * scale) / 2,
+      y: (rect.height - size.height * scale) / 2,
+      scale,
+    });
+  }, [hostRef]);
+
+  // Fit on arrival and on every new content size (a first render, a
+  // re-render with a different bounding box) and on host resize (the
+  // Source pane opening, the window), unless the person has zoomed or
+  // panned since the last fit: then their view stands until they fit again.
+  useEffect(() => {
+    if (!adjustedRef.current) fit();
+    const host = hostRef.current;
+    if (host === null || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => {
+      if (!adjustedRef.current) fit();
+    });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [fit, hostRef, content]);
+
+  const zoomBy = useCallback(
+    (factor: number, clientX?: number, clientY?: number) => {
+      const host = hostRef.current;
+      adjustedRef.current = true;
+      setViewport((current) => {
+        const scale = clampScale(current.scale * factor);
+        if (scale === current.scale) return current;
+        const rect = host?.getBoundingClientRect();
+        // Zoom about the pointer when given, else the host's center, so
+        // the part under the cursor stays under the cursor.
+        const px = clientX !== undefined && rect ? clientX - rect.left : (rect?.width ?? 0) / 2;
+        const py = clientY !== undefined && rect ? clientY - rect.top : (rect?.height ?? 0) / 2;
+        const ratio = scale / current.scale;
+        return {
+          x: px - (px - current.x) * ratio,
+          y: py - (py - current.y) * ratio,
+          scale,
+        };
+      });
+    },
+    [hostRef],
+  );
+
+  const panBy = useCallback((dx: number, dy: number) => {
+    adjustedRef.current = true;
+    setViewport((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
+  }, []);
+
+  const panIntoView = useCallback(
+    (target: ScreenRect) => {
+      const host = hostRef.current;
+      if (host === null) return;
+      const rect = host.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      const inside =
+        target.left >= 0 &&
+        target.top >= 0 &&
+        target.left + target.width <= rect.width &&
+        target.top + target.height <= rect.height;
+      if (inside) return;
+      const dx = rect.width / 2 - (target.left + target.width / 2);
+      const dy = rect.height / 2 - (target.top + target.height / 2);
+      setViewport((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
+    },
+    [hostRef],
+  );
+
+  return { viewport, fit, zoomBy, panBy, panIntoView };
+}
diff --git a/packages/ui/components/mermaidSvg.ts b/packages/ui/components/mermaidSvg.ts
deleted file mode 100644
index 522b938e0..000000000
--- a/packages/ui/components/mermaidSvg.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// Pure SVG-markup helpers for MermaidBlock. Kept free of React and the
-// mermaid library so they can be unit-tested without loading mermaid's
-// browser-only `initialize()` (which throws in headless test environments).
-
-// Bake sizing attrs into the SVG markup so they survive repeated
-// dangerouslySetInnerHTML re-injection — imperative setAttribute gets wiped.
-export function normalizeMermaidSvgMarkup(markup: string): string {
-  return markup.replace(/<svg\b([^>]*)>/i, (_match, attrs: string) => {
-    let next = attrs;
-
-    if (/\bstyle\s*=\s*"/i.test(next)) {
-      next = next.replace(/\bstyle\s*=\s*"([^"]*)"/i, (_m, styleVal: string) => {
-        const rules = styleVal
-          .split(';')
-          .map((s) => s.trim())
-          .filter((s) => s.length > 0 && !/^max-width\s*:/i.test(s));
-        rules.push('max-width: none');
-        return `style="${rules.join('; ')}"`;
-      });
-    } else {
-      next += ' style="max-width: none"';
-    }
-
-    if (!/\bpreserveAspectRatio\s*=/i.test(next)) {
-      next += ' preserveAspectRatio="xMidYMid meet"';
-    }
-    if (!/\bheight\s*=/i.test(next)) {
-      next += ' height="100%"';
-    }
-
-    return `<svg${next}>`;
-  });
-}
diff --git a/packages/ui/hooks/useAnnotationHighlighter.diagramSkip.test.tsx b/packages/ui/hooks/useAnnotationHighlighter.diagramSkip.test.tsx
new file mode 100644
index 000000000..8f4908eff
--- /dev/null
+++ b/packages/ui/hooks/useAnnotationHighlighter.diagramSkip.test.tsx
@@ -0,0 +1,113 @@
+/**
+ * A comment on a rendered diagram part has no text anchor; the highlighter
+ * must leave it alone.
+ *
+ * What regresses if this fails: the restore pass tries to find the node's
+ * label ("Approve?") in the prose, paints a stray highlight on the first
+ * prose match, or reports the row as unanchored so the panel shows an
+ * "Unanchored" chip on a comment the diagram overlay restored fine.
+ *
+ * DOM-gated (DOM_TESTS=1).
+ */
+import { describe, expect, test } from 'bun:test';
+import React, { useRef } from 'react';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AnnotationType, type Annotation } from '../types';
+
+const hasDom = typeof document !== 'undefined';
+
+// web-highlighter reads `window` at module-eval time (see the sibling test).
+const mod = hasDom ? await import('./useAnnotationHighlighter') : null;
+const useAnnotationHighlighter =
+  mod?.useAnnotationHighlighter as typeof import('./useAnnotationHighlighter')['useAnnotationHighlighter'];
+type Report = import('./useAnnotationHighlighter').AnnotationRestoreReport;
+
+const DIAGRAM: Annotation = {
+  id: 'd1',
+  blockId: 'block-2',
+  startOffset: 0,
+  endOffset: 0,
+  type: AnnotationType.COMMENT,
+  text: 'rename',
+  originalText: 'Approve?',
+  createdA: 1,
+  diagramAnchor: { v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [7, 7] },
+};
+const TEXT: Annotation = {
+  id: 't1',
+  blockId: 'block-1',
+  startOffset: 0,
+  endOffset: 0,
+  type: AnnotationType.COMMENT,
+  text: 'hm',
+  originalText: 'nowhere in the document',
+  createdA: 2,
+};
+
+/** A text row whose quote exists ONLY inside a diagram (a reply that lost
+ * its anchor, an older writer). */
+const IN_DIAGRAM_ONLY: Annotation = { ...TEXT, id: 't2', originalText: 'OnlyInsideTheDiagram' };
+
+const ANNOTATIONS = [DIAGRAM, TEXT, IN_DIAGRAM_ONLY];
+
+function Harness({ onReport, applyRef }: { onReport: (report: Report) => void; applyRef: { current: (() => void) | null } }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const hook = useAnnotationHighlighter({
+    containerRef,
+    annotations: ANNOTATIONS,
+    selectedAnnotationId: null,
+    mode: 'comment',
+    onAddAnnotation: () => {},
+    onRestoreReport: onReport,
+  });
+  // The restore pass is imperative (Viewer runs it once the blocks are on
+  // screen); the harness runs it the same way.
+  applyRef.current = () => hook.applyAnnotations(ANNOTATIONS);
+  return (
+    <div ref={containerRef}>
+      <p data-block-id="block-1">Should we Approve? the plan</p>
+      {/* What DiagramBlock renders: the diagram is excluded from the text layer. */}
+      <div className="annotation-exclude" data-block-id="block-2" data-diagram-block="mermaid">
+        <svg>
+          <text>OnlyInsideTheDiagram</text>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+describe('useAnnotationHighlighter: diagram anchors', () => {
+  test.skipIf(!hasDom)('a diagramAnchor row is neither painted, attempted nor unanchored', async () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    const reports: Report[] = [];
+    const applyRef: { current: (() => void) | null } = { current: null };
+    await act(async () => {
+      root.render(<Harness onReport={(r) => reports.push(r)} applyRef={applyRef} />);
+    });
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 30));
+    });
+    await act(async () => {
+      applyRef.current?.();
+      await new Promise((r) => setTimeout(r, 30));
+    });
+    const last = reports[reports.length - 1];
+    expect(last).toBeDefined();
+    expect(last!.attempted).not.toContain('d1');
+    expect(last!.unanchored).not.toContain('d1');
+    // The text row went through the pass as usual; the diagram row's label
+    // IS in the prose and must not be painted there.
+    expect(last!.attempted).toContain('t1');
+    expect(host.querySelector('[data-bind-id="d1"], [data-highlight-id="d1"]')).toBeNull();
+    expect(host.querySelectorAll('mark').length).toBe(0);
+    // Text restore never enters a diagram: no <mark> is ever wrapped into
+    // the svg, whatever the row's quote is.
+    expect(host.querySelector('[data-diagram-block] mark')).toBeNull();
+    expect(host.querySelector('svg')!.innerHTML).not.toContain('mark');
+    await act(async () => root.unmount());
+    host.remove();
+  });
+});
diff --git a/packages/ui/hooks/useAnnotationHighlighter.ts b/packages/ui/hooks/useAnnotationHighlighter.ts
index 84c082b64..3d1d8f56f 100644
--- a/packages/ui/hooks/useAnnotationHighlighter.ts
+++ b/packages/ui/hooks/useAnnotationHighlighter.ts
@@ -1036,6 +1036,11 @@ export function useAnnotationHighlighter({
 
     anns.forEach(ann => {
       if (ann.type === AnnotationType.GLOBAL_COMMENT) return;
+      // A comment on a rendered diagram part has no text anchor: the
+      // diagram overlay restores it against its render and reports its own
+      // verdict, so it is neither attempted nor unanchored here (the same
+      // rule the raw-HTML pinpoints follow on their surface).
+      if (ann.diagramAnchor) return;
       attempted.push(ann.id);
 
       // Skip if already highlighted
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 25d3ab0bc..b7e0c2924 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "type": "module",
   "exports": {
     "./components/*": "./components/*.tsx",
@@ -10,6 +10,8 @@
     "./components/goal-setup/*": "./components/goal-setup/*.tsx",
     "./components/ImageAnnotator": "./components/ImageAnnotator/index.tsx",
     "./components/html-viewer": "./components/html-viewer/index.ts",
+    "./components/diagram": "./components/diagram/index.ts",
+    "./components/diagram/*": "./components/diagram/*.tsx",
     "./components/html-viewer/bridge-script": "./components/html-viewer/bridge-script.ts",
     "./components/html-viewer/bridge-script.asset.js": "./components/html-viewer/bridge-script.asset.js",
     "./components/html-viewer/bridge-script.lite": "./components/html-viewer/bridge-script.lite.ts",
@@ -74,11 +76,11 @@
     "@lezer/highlight": "^1.2.3",
     "@pierre/diffs": "1.3.6",
     "@plannotator/atomic-editor": "^0.8.0",
-    "@plannotator/core": "0.25.3",
+    "@plannotator/core": "0.25.4",
     "@plannotator/markdown-editor": "^0.4.0",
     "@plannotator/web-highlighter": "^0.8.1",
     "@tanstack/react-table": "^8.21.3",
-    "@viz-js/viz": "^3.29.0",
+    "@viz-js/viz": "3.30.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "diff": "^8.0.4",
diff --git a/packages/ui/test-setup/diagramSvg.ts b/packages/ui/test-setup/diagramSvg.ts
new file mode 100644
index 000000000..eeb82cdcb
--- /dev/null
+++ b/packages/ui/test-setup/diagramSvg.ts
@@ -0,0 +1,37 @@
+/**
+ * happy-dom cannot host DOMPurify (see `__setDiagramSvgParserForTests` in
+ * utils/diagram-render), so DOM tests that render a diagram parse the
+ * engine's markup through an inert `<template>` of the page document instead
+ * of DOMPurify's fragment; the scrub pass still runs on every render. The
+ * DOMPurify parse itself is proven in a browser, never here.
+ */
+import { __setDiagramSvgParserForTests } from '../utils/diagram-render';
+
+export function parseInertSvg(markup: string): SVGSVGElement | null {
+  // happy-dom's HTML parser stops at a `<style>` inside foreign content (a
+  // real mermaid svg parses to one element); its XML parser reads the whole
+  // document with the right namespaces. The template parse stays as the
+  // fallback for markup that is not well-formed XML.
+  try {
+    const doc = new DOMParser().parseFromString(markup, 'image/svg+xml');
+    const root = doc.documentElement;
+    // A root without the svg namespace (markup with no `xmlns`) is not an
+    // SVGSVGElement here and has no `style`; the template parse gives it one.
+    if (root !== null && root instanceof SVGSVGElement && doc.querySelector('parsererror') === null) {
+      return document.adoptNode(root) as SVGSVGElement;
+    }
+  } catch {
+    // Fall through to the template parse.
+  }
+  const template = document.createElement('template');
+  template.innerHTML = markup;
+  const root = template.content.querySelector('svg');
+  if (root === null) return null;
+  return (root.ownerDocument === document ? root : document.adoptNode(root)) as SVGSVGElement;
+}
+
+/** Install the inert parser; returns the restore. */
+export function installInertDiagramSvgParser(): () => void {
+  __setDiagramSvgParserForTests(parseInertSvg);
+  return () => __setDiagramSvgParserForTests(undefined);
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/01-flowchart-td-subgraphs.geometry.json b/packages/ui/test-setup/fixtures/diagrams/01-flowchart-td-subgraphs.geometry.json
new file mode 100644
index 000000000..5b314af1e
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/01-flowchart-td-subgraphs.geometry.json
@@ -0,0 +1,483 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "0 0 651.12890625 1194.9375",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 651.125,
+		"height": 1194.921875
+	},
+	"svgCtm": {
+		"a": 0.9999869240023014,
+		"b": 0,
+		"c": 0,
+		"d": 0.9999869240023014,
+		"e": 0.0023039550398429418,
+		"f": 0
+	},
+	"elements": {
+		"diagram-fixture-Agent": {
+			"tag": "g",
+			"class": "cluster",
+			"bbox": {
+				"x": 8,
+				"y": 997.0625,
+				"width": 431.78125,
+				"height": 89
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": "Agent session"
+		},
+		"diagram-fixture-Browser": {
+			"tag": "g",
+			"class": "cluster",
+			"bbox": {
+				"x": 34.37109375,
+				"y": 447.671875,
+				"width": 369.3046875,
+				"height": 475.390625
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": "Browser session"
+		},
+		"diagram-fixture-L_Start_Capture_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 359.343994140625,
+				"y": 71.5,
+				"width": 0.5,
+				"height": 45.5
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Capture_Serve_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 359.343994140625,
+				"y": 175,
+				"width": 0,
+				"height": 46
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Serve_Boot_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 224.0229949951172,
+				"y": 332.8900146484375,
+				"width": 94.53901672363281,
+				"height": 135.781982421875
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Serve_Fail_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 405.4230041503906,
+				"y": 327.5929870605469,
+				"width": 135.91897583007812,
+				"height": 149.07901000976562
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Boot_UI_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 224.0229949951172,
+				"y": 526.6719970703125,
+				"width": 0,
+				"height": 46
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_UI_Ann_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 224.0229949951172,
+				"y": 630.6719970703125,
+				"width": 0,
+				"height": 46
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Ann_Dec_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 224.0229949951172,
+				"y": 734.6719970703125,
+				"width": 0,
+				"height": 46
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Dec_FB_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 121.0780029296875,
+				"y": 866.4520263671875,
+				"width": 71.33499145507812,
+				"height": 152.1109619140625
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_Dec_OK_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 255.63400268554688,
+				"y": 866.4520263671875,
+				"width": 71.75601196289062,
+				"height": 152.1109619140625
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_FB_Done_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 121.1490707397461,
+				"y": 1061.56298828125,
+				"width": 76.43892669677734,
+				"height": 86.9849853515625
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_OK_Done_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 250.45899963378906,
+				"y": 1061.56298828125,
+				"width": 77.00999450683594,
+				"height": 86.9849853515625
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 0.0023039550398429418,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-flowchart-Start-0": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -115.35881805419922,
+				"y": -31.5,
+				"width": 230.71763610839844,
+				"height": 63
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 359.34135517699184,
+				"f": 39.4994834980909
+			},
+			"label": "User runs /plannotator-review"
+		},
+		"diagram-fixture-flowchart-Capture-1": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -124.078125,
+				"y": -27,
+				"width": 248.15625,
+				"height": 54
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 359.34135517699184,
+				"f": 147.9980647523406
+			},
+			"label": "VCS provider captures diff"
+		},
+		"diagram-fixture-flowchart-Serve-3": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -73.8359375,
+				"y": -74.3359375,
+				"width": 148.671875,
+				"height": 148.671875
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 359.34135517699184,
+				"f": 299.3320233839701
+			},
+			"label": "Diff resolves?"
+		},
+		"diagram-fixture-flowchart-Boot-5": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -98.4140625,
+				"y": -27,
+				"width": 196.828125,
+				"height": 54
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 224.02281212508666,
+				"f": 499.6653412917124
+			},
+			"label": "Start review server"
+		},
+		"diagram-fixture-flowchart-Fail-7": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -102.2265625,
+				"y": -19.5,
+				"width": 204.453125,
+				"height": 39
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 540.8975748672377,
+				"f": 499.6653412917124
+			},
+			"label": "Startup failure exit 1"
+		},
+		"diagram-fixture-flowchart-UI-9": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -69.5,
+				"y": -27,
+				"width": 139,
+				"height": 54
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 224.02281212508666,
+				"f": 603.6639813879518
+			},
+			"label": "Diff viewer"
+		},
+		"diagram-fixture-flowchart-Ann-11": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -82.1484375,
+				"y": -27,
+				"width": 164.296875,
+				"height": 54
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 224.02281212508666,
+				"f": 707.6626214841912
+			},
+			"label": "Annotate code"
+		},
+		"diagram-fixture-flowchart-Dec-13": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -56.1953125,
+				"y": -56.6953125,
+				"width": 113.390625,
+				"height": 113.390625
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 224.02281212508666,
+				"f": 841.3561857845925
+			},
+			"label": "Decision"
+		},
+		"diagram-fixture-flowchart-FB-15": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -78.078125,
+				"y": -19.5,
+				"width": 156.15625,
+				"height": 39
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 121.078845737756,
+				"f": 1041.548880531147
+			},
+			"label": "Feedback prompt"
+		},
+		"diagram-fixture-flowchart-OK-17": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -77.8125,
+				"y": -19.5,
+				"width": 155.625,
+				"height": 39
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 326.9667785124173,
+				"f": 1041.548880531147
+			},
+			"label": "Approved prompt"
+		},
+		"diagram-fixture-flowchart-Done-19": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -25.4375,
+				"y": -25.4375,
+				"width": 50.875,
+				"height": 50.875
+			},
+			"ctm": {
+				"a": 0.9999869240023014,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999869240023014,
+				"e": 224.02281212508666,
+				"f": 1161.484812228673
+			},
+			"label": "Done"
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/01-flowchart-td-subgraphs.svg b/packages/ui/test-setup/fixtures/diagrams/01-flowchart-td-subgraphs.svg
new file mode 100644
index 000000000..c84923119
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/01-flowchart-td-subgraphs.svg
@@ -0,0 +1 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 651.12890625px;" viewBox="0 0 651.12890625 1194.9375" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#diagram-fixture .cluster-label text{fill:#f8fafc;}#diagram-fixture .cluster-label span{color:#f8fafc;}#diagram-fixture .cluster-label span p{background-color:transparent;}#diagram-fixture .label text,#diagram-fixture span{fill:#ccc;color:#ccc;}#diagram-fixture .node rect,#diagram-fixture .node circle,#diagram-fixture .node ellipse,#diagram-fixture .node polygon,#diagram-fixture .node path{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .rough-node .label text,#diagram-fixture .node .label text,#diagram-fixture .image-shape .label,#diagram-fixture .icon-shape .label{text-anchor:middle;}#diagram-fixture .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#diagram-fixture .rough-node .label,#diagram-fixture .node .label,#diagram-fixture .image-shape .label,#diagram-fixture .icon-shape .label{text-align:center;}#diagram-fixture .node.clickable{cursor:pointer;}#diagram-fixture .root .anchor path{fill:#64748b!important;stroke-width:0;stroke:#64748b;}#diagram-fixture .arrowheadPath{fill:lightgrey;}#diagram-fixture .edgePaths .path{stroke:#64748b;stroke-width:1px;}#diagram-fixture .flowchart-link{stroke:#64748b;fill:none;}#diagram-fixture .edgeLabel{background-color:#1e293b;text-align:center;}#diagram-fixture .edgeLabel p{background-color:#1e293b;}#diagram-fixture .edgeLabel rect{opacity:0.5;background-color:#1e293b;fill:#1e293b;}#diagram-fixture .labelBkg{background-color:rgba(30, 41, 59, 0.5);}#diagram-fixture .cluster rect{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .cluster text{fill:#f8fafc;}#diagram-fixture .cluster span{color:#f8fafc;}#diagram-fixture .node .collapsed-indicator{fill:#475569;stroke:none;opacity:0.6;}#diagram-fixture .node .collapsed-separator{stroke:#475569;stroke-width:0.75px;}#diagram-fixture div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:#0f172a;border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#diagram-fixture .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#diagram-fixture rect.text{fill:none;stroke-width:0;}#diagram-fixture .icon-shape,#diagram-fixture .image-shape{background-color:#1e293b;text-align:center;}#diagram-fixture .icon-shape p,#diagram-fixture .image-shape p{background-color:#1e293b;padding:2px;}#diagram-fixture .icon-shape .label rect,#diagram-fixture .image-shape .label rect{opacity:0.5;background-color:#1e293b;fill:#1e293b;}#diagram-fixture .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#diagram-fixture .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="diagram-fixture_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-pointEnd-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="11.5" refY="7" markerUnits="userSpaceOnUse" markerWidth="10.5" markerHeight="14" orient="auto"><path d="M 0 0 L 11.5 7 L 0 14 z" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-pointStart-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="1" refY="7" markerUnits="userSpaceOnUse" markerWidth="11.5" markerHeight="14" orient="auto"><polygon points="0,7 11.5,14 11.5,0" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></polygon></marker><marker id="diagram-fixture_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-circleEnd-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refY="5" refX="12.25" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-circleStart-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-2" refY="5" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-crossEnd-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="17.7" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5;"></path></marker><marker id="diagram-fixture_flowchart-v2-crossStart-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="-3.5" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5; stroke-dasharray: 1, 0;"></path></marker><g class="root"><g class="clusters"><g class="cluster" id="diagram-fixture-Agent" data-look="classic"><rect style="" x="8" y="997.0625" width="431.78125" height="89"></rect><g class="cluster-label" transform="translate(175.8125, 997.0625)"><foreignObject width="96.15625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="nodeLabel"><p>Agent session</p></span></div></foreignObject></g></g><g class="cluster" id="diagram-fixture-Browser" data-look="classic"><rect style="" x="34.37109375" y="447.671875" width="369.3046875" height="475.390625"></rect><g class="cluster-label" transform="translate(162.9921875, 447.671875)"><foreignObject width="112.0625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="nodeLabel"><p>Browser session</p></span></div></foreignObject></g></g></g><g class="edgePaths"><path d="M359.844,71.5L359.76,75.583C359.677,79.667,359.51,87.833,359.427,95.417C359.344,103,359.344,110,359.344,113.5L359.344,117" id="diagram-fixture-L_Start_Capture_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Start_Capture_0" data-points="W3sieCI6MzU5Ljg0Mzc1LCJ5Ijo3MS41fSx7IngiOjM1OS4zNDM3NSwieSI6OTZ9LHsieCI6MzU5LjM0Mzc1LCJ5IjoxMjF9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M359.344,175L359.344,179.167C359.344,183.333,359.344,191.667,359.344,199.333C359.344,207,359.344,214,359.344,217.5L359.344,221" id="diagram-fixture-L_Capture_Serve_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Capture_Serve_0" data-points="W3sieCI6MzU5LjM0Mzc1LCJ5IjoxNzV9LHsieCI6MzU5LjM0Mzc1LCJ5IjoyMDB9LHsieCI6MzU5LjM0Mzc1LCJ5IjoyMjV9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M318.562,332.89L302.805,345.853C287.049,358.817,255.536,384.745,239.78,403.875C224.023,423.005,224.023,435.339,224.023,445.005C224.023,454.672,224.023,461.672,224.023,465.172L224.023,468.672" id="diagram-fixture-L_Serve_Boot_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Serve_Boot_0" data-points="W3sieCI6MzE4LjU2MTY0MDExMDMwMzQsInkiOjMzMi44ODk3NjUxMTAzMDM0fSx7IngiOjIyNC4wMjM0Mzc1LCJ5Ijo0MTAuNjcxODc1fSx7IngiOjIyNC4wMjM0Mzc1LCJ5Ijo0NDcuNjcxODc1fSx7IngiOjIyNC4wMjM0Mzc1LCJ5Ijo0NzIuNjcxODc1fV0=" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M405.423,327.593L428.003,341.439C450.583,355.286,495.743,382.979,518.322,402.992C540.902,423.005,540.902,435.339,540.976,446.339C541.049,457.339,541.195,467.006,541.269,471.839L541.342,476.672" id="diagram-fixture-L_Serve_Fail_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Serve_Fail_0" data-points="W3sieCI6NDA1LjQyMjg5MDU2OTc3NzcsInkiOjMyNy41OTI3MzQ0MzAyMjIzfSx7IngiOjU0MC45MDIzNDM3NSwieSI6NDEwLjY3MTg3NX0seyJ4Ijo1NDAuOTAyMzQzNzUsInkiOjQ0Ny42NzE4NzV9LHsieCI6NTQxLjQwMjM0Mzc1LCJ5Ijo0ODAuNjcxODc1fV0=" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M224.023,526.672L224.023,530.839C224.023,535.005,224.023,543.339,224.023,551.005C224.023,558.672,224.023,565.672,224.023,569.172L224.023,572.672" id="diagram-fixture-L_Boot_UI_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Boot_UI_0" data-points="W3sieCI6MjI0LjAyMzQzNzUsInkiOjUyNi42NzE4NzV9LHsieCI6MjI0LjAyMzQzNzUsInkiOjU1MS42NzE4NzV9LHsieCI6MjI0LjAyMzQzNzUsInkiOjU3Ni42NzE4NzV9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M224.023,630.672L224.023,634.839C224.023,639.005,224.023,647.339,224.023,655.005C224.023,662.672,224.023,669.672,224.023,673.172L224.023,676.672" id="diagram-fixture-L_UI_Ann_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_UI_Ann_0" data-points="W3sieCI6MjI0LjAyMzQzNzUsInkiOjYzMC42NzE4NzV9LHsieCI6MjI0LjAyMzQzNzUsInkiOjY1NS42NzE4NzV9LHsieCI6MjI0LjAyMzQzNzUsInkiOjY4MC42NzE4NzV9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M224.023,734.672L224.023,738.839C224.023,743.005,224.023,751.339,224.023,759.005C224.023,766.672,224.023,773.672,224.023,777.172L224.023,780.672" id="diagram-fixture-L_Ann_Dec_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Ann_Dec_0" data-points="W3sieCI6MjI0LjAyMzQzNzUsInkiOjczNC42NzE4NzV9LHsieCI6MjI0LjAyMzQzNzUsInkiOjc1OS42NzE4NzV9LHsieCI6MjI0LjAyMzQzNzUsInkiOjc4NC42NzE4NzV9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M192.413,866.452L180.524,875.887C168.635,885.322,144.857,904.192,132.967,919.794C121.078,935.396,121.078,947.729,121.078,960.063C121.078,972.396,121.078,984.729,121.148,994.479C121.219,1004.229,121.359,1011.396,121.429,1014.98L121.5,1018.563" id="diagram-fixture-L_Dec_FB_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Dec_FB_0" data-points="W3sieCI6MTkyLjQxMzI5Mzk0MzU3NzA2LCJ5Ijo4NjYuNDUyMzU2NDQzNTc3MX0seyJ4IjoxMjEuMDc4MTI1LCJ5Ijo5MjMuMDYyNX0seyJ4IjoxMjEuMDc4MTI1LCJ5Ijo5NjAuMDYyNX0seyJ4IjoxMjEuMDc4MTI1LCJ5Ijo5OTcuMDYyNX0seyJ4IjoxMjEuNTc4MTI1LCJ5IjoxMDIyLjU2MjV9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M255.634,866.452L267.523,875.887C279.412,885.322,303.19,904.192,315.08,919.794C326.969,935.396,326.969,947.729,326.969,960.063C326.969,972.396,326.969,984.729,327.039,994.479C327.109,1004.229,327.25,1011.396,327.32,1014.98L327.39,1018.563" id="diagram-fixture-L_Dec_OK_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Dec_OK_0" data-points="W3sieCI6MjU1LjYzMzU4MTA1NjQyMjk0LCJ5Ijo4NjYuNDUyMzU2NDQzNTc3MX0seyJ4IjozMjYuOTY4NzUsInkiOjkyMy4wNjI1fSx7IngiOjMyNi45Njg3NSwieSI6OTYwLjA2MjV9LHsieCI6MzI2Ljk2ODc1LCJ5Ijo5OTcuMDYyNX0seyJ4IjozMjcuNDY4NzUsInkiOjEwMjIuNTYyNX1d" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M121.578,1061.563L121.495,1065.646C121.411,1069.729,121.245,1077.896,121.161,1086.146C121.078,1094.396,121.078,1102.729,133.83,1113.143C146.582,1123.558,172.085,1136.053,184.837,1142.301L197.588,1148.548" id="diagram-fixture-L_FB_Done_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_FB_Done_0" data-points="W3sieCI6MTIxLjU3ODEyNSwieSI6MTA2MS41NjI1fSx7IngiOjEyMS4wNzgxMjUsInkiOjEwODYuMDYyNX0seyJ4IjoxMjEuMDc4MTI1LCJ5IjoxMTExLjA2MjV9LHsieCI6MjAxLjE4MDMwOTE5MDQyNDEsInkiOjExNTAuMzA4MTMyNjI3NTYxNX1d" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M327.469,1061.563L327.385,1065.646C327.302,1069.729,327.135,1077.896,327.052,1086.146C326.969,1094.396,326.969,1102.729,314.217,1113.143C301.465,1123.558,275.962,1136.053,263.21,1142.301L250.459,1148.548" id="diagram-fixture-L_OK_Done_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_OK_Done_0" data-points="W3sieCI6MzI3LjQ2ODc1LCJ5IjoxMDYxLjU2MjV9LHsieCI6MzI2Ljk2ODc1LCJ5IjoxMDg2LjA2MjV9LHsieCI6MzI2Ljk2ODc1LCJ5IjoxMTExLjA2MjV9LHsieCI6MjQ2Ljg2NjU2NTgwOTU3NTksInkiOjExNTAuMzA4MTMyNjI3NTYxNX1d" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_Start_Capture_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_Capture_Serve_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(224.0234375, 410.671875)"><g class="label" data-id="L_Serve_Boot_0" transform="translate(-11.546875, -12)"><foreignObject width="23.09375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>yes</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(540.90234375, 410.671875)"><g class="label" data-id="L_Serve_Fail_0" transform="translate(-48.7421875, -12)"><foreignObject width="97.484375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>no (bad base)</p></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_Boot_UI_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_UI_Ann_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_Ann_Dec_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(121.078125, 960.0625)"><g class="label" data-id="L_Dec_FB_0" transform="translate(-53.4921875, -12)"><foreignObject width="106.984375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>Send Feedback</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(326.96875, 960.0625)"><g class="label" data-id="L_Dec_OK_0" transform="translate(-29.3203125, -12)"><foreignObject width="58.640625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>Approve</p></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_FB_Done_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_OK_Done_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="diagram-fixture-flowchart-Start-0" data-look="classic" transform="translate(359.34375, 39.5)"><g class="basic label-container outer-path"><path d="M-83.875 -31.5 C-29.301708686022167 -31.5, 25.271582627955667 -31.5, 83.875 -31.5 C83.875 -31.5, 83.875 -31.5, 83.875 -31.5 C84.3967223936605 -31.483269378306343, 84.918444787321 -31.466538756612685, 85.89321192939245 -31.435279871635593 C86.62601971572903 -31.36458678581801, 87.35882750206561 -31.293893700000428, 87.90313059306193 -31.241385435432253 C88.50517849834124 -31.14405099905793, 89.10722640362054 -31.04671656268361, 89.89649680409322 -30.91911344521856 C90.4403978878147 -30.7949715721454, 90.98429897153619 -30.67082969907224, 91.86511939314947 -30.469788185729428 C92.30428211406566 -30.339446995373667, 92.74344483498184 -30.209105805017906, 93.80090886774406 -29.895256030836062 C94.22156412589503 -29.74045100734192, 94.64221938404602 -29.58564598384778, 95.69591065370028 -29.197877856399685 C96.31017386032246 -28.92596175629866, 96.92443706694465 -28.654045656197635, 97.54233778220308 -28.380519338926202 C98.02593251917658 -28.12822827440434, 98.50952725615008 -27.875937209882473, 99.33260288812403 -27.44653917988677 C99.9576468885237 -27.067633833678226, 100.58269088892338 -26.68872848746968, 101.05934938813228 -26.399775304092984 C101.71667152888702 -25.941255833719335, 102.37399366964176 -25.482736363345683, 102.7154817104733 -25.244529088840633 C103.1303097381462 -24.913714775808923, 103.54513776581909 -24.58290046277721, 104.29419445219533 -23.985547688627737 C104.65427623973218 -23.658530936428786, 105.01435802726904 -23.331514184229835, 105.78900034400982 -22.62800452807842 C106.3304918225458 -22.06887011921285, 106.87198330108176 -21.50973571034728, 107.19375690787243 -21.177478043231485 C107.71585128957132 -20.564196274476053, 108.23794567127023 -19.950914505720622, 108.50269169774293 -19.63992875855011 C108.78952165338494 -19.255602748736333, 109.07635160902696 -18.87127673892256, 109.7104260198041 -18.02167479384835 C110.02953998378824 -17.531430051071084, 110.34865394777238 -17.041185308293812, 110.8119970346684 -16.329365901781543 C111.07967747122082 -15.854072181099292, 111.34735790777324 -15.378778460417042, 111.8028781507495 -14.56995614258631 C112.07185409871569 -14.011421831471196, 112.34083004668187 -13.452887520356082, 112.67899762499809 -12.750675308355413 C112.94177246939759 -12.101616362282634, 113.20454731379711 -11.452557416209853, 113.43675529456745 -10.878999214271206 C113.62306073753729 -10.31787690378728, 113.80936618050711 -9.756754593303352, 114.07303737065482 -8.962618978877531 C114.2116159403937 -8.434158832131091, 114.3501945101326 -7.905698685384651, 114.58522923372745 -7.009409419623907 C114.71101525981439 -6.363524760553454, 114.83680128590134 -5.717640101483001, 114.97122617755518 -5.027396693551458 C115.06121667903483 -4.329448134709815, 115.15120718051448 -3.631499575868172, 115.22944205789975 -3.024725316091981 C115.25918009938044 -2.561531315915028, 115.28891814086114 -2.098337315738075, 115.35881581032167 -1.0096246935071378 C115.35881581032167 -0.3623923329605875, 115.35881581032167 0.28484002758596283, 115.35881581032167 1.00962469350713 C115.32387764017861 1.553814895068732, 115.28893947003554 2.0980050966303345, 115.22944205789975 3.02472531609196 C115.1441867830974 3.685948391900789, 115.05893150829503 4.347171467709618, 114.97122617755518 5.027396693551435 C114.8474592194761 5.662913865131686, 114.723692261397 6.2984310367119365, 114.58522923372745 7.0094094196239 C114.40650624957425 7.690957617231376, 114.22778326542104 8.372505814838853, 114.07303737065482 8.96261897887751 C113.82669621072691 9.704559303446656, 113.58035505079901 10.446499628015804, 113.43675529456746 10.878999214271184 C113.14349698727328 11.603352903051475, 112.85023867997909 12.327706591831765, 112.67899762499809 12.750675308355405 C112.34453453421511 13.445195072729964, 112.01007144343215 14.139714837104522, 111.8028781507495 14.569956142586303 C111.57129288008424 14.981159241204017, 111.339707609419 15.392362339821728, 110.81199703466841 16.329365901781536 C110.4231167536246 16.926790442441728, 110.03423647258079 17.52421498310192, 109.71042601980412 18.021674793848334 C109.30526935881801 18.564547809038576, 108.90011269783191 19.10742082422882, 108.50269169774295 19.639928758550102 C108.20303171200014 19.991926428939827, 107.90337172625733 20.343924099329552, 107.19375690787246 21.177478043231467 C106.81788258614442 21.56559914027139, 106.44200826441637 21.953720237311316, 105.78900034400982 22.628004528078414 C105.46111878829598 22.92577788170716, 105.13323723258212 23.223551235335904, 104.29419445219536 23.985547688627715 C103.916391610931 24.2868354007802, 103.53858876966666 24.588123112932678, 102.71548171047331 25.24452908884063 C102.16669902219905 25.627336135761066, 101.61791633392478 26.0101431826815, 101.05934938813229 26.399775304092973 C100.43735194986486 26.776833806433366, 99.81535451159743 27.15389230877376, 99.33260288812404 27.446539179886766 C98.83321400102709 27.7070700424114, 98.33382511393013 27.96760090493603, 97.54233778220309 28.3805193389262 C96.81107282793886 28.704228641974833, 96.07980787367461 29.027937945023467, 95.6959106537003 29.197877856399682 C95.17193249221155 29.390706663428567, 94.64795433072281 29.583535470457456, 93.80090886774407 29.895256030836055 C93.25096655191237 30.058476023468785, 92.70102423608066 30.22169601610151, 91.86511939314951 30.46978818572942 C91.13267232341302 30.63696444973296, 90.40022525367652 30.804140713736505, 89.89649680409323 30.919113445218557 C89.25828386300412 31.022294764118566, 88.620070921915 31.125476083018576, 87.90313059306196 31.24138543543225 C87.30490126518497 31.299095899216514, 86.70667193730796 31.35680636300078, 85.89321192939245 31.435279871635593 C85.20357130667337 31.457395304102157, 84.51393068395429 31.479510736568717, 83.875 31.5 C83.875 31.5, 83.875 31.5, 83.875 31.5 C22.47022848381691 31.5, -38.93454303236618 31.5, -83.875 31.5 C-84.58560348088031 31.477212329473936, -85.2962069617606 31.45442465894787, -85.89321192939244 31.435279871635593 C-86.6680181269896 31.360535249594182, -87.44282432458675 31.28579062755277, -87.90313059306195 31.24138543543225 C-88.56906870335952 31.133721726186515, -89.23500681365711 31.026058016940777, -89.89649680409323 30.919113445218557 C-90.5400847762335 30.77221869038155, -91.18367274837377 30.625323935544547, -91.86511939314947 30.469788185729428 C-92.62366211290372 30.244656688178353, -93.38220483265798 30.01952519062728, -93.80090886774403 29.89525603083607 C-94.50668159016006 29.635525144895443, -95.21245431257609 29.375794258954816, -95.69591065370028 29.197877856399685 C-96.10341888665727 29.017486049971865, -96.51092711961424 28.83709424354404, -97.54233778220308 28.380519338926206 C-98.21202342960567 28.03114476563041, -98.88170907700824 27.68177019233461, -99.33260288812403 27.446539179886773 C-99.79767293267949 27.164610985822307, -100.26274297723495 26.882682791757837, -101.05934938813226 26.399775304092994 C-101.64407230016081 25.991897912908776, -102.22879521218937 25.584020521724558, -102.7154817104733 25.244529088840636 C-103.07880551222316 24.95478802539754, -103.44212931397301 24.66504696195444, -104.29419445219533 23.98554768862774 C-104.60871510707818 23.699908351623638, -104.92323576196105 23.41426901461953, -105.7890003440098 22.628004528078435 C-106.18567490032478 22.218405481096468, -106.58234945663976 21.808806434114505, -107.19375690787244 21.177478043231478 C-107.545971499583 20.763746742230236, -107.89818609129355 20.350015441228994, -108.50269169774293 19.639928758550113 C-108.7563618919557 19.300033808135098, -109.0100320861685 18.960138857720082, -109.7104260198041 18.021674793848355 C-110.13309627112388 17.3723397849668, -110.55576652244366 16.723004776085247, -110.8119970346684 16.329365901781557 C-111.11510572902905 15.791165721860656, -111.41821442338971 15.252965541939755, -111.8028781507495 14.569956142586314 C-111.98805466517759 14.185433148233733, -112.17323117960565 13.800910153881151, -112.67899762499809 12.750675308355417 C-112.92788155677295 12.135927185028038, -113.17676548854782 11.521179061700659, -113.43675529456745 10.878999214271209 C-113.66931844274646 10.178556065861661, -113.90188159092548 9.478112917452115, -114.07303737065482 8.962618978877522 C-114.20372136319564 8.464264276518707, -114.33440535573646 7.965909574159889, -114.58522923372743 7.009409419623911 C-114.67817629096741 6.532145925064107, -114.7711233482074 6.054882430504303, -114.97122617755518 5.027396693551461 C-115.0588628187085 4.347704210578542, -115.14649945986181 3.6680117276056228, -115.22944205789975 3.024725316091999 C-115.25634016787228 2.6057655415062433, -115.2832382778448 2.1868057669204877, -115.35881581032167 1.0096246935071416 C-115.35881581032167 0.4816438996123089, -115.35881581032167 -0.046336894282523744, -115.35881581032167 -1.0096246935071262 C-115.32167920421041 -1.5880573098188306, -115.28454259809916 -2.1664899261305353, -115.22944205789975 -3.024725316091956 C-115.14808614209659 -3.6557057335185625, -115.06673022629343 -4.286686150945169, -114.97122617755518 -5.027396693551446 C-114.83500231175142 -5.726877453529488, -114.69877844594767 -6.4263582135075294, -114.58522923372745 -7.009409419623896 C-114.48080470262998 -7.40762541457662, -114.3763801715325 -7.805841409529342, -114.07303737065482 -8.962618978877506 C-113.84771891474035 -9.641242268471167, -113.62240045882591 -10.319865558064826, -113.43675529456746 -10.878999214271168 C-113.23403686606086 -11.37971765197664, -113.03131843755428 -11.880436089682108, -112.67899762499809 -12.750675308355401 C-112.42612916345888 -13.275762079259895, -112.17326070191967 -13.800848850164387, -111.8028781507495 -14.5699561425863 C-111.45996299360287 -15.178836728025136, -111.11704783645624 -15.787717313463972, -110.8119970346684 -16.329365901781546 C-110.4800251966916 -16.839363791834153, -110.1480533587148 -17.349361681886755, -109.71042601980412 -18.021674793848344 C-109.32089877738834 -18.54360581202368, -108.93137153497254 -19.065536830199015, -108.50269169774295 -19.639928758550102 C-108.08586919961905 -20.12955218271846, -107.66904670149518 -20.61917560688682, -107.19375690787246 -21.177478043231467 C-106.67745209531984 -21.710605151605485, -106.16114728276723 -22.243732259979502, -105.78900034400984 -22.628004528078403 C-105.29393596923111 -23.077608894566872, -104.79887159445238 -23.527213261055337, -104.29419445219536 -23.98554768862771 C-103.86755440348446 -24.325781774106144, -103.44091435477357 -24.666015859584572, -102.71548171047331 -25.244529088840626 C-102.12184564825378 -25.65862390775402, -101.52820958603425 -26.072718726667414, -101.0593493881323 -26.39977530409297 C-100.61849172157208 -26.667025812328998, -100.17763405501185 -26.934276320565026, -99.33260288812404 -27.446539179886763 C-98.92941397400733 -27.656882578126627, -98.52622505989062 -27.86722597636649, -97.54233778220309 -28.3805193389262 C-97.1068158614629 -28.573311973939127, -96.6712939407227 -28.766104608952052, -95.6959106537003 -29.19787785639968 C-95.25828893390607 -29.358926694614784, -94.82066721411185 -29.519975532829893, -93.80090886774407 -29.895256030836055 C-93.37729114827678 -30.02098354635916, -92.9536734288095 -30.146711061882264, -91.86511939314951 -30.469788185729417 C-91.3259722969162 -30.592844992181067, -90.78682520068288 -30.71590179863272, -89.89649680409325 -30.919113445218553 C-89.30417183083664 -31.01487595334591, -88.71184685758001 -31.11063846147327, -87.90313059306196 -31.24138543543225 C-87.3542633721339 -31.29433399612577, -86.80539615120584 -31.34728255681929, -85.89321192939246 -31.435279871635593 C-85.22986545608883 -31.45655210190886, -84.56651898278518 -31.477824332182124, -83.87500000000001 -31.5 C-83.87500000000001 -31.5, -83.875 -31.5, -83.875 -31.5" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M-83.875 -31.5 C-17.874428664231928 -31.5, 48.126142671536144 -31.5, 83.875 -31.5 M-83.875 -31.5 C-29.155502773232122 -31.5, 25.563994453535756 -31.5, 83.875 -31.5 M83.875 -31.5 C83.875 -31.5, 83.875 -31.5, 83.875 -31.5 M83.875 -31.5 C83.875 -31.5, 83.875 -31.5, 83.875 -31.5 M83.875 -31.5 C84.40172642000194 -31.48310890892132, 84.92845284000387 -31.466217817842637, 85.89321192939245 -31.435279871635593 M83.875 -31.5 C84.31855556061346 -31.48577603649965, 84.76211112122692 -31.471552072999298, 85.89321192939245 -31.435279871635593 M85.89321192939245 -31.435279871635593 C86.47755807208031 -31.378908702029552, 87.06190421476819 -31.32253753242351, 87.90313059306193 -31.241385435432253 M85.89321192939245 -31.435279871635593 C86.53663475613843 -31.373209645368572, 87.1800575828844 -31.311139419101554, 87.90313059306193 -31.241385435432253 M87.90313059306193 -31.241385435432253 C88.41865397784248 -31.15803961252449, 88.93417736262305 -31.07469378961673, 89.89649680409322 -30.91911344521856 M87.90313059306193 -31.241385435432253 C88.53853987508931 -31.138657390386644, 89.17394915711671 -31.03592934534103, 89.89649680409322 -30.91911344521856 M89.89649680409322 -30.91911344521856 C90.54787638861482 -30.770440305700536, 91.19925597313643 -30.62176716618251, 91.86511939314947 -30.469788185729428 M89.89649680409322 -30.91911344521856 C90.4603111910725 -30.790426490623254, 91.02412557805178 -30.66173953602795, 91.86511939314947 -30.469788185729428 M91.86511939314947 -30.469788185729428 C92.47650923684068 -30.288330889372652, 93.08789908053191 -30.10687359301588, 93.80090886774406 -29.895256030836062 M91.86511939314947 -30.469788185729428 C92.30482402998051 -30.339286157574715, 92.74452866681155 -30.208784129420003, 93.80090886774406 -29.895256030836062 M93.80090886774406 -29.895256030836062 C94.50123769973628 -29.637528546894167, 95.20156653172849 -29.379801062952275, 95.69591065370028 -29.197877856399685 M93.80090886774406 -29.895256030836062 C94.46150389569908 -29.652150954075115, 95.1220989236541 -29.40904587731417, 95.69591065370028 -29.197877856399685 M95.69591065370028 -29.197877856399685 C96.23407136277798 -28.959650074461223, 96.77223207185568 -28.72142229252276, 97.54233778220308 -28.380519338926202 M95.69591065370028 -29.197877856399685 C96.07366551455401 -29.03065698519955, 96.45142037540774 -28.863436113999413, 97.54233778220308 -28.380519338926202 M97.54233778220308 -28.380519338926202 C98.11804940842428 -28.080170952287496, 98.69376103464548 -27.779822565648793, 99.33260288812403 -27.44653917988677 M97.54233778220308 -28.380519338926202 C98.1308102658592 -28.07351362113742, 98.71928274951533 -27.766507903348636, 99.33260288812403 -27.44653917988677 M99.33260288812403 -27.44653917988677 C100.0036413591798 -27.039751715272995, 100.67467983023556 -26.632964250659217, 101.05934938813228 -26.399775304092984 M99.33260288812403 -27.44653917988677 C99.85776069491286 -27.128185431241555, 100.38291850170167 -26.80983168259634, 101.05934938813228 -26.399775304092984 M101.05934938813228 -26.399775304092984 C101.60934265181677 -26.01612381217133, 102.15933591550127 -25.632472320249672, 102.7154817104733 -25.244529088840633 M101.05934938813228 -26.399775304092984 C101.55731829061385 -26.05241375444819, 102.05528719309544 -25.70505220480339, 102.7154817104733 -25.244529088840633 M102.7154817104733 -25.244529088840633 C103.33483501003818 -24.750611314121137, 103.95418830960304 -24.25669353940164, 104.29419445219533 -23.985547688627737 M102.7154817104733 -25.244529088840633 C103.1368312009052 -24.90851408280203, 103.55818069133711 -24.572499076763425, 104.29419445219533 -23.985547688627737 M104.29419445219533 -23.985547688627737 C104.74110548007323 -23.57967491772685, 105.18801650795115 -23.173802146825967, 105.78900034400982 -22.62800452807842 M104.29419445219533 -23.985547688627737 C104.80592301391687 -23.520809348468035, 105.31765157563841 -23.05607100830833, 105.78900034400982 -22.62800452807842 M105.78900034400982 -22.62800452807842 C106.20625219530031 -22.197157734606908, 106.6235040465908 -21.76631094113539, 107.19375690787243 -21.177478043231485 M105.78900034400982 -22.62800452807842 C106.32774768098142 -22.071703670676275, 106.86649501795301 -21.515402813274132, 107.19375690787243 -21.177478043231485 M107.19375690787243 -21.177478043231485 C107.50884011928206 -20.807363374367114, 107.82392333069167 -20.437248705502746, 108.50269169774293 -19.63992875855011 M107.19375690787243 -21.177478043231485 C107.6440612567039 -20.64852493205072, 108.09436560553537 -20.119571820869954, 108.50269169774293 -19.63992875855011 M108.50269169774293 -19.63992875855011 C108.83371035535467 -19.196393913770464, 109.16472901296642 -18.75285906899082, 109.7104260198041 -18.02167479384835 M108.50269169774293 -19.63992875855011 C108.9377665180323 -19.056968135493864, 109.37284133832169 -18.474007512437623, 109.7104260198041 -18.02167479384835 M109.7104260198041 -18.02167479384835 C109.97319100793909 -17.61799720979405, 110.23595599607407 -17.214319625739748, 110.8119970346684 -16.329365901781543 M109.7104260198041 -18.02167479384835 C110.0710547266702 -17.467652257735022, 110.43168343353629 -16.91362972162169, 110.8119970346684 -16.329365901781543 M110.8119970346684 -16.329365901781543 C111.18459089095407 -15.667787780727181, 111.55718474723973 -15.00620965967282, 111.8028781507495 -14.56995614258631 M110.8119970346684 -16.329365901781543 C111.01189622653605 -15.97442464463237, 111.21179541840372 -15.619483387483196, 111.8028781507495 -14.56995614258631 M111.8028781507495 -14.56995614258631 C112.00677886495643 -14.14655194675926, 112.21067957916334 -13.723147750932208, 112.67899762499809 -12.750675308355413 M111.8028781507495 -14.56995614258631 C112.04717831631622 -14.062661621600867, 112.29147848188293 -13.555367100615426, 112.67899762499809 -12.750675308355413 M112.67899762499809 -12.750675308355413 C112.97621208099787 -12.016549855785357, 113.27342653699766 -11.282424403215302, 113.43675529456745 -10.878999214271206 M112.67899762499809 -12.750675308355413 C112.86866426849035 -12.28219503197445, 113.05833091198261 -11.813714755593486, 113.43675529456745 -10.878999214271206 M113.43675529456745 -10.878999214271206 C113.59176296080719 -10.412140820674798, 113.74677062704693 -9.945282427078393, 114.07303737065482 -8.962618978877531 M113.43675529456745 -10.878999214271206 C113.66122360369856 -10.20293643133651, 113.88569191282966 -9.526873648401818, 114.07303737065482 -8.962618978877531 M114.07303737065482 -8.962618978877531 C114.27588637894625 -8.18906779494593, 114.4787353872377 -7.415516611014327, 114.58522923372745 -7.009409419623907 M114.07303737065482 -8.962618978877531 C114.23727501758479 -8.336309650087058, 114.40151266451478 -7.710000321296586, 114.58522923372745 -7.009409419623907 M114.58522923372745 -7.009409419623907 C114.68227288080931 -6.511110802040592, 114.77931652789118 -6.012812184457276, 114.97122617755518 -5.027396693551458 M114.58522923372745 -7.009409419623907 C114.73876468867286 -6.221037308209095, 114.89230014361827 -5.432665196794282, 114.97122617755518 -5.027396693551458 M114.97122617755518 -5.027396693551458 C115.06971329307478 -4.26355007406218, 115.16820040859437 -3.499703454572902, 115.22944205789975 -3.024725316091981 M114.97122617755518 -5.027396693551458 C115.07317323209462 -4.2367154702665335, 115.17512028663405 -3.4460342469816094, 115.22944205789975 -3.024725316091981 M115.22944205789975 -3.024725316091981 C115.2723474488998 -2.3564392186580756, 115.31525283989983 -1.6881531212241698, 115.35881581032167 -1.0096246935071378 M115.22944205789975 -3.024725316091981 C115.26366319102041 -2.491703544936158, 115.29788432414108 -1.9586817737803353, 115.35881581032167 -1.0096246935071378 M115.35881581032167 -1.0096246935071378 C115.35881581032167 -0.3195497487184823, 115.35881581032167 0.3705251960701732, 115.35881581032167 1.00962469350713 M115.35881581032167 -1.0096246935071378 C115.35881581032167 -0.3101782755675171, 115.35881581032167 0.3892681423721036, 115.35881581032167 1.00962469350713 M115.35881581032167 1.00962469350713 C115.32600945393997 1.520610174966283, 115.29320309755828 2.031595656425436, 115.22944205789975 3.02472531609196 M115.35881581032167 1.00962469350713 C115.31946684388758 1.6225166076321909, 115.28011787745348 2.2354085217572517, 115.22944205789975 3.02472531609196 M115.22944205789975 3.02472531609196 C115.16130715685676 3.553166153823324, 115.09317225581377 4.081606991554688, 114.97122617755518 5.027396693551435 M115.22944205789975 3.02472531609196 C115.147587185368 3.65957554337537, 115.06573231283625 4.29442577065878, 114.97122617755518 5.027396693551435 M114.97122617755518 5.027396693551435 C114.8648217868578 5.5737607512065175, 114.75841739616044 6.1201248088616005, 114.58522923372745 7.0094094196239 M114.97122617755518 5.027396693551435 C114.82770685896323 5.764338061702441, 114.68418754037125 6.501279429853446, 114.58522923372745 7.0094094196239 M114.58522923372745 7.0094094196239 C114.4224332419774 7.630221092395941, 114.25963725022737 8.251032765167983, 114.07303737065482 8.96261897887751 M114.58522923372745 7.0094094196239 C114.4221020902199 7.631483917569412, 114.25897494671234 8.253558415514924, 114.07303737065482 8.96261897887751 M114.07303737065482 8.96261897887751 C113.89263344050575 9.505966873023665, 113.71222951035669 10.04931476716982, 113.43675529456746 10.878999214271184 M114.07303737065482 8.96261897887751 C113.84415350817092 9.651980704987944, 113.61526964568702 10.341342431098377, 113.43675529456746 10.878999214271184 M113.43675529456746 10.878999214271184 C113.17019344243775 11.537412142654375, 112.90363159030804 12.195825071037566, 112.67899762499809 12.750675308355405 M113.43675529456746 10.878999214271184 C113.16276465263232 11.555761397099669, 112.88877401069718 12.232523579928154, 112.67899762499809 12.750675308355405 M112.67899762499809 12.750675308355405 C112.34490520645674 13.444425363889115, 112.0108127879154 14.138175419422826, 111.8028781507495 14.569956142586303 M112.67899762499809 12.750675308355405 C112.48072870293828 13.162384967287927, 112.28245978087848 13.57409462622045, 111.8028781507495 14.569956142586303 M111.8028781507495 14.569956142586303 C111.42881530630073 15.234142600875435, 111.05475246185198 15.898329059164567, 110.81199703466841 16.329365901781536 M111.8028781507495 14.569956142586303 C111.55173139384021 15.015892640845575, 111.30058463693092 15.461829139104845, 110.81199703466841 16.329365901781536 M110.81199703466841 16.329365901781536 C110.51343946212856 16.78803050713639, 110.2148818895887 17.246695112491242, 109.71042601980412 18.021674793848334 M110.81199703466841 16.329365901781536 C110.4637241836715 16.864406525267924, 110.1154513326746 17.399447148754312, 109.71042601980412 18.021674793848334 M109.71042601980412 18.021674793848334 C109.3443042949667 18.512244550755177, 108.97818257012928 19.002814307662025, 108.50269169774295 19.639928758550102 M109.71042601980412 18.021674793848334 C109.30517330809394 18.564676508258426, 108.89992059638378 19.107678222668522, 108.50269169774295 19.639928758550102 M108.50269169774295 19.639928758550102 C108.0392381508397 20.18432766599655, 107.57578460393644 20.728726573442994, 107.19375690787246 21.177478043231467 M108.50269169774295 19.639928758550102 C108.1179366540583 20.09188392604428, 107.73318161037366 20.543839093538452, 107.19375690787246 21.177478043231467 M107.19375690787246 21.177478043231467 C106.85044052380144 21.531980396584128, 106.50712413973042 21.886482749936786, 105.78900034400982 22.628004528078414 M107.19375690787246 21.177478043231467 C106.79258925714073 21.591716579088622, 106.39142160640903 22.005955114945774, 105.78900034400982 22.628004528078414 M105.78900034400982 22.628004528078414 C105.48067733981516 22.90801532270835, 105.1723543356205 23.188026117338286, 104.29419445219536 23.985547688627715 M105.78900034400982 22.628004528078414 C105.24966471173028 23.117814879275844, 104.71032907945073 23.607625230473275, 104.29419445219536 23.985547688627715 M104.29419445219536 23.985547688627715 C103.93879295587934 24.26897092430873, 103.58339145956332 24.552394159989746, 102.71548171047331 25.24452908884063 M104.29419445219536 23.985547688627715 C103.76798129771514 24.40518867620556, 103.2417681432349 24.824829663783408, 102.71548171047331 25.24452908884063 M102.71548171047331 25.24452908884063 C102.3771031968022 25.480567291807834, 102.03872468313106 25.716605494775038, 101.05934938813229 26.399775304092973 M102.71548171047331 25.24452908884063 C102.21348716358607 25.594698753755477, 101.71149261669882 25.94486841867033, 101.05934938813229 26.399775304092973 M101.05934938813229 26.399775304092973 C100.55617139536247 26.704804760312147, 100.05299340259265 27.00983421653132, 99.33260288812404 27.446539179886766 M101.05934938813229 26.399775304092973 C100.65931698129161 26.64227729997116, 100.25928457445093 26.884779295849345, 99.33260288812404 27.446539179886766 M99.33260288812404 27.446539179886766 C98.81961825941846 27.714162932100134, 98.30663363071287 27.9817866843135, 97.54233778220309 28.3805193389262 M99.33260288812404 27.446539179886766 C98.88463385449744 27.680244337791905, 98.43666482087083 27.913949495697043, 97.54233778220309 28.3805193389262 M97.54233778220309 28.3805193389262 C96.90104979549808 28.66439850750827, 96.25976180879307 28.948277676090346, 95.6959106537003 29.197877856399682 M97.54233778220309 28.3805193389262 C96.81794883196048 28.701184838963876, 96.09355988171785 29.02185033900155, 95.6959106537003 29.197877856399682 M95.6959106537003 29.197877856399682 C95.19648171304449 29.381672323231534, 94.69705277238869 29.56546679006339, 93.80090886774407 29.895256030836055 M95.6959106537003 29.197877856399682 C95.04012935175994 29.439211437489636, 94.38434804981958 29.68054501857959, 93.80090886774407 29.895256030836055 M93.80090886774407 29.895256030836055 C93.23686405279446 30.06266157118145, 92.67281923784485 30.230067111526846, 91.86511939314951 30.46978818572942 M93.80090886774407 29.895256030836055 C93.08468430684933 30.10782772097018, 92.36845974595457 30.320399411104304, 91.86511939314951 30.46978818572942 M91.86511939314951 30.46978818572942 C91.44074273918643 30.56664938768002, 91.01636608522335 30.66351058963062, 89.89649680409323 30.919113445218557 M91.86511939314951 30.46978818572942 C91.28962638342324 30.60114070975659, 90.71413337369695 30.73249323378376, 89.89649680409323 30.919113445218557 M89.89649680409323 30.919113445218557 C89.11001221410618 31.046266174448576, 88.32352762411912 31.173418903678595, 87.90313059306196 31.24138543543225 M89.89649680409323 30.919113445218557 C89.15118604673943 31.039609508496273, 88.40587528938563 31.160105571773986, 87.90313059306196 31.24138543543225 M87.90313059306196 31.24138543543225 C87.26413633779232 31.303028442735084, 86.6251420825227 31.364671450037918, 85.89321192939245 31.435279871635593 M87.90313059306196 31.24138543543225 C87.31396514458774 31.298221517671436, 86.72479969611351 31.355057599910626, 85.89321192939245 31.435279871635593 M85.89321192939245 31.435279871635593 C85.15387295345539 31.45898903355788, 84.41453397751833 31.482698195480165, 83.875 31.5 M85.89321192939245 31.435279871635593 C85.30637642569796 31.454098544033062, 84.71954092200347 31.47291721643053, 83.875 31.5 M83.875 31.5 C83.875 31.5, 83.875 31.5, 83.875 31.5 M83.875 31.5 C83.875 31.5, 83.875 31.5, 83.875 31.5 M83.875 31.5 C22.457442820044456 31.5, -38.96011435991109 31.5, -83.875 31.5 M83.875 31.5 C25.793926054442395 31.5, -32.28714789111521 31.5, -83.875 31.5 M-83.875 31.5 C-84.31994011339545 31.4857316365868, -84.7648802267909 31.4714632731736, -85.89321192939244 31.435279871635593 M-83.875 31.5 C-84.58432463989539 31.47725333941521, -85.29364927979077 31.45450667883042, -85.89321192939244 31.435279871635593 M-85.89321192939244 31.435279871635593 C-86.67698469752575 31.359670255318438, -87.46075746565906 31.284060639001282, -87.90313059306195 31.24138543543225 M-85.89321192939244 31.435279871635593 C-86.64497149769547 31.36275853020456, -87.3967310659985 31.290237188773524, -87.90313059306195 31.24138543543225 M-87.90313059306195 31.24138543543225 C-88.3054630251875 31.1763394479408, -88.70779545731307 31.11129346044935, -89.89649680409323 30.919113445218557 M-87.90313059306195 31.24138543543225 C-88.68280100033226 31.1153343704191, -89.46247140760256 30.989283305405948, -89.89649680409323 30.919113445218557 M-89.89649680409323 30.919113445218557 C-90.38970119871577 30.806542760605417, -90.88290559333831 30.69397207599228, -91.86511939314947 30.469788185729428 M-89.89649680409323 30.919113445218557 C-90.5352932071474 30.77331233475754, -91.17408961020156 30.62751122429653, -91.86511939314947 30.469788185729428 M-91.86511939314947 30.469788185729428 C-92.49981536774274 30.2814137520573, -93.13451134233603 30.093039318385173, -93.80090886774403 29.89525603083607 M-91.86511939314947 30.469788185729428 C-92.60802869746107 30.249296603820262, -93.35093800177265 30.0288050219111, -93.80090886774403 29.89525603083607 M-93.80090886774403 29.89525603083607 C-94.2389279378685 29.734060964026366, -94.67694700799298 29.572865897216662, -95.69591065370028 29.197877856399685 M-93.80090886774403 29.89525603083607 C-94.4936174370212 29.640332874014252, -95.18632600629837 29.38540971719243, -95.69591065370028 29.197877856399685 M-95.69591065370028 29.197877856399685 C-96.25861238212914 28.94878649317794, -96.82131411055799 28.699695129956194, -97.54233778220308 28.380519338926206 M-95.69591065370028 29.197877856399685 C-96.37674869272112 28.89649105286801, -97.05758673174196 28.595104249336337, -97.54233778220308 28.380519338926206 M-97.54233778220308 28.380519338926206 C-97.9252308576312 28.180764266730073, -98.30812393305933 27.981009194533936, -99.33260288812403 27.446539179886773 M-97.54233778220308 28.380519338926206 C-97.90918146386849 28.189137225175955, -98.2760251455339 27.9977551114257, -99.33260288812403 27.446539179886773 M-99.33260288812403 27.446539179886773 C-99.79371642883437 27.167009441704216, -100.2548299695447 26.887479703521663, -101.05934938813226 26.399775304092994 M-99.33260288812403 27.446539179886773 C-99.74440680595652 27.196901224868284, -100.15621072378899 26.947263269849792, -101.05934938813226 26.399775304092994 M-101.05934938813226 26.399775304092994 C-101.5035152191893 26.08994444797654, -101.94768105024633 25.780113591860083, -102.7154817104733 25.244529088840636 M-101.05934938813226 26.399775304092994 C-101.65391852204225 25.985029614760368, -102.24848765595222 25.57028392542774, -102.7154817104733 25.244529088840636 M-102.7154817104733 25.244529088840636 C-103.34362762202122 24.743599440045898, -103.97177353356912 24.242669791251156, -104.29419445219533 23.98554768862774 M-102.7154817104733 25.244529088840636 C-103.3274621195692 24.75649099806929, -103.9394425286651 24.26845290729794, -104.29419445219533 23.98554768862774 M-104.29419445219533 23.98554768862774 C-104.76719073509425 23.5559849792948, -105.24018701799316 23.126422269961854, -105.7890003440098 22.628004528078435 M-104.29419445219533 23.98554768862774 C-104.79887074155818 23.527214035631296, -105.30354703092102 23.06888038263485, -105.7890003440098 22.628004528078435 M-105.7890003440098 22.628004528078435 C-106.28047882281544 22.120512647578078, -106.77195730162107 21.61302076707772, -107.19375690787244 21.177478043231478 M-105.7890003440098 22.628004528078435 C-106.078399644703 22.32917598998825, -106.36779894539619 22.030347451898066, -107.19375690787244 21.177478043231478 M-107.19375690787244 21.177478043231478 C-107.5818492720773 20.721602669155335, -107.96994163628217 20.265727295079188, -108.50269169774293 19.639928758550113 M-107.19375690787244 21.177478043231478 C-107.5318010910729 20.7803921103853, -107.86984527427333 20.383306177539122, -108.50269169774293 19.639928758550113 M-108.50269169774293 19.639928758550113 C-108.98517714689125 18.993442212020035, -109.46766259603956 18.346955665489958, -109.7104260198041 18.021674793848355 M-108.50269169774293 19.639928758550113 C-108.879388780179 19.13518898589597, -109.25608586261508 18.63044921324183, -109.7104260198041 18.021674793848355 M-109.7104260198041 18.021674793848355 C-109.97070048192042 17.6218233265586, -110.23097494403675 17.221971859268848, -110.8119970346684 16.329365901781557 M-109.7104260198041 18.021674793848355 C-109.97952676637043 17.60826378345417, -110.24862751293674 17.194852773059985, -110.8119970346684 16.329365901781557 M-110.8119970346684 16.329365901781557 C-111.1745672209524 15.6855858218218, -111.5371374072364 15.041805741862042, -111.8028781507495 14.569956142586314 M-110.8119970346684 16.329365901781557 C-111.18013139499165 15.675706067381396, -111.5482657553149 15.022046232981237, -111.8028781507495 14.569956142586314 M-111.8028781507495 14.569956142586314 C-112.12792294910976 13.894993663946712, -112.45296774747001 13.22003118530711, -112.67899762499809 12.750675308355417 M-111.8028781507495 14.569956142586314 C-112.14568643134304 13.858107413011677, -112.48849471193657 13.14625868343704, -112.67899762499809 12.750675308355417 M-112.67899762499809 12.750675308355417 C-112.96475016332793 12.04486101403121, -113.25050270165778 11.339046719707001, -113.43675529456745 10.878999214271209 M-112.67899762499809 12.750675308355417 C-112.89079774115807 12.227524926563602, -113.10259785731805 11.704374544771788, -113.43675529456745 10.878999214271209 M-113.43675529456745 10.878999214271209 C-113.59882861748983 10.390860188506188, -113.76090194041221 9.902721162741168, -114.07303737065482 8.962618978877522 M-113.43675529456745 10.878999214271209 C-113.59411862903852 10.40504592328681, -113.75148196350958 9.931092632302413, -114.07303737065482 8.962618978877522 M-114.07303737065482 8.962618978877522 C-114.18420222260627 8.538699219235019, -114.29536707455772 8.114779459592516, -114.58522923372743 7.009409419623911 M-114.07303737065482 8.962618978877522 C-114.23227568228661 8.355374282304666, -114.3915139939184 7.748129585731809, -114.58522923372743 7.009409419623911 M-114.58522923372743 7.009409419623911 C-114.69672473183172 6.4369036014402745, -114.80822022993601 5.8643977832566385, -114.97122617755518 5.027396693551461 M-114.58522923372743 7.009409419623911 C-114.73653913706886 6.232465045325102, -114.88784904041029 5.455520671026293, -114.97122617755518 5.027396693551461 M-114.97122617755518 5.027396693551461 C-115.03770841563401 4.511773583414855, -115.10419065371285 3.9961504732782482, -115.22944205789975 3.024725316091999 M-114.97122617755518 5.027396693551461 C-115.03703051654946 4.517031234848309, -115.10283485554375 4.006665776145157, -115.22944205789975 3.024725316091999 M-115.22944205789975 3.024725316091999 C-115.2806065616437 2.2277968710359524, -115.33177106538764 1.430868425979906, -115.35881581032167 1.0096246935071416 M-115.22944205789975 3.024725316091999 C-115.28086366323427 2.2237923062339213, -115.33228526856881 1.422859296375844, -115.35881581032167 1.0096246935071416 M-115.35881581032167 1.0096246935071416 C-115.35881581032167 0.5197345536049607, -115.35881581032167 0.029844413702779793, -115.35881581032167 -1.0096246935071262 M-115.35881581032167 1.0096246935071416 C-115.35881581032167 0.4713170162940974, -115.35881581032167 -0.06699066091894679, -115.35881581032167 -1.0096246935071262 M-115.35881581032167 -1.0096246935071262 C-115.3190858820315 -1.6284503960473318, -115.27935595374134 -2.247276098587537, -115.22944205789975 -3.024725316091956 M-115.35881581032167 -1.0096246935071262 C-115.32205257072093 -1.582241825041656, -115.28528933112018 -2.1548589565761853, -115.22944205789975 -3.024725316091956 M-115.22944205789975 -3.024725316091956 C-115.16112704834205 -3.5545630398969585, -115.09281203878436 -4.084400763701962, -114.97122617755518 -5.027396693551446 M-115.22944205789975 -3.024725316091956 C-115.149588447427 -3.644054150039539, -115.06973483695427 -4.263382983987122, -114.97122617755518 -5.027396693551446 M-114.97122617755518 -5.027396693551446 C-114.88178983464358 -5.486633412024704, -114.792353491732 -5.945870130497962, -114.58522923372745 -7.009409419623896 M-114.97122617755518 -5.027396693551446 C-114.87788014271139 -5.506708853782868, -114.7845341078676 -5.98602101401429, -114.58522923372745 -7.009409419623896 M-114.58522923372745 -7.009409419623896 C-114.4442360241752 -7.547077634490213, -114.30324281462293 -8.08474584935653, -114.07303737065482 -8.962618978877506 M-114.58522923372745 -7.009409419623896 C-114.46490451000108 -7.468259740257673, -114.34457978627472 -7.92711006089145, -114.07303737065482 -8.962618978877506 M-114.07303737065482 -8.962618978877506 C-113.82233813025994 -9.717685147447346, -113.57163888986507 -10.472751316017185, -113.43675529456746 -10.878999214271168 M-114.07303737065482 -8.962618978877506 C-113.8230368566026 -9.715580695030171, -113.5730363425504 -10.468542411182835, -113.43675529456746 -10.878999214271168 M-113.43675529456746 -10.878999214271168 C-113.2173704067947 -11.420884128588133, -112.99798551902195 -11.9627690429051, -112.67899762499809 -12.750675308355401 M-113.43675529456746 -10.878999214271168 C-113.26202327069828 -11.310590691441925, -113.08729124682908 -11.742182168612684, -112.67899762499809 -12.750675308355401 M-112.67899762499809 -12.750675308355401 C-112.34286658855868 -13.448658597573884, -112.00673555211927 -14.146641886792366, -111.8028781507495 -14.5699561425863 M-112.67899762499809 -12.750675308355401 C-112.38705466883107 -13.356901103414808, -112.09511171266405 -13.963126898474215, -111.8028781507495 -14.5699561425863 M-111.8028781507495 -14.5699561425863 C-111.43409106582097 -15.224774955618692, -111.06530398089242 -15.879593768651086, -110.8119970346684 -16.329365901781546 M-111.8028781507495 -14.5699561425863 C-111.44226205551966 -15.21026653600621, -111.08164596028983 -15.850576929426122, -110.8119970346684 -16.329365901781546 M-110.8119970346684 -16.329365901781546 C-110.58529642746295 -16.677638912085822, -110.3585958202575 -17.025911922390097, -109.71042601980412 -18.021674793848344 M-110.8119970346684 -16.329365901781546 C-110.4678203579992 -16.858113701523745, -110.12364368133002 -17.38686150126594, -109.71042601980412 -18.021674793848344 M-109.71042601980412 -18.021674793848344 C-109.46546238118052 -18.34990375295739, -109.22049874255693 -18.678132712066432, -108.50269169774295 -19.639928758550102 M-109.71042601980412 -18.021674793848344 C-109.37072453646675 -18.476843834078625, -109.03102305312939 -18.93201287430891, -108.50269169774295 -19.639928758550102 M-108.50269169774295 -19.639928758550102 C-108.16482954742081 -20.036800865219455, -107.82696739709867 -20.43367297188881, -107.19375690787246 -21.177478043231467 M-108.50269169774295 -19.639928758550102 C-108.08423653213238 -20.131470006849728, -107.66578136652181 -20.623011255149354, -107.19375690787246 -21.177478043231467 M-107.19375690787246 -21.177478043231467 C-106.81498091766869 -21.568595351203985, -106.43620492746494 -21.959712659176507, -105.78900034400984 -22.628004528078403 M-107.19375690787246 -21.177478043231467 C-106.89046007936801 -21.490656919795022, -106.58716325086357 -21.803835796358577, -105.78900034400984 -22.628004528078403 M-105.78900034400984 -22.628004528078403 C-105.21941786995058 -23.145284260692588, -104.64983539589132 -23.662563993306772, -104.29419445219536 -23.98554768862771 M-105.78900034400984 -22.628004528078403 C-105.33462359386264 -23.040657470412068, -104.88024684371545 -23.45331041274573, -104.29419445219536 -23.98554768862771 M-104.29419445219536 -23.98554768862771 C-103.81537557799918 -24.3673929988938, -103.336556703803 -24.74923830915989, -102.71548171047331 -25.244529088840626 M-104.29419445219536 -23.98554768862771 C-103.69839317500795 -24.46068335224682, -103.10259189782055 -24.935819015865928, -102.71548171047331 -25.244529088840626 M-102.71548171047331 -25.244529088840626 C-102.34041507446771 -25.506159337745146, -101.96534843846212 -25.767789586649663, -101.0593493881323 -26.39977530409297 M-102.71548171047331 -25.244529088840626 C-102.37704595919007 -25.48060721828827, -102.03861020790683 -25.716685347735915, -101.0593493881323 -26.39977530409297 M-101.0593493881323 -26.39977530409297 C-100.70932023427571 -26.61196503416047, -100.35929108041911 -26.82415476422797, -99.33260288812404 -27.446539179886763 M-101.0593493881323 -26.39977530409297 C-100.62816789863054 -26.661160056932626, -100.19698640912878 -26.922544809772287, -99.33260288812404 -27.446539179886763 M-99.33260288812404 -27.446539179886763 C-98.94119702674982 -27.650735367058278, -98.54979116537558 -27.854931554229797, -97.54233778220309 -28.3805193389262 M-99.33260288812404 -27.446539179886763 C-98.80098989938745 -27.723881335596275, -98.26937691065085 -28.00122349130579, -97.54233778220309 -28.3805193389262 M-97.54233778220309 -28.3805193389262 C-96.91124787257726 -28.659884121300525, -96.28015796295144 -28.939248903674855, -95.6959106537003 -29.19787785639968 M-97.54233778220309 -28.3805193389262 C-97.00780088469509 -28.617142966979305, -96.4732639871871 -28.853766595032415, -95.6959106537003 -29.19787785639968 M-95.6959106537003 -29.19787785639968 C-94.95069132945243 -29.472125456454815, -94.20547200520454 -29.746373056509952, -93.80090886774407 -29.895256030836055 M-95.6959106537003 -29.19787785639968 C-95.01678788922521 -29.447801311468528, -94.33766512475013 -29.697724766537377, -93.80090886774407 -29.895256030836055 M-93.80090886774407 -29.895256030836055 C-93.30707262918516 -30.041824034241028, -92.81323639062624 -30.188392037646, -91.86511939314951 -30.469788185729417 M-93.80090886774407 -29.895256030836055 C-93.04797909364855 -30.11872163557857, -92.29504931955304 -30.342187240321085, -91.86511939314951 -30.469788185729417 M-91.86511939314951 -30.469788185729417 C-91.18053279068474 -30.626040610396924, -90.49594618821997 -30.782293035064434, -89.89649680409325 -30.919113445218553 M-91.86511939314951 -30.469788185729417 C-91.44684808416146 -30.56525588253057, -91.0285767751734 -30.660723579331716, -89.89649680409325 -30.919113445218553 M-89.89649680409325 -30.919113445218553 C-89.12828921859048 -31.043311290103837, -88.36008163308773 -31.167509134989125, -87.90313059306196 -31.24138543543225 M-89.89649680409325 -30.919113445218553 C-89.34112297476837 -31.00890197895543, -88.78574914544349 -31.098690512692304, -87.90313059306196 -31.24138543543225 M-87.90313059306196 -31.24138543543225 C-87.46841925762226 -31.283321515145246, -87.03370792218257 -31.325257594858243, -85.89321192939246 -31.435279871635593 M-87.90313059306196 -31.24138543543225 C-87.27340196695197 -31.302134598633604, -86.64367334084197 -31.362883761834954, -85.89321192939246 -31.435279871635593 M-85.89321192939246 -31.435279871635593 C-85.26656469874021 -31.455375228627773, -84.63991746808796 -31.47547058561995, -83.87500000000001 -31.5 M-85.89321192939246 -31.435279871635593 C-85.31019821192358 -31.453975986787462, -84.7271844944547 -31.47267210193933, -83.87500000000001 -31.5 M-83.87500000000001 -31.5 C-83.87500000000001 -31.5, -83.87500000000001 -31.5, -83.875 -31.5 M-83.87500000000001 -31.5 C-83.87500000000001 -31.5, -83.875 -31.5, -83.875 -31.5" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="label" style="" transform="translate(-100, -24)"><rect></rect><foreignObject width="200" height="48"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;"><span class="nodeLabel"><p>User runs /plannotator-review</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Capture-1" data-look="classic" transform="translate(359.34375, 148)"><rect class="basic label-container" style="" x="-124.078125" y="-27" width="248.15625" height="54"></rect><g class="label" style="" transform="translate(-94.078125, -12)"><rect></rect><foreignObject width="188.15625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>VCS provider captures diff</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Serve-3" data-look="classic" transform="translate(359.34375, 299.3359375)"><polygon points="74.3359375,0 148.671875,-74.3359375 74.3359375,-148.671875 0,-74.3359375" class="label-container" transform="translate(-73.8359375, 74.3359375)"></polygon><g class="label" style="" transform="translate(-47.3359375, -12)"><rect></rect><foreignObject width="94.671875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Diff resolves?</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Boot-5" data-look="classic" transform="translate(224.0234375, 499.671875)"><rect class="basic label-container" style="" x="-98.4140625" y="-27" width="196.828125" height="54"></rect><g class="label" style="" transform="translate(-68.4140625, -12)"><rect></rect><foreignObject width="136.828125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Start review server</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Fail-7" data-look="classic" transform="translate(540.90234375, 499.671875)"><polygon points="-19.5,0 165.453125,0 184.953125,-39 0,-39" class="label-container" transform="translate(-82.7265625,19.5)"></polygon><g class="label" style="" transform="translate(-75.2265625, -12)"><rect></rect><foreignObject width="150.453125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Startup failure exit 1</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-UI-9" data-look="classic" transform="translate(224.0234375, 603.671875)"><rect class="basic label-container" style="" x="-69.5" y="-27" width="139" height="54"></rect><g class="label" style="" transform="translate(-39.5, -12)"><rect></rect><foreignObject width="79" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Diff viewer</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Ann-11" data-look="classic" transform="translate(224.0234375, 707.671875)"><rect class="basic label-container" style="" x="-82.1484375" y="-27" width="164.296875" height="54"></rect><g class="label" style="" transform="translate(-52.1484375, -12)"><rect></rect><foreignObject width="104.296875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Annotate code</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Dec-13" data-look="classic" transform="translate(224.0234375, 841.3671875)"><polygon points="56.6953125,0 113.390625,-56.6953125 56.6953125,-113.390625 0,-56.6953125" class="label-container" transform="translate(-56.1953125, 56.6953125)"></polygon><g class="label" style="" transform="translate(-29.6953125, -12)"><rect></rect><foreignObject width="59.390625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Decision</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-FB-15" data-look="classic" transform="translate(121.078125, 1041.5625)"><polygon points="0,0 140.15625,0 140.15625,-39 0,-39 0,0 -8,0 148.15625,0 148.15625,-39 -8,-39 -8,0" class="label-container" transform="translate(-70.078125,19.5)"></polygon><g class="label" style="" transform="translate(-62.578125, -12)"><rect></rect><foreignObject width="125.15625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Feedback prompt</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-OK-17" data-look="classic" transform="translate(326.96875, 1041.5625)"><polygon points="0,0 139.625,0 139.625,-39 0,-39 0,0 -8,0 147.625,0 147.625,-39 -8,-39 -8,0" class="label-container" transform="translate(-69.8125,19.5)"></polygon><g class="label" style="" transform="translate(-62.3125, -12)"><rect></rect><foreignObject width="124.625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Approved prompt</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-Done-19" data-look="classic" transform="translate(224.0234375, 1161.5)"><circle class="basic label-container" style="" r="25.4375" cx="0" cy="0"></circle><g class="label" style="" transform="translate(-17.9375, -12)"><rect></rect><foreignObject width="35.875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Done</p></span></div></foreignObject></g></g></g></g></g><defs><filter id="diagram-fixture-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><defs><filter id="diagram-fixture-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><linearGradient id="diagram-fixture-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="hsl(180, 0%, 18.3529411765%)" stop-opacity="1"></stop></linearGradient></svg>
\ No newline at end of file
diff --git a/packages/ui/test-setup/fixtures/diagrams/06-flowchart-review-decision.geometry.json b/packages/ui/test-setup/fixtures/diagrams/06-flowchart-review-decision.geometry.json
new file mode 100644
index 000000000..face345aa
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/06-flowchart-review-decision.geometry.json
@@ -0,0 +1,160 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "0 0.0000019073486328125 452.2768249511719 182.78799438476562",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 452.265625,
+		"height": 182.78125
+	},
+	"svgCtm": {
+		"a": 0.9999631026928857,
+		"b": 0,
+		"c": 0,
+		"d": 0.9999631026928857,
+		"e": 0.0027439228695226624,
+		"f": -0.000001907278484149507
+	},
+	"elements": {
+		"diagram-fixture-L_U_D_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 98.6050033569336,
+				"y": 93.59100341796875,
+				"width": 45.49999237060547,
+				"height": 0.5
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 0.0027439228695226624,
+				"f": -0.000001907278484149507
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_D_M_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 245.1790008544922,
+				"y": 39.39400100708008,
+				"width": 113.56700134277344,
+				"height": 32.755001068115234
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 0.0027439228695226624,
+				"f": -0.000001907278484149507
+			},
+			"label": ""
+		},
+		"diagram-fixture-L_D_R_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link",
+			"bbox": {
+				"x": 245.1790008544922,
+				"y": 115.03299713134766,
+				"width": 90.09800720214844,
+				"height": 32.75499725341797
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 0.0027439228695226624,
+				"f": -0.000001907278484149507
+			},
+			"label": ""
+		},
+		"diagram-fixture-flowchart-U-0": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -45.05248260498047,
+				"y": -19.5,
+				"width": 90.10496520996094,
+				"height": 39
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 53.05326903410614,
+				"f": 93.58753299646796
+			},
+			"label": "Reviewer"
+		},
+		"diagram-fixture-flowchart-D-1": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -58.7578125,
+				"y": -59.2578125,
+				"width": 118.515625,
+				"height": 118.515625
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 207.3578705047372,
+				"f": 93.58753299646796
+			},
+			"label": "Approve?"
+		},
+		"diagram-fixture-flowchart-M-3": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -29.03125,
+				"y": -31.393991470336914,
+				"width": 58.0625,
+				"height": 62.787986755371094
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 391.7651133642109,
+				"f": 39.39253793813495
+			},
+			"label": "Merge"
+		},
+		"diagram-fixture-flowchart-R-5": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -52.5,
+				"y": -27,
+				"width": 105,
+				"height": 54
+			},
+			"ctm": {
+				"a": 0.9999631026928857,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999631026928857,
+				"e": 391.7651133642109,
+				"f": 147.78253949847053
+			},
+			"label": "Revise"
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/06-flowchart-review-decision.svg b/packages/ui/test-setup/fixtures/diagrams/06-flowchart-review-decision.svg
new file mode 100644
index 000000000..d05f4ff38
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/06-flowchart-review-decision.svg
@@ -0,0 +1 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 452.2768249511719px;" viewBox="0 0.0000019073486328125 452.2768249511719 182.78799438476562" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#diagram-fixture .cluster-label text{fill:#f8fafc;}#diagram-fixture .cluster-label span{color:#f8fafc;}#diagram-fixture .cluster-label span p{background-color:transparent;}#diagram-fixture .label text,#diagram-fixture span{fill:#ccc;color:#ccc;}#diagram-fixture .node rect,#diagram-fixture .node circle,#diagram-fixture .node ellipse,#diagram-fixture .node polygon,#diagram-fixture .node path{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .rough-node .label text,#diagram-fixture .node .label text,#diagram-fixture .image-shape .label,#diagram-fixture .icon-shape .label{text-anchor:middle;}#diagram-fixture .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#diagram-fixture .rough-node .label,#diagram-fixture .node .label,#diagram-fixture .image-shape .label,#diagram-fixture .icon-shape .label{text-align:center;}#diagram-fixture .node.clickable{cursor:pointer;}#diagram-fixture .root .anchor path{fill:#64748b!important;stroke-width:0;stroke:#64748b;}#diagram-fixture .arrowheadPath{fill:lightgrey;}#diagram-fixture .edgePaths .path{stroke:#64748b;stroke-width:1px;}#diagram-fixture .flowchart-link{stroke:#64748b;fill:none;}#diagram-fixture .edgeLabel{background-color:#1e293b;text-align:center;}#diagram-fixture .edgeLabel p{background-color:#1e293b;}#diagram-fixture .edgeLabel rect{opacity:0.5;background-color:#1e293b;fill:#1e293b;}#diagram-fixture .labelBkg{background-color:rgba(30, 41, 59, 0.5);}#diagram-fixture .cluster rect{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .cluster text{fill:#f8fafc;}#diagram-fixture .cluster span{color:#f8fafc;}#diagram-fixture .node .collapsed-indicator{fill:#475569;stroke:none;opacity:0.6;}#diagram-fixture .node .collapsed-separator{stroke:#475569;stroke-width:0.75px;}#diagram-fixture div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:#0f172a;border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#diagram-fixture .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#diagram-fixture rect.text{fill:none;stroke-width:0;}#diagram-fixture .icon-shape,#diagram-fixture .image-shape{background-color:#1e293b;text-align:center;}#diagram-fixture .icon-shape p,#diagram-fixture .image-shape p{background-color:#1e293b;padding:2px;}#diagram-fixture .icon-shape .label rect,#diagram-fixture .image-shape .label rect{opacity:0.5;background-color:#1e293b;fill:#1e293b;}#diagram-fixture .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#diagram-fixture .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="diagram-fixture_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-pointEnd-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="11.5" refY="7" markerUnits="userSpaceOnUse" markerWidth="10.5" markerHeight="14" orient="auto"><path d="M 0 0 L 11.5 7 L 0 14 z" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-pointStart-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="1" refY="7" markerUnits="userSpaceOnUse" markerWidth="11.5" markerHeight="14" orient="auto"><polygon points="0,7 11.5,14 11.5,0" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></polygon></marker><marker id="diagram-fixture_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-circleEnd-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refY="5" refX="12.25" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-circleStart-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-2" refY="5" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"></circle></marker><marker id="diagram-fixture_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="diagram-fixture_flowchart-v2-crossEnd-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="17.7" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5;"></path></marker><marker id="diagram-fixture_flowchart-v2-crossStart-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="-3.5" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5; stroke-dasharray: 1, 0;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M98.605,94.091L102.688,94.008C106.772,93.924,114.938,93.758,122.522,93.674C130.105,93.591,137.105,93.591,140.605,93.591L144.105,93.591" id="diagram-fixture-L_U_D_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_U_D_0" data-points="W3sieCI6OTguNjA0OTYyNDMxODI2MjgsInkiOjk0LjA5MDk5MDA2NjUyODMzfSx7IngiOjEyMy4xMDQ5NjUyMDk5NjA5NCwieSI6OTMuNTkwOTkwMDY2NTI4MzJ9LHsieCI6MTQ4LjEwNDk2NTIwOTk2MDksInkiOjkzLjU5MDk5MDA2NjUyODMyfV0=" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M245.179,72.149L254.807,66.69C264.436,61.231,283.692,50.312,302.62,44.853C321.548,39.394,340.147,39.394,349.446,39.394L358.746,39.394" id="diagram-fixture-L_D_M_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_D_M_0" data-points="W3sieCI6MjQ1LjE3ODkyNTQwODUzOTI3LCJ5Ijo3Mi4xNDkzMjUyNjUxMDY2N30seyJ4IjozMDIuOTQ4NzE1MjA5OTYwOTQsInkiOjM5LjM5Mzk5MzM3NzY4NTU1fSx7IngiOjM2Mi43NDU1OTAyMDk5NjA5NCwieSI6MzkuMzkzOTkzMzc3Njg1NTV9XQ==" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path><path d="M245.179,115.033L254.807,120.492C264.436,125.951,283.692,136.87,298.708,142.329C313.725,147.788,324.501,147.788,329.889,147.788L335.277,147.788" id="diagram-fixture-L_D_R_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_D_R_0" data-points="W3sieCI6MjQ1LjE3ODkyNTQwODUzOTMzLCJ5IjoxMTUuMDMyNjU0ODY3OTQ5OTd9LHsieCI6MzAyLjk0ODcxNTIwOTk2MDk0LCJ5IjoxNDcuNzg3OTg2NzU1MzcxMX0seyJ4IjozMzkuMjc2ODQwMjA5OTYwOTQsInkiOjE0Ny43ODc5ODY3NTUzNzExfV0=" data-look="classic" marker-end="url(#diagram-fixture_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_U_D_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(302.94871520996094, 39.39399337768555)"><g class="label" data-id="L_D_M_0" transform="translate(-11.328125, -12)"><foreignObject width="22.65625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>Yes</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(302.94871520996094, 147.7879867553711)"><g class="label" data-id="L_D_R_0" transform="translate(-9.3984375, -12)"><foreignObject width="18.796875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>No</p></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="diagram-fixture-flowchart-U-0" data-look="classic" transform="translate(53.05248260498047, 93.59099006652832)"><g class="basic label-container outer-path"><path d="M-25.5625 -19.5 C-13.601388608242472 -19.5, -1.640277216484943 -19.5, 25.5625 -19.5 C25.5625 -19.5, 25.5625 -19.5, 25.5625 -19.5 C25.865464853416746 -19.49028450683624, 26.168429706833496 -19.480569013672476, 26.8118692896239 -19.45993515863156 C27.281738856582695 -19.414607406607875, 27.751608423541494 -19.36927965458419, 28.056104652847864 -19.3399052695533 C28.44007852063184 -19.277827352371805, 28.824052388415815 -19.215749435190308, 29.29009325967676 -19.140403561325776 C29.54709216283468 -19.081745238754554, 29.8040910659926 -19.02308691618333, 30.50876438623539 -18.862249829261074 C30.754776420795967 -18.789234748747017, 31.000788455356545 -18.71621966823296, 31.707110251460602 -18.50658706670804 C32.11834823580032 -18.35524768702877, 32.52958622014003 -18.203908307349497, 32.8802065951478 -18.074876768247425 C33.19314003417624 -17.936350417630184, 33.50607347320467 -17.797824067012943, 34.02323291279238 -17.568892924097174 C34.258225105819015 -17.44629764751486, 34.49321729884566 -17.323702370932548, 35.13149226407678 -16.990714730406097 C35.49970912599974 -16.76749950482593, 35.8679259879227 -16.544284279245762, 36.2004305736057 -16.342718045390892 C36.49172269816974 -16.139525269127855, 36.783014822733776 -15.936332492864821, 37.22565534457871 -15.627565626425154 C37.49418743205342 -15.413418432603027, 37.76271951952814 -15.1992712387809, 38.202953708501866 -14.848196188198123 C38.495123266750014 -14.582855525780055, 38.78729282499817 -14.317514863361986, 39.12830973676799 -14.007812326905688 C39.45765281669837 -13.667738557307834, 39.78699589662876 -13.32766478770998, 39.99792094296865 -13.10986736009568 C40.27934885862099 -12.779286116668388, 40.560776774273336 -12.448704873241097, 40.80821390812658 -12.158051136245305 C41.032652980850635 -11.857323225615229, 41.25709205357469 -11.556595314985152, 41.555858964640635 -11.156274872382312 C41.8008049635114 -10.779972040906438, 42.04575096238217 -10.403669209430564, 42.23778387860425 -10.108655082055241 C42.36196707475697 -9.8881552423739, 42.48615027090969 -9.66765540269256, 42.851186474273504 -9.019496659696287 C43.030011564889215 -8.648162532788772, 43.208836655504925 -8.276828405881258, 43.39354614880834 -7.893275190886684 C43.55819840186694 -7.486580942497204, 43.72285065492553 -7.079886694107723, 43.862634229970325 -6.734618561215508 C44.01625830260508 -6.271927331111598, 44.16988237523984 -5.80923610100769, 44.25652313421488 -5.548287939305138 C44.365135379519614 -5.13410237511331, 44.47374762482435 -4.719916810921481, 44.57359428754556 -4.339158212148133 C44.659069638319046 -3.900260351148046, 44.74454498909254 -3.4613624901479585, 44.812544776581774 -3.1121979531509023 C44.845974883926004 -2.852920642110451, 44.87940499127023 -2.59364333107, 44.97239270250937 -1.872449005199798 C44.996623688161705 -1.4950318447650084, 45.02085467381405 -1.1176146843302188, 45.05248121591342 -0.6250057626472757 C45.05248121591342 -0.24757518651444094, 45.05248121591342 0.12985538961839382, 45.05248121591342 0.625005762647271 C45.02154805646329 1.1068146898798887, 44.99061489701316 1.5886236171125065, 44.97239270250937 1.8724490051997846 C44.93653891259776 2.1505239196225303, 44.90068512268616 2.4285988340452764, 44.812544776581774 3.1121979531508885 C44.72768854977475 3.5479167434351058, 44.64283232296771 3.9836355337193226, 44.57359428754556 4.339158212148129 C44.462088750325705 4.764377152372982, 44.35058321310584 5.189596092597836, 44.25652313421489 5.548287939305125 C44.14182078656228 5.893753135097522, 44.02711843890967 6.239218330889919, 43.862634229970325 6.734618561215495 C43.7474215442408 7.019196122453171, 43.63220885851127 7.303773683690847, 43.39354614880834 7.893275190886679 C43.21113312230461 8.2720597434352, 43.02872009580087 8.650844295983722, 42.851186474273504 9.019496659696284 C42.71301031934736 9.264842414620562, 42.57483416442122 9.51018816954484, 42.23778387860425 10.108655082055236 C42.028141994741745 10.430721312396141, 41.81850011087925 10.752787542737044, 41.55585896464064 11.156274872382301 C41.25710559515399 11.556577170502557, 40.958352225667326 11.956879468622812, 40.80821390812658 12.158051136245302 C40.571962227364345 12.435565803570091, 40.3357105466021 12.713080470894882, 39.99792094296866 13.10986736009567 C39.75740069409898 13.35822426413329, 39.516880445229305 13.606581168170909, 39.12830973676799 14.007812326905684 C38.91812153241309 14.198699692825665, 38.707933328058196 14.389587058745644, 38.20295370850189 14.848196188198111 C37.982767830507214 15.02378856650657, 37.76258195251254 15.199380944815028, 37.22565534457871 15.627565626425152 C36.913635009699675 15.84521750489417, 36.60161467482063 16.06286938336319, 36.20043057360571 16.34271804539089 C35.96645978761531 16.484552510823228, 35.732489001624906 16.626386976255564, 35.13149226407678 16.990714730406093 C34.803315471947826 17.161924352652505, 34.47513867981887 17.333133974898914, 34.02323291279239 17.56889292409717 C33.683185678969835 17.719421747367623, 33.343138445147275 17.86995057063807, 32.880206595147804 18.07487676824742 C32.58273068891038 18.184350651579926, 32.28525478267296 18.293824534912428, 31.707110251460616 18.506587066708033 C31.299068653675004 18.62769167107675, 30.89102705588939 18.748796275445468, 30.508764386235413 18.86224982926107 C30.059303893362035 18.9648362537556, 29.60984340048866 19.067422678250125, 29.290093259676766 19.140403561325773 C28.82179005863523 19.216115191124604, 28.35348685759369 19.291826820923436, 28.05610465284788 19.3399052695533 C27.660901772680237 19.37803001610207, 27.265698892512596 19.416154762650837, 26.8118692896239 19.45993515863156 C26.33305108969561 19.47528992634017, 25.854232889767317 19.490644694048786, 25.562500000000004 19.5 C25.562500000000004 19.5, 25.5625 19.5, 25.5625 19.5 C5.804643929888044 19.5, -13.953212140223911 19.5, -25.562499999999996 19.5 C-25.863101712016093 19.49036028818138, -26.16370342403219 19.480720576362764, -26.811869289623893 19.45993515863156 C-27.19081797495231 19.4233784347104, -27.569766660280724 19.386821710789242, -28.05610465284787 19.3399052695533 C-28.481702689893353 19.271097879485854, -28.90730072693884 19.202290489418413, -29.29009325967676 19.140403561325773 C-29.767703926325684 19.031392043364026, -30.24531459297461 18.922380525402282, -30.508764386235388 18.862249829261074 C-30.967401194473087 18.72612883200986, -31.42603800271079 18.590007834758644, -31.70711025146059 18.506587066708043 C-31.971798039301884 18.40917951403536, -32.23648582714318 18.311771961362673, -32.8802065951478 18.074876768247425 C-33.23854009513836 17.91625315738721, -33.596873595128926 17.757629546526992, -34.02323291279238 17.568892924097174 C-34.26220641429746 17.44422060143181, -34.50117991580254 17.31954827876644, -35.13149226407678 16.990714730406097 C-35.43821129936176 16.80477984873522, -35.74493033464674 16.61884496706434, -36.200430573605686 16.3427180453909 C-36.43157581558416 16.181481130702974, -36.662721057562635 16.020244216015048, -37.22565534457871 15.627565626425156 C-37.51832176895884 15.394171941162634, -37.81098819333898 15.160778255900112, -38.202953708501866 14.848196188198125 C-38.45898520958416 14.615675153137493, -38.71501671066645 14.38315411807686, -39.128309736767974 14.007812326905697 C-39.378229170609366 13.74974999269735, -39.62814860445075 13.491687658489003, -39.997920942968655 13.109867360095677 C-40.16704541639265 12.911204130156698, -40.33616988981664 12.71254090021772, -40.808213908126575 12.158051136245307 C-40.99953744558381 11.901695025985441, -41.19086098304105 11.645338915725574, -41.555858964640635 11.156274872382316 C-41.74821821893533 10.860759402093416, -41.940577473230015 10.565243931804517, -42.23778387860425 10.108655082055249 C-42.396593687086416 9.826672185858266, -42.55540349556858 9.544689289661285, -42.851186474273504 9.019496659696289 C-43.01428858137718 8.680811644469477, -43.17739068848085 8.342126629242665, -43.39354614880834 7.893275190886686 C-43.505941402514445 7.615656741218207, -43.61833665622055 7.338038291549728, -43.862634229970325 6.73461856121551 C-43.99174182414454 6.345767058064367, -44.12084941831876 5.956915554913224, -44.25652313421488 5.5482879393051325 C-44.33089088008448 5.264691493119402, -44.40525862595408 4.981095046933671, -44.57359428754556 4.339158212148136 C-44.634171370976084 4.02810769170352, -44.69474845440661 3.717057171258903, -44.812544776581774 3.112197953150904 C-44.85656778450991 2.77076419698645, -44.90059079243806 2.429330440821996, -44.97239270250937 1.872449005199809 C-44.997567494466466 1.4803312997416374, -45.02274228642357 1.0882135942834654, -45.05248121591342 0.6250057626472781 C-45.05248121591342 0.36483546864380256, -45.05248121591342 0.10466517464032699, -45.05248121591342 -0.6250057626472687 C-45.03140439782612 -0.9532942172581774, -45.010327579738835 -1.2815826718690861, -44.97239270250937 -1.8724490051997822 C-44.91923802738783 -2.284706168864599, -44.86608335226629 -2.6969633325294162, -44.812544776581774 -3.112197953150895 C-44.73354955346706 -3.5178217281986646, -44.65455433035233 -3.9234455032464335, -44.57359428754556 -4.339158212148126 C-44.50181376143872 -4.612888468070333, -44.43003323533187 -4.886618723992538, -44.25652313421489 -5.548287939305123 C-44.15922674691712 -5.841329155771911, -44.061930359619346 -6.134370372238699, -43.86263422997033 -6.734618561215485 C-43.72672919423313 -7.070306627031489, -43.59082415849593 -7.405994692847494, -43.39354614880834 -7.893275190886676 C-43.2089524350479 -8.276587987182989, -43.024358721287456 -8.659900783479301, -42.851186474273504 -9.019496659696282 C-42.699978692796016 -9.287981387157753, -42.54877091131853 -9.556466114619225, -42.23778387860425 -10.108655082055243 C-41.969420216476536 -10.52093373281684, -41.70105655434883 -10.933212383578438, -41.55585896464064 -11.156274872382308 C-41.38494360275279 -11.385285886602237, -41.21402824086495 -11.614296900822165, -40.80821390812659 -12.158051136245302 C-40.53428679470148 -12.479821510568748, -40.26035968127637 -12.801591884892193, -39.99792094296866 -13.10986736009567 C-39.70557374222935 -13.411739847010573, -39.413226541490026 -13.713612333925477, -39.128309736767996 -14.007812326905677 C-38.90555510025104 -14.210112194025662, -38.68280046373408 -14.412412061145648, -38.20295370850189 -14.848196188198107 C-37.85108126410957 -15.128805098881985, -37.49920881971725 -15.409414009565863, -37.22565534457872 -15.627565626425149 C-36.84767541141714 -15.891228065311076, -36.46969547825557 -16.154890504197002, -36.200430573605715 -16.342718045390885 C-35.80288348197929 -16.58371342858085, -35.40533639035287 -16.82470881177082, -35.13149226407679 -16.99071473040609 C-34.77241614769299 -17.17804451032429, -34.41334003130918 -17.365374290242492, -34.02323291279239 -17.56889292409717 C-33.63087881759047 -17.742576443272352, -33.23852472238855 -17.916259962447533, -32.880206595147804 -18.07487676824742 C-32.565345371868545 -18.19074860895943, -32.25048414858929 -18.30662044967144, -31.70711025146062 -18.506587066708033 C-31.361237265495305 -18.609240353418187, -31.01536427952999 -18.71189364012834, -30.508764386235413 -18.862249829261067 C-30.203418740724253 -18.93194298028244, -29.898073095213093 -19.00163613130381, -29.290093259676766 -19.140403561325773 C-28.83934104771895 -19.2132776833195, -28.388588835761134 -19.28615180531323, -28.056104652847882 -19.3399052695533 C-27.64173481764138 -19.379879029203032, -27.22736498243488 -19.419852788852765, -26.811869289623903 -19.45993515863156 C-26.39182937369318 -19.47340502117736, -25.97178945776246 -19.48687488372316, -25.562500000000007 -19.5 C-25.562500000000004 -19.5, -25.562500000000004 -19.5, -25.5625 -19.5" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M-25.5625 -19.5 C-9.84972588633055 -19.5, 5.863048227338901 -19.5, 25.5625 -19.5 M-25.5625 -19.5 C-8.218768518512046 -19.5, 9.124962962975907 -19.5, 25.5625 -19.5 M25.5625 -19.5 C25.5625 -19.5, 25.5625 -19.5, 25.5625 -19.5 M25.5625 -19.5 C25.5625 -19.5, 25.5625 -19.5, 25.5625 -19.5 M25.5625 -19.5 C26.03154958187947 -19.484958492858752, 26.50059916375894 -19.469916985717504, 26.8118692896239 -19.45993515863156 M25.5625 -19.5 C25.874623288194964 -19.489990813658714, 26.18674657638993 -19.479981627317425, 26.8118692896239 -19.45993515863156 M26.8118692896239 -19.45993515863156 C27.13549326504073 -19.428715542937873, 27.459117240457562 -19.397495927244183, 28.056104652847864 -19.3399052695533 M26.8118692896239 -19.45993515863156 C27.205272930754695 -19.42198398250877, 27.59867657188549 -19.384032806385985, 28.056104652847864 -19.3399052695533 M28.056104652847864 -19.3399052695533 C28.53826098090681 -19.261953973610897, 29.020417308965758 -19.1840026776685, 29.29009325967676 -19.140403561325776 M28.056104652847864 -19.3399052695533 C28.502983999545144 -19.267657282380377, 28.949863346242424 -19.195409295207455, 29.29009325967676 -19.140403561325776 M29.29009325967676 -19.140403561325776 C29.56339116418125 -19.078025098058124, 29.836689068685747 -19.01564663479047, 30.50876438623539 -18.862249829261074 M29.29009325967676 -19.140403561325776 C29.72887415510138 -19.040254685258038, 30.167655050526 -18.940105809190303, 30.50876438623539 -18.862249829261074 M30.50876438623539 -18.862249829261074 C30.865252945209797 -18.756445896204102, 31.221741504184198 -18.65064196314713, 31.707110251460602 -18.50658706670804 M30.50876438623539 -18.862249829261074 C30.792195741457206 -18.778128890792782, 31.07562709667902 -18.69400795232449, 31.707110251460602 -18.50658706670804 M31.707110251460602 -18.50658706670804 C32.137076186691026 -18.348355627981707, 32.56704212192145 -18.19012418925538, 32.8802065951478 -18.074876768247425 M31.707110251460602 -18.50658706670804 C32.00749753083451 -18.39604177114887, 32.30788481020843 -18.285496475589696, 32.8802065951478 -18.074876768247425 M32.8802065951478 -18.074876768247425 C33.255765437614436 -17.90862800924468, 33.631324280081074 -17.742379250241935, 34.02323291279238 -17.568892924097174 M32.8802065951478 -18.074876768247425 C33.17964318913735 -17.942325070559214, 33.479079783126906 -17.809773372871003, 34.02323291279238 -17.568892924097174 M34.02323291279238 -17.568892924097174 C34.25222728876564 -17.449426704829822, 34.481221664738904 -17.32996048556247, 35.13149226407678 -16.990714730406097 M34.02323291279238 -17.568892924097174 C34.35025840104227 -17.398283936347028, 34.67728388929216 -17.227674948596885, 35.13149226407678 -16.990714730406097 M35.13149226407678 -16.990714730406097 C35.55367236305684 -16.734786673398734, 35.975852462036904 -16.478858616391374, 36.2004305736057 -16.342718045390892 M35.13149226407678 -16.990714730406097 C35.47504820497235 -16.78244910007639, 35.81860414586792 -16.574183469746686, 36.2004305736057 -16.342718045390892 M36.2004305736057 -16.342718045390892 C36.420572868008996 -16.18915631062148, 36.6407151624123 -16.035594575852073, 37.22565534457871 -15.627565626425154 M36.2004305736057 -16.342718045390892 C36.54711174654063 -16.10088826673758, 36.893792919475565 -15.859058488084267, 37.22565534457871 -15.627565626425154 M37.22565534457871 -15.627565626425154 C37.52283195141586 -15.39057519067416, 37.82000855825301 -15.153584754923164, 38.202953708501866 -14.848196188198123 M37.22565534457871 -15.627565626425154 C37.57546760173186 -15.348599660240628, 37.925279858885006 -15.069633694056105, 38.202953708501866 -14.848196188198123 M38.202953708501866 -14.848196188198123 C38.396589999900236 -14.672340831685645, 38.590226291298606 -14.496485475173166, 39.12830973676799 -14.007812326905688 M38.202953708501866 -14.848196188198123 C38.390469828434775 -14.677899009479715, 38.57798594836768 -14.507601830761308, 39.12830973676799 -14.007812326905688 M39.12830973676799 -14.007812326905688 C39.44166174736431 -13.684250649286467, 39.755013757960626 -13.360688971667246, 39.99792094296865 -13.10986736009568 M39.12830973676799 -14.007812326905688 C39.331791734354795 -13.797700458214614, 39.5352737319416 -13.58758858952354, 39.99792094296865 -13.10986736009568 M39.99792094296865 -13.10986736009568 C40.218848722763056 -12.850353018802373, 40.439776502557464 -12.590838677509065, 40.80821390812658 -12.158051136245305 M39.99792094296865 -13.10986736009568 C40.21907120082645 -12.850091683409756, 40.44022145868424 -12.590316006723832, 40.80821390812658 -12.158051136245305 M40.80821390812658 -12.158051136245305 C40.96505739291742 -11.947895155360987, 41.12190087770826 -11.73773917447667, 41.555858964640635 -11.156274872382312 M40.80821390812658 -12.158051136245305 C41.034176714248844 -11.8552815616766, 41.260139520371105 -11.552511987107893, 41.555858964640635 -11.156274872382312 M41.555858964640635 -11.156274872382312 C41.82840806039071 -10.737566271630472, 42.10095715614078 -10.318857670878634, 42.23778387860425 -10.108655082055241 M41.555858964640635 -11.156274872382312 C41.77329244365614 -10.822238659550138, 41.99072592267165 -10.488202446717965, 42.23778387860425 -10.108655082055241 M42.23778387860425 -10.108655082055241 C42.41875224359812 -9.787327424974569, 42.599720608591994 -9.465999767893896, 42.851186474273504 -9.019496659696287 M42.23778387860425 -10.108655082055241 C42.44996957192902 -9.731897897425794, 42.66215526525378 -9.355140712796347, 42.851186474273504 -9.019496659696287 M42.851186474273504 -9.019496659696287 C43.037484078025365 -8.632645699375388, 43.22378168177723 -8.245794739054487, 43.39354614880834 -7.893275190886684 M42.851186474273504 -9.019496659696287 C42.960384873382544 -8.792743847474924, 43.06958327249158 -8.565991035253559, 43.39354614880834 -7.893275190886684 M43.39354614880834 -7.893275190886684 C43.56742308708629 -7.463795791658244, 43.74130002536424 -7.034316392429805, 43.862634229970325 -6.734618561215508 M43.39354614880834 -7.893275190886684 C43.493522723142 -7.646331119366969, 43.59349929747567 -7.399387047847252, 43.862634229970325 -6.734618561215508 M43.862634229970325 -6.734618561215508 C44.01254862159942 -6.283100299243245, 44.16246301322852 -5.831582037270982, 44.25652313421488 -5.548287939305138 M43.862634229970325 -6.734618561215508 C43.961335946711046 -6.4373447163753825, 44.06003766345177 -6.140070871535256, 44.25652313421488 -5.548287939305138 M44.25652313421488 -5.548287939305138 C44.32964702215509 -5.26943486249559, 44.40277091009531 -4.990581785686042, 44.57359428754556 -4.339158212148133 M44.25652313421488 -5.548287939305138 C44.320434293994744 -5.304566987792654, 44.38434545377461 -5.06084603628017, 44.57359428754556 -4.339158212148133 M44.57359428754556 -4.339158212148133 C44.626337728058424 -4.068331792444663, 44.679081168571294 -3.7975053727411936, 44.812544776581774 -3.1121979531509023 M44.57359428754556 -4.339158212148133 C44.65858345677777 -3.902756790608022, 44.74357262600997 -3.46635536906791, 44.812544776581774 -3.1121979531509023 M44.812544776581774 -3.1121979531509023 C44.86127295498237 -2.7342718239430783, 44.91000113338297 -2.3563456947352543, 44.97239270250937 -1.872449005199798 M44.812544776581774 -3.1121979531509023 C44.86047238162147 -2.740480912839117, 44.90839998666117 -2.3687638725273317, 44.97239270250937 -1.872449005199798 M44.97239270250937 -1.872449005199798 C45.00333079131919 -1.3905632992109989, 45.03426888012901 -0.9086775932221998, 45.05248121591342 -0.6250057626472757 M44.97239270250937 -1.872449005199798 C45.00169799106703 -1.4159954811109763, 45.0310032796247 -0.9595419570221546, 45.05248121591342 -0.6250057626472757 M45.05248121591342 -0.6250057626472757 C45.05248121591342 -0.2166932770296628, 45.05248121591342 0.19161920858795012, 45.05248121591342 0.625005762647271 M45.05248121591342 -0.6250057626472757 C45.05248121591342 -0.19811295624562597, 45.05248121591342 0.22877985015602376, 45.05248121591342 0.625005762647271 M45.05248121591342 0.625005762647271 C45.02153911850389 1.1069539058121691, 44.99059702109436 1.5889020489770669, 44.97239270250937 1.8724490051997846 M45.05248121591342 0.625005762647271 C45.036276153520426 0.8774126899090393, 45.020071091127434 1.1298196171708077, 44.97239270250937 1.8724490051997846 M44.97239270250937 1.8724490051997846 C44.930320249711606 2.19875464095371, 44.88824779691384 2.5250602767076358, 44.812544776581774 3.1121979531508885 M44.97239270250937 1.8724490051997846 C44.91152756665782 2.3445069796838514, 44.85066243080627 2.816564954167918, 44.812544776581774 3.1121979531508885 M44.812544776581774 3.1121979531508885 C44.75257553195955 3.4201273497816844, 44.69260628733732 3.7280567464124803, 44.57359428754556 4.339158212148129 M44.812544776581774 3.1121979531508885 C44.750536314119515 3.430598302401397, 44.68852785165726 3.7489986516519056, 44.57359428754556 4.339158212148129 M44.57359428754556 4.339158212148129 C44.459681343217625 4.7735576390529175, 44.345768398889696 5.2079570659577055, 44.25652313421489 5.548287939305125 M44.57359428754556 4.339158212148129 C44.49150679838964 4.652193385242489, 44.409419309233726 4.9652285583368485, 44.25652313421489 5.548287939305125 M44.25652313421489 5.548287939305125 C44.16520166219085 5.823333662940886, 44.07388019016682 6.098379386576648, 43.862634229970325 6.734618561215495 M44.25652313421489 5.548287939305125 C44.11455187458455 5.975882753263333, 43.97258061495421 6.4034775672215405, 43.862634229970325 6.734618561215495 M43.862634229970325 6.734618561215495 C43.71181657599318 7.10714108240002, 43.56099892201603 7.479663603584545, 43.39354614880834 7.893275190886679 M43.862634229970325 6.734618561215495 C43.74722852147347 7.019672892420324, 43.63182281297661 7.304727223625153, 43.39354614880834 7.893275190886679 M43.39354614880834 7.893275190886679 C43.28345604697975 8.12187964288458, 43.173365945151154 8.350484094882479, 42.851186474273504 9.019496659696284 M43.39354614880834 7.893275190886679 C43.26641530975311 8.157265098349068, 43.13928447069787 8.421255005811457, 42.851186474273504 9.019496659696284 M42.851186474273504 9.019496659696284 C42.620921280474356 9.42835582816593, 42.390656086675214 9.837214996635579, 42.23778387860425 10.108655082055236 M42.851186474273504 9.019496659696284 C42.680856940234364 9.321933995118378, 42.51052740619522 9.624371330540471, 42.23778387860425 10.108655082055236 M42.23778387860425 10.108655082055236 C41.9951447559333 10.481413932205191, 41.75250563326235 10.854172782355146, 41.55585896464064 11.156274872382301 M42.23778387860425 10.108655082055236 C42.09183616918092 10.332869956176904, 41.9458884597576 10.557084830298571, 41.55585896464064 11.156274872382301 M41.55585896464064 11.156274872382301 C41.32572619275661 11.464631821180081, 41.09559342087258 11.772988769977863, 40.80821390812658 12.158051136245302 M41.55585896464064 11.156274872382301 C41.293565086891036 11.507724773102938, 41.03127120914142 11.859174673823574, 40.80821390812658 12.158051136245302 M40.80821390812658 12.158051136245302 C40.49839609201727 12.521980772180449, 40.18857827590796 12.885910408115596, 39.99792094296866 13.10986736009567 M40.80821390812658 12.158051136245302 C40.568955045586165 12.439098210400227, 40.329696183045755 12.72014528455515, 39.99792094296866 13.10986736009567 M39.99792094296866 13.10986736009567 C39.741762461177686 13.374372023547332, 39.48560397938671 13.638876686998994, 39.12830973676799 14.007812326905684 M39.99792094296866 13.10986736009567 C39.66040869311445 13.458376468341196, 39.32289644326024 13.806885576586723, 39.12830973676799 14.007812326905684 M39.12830973676799 14.007812326905684 C38.81384547582666 14.29340044842419, 38.49938121488533 14.578988569942696, 38.20295370850189 14.848196188198111 M39.12830973676799 14.007812326905684 C38.82588667444895 14.282464950428086, 38.52346361212991 14.557117573950485, 38.20295370850189 14.848196188198111 M38.20295370850189 14.848196188198111 C37.999071311405366 15.010786974344143, 37.79518891430884 15.173377760490174, 37.22565534457871 15.627565626425152 M38.20295370850189 14.848196188198111 C37.92293748110244 15.071501678004418, 37.64292125370298 15.294807167810724, 37.22565534457871 15.627565626425152 M37.22565534457871 15.627565626425152 C36.88456483879514 15.865495597689755, 36.543474333011574 16.103425568954357, 36.20043057360571 16.34271804539089 M37.22565534457871 15.627565626425152 C36.81897934578804 15.911245198461279, 36.41230334699736 16.194924770497405, 36.20043057360571 16.34271804539089 M36.20043057360571 16.34271804539089 C35.77540630865731 16.600370252522428, 35.35038204370892 16.858022459653967, 35.13149226407678 16.990714730406093 M36.20043057360571 16.34271804539089 C35.9744897736502 16.479684686099443, 35.74854897369468 16.616651326807993, 35.13149226407678 16.990714730406093 M35.13149226407678 16.990714730406093 C34.83211981301095 17.146897146369934, 34.53274736194511 17.303079562333775, 34.02323291279239 17.56889292409717 M35.13149226407678 16.990714730406093 C34.73915919925854 17.195394639020453, 34.346826134440285 17.400074547634812, 34.02323291279239 17.56889292409717 M34.02323291279239 17.56889292409717 C33.70638346674107 17.709152774859216, 33.38953402068976 17.849412625621266, 32.880206595147804 18.07487676824742 M34.02323291279239 17.56889292409717 C33.63102888917719 17.742510011032625, 33.238824865561995 17.916127097968083, 32.880206595147804 18.07487676824742 M32.880206595147804 18.07487676824742 C32.43599847544266 18.23834946251376, 31.99179035573751 18.4018221567801, 31.707110251460616 18.506587066708033 M32.880206595147804 18.07487676824742 C32.60842987345847 18.174893114105572, 32.33665315176913 18.274909459963723, 31.707110251460616 18.506587066708033 M31.707110251460616 18.506587066708033 C31.247014332432276 18.643141120382882, 30.786918413403935 18.779695174057736, 30.508764386235413 18.86224982926107 M31.707110251460616 18.506587066708033 C31.377772279540334 18.604332848043683, 31.048434307620052 18.702078629379333, 30.508764386235413 18.86224982926107 M30.508764386235413 18.86224982926107 C30.028826938767967 18.97179241976098, 29.54888949130052 19.08133501026089, 29.290093259676766 19.140403561325773 M30.508764386235413 18.86224982926107 C30.033267479178967 18.970778895389405, 29.557770572122518 19.07930796151774, 29.290093259676766 19.140403561325773 M29.290093259676766 19.140403561325773 C28.827163291661805 19.21524648847891, 28.364233323646843 19.290089415632053, 28.05610465284788 19.3399052695533 M29.290093259676766 19.140403561325773 C28.96736778134387 19.192579313889173, 28.644642303010976 19.244755066452573, 28.05610465284788 19.3399052695533 M28.05610465284788 19.3399052695533 C27.570541470419904 19.38674696578696, 27.08497828799193 19.43358866202062, 26.8118692896239 19.45993515863156 M28.05610465284788 19.3399052695533 C27.730538675706473 19.371312227817757, 27.40497269856507 19.402719186082216, 26.8118692896239 19.45993515863156 M26.8118692896239 19.45993515863156 C26.523301138882832 19.469188977561995, 26.234732988141765 19.478442796492427, 25.562500000000004 19.5 M26.8118692896239 19.45993515863156 C26.384145527133906 19.473651427180815, 25.956421764643913 19.48736769573007, 25.562500000000004 19.5 M25.562500000000004 19.5 C25.562500000000004 19.5, 25.5625 19.5, 25.5625 19.5 M25.562500000000004 19.5 C25.562500000000004 19.5, 25.5625 19.5, 25.5625 19.5 M25.5625 19.5 C11.411146983933296 19.5, -2.7402060321334076 19.5, -25.562499999999996 19.5 M25.5625 19.5 C6.863259278706526 19.5, -11.835981442586949 19.5, -25.562499999999996 19.5 M-25.562499999999996 19.5 C-26.060182130100408 19.48404030276718, -26.557864260200823 19.46808060553436, -26.811869289623893 19.45993515863156 M-25.562499999999996 19.5 C-25.86566011508199 19.490278245174686, -26.168820230163984 19.480556490349375, -26.811869289623893 19.45993515863156 M-26.811869289623893 19.45993515863156 C-27.192638212244336 19.423202838607992, -27.573407134864784 19.386470518584428, -28.05610465284787 19.3399052695533 M-26.811869289623893 19.45993515863156 C-27.06920583632663 19.435110211463623, -27.32654238302937 19.410285264295688, -28.05610465284787 19.3399052695533 M-28.05610465284787 19.3399052695533 C-28.51867389092449 19.265120662419086, -28.981243129001108 19.190336055284877, -29.29009325967676 19.140403561325773 M-28.05610465284787 19.3399052695533 C-28.471781710358023 19.272701826518784, -28.88745876786817 19.20549838348427, -29.29009325967676 19.140403561325773 M-29.29009325967676 19.140403561325773 C-29.72857269040512 19.040323492607715, -30.16705212113348 18.94024342388966, -30.508764386235388 18.862249829261074 M-29.29009325967676 19.140403561325773 C-29.571963152715877 19.076068597612544, -29.853833045754993 19.01173363389932, -30.508764386235388 18.862249829261074 M-30.508764386235388 18.862249829261074 C-30.933885089165425 18.736076236135546, -31.359005792095463 18.609902643010017, -31.70711025146059 18.506587066708043 M-30.508764386235388 18.862249829261074 C-30.918264761580048 18.740712267370114, -31.327765136924704 18.619174705479153, -31.70711025146059 18.506587066708043 M-31.70711025146059 18.506587066708043 C-31.977974118756453 18.406906659705026, -32.248837986052315 18.307226252702005, -32.8802065951478 18.074876768247425 M-31.70711025146059 18.506587066708043 C-32.10325133371214 18.360803486551454, -32.49939241596368 18.21501990639486, -32.8802065951478 18.074876768247425 M-32.8802065951478 18.074876768247425 C-33.234160122872375 17.9181920411821, -33.58811365059695 17.761507314116777, -34.02323291279238 17.568892924097174 M-32.8802065951478 18.074876768247425 C-33.308609028453006 17.885235719129874, -33.737011461758215 17.69559467001232, -34.02323291279238 17.568892924097174 M-34.02323291279238 17.568892924097174 C-34.272045831332946 17.43908738386684, -34.52085874987352 17.30928184363651, -35.13149226407678 16.990714730406097 M-34.02323291279238 17.568892924097174 C-34.30927851633418 17.41966311595037, -34.59532411987598 17.270433307803565, -35.13149226407678 16.990714730406097 M-35.13149226407678 16.990714730406097 C-35.39675586745069 16.829910375178866, -35.6620194708246 16.669106019951638, -36.200430573605686 16.3427180453909 M-35.13149226407678 16.990714730406097 C-35.414726453121474 16.819016500538357, -35.697960642166166 16.647318270670617, -36.200430573605686 16.3427180453909 M-36.200430573605686 16.3427180453909 C-36.566267175970495 16.08752626839248, -36.93210377833531 15.832334491394061, -37.22565534457871 15.627565626425156 M-36.200430573605686 16.3427180453909 C-36.425236961705146 16.18590284076441, -36.65004334980461 16.029087636137916, -37.22565534457871 15.627565626425156 M-37.22565534457871 15.627565626425156 C-37.497496509238545 15.410779531606138, -37.76933767389838 15.19399343678712, -38.202953708501866 14.848196188198125 M-37.22565534457871 15.627565626425156 C-37.52108783628732 15.391966076076317, -37.81652032799593 15.156366525727478, -38.202953708501866 14.848196188198125 M-38.202953708501866 14.848196188198125 C-38.49893305758422 14.579395574545973, -38.79491240666657 14.310594960893823, -39.128309736767974 14.007812326905697 M-38.202953708501866 14.848196188198125 C-38.55962236243496 14.524279153631548, -38.91629101636805 14.20036211906497, -39.128309736767974 14.007812326905697 M-39.128309736767974 14.007812326905697 C-39.35851058575009 13.770111050490474, -39.588711434732204 13.532409774075251, -39.997920942968655 13.109867360095677 M-39.128309736767974 14.007812326905697 C-39.437028551703904 13.689034804198267, -39.74574736663983 13.370257281490838, -39.997920942968655 13.109867360095677 M-39.997920942968655 13.109867360095677 C-40.283504389244 12.774404793942212, -40.56908783551935 12.438942227788747, -40.808213908126575 12.158051136245307 M-39.997920942968655 13.109867360095677 C-40.24622881855418 12.818190800314534, -40.49453669413971 12.526514240533391, -40.808213908126575 12.158051136245307 M-40.808213908126575 12.158051136245307 C-41.018371395620804 11.876459248744018, -41.22852888311503 11.594867361242729, -41.555858964640635 11.156274872382316 M-40.808213908126575 12.158051136245307 C-40.99472847537051 11.908138607965066, -41.18124304261445 11.658226079684823, -41.555858964640635 11.156274872382316 M-41.555858964640635 11.156274872382316 C-41.70315587086718 10.92998726966084, -41.850452777093714 10.703699666939363, -42.23778387860425 10.108655082055249 M-41.555858964640635 11.156274872382316 C-41.79379489330497 10.790741391210943, -42.031730821969305 10.425207910039571, -42.23778387860425 10.108655082055249 M-42.23778387860425 10.108655082055249 C-42.40419710992853 9.813171538672028, -42.57061034125282 9.51768799528881, -42.851186474273504 9.019496659696289 M-42.23778387860425 10.108655082055249 C-42.41291716173239 9.797688203693298, -42.58805044486052 9.486721325331345, -42.851186474273504 9.019496659696289 M-42.851186474273504 9.019496659696289 C-43.02009894439391 8.668746301343386, -43.18901141451431 8.317995942990482, -43.39354614880834 7.893275190886686 M-42.851186474273504 9.019496659696289 C-42.96335586837066 8.786574512812983, -43.07552526246782 8.553652365929675, -43.39354614880834 7.893275190886686 M-43.39354614880834 7.893275190886686 C-43.49376996056014 7.645720438164167, -43.59399377231193 7.398165685441647, -43.862634229970325 6.73461856121551 M-43.39354614880834 7.893275190886686 C-43.57099738786535 7.454967199629563, -43.74844862692236 7.016659208372438, -43.862634229970325 6.73461856121551 M-43.862634229970325 6.73461856121551 C-43.9846229948583 6.367207837643124, -44.106611759746265 5.999797114070739, -44.25652313421488 5.5482879393051325 M-43.862634229970325 6.73461856121551 C-44.002873602822966 6.312239914293026, -44.143112975675606 5.889861267370543, -44.25652313421488 5.5482879393051325 M-44.25652313421488 5.5482879393051325 C-44.378505478345716 5.083116393651903, -44.50048782247654 4.6179448479986736, -44.57359428754556 4.339158212148136 M-44.25652313421488 5.5482879393051325 C-44.33018916192613 5.267367448583779, -44.403855189637376 4.986446957862426, -44.57359428754556 4.339158212148136 M-44.57359428754556 4.339158212148136 C-44.62456328493181 4.077443182871163, -44.67553228231806 3.81572815359419, -44.812544776581774 3.112197953150904 M-44.57359428754556 4.339158212148136 C-44.646685300778536 3.9638513069879098, -44.71977631401151 3.5885444018276837, -44.812544776581774 3.112197953150904 M-44.812544776581774 3.112197953150904 C-44.86783862818639 2.6833497591115427, -44.92313247979101 2.2545015650721814, -44.97239270250937 1.872449005199809 M-44.812544776581774 3.112197953150904 C-44.87372852520381 2.637668880936172, -44.93491227382584 2.16313980872144, -44.97239270250937 1.872449005199809 M-44.97239270250937 1.872449005199809 C-44.99332916380155 1.5463467209666781, -45.014265625093735 1.2202444367335472, -45.05248121591342 0.6250057626472781 M-44.97239270250937 1.872449005199809 C-44.992323393546975 1.5620124045248718, -45.012254084584576 1.2515758038499345, -45.05248121591342 0.6250057626472781 M-45.05248121591342 0.6250057626472781 C-45.05248121591342 0.263345017174626, -45.05248121591342 -0.09831572829802615, -45.05248121591342 -0.6250057626472687 M-45.05248121591342 0.6250057626472781 C-45.05248121591342 0.3177595056085941, -45.05248121591342 0.010513248569910094, -45.05248121591342 -0.6250057626472687 M-45.05248121591342 -0.6250057626472687 C-45.02619005340037 -1.0345118406324263, -44.999898890887316 -1.4440179186175839, -44.97239270250937 -1.8724490051997822 M-45.05248121591342 -0.6250057626472687 C-45.02665343308743 -1.027294327973074, -45.00082565026144 -1.4295828932988794, -44.97239270250937 -1.8724490051997822 M-44.97239270250937 -1.8724490051997822 C-44.915073458262306 -2.3170057446149364, -44.857754214015245 -2.7615624840300907, -44.812544776581774 -3.112197953150895 M-44.97239270250937 -1.8724490051997822 C-44.90845972143814 -2.368300581393077, -44.84452674036692 -2.8641521575863713, -44.812544776581774 -3.112197953150895 M-44.812544776581774 -3.112197953150895 C-44.74427453007487 -3.4627512400421376, -44.67600428356797 -3.8133045269333805, -44.57359428754556 -4.339158212148126 M-44.812544776581774 -3.112197953150895 C-44.75435076069032 -3.41101192544389, -44.69615674479887 -3.709825897736885, -44.57359428754556 -4.339158212148126 M-44.57359428754556 -4.339158212148126 C-44.48145070187906 -4.690541639577138, -44.389307116212564 -5.04192506700615, -44.25652313421489 -5.548287939305123 M-44.57359428754556 -4.339158212148126 C-44.50710772685741 -4.5927002835097115, -44.440621166169265 -4.846242354871298, -44.25652313421489 -5.548287939305123 M-44.25652313421489 -5.548287939305123 C-44.14778215218954 -5.875798451642825, -44.0390411701642 -6.203308963980527, -43.86263422997033 -6.734618561215485 M-44.25652313421489 -5.548287939305123 C-44.16360506890049 -5.828142347548872, -44.07068700358609 -6.107996755792621, -43.86263422997033 -6.734618561215485 M-43.86263422997033 -6.734618561215485 C-43.76014625193346 -6.987765848436814, -43.65765827389659 -7.2409131356581415, -43.39354614880834 -7.893275190886676 M-43.86263422997033 -6.734618561215485 C-43.74673493121707 -7.020892069896541, -43.630835632463814 -7.307165578577596, -43.39354614880834 -7.893275190886676 M-43.39354614880834 -7.893275190886676 C-43.23621579497147 -8.219975036959237, -43.0788854411346 -8.546674883031798, -42.851186474273504 -9.019496659696282 M-43.39354614880834 -7.893275190886676 C-43.18314068020295 -8.330186648401599, -42.972735211597566 -8.767098105916519, -42.851186474273504 -9.019496659696282 M-42.851186474273504 -9.019496659696282 C-42.72130273225709 -9.250118395801477, -42.591418990240676 -9.480740131906673, -42.23778387860425 -10.108655082055243 M-42.851186474273504 -9.019496659696282 C-42.63150381606006 -9.409565464635593, -42.41182115784662 -9.799634269574904, -42.23778387860425 -10.108655082055243 M-42.23778387860425 -10.108655082055243 C-42.066059392647894 -10.372470006965322, -41.89433490669153 -10.636284931875403, -41.55585896464064 -11.156274872382308 M-42.23778387860425 -10.108655082055243 C-42.041789517949695 -10.40975505187563, -41.84579515729514 -10.710855021696014, -41.55585896464064 -11.156274872382308 M-41.55585896464064 -11.156274872382308 C-41.28780507645118 -11.515442662344608, -41.019751188261715 -11.874610452306905, -40.80821390812659 -12.158051136245302 M-41.55585896464064 -11.156274872382308 C-41.37838043313309 -11.394079935975592, -41.200901901625535 -11.631884999568873, -40.80821390812659 -12.158051136245302 M-40.80821390812659 -12.158051136245302 C-40.62901394097401 -12.36854961442971, -40.449813973821435 -12.57904809261412, -39.99792094296866 -13.10986736009567 M-40.80821390812659 -12.158051136245302 C-40.62154211920561 -12.377326441437583, -40.434870330284625 -12.596601746629867, -39.99792094296866 -13.10986736009567 M-39.99792094296866 -13.10986736009567 C-39.79305752063965 -13.321405663250152, -39.58819409831063 -13.532943966404634, -39.128309736767996 -14.007812326905677 M-39.99792094296866 -13.10986736009567 C-39.790187846174376 -13.324368837740199, -39.58245474938009 -13.538870315384726, -39.128309736767996 -14.007812326905677 M-39.128309736767996 -14.007812326905677 C-38.91763509419513 -14.19914146314477, -38.70696045162226 -14.39047059938386, -38.20295370850189 -14.848196188198107 M-39.128309736767996 -14.007812326905677 C-38.89318707614331 -14.221344506280316, -38.65806441551862 -14.434876685654954, -38.20295370850189 -14.848196188198107 M-38.20295370850189 -14.848196188198107 C-37.979399875047854 -15.026474421360348, -37.75584604159382 -15.204752654522588, -37.22565534457872 -15.627565626425149 M-38.20295370850189 -14.848196188198107 C-37.83704026025389 -15.140002425810081, -37.4711268120059 -15.431808663422057, -37.22565534457872 -15.627565626425149 M-37.22565534457872 -15.627565626425149 C-36.99197229245632 -15.790572807609452, -36.758289240333916 -15.953579988793754, -36.200430573605715 -16.342718045390885 M-37.22565534457872 -15.627565626425149 C-36.859314829605715 -15.883108911045019, -36.49297431463271 -16.13865219566489, -36.200430573605715 -16.342718045390885 M-36.200430573605715 -16.342718045390885 C-35.9202089897232 -16.51259001630528, -35.63998740584069 -16.68246198721967, -35.13149226407679 -16.99071473040609 M-36.200430573605715 -16.342718045390885 C-35.8560148813838 -16.55150486202708, -35.51159918916188 -16.760291678663275, -35.13149226407679 -16.99071473040609 M-35.13149226407679 -16.99071473040609 C-34.73550964107743 -17.197298611185882, -34.33952701807807 -17.403882491965675, -34.02323291279239 -17.56889292409717 M-35.13149226407679 -16.99071473040609 C-34.86630677395839 -17.129061830741442, -34.60112128384 -17.267408931076798, -34.02323291279239 -17.56889292409717 M-34.02323291279239 -17.56889292409717 C-33.771883250696334 -17.68015796348428, -33.52053358860028 -17.79142300287139, -32.880206595147804 -18.07487676824742 M-34.02323291279239 -17.56889292409717 C-33.774245810613216 -17.679112128291926, -33.525258708434045 -17.789331332486682, -32.880206595147804 -18.07487676824742 M-32.880206595147804 -18.07487676824742 C-32.422438653142436 -18.243339602465866, -31.964670711137064 -18.41180243668431, -31.70711025146062 -18.506587066708033 M-32.880206595147804 -18.07487676824742 C-32.585164230544535 -18.183455085763143, -32.29012186594127 -18.292033403278865, -31.70711025146062 -18.506587066708033 M-31.70711025146062 -18.506587066708033 C-31.27008380249375 -18.636294222762757, -30.833057353526883 -18.76600137881748, -30.508764386235413 -18.862249829261067 M-31.70711025146062 -18.506587066708033 C-31.287261494596812 -18.631195973914114, -30.86741273773301 -18.755804881120195, -30.508764386235413 -18.862249829261067 M-30.508764386235413 -18.862249829261067 C-30.07800570355307 -18.96056768762021, -29.647247020870726 -19.05888554597935, -29.290093259676766 -19.140403561325773 M-30.508764386235413 -18.862249829261067 C-30.04568218925176 -18.96794531882884, -29.582599992268108 -19.073640808396615, -29.290093259676766 -19.140403561325773 M-29.290093259676766 -19.140403561325773 C-28.86139670702946 -19.20971189536637, -28.43270015438215 -19.27902022940697, -28.056104652847882 -19.3399052695533 M-29.290093259676766 -19.140403561325773 C-28.817907908037007 -19.216742827126797, -28.345722556397252 -19.293082092927822, -28.056104652847882 -19.3399052695533 M-28.056104652847882 -19.3399052695533 C-27.70186975630963 -19.374077883992552, -27.34763485977138 -19.4082504984318, -26.811869289623903 -19.45993515863156 M-28.056104652847882 -19.3399052695533 C-27.644680635599894 -19.37959484968744, -27.233256618351906 -19.419284429821577, -26.811869289623903 -19.45993515863156 M-26.811869289623903 -19.45993515863156 C-26.4600182814934 -19.471218335625863, -26.1081672733629 -19.482501512620168, -25.562500000000007 -19.5 M-26.811869289623903 -19.45993515863156 C-26.45269670247829 -19.47145312441429, -26.093524115332677 -19.48297109019702, -25.562500000000007 -19.5 M-25.562500000000007 -19.5 C-25.562500000000007 -19.5, -25.562500000000004 -19.5, -25.5625 -19.5 M-25.562500000000007 -19.5 C-25.562500000000004 -19.5, -25.562500000000004 -19.5, -25.5625 -19.5" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="label" style="" transform="translate(-32.6875, -12)"><rect></rect><foreignObject width="65.375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Reviewer</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-D-1" data-look="classic" transform="translate(207.36277770996094, 93.59099006652832)"><polygon points="59.2578125,0 118.515625,-59.2578125 59.2578125,-118.515625 0,-59.2578125" class="label-container" transform="translate(-58.7578125, 59.2578125)"></polygon><g class="label" style="" transform="translate(-32.2578125, -12)"><rect></rect><foreignObject width="64.515625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Approve?</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-M-3" data-look="classic" transform="translate(391.77684020996094, 39.39399337768555)"><path d="M0,7.929327415500171 a29.03125,7.929327415500171 0,0,0 58.0625,0 a29.03125,7.929327415500171 0,0,0 -58.0625,0 l0,46.92932741550017 a29.03125,7.929327415500171 0,0,0 58.0625,0 l0,-46.92932741550017" class="basic label-container outer-path" style="" transform="translate(-29.03125, -31.393991123250256)"></path><g class="label" style="" transform="translate(-21.53125, -2)"><rect></rect><foreignObject width="43.0625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Merge</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-flowchart-R-5" data-look="classic" transform="translate(391.77684020996094, 147.7879867553711)"><rect class="basic label-container" style="" x="-52.5" y="-27" width="105" height="54"></rect><g class="label" style="" transform="translate(-22.5, -12)"><rect></rect><foreignObject width="45" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Revise</p></span></div></foreignObject></g></g></g></g></g><defs><filter id="diagram-fixture-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><defs><filter id="diagram-fixture-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><linearGradient id="diagram-fixture-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="hsl(180, 0%, 18.3529411765%)" stop-opacity="1"></stop></linearGradient></svg>
\ No newline at end of file
diff --git a/packages/ui/test-setup/fixtures/diagrams/08-state-diagram.geometry.json b/packages/ui/test-setup/fixtures/diagrams/08-state-diagram.geometry.json
new file mode 100644
index 000000000..d524fed56
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/08-state-diagram.geometry.json
@@ -0,0 +1,464 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "0 0 194.30078125 1098",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 194.296875,
+		"height": 1097.96875
+	},
+	"svgCtm": {
+		"a": 0.9999715391621129,
+		"b": 0,
+		"c": 0,
+		"d": 0.9999715391621129,
+		"e": 0.0008118565182443273,
+		"f": 0
+	},
+	"elements": {
+		"diagram-fixture-edge0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 107.29299926757812,
+				"y": 22,
+				"width": 0,
+				"height": 50
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge1": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 107.29299926757812,
+				"y": 112,
+				"width": 0,
+				"height": 74
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge5": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 60.71900177001953,
+				"y": 822,
+				"width": 0,
+				"height": 74
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge6": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 60.71900177001953,
+				"y": 936,
+				"width": 25.874000549316406,
+				"height": 50
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge10": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 107.29299926757812,
+				"y": 1026,
+				"width": 0,
+				"height": 49.9930419921875
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge2": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 107.29299926757812,
+				"y": 226,
+				"width": 0,
+				"height": 74
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge3": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 127.99299621582031,
+				"y": 708,
+				"width": 25.874008178710938,
+				"height": 278
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge4": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 60.71900177001953,
+				"y": 708,
+				"width": 7.150001525878906,
+				"height": 74
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 0.0008118565182443273,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-state-root_start-0": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -7,
+				"y": -7,
+				"width": 14,
+				"height": 14
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 14.999573087431694
+			},
+			"label": ""
+		},
+		"diagram-fixture-state-Idle-1": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -21.40625,
+				"y": -20,
+				"width": 42.8125,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 91.99738160291439
+			},
+			"label": "Idle"
+		},
+		"diagram-fixture-state-Launching-2": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -44,
+				"y": -20,
+				"width": 88,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 205.99413706739526
+			},
+			"label": "Launching"
+		},
+		"diagram-fixture-state-Running-7": {
+			"tag": "g",
+			"class": "statediagram-state statediagram-cluster",
+			"bbox": {
+				"x": 8,
+				"y": 8,
+				"width": 158.015625,
+				"height": 408
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 20.285390773974697,
+				"f": 291.991689435337
+			},
+			"label": "Running"
+		},
+		"diagram-fixture-edge7": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 87.00800323486328,
+				"y": 59.5,
+				"width": 0,
+				"height": 75
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 20.285390773974697,
+				"f": 291.991689435337
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge8": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 87.00800323486328,
+				"y": 174.5,
+				"width": 0,
+				"height": 75
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 20.285390773974697,
+				"f": 291.991689435337
+			},
+			"label": ""
+		},
+		"diagram-fixture-edge9": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid transition",
+			"bbox": {
+				"x": 87.00800323486328,
+				"y": 289.5,
+				"width": 0,
+				"height": 74.99301147460938
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 20.285390773974697,
+				"f": 291.991689435337
+			},
+			"label": ""
+		},
+		"diagram-fixture-state-Running_start-7": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -7,
+				"y": -7,
+				"width": 14,
+				"height": 14
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 344.4901952413479
+			},
+			"label": ""
+		},
+		"diagram-fixture-state-Streaming-8": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -44.0078125,
+				"y": -20,
+				"width": 88.015625,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 446.4872922358834
+			},
+			"label": "Streaming"
+		},
+		"diagram-fixture-state-Parsing-9": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -33.3046875,
+				"y": -20,
+				"width": 66.609375,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 561.4840192395264
+			},
+			"label": "Parsing"
+		},
+		"diagram-fixture-state-Running_end-9": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -7,
+				"y": -7,
+				"width": 14.013293266296387,
+				"height": 14
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 663.4811162340619
+			},
+			"label": ""
+		},
+		"diagram-fixture-state-Succeeded-10": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -46.1484375,
+				"y": -20,
+				"width": 92.296875,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 1005.9713683970856
+			},
+			"label": "Succeeded"
+		},
+		"diagram-fixture-state-Failed-5": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -29.8671875,
+				"y": -20,
+				"width": 59.734375,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 60.71783375001779,
+				"f": 801.9771744080145
+			},
+			"label": "Failed"
+		},
+		"diagram-fixture-state-Repairing-6": {
+			"tag": "g",
+			"class": "node  statediagram-state",
+			"bbox": {
+				"x": -41.4140625,
+				"y": -20,
+				"width": 82.828125,
+				"height": 40
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 60.71783375001779,
+				"f": 915.9739298724954
+			},
+			"label": "Repairing"
+		},
+		"diagram-fixture-state-root_end-10": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -7,
+				"y": -7,
+				"width": 14.013293266296387,
+				"height": 14
+			},
+			"ctm": {
+				"a": 0.9999715391621129,
+				"b": 0,
+				"c": 0,
+				"d": 0.9999715391621129,
+				"e": 107.29072695872821,
+				"f": 1082.9691769125682
+			},
+			"label": ""
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/08-state-diagram.svg b/packages/ui/test-setup/fixtures/diagrams/08-state-diagram.svg
new file mode 100644
index 000000000..6485fd517
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/08-state-diagram.svg
@@ -0,0 +1 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" class="statediagram" style="max-width: 194.30078125px;" viewBox="0 0 194.30078125 1098" role="graphics-document document" aria-roledescription="stateDiagram"><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture defs [id$="-barbEnd"]{fill:lightgrey;stroke:lightgrey;}#diagram-fixture g.stateGroup text{fill:#475569;stroke:none;font-size:10px;}#diagram-fixture g.stateGroup text{fill:#ccc;stroke:none;font-size:10px;}#diagram-fixture g.stateGroup .state-title{font-weight:bolder;fill:#f8fafc;}#diagram-fixture g.stateGroup rect{fill:#1e293b;stroke:#475569;}#diagram-fixture g.stateGroup line{stroke:#64748b;stroke-width:1;}#diagram-fixture .transition{stroke:lightgrey;stroke-width:1;fill:none;}#diagram-fixture .stateGroup .composit{fill:#1e293b;border-bottom:1px;}#diagram-fixture .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#diagram-fixture .state-note{stroke:hsl(180, 0%, 18.3529411765%);fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);}#diagram-fixture .state-note text{fill:rgb(183.8476190475, 181.5523809523, 181.5523809523);stroke:none;font-size:10px;}#diagram-fixture .stateLabel .box{stroke:none;stroke-width:0;fill:#1e293b;opacity:0.5;}#diagram-fixture .edgeLabel .label rect{fill:#1e293b;opacity:0.5;}#diagram-fixture .edgeLabel{background-color:#1e293b;text-align:center;}#diagram-fixture .edgeLabel p{background-color:#1e293b;}#diagram-fixture .edgeLabel rect{opacity:0.5;background-color:#1e293b;fill:#1e293b;}#diagram-fixture .edgeLabel .label text{fill:#ccc;}#diagram-fixture .label div .edgeLabel{color:#ccc;}#diagram-fixture .stateLabel text{fill:#f8fafc;font-size:10px;font-weight:bold;}#diagram-fixture .node circle.state-start{fill:#f4f4f4;stroke:#f4f4f4;}#diagram-fixture .node .fork-join{fill:#f4f4f4;stroke:#f4f4f4;}#diagram-fixture .node circle.state-end{fill:#475569;stroke:#1e293b;stroke-width:1.5;}#diagram-fixture .end-state-inner{fill:#1e293b;stroke-width:1.5;}#diagram-fixture .node rect{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .node polygon{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture [id$="-barbEnd"]{fill:#64748b;}#diagram-fixture .statediagram-cluster rect{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .cluster-label,#diagram-fixture .nodeLabel{color:#f8fafc;}#diagram-fixture .statediagram-cluster rect.outer{rx:5px;ry:5px;}#diagram-fixture .statediagram-state .divider{stroke:#475569;}#diagram-fixture .statediagram-state .title-state{rx:5px;ry:5px;}#diagram-fixture .statediagram-cluster.statediagram-cluster .inner{fill:#1e293b;}#diagram-fixture .statediagram-cluster.statediagram-cluster-alt .inner{fill:#555;}#diagram-fixture .statediagram-cluster .inner{rx:0;ry:0;}#diagram-fixture .statediagram-state rect.basic{rx:5px;ry:5px;}#diagram-fixture .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#555;}#diagram-fixture .note-edge{stroke-dasharray:5;}#diagram-fixture .statediagram-note rect{fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);stroke:hsl(180, 0%, 18.3529411765%);stroke-width:1px;rx:0;ry:0;}#diagram-fixture .statediagram-note rect{fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);stroke:hsl(180, 0%, 18.3529411765%);stroke-width:1px;rx:0;ry:0;}#diagram-fixture .statediagram-note text{fill:rgb(183.8476190475, 181.5523809523, 181.5523809523);}#diagram-fixture .statediagram-note .nodeLabel{color:rgb(183.8476190475, 181.5523809523, 181.5523809523);}#diagram-fixture .statediagram .edgeLabel{color:red;}#diagram-fixture [id$="-dependencyStart"],#diagram-fixture [id$="-dependencyEnd"]{fill:#64748b;stroke:#64748b;stroke-width:1;}#diagram-fixture .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#diagram-fixture [data-look="neo"].statediagram-cluster rect{fill:#1e293b;stroke:url(#diagram-fixture-gradient);stroke-width:1;}#diagram-fixture [data-look="neo"].statediagram-cluster rect.outer{rx:5px;ry:5px;filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker id="diagram-fixture_stateDiagram-barbEnd" refX="19" refY="7" markerWidth="20" markerHeight="14" markerUnits="userSpaceOnUse" orient="auto"><path d="M 19,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M107.293,22L107.293,26.167C107.293,30.333,107.293,38.667,107.293,47C107.293,55.333,107.293,63.667,107.293,67.833L107.293,72" id="diagram-fixture-edge0" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge0" data-points="W3sieCI6MTA3LjI5Mjk2ODc1LCJ5IjoyMn0seyJ4IjoxMDcuMjkyOTY4NzUsInkiOjQ3fSx7IngiOjEwNy4yOTI5Njg3NSwieSI6NzJ9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M107.293,112L107.293,118.167C107.293,124.333,107.293,136.667,107.293,149C107.293,161.333,107.293,173.667,107.293,179.833L107.293,186" id="diagram-fixture-edge1" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge1" data-points="W3sieCI6MTA3LjI5Mjk2ODc1LCJ5IjoxMTJ9LHsieCI6MTA3LjI5Mjk2ODc1LCJ5IjoxNDl9LHsieCI6MTA3LjI5Mjk2ODc1LCJ5IjoxODZ9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M60.719,822L60.719,828.167C60.719,834.333,60.719,846.667,60.719,859C60.719,871.333,60.719,883.667,60.719,889.833L60.719,896" id="diagram-fixture-edge5" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge5" data-points="W3sieCI6NjAuNzE4NzUsInkiOjgyMn0seyJ4Ijo2MC43MTg3NSwieSI6ODU5fSx7IngiOjYwLjcxODc1LCJ5Ijo4OTZ9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M60.719,936L60.719,940.167C60.719,944.333,60.719,952.667,65.031,961C69.344,969.333,77.968,977.667,82.281,981.833L86.593,986" id="diagram-fixture-edge6" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge6" data-points="W3sieCI6NjAuNzE4NzUsInkiOjkzNn0seyJ4Ijo2MC43MTg3NSwieSI6OTYxfSx7IngiOjg2LjU5MzMxNTk3MjIyMjIzLCJ5Ijo5ODZ9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M107.293,1026L107.293,1030.167C107.293,1034.333,107.293,1042.667,107.293,1050.999C107.293,1059.331,107.293,1067.662,107.293,1071.828L107.293,1075.993" id="diagram-fixture-edge10" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge10" data-points="W3sieCI6MTA3LjI5Mjk2ODc1LCJ5IjoxMDI2fSx7IngiOjEwNy4yOTI5Njg3NSwieSI6MTA1MX0seyJ4IjoxMDcuMjkyOTY4NzUsInkiOjEwNzUuOTkzMzUzMzY2ODUxOH1d" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M107.293,226L107.293,232.167C107.293,238.333,107.293,250.667,107.293,263C107.293,275.333,107.293,287.667,107.293,293.833L107.293,300" id="diagram-fixture-edge2" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge2" data-points="W3sieCI6MTA3LjI5Mjk2ODc1LCJ5IjoyMjZ9LHsieCI6MTA3LjI5Mjk2ODc1LCJ5IjoyNjN9LHsieCI6MTA3LjI5Mjk2ODc1LCJ5IjozMDB9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M146.717,708L147.909,714.167C149.1,720.333,151.484,732.667,152.675,748.333C153.867,764,153.867,783,153.867,802C153.867,821,153.867,840,153.867,859C153.867,878,153.867,897,153.867,914C153.867,931,153.867,946,149.555,957.667C145.242,969.333,136.617,977.667,132.305,981.833L127.993,986" id="diagram-fixture-edge3" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge3" data-points="W3sieCI6MTQ2LjcxNjc4ODc3MDc0NjksInkiOjcwOH0seyJ4IjoxNTMuODY3MTg3NSwieSI6NzQ1fSx7IngiOjE1My44NjcxODc1LCJ5Ijo4MDJ9LHsieCI6MTUzLjg2NzE4NzUsInkiOjg1OX0seyJ4IjoxNTMuODY3MTg3NSwieSI6OTE2fSx7IngiOjE1My44NjcxODc1LCJ5Ijo5NjF9LHsieCI6MTI3Ljk5MjYyMTUyNzc3Nzc3LCJ5Ijo5ODZ9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M67.869,708L66.677,714.167C65.486,720.333,63.102,732.667,61.91,745C60.719,757.333,60.719,769.667,60.719,775.833L60.719,782" id="diagram-fixture-edge4" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge4" data-points="W3sieCI6NjcuODY5MTQ4NzI5MjUzMTEsInkiOjcwOH0seyJ4Ijo2MC43MTg3NSwieSI6NzQ1fSx7IngiOjYwLjcxODc1LCJ5Ijo3ODJ9XQ==" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="edge0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(107.29296875, 149)"><g class="label" data-id="edge1" transform="translate(-37.734375, -12)"><foreignObject width="75.46875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>launch job</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(60.71875, 859)"><g class="label" data-id="edge5" transform="translate(-52.71875, -12)"><foreignObject width="105.4375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>manual submit</p></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="edge6" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="edge10" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(107.29296875, 263)"><g class="label" data-id="edge2" transform="translate(-60.1171875, -12)"><foreignObject width="120.234375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>process spawned</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(153.8671875, 859)"><g class="label" data-id="edge3" transform="translate(-20.4296875, -12)"><foreignObject width="40.859375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>exit 0</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(60.71875, 745)"><g class="label" data-id="edge4" transform="translate(-47.7734375, -12)"><foreignObject width="95.546875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>non-zero exit</p></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="diagram-fixture-state-root_start-0" data-look="classic" transform="translate(107.29296875, 15)"><circle class="state-start" r="7" width="14" height="14"></circle></g><g class="node  statediagram-state" id="diagram-fixture-state-Idle-1" data-look="classic" transform="translate(107.29296875, 92)"><rect class="basic label-container" style="" rx="5" ry="5" x="-21.40625" y="-20" width="42.8125" height="40"></rect><g class="label" style="" transform="translate(-13.40625, -12)"><rect></rect><foreignObject width="26.8125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Idle</p></span></div></foreignObject></g></g><g class="node  statediagram-state" id="diagram-fixture-state-Launching-2" data-look="classic" transform="translate(107.29296875, 206)"><rect class="basic label-container" style="" rx="5" ry="5" x="-44" y="-20" width="88" height="40"></rect><g class="label" style="" transform="translate(-36, -12)"><rect></rect><foreignObject width="72" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Launching</p></span></div></foreignObject></g></g><g class="root" transform="translate(20.28515625, 292)"><g class="clusters"><g class="statediagram-state statediagram-cluster" id="diagram-fixture-state-Running-7" data-id="Running" data-look="classic"><g><rect class="outer" x="8" y="8" width="158.015625" height="408" data-look="classic"></rect></g><g class="cluster-label" transform="translate(58.796875, 9)"><foreignObject width="56.421875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="nodeLabel"><p>Running</p></span></div></foreignObject></g><rect class="inner" x="8" y="34" width="158.015625" height="378"></rect></g></g><g class="edgePaths"><path d="M87.008,59.5L87.008,65.75C87.008,72,87.008,84.5,87.008,97C87.008,109.5,87.008,122,87.008,128.25L87.008,134.5" id="diagram-fixture-edge7" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge7" data-points="W3sieCI6ODcuMDA3ODEyNSwieSI6NTkuNX0seyJ4Ijo4Ny4wMDc4MTI1LCJ5Ijo5N30seyJ4Ijo4Ny4wMDc4MTI1LCJ5IjoxMzQuNX1d" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M87.008,174.5L87.008,180.75C87.008,187,87.008,199.5,87.008,212C87.008,224.5,87.008,237,87.008,243.25L87.008,249.5" id="diagram-fixture-edge8" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge8" data-points="W3sieCI6ODcuMDA3ODEyNSwieSI6MTc0LjV9LHsieCI6ODcuMDA3ODEyNSwieSI6MjEyfSx7IngiOjg3LjAwNzgxMjUsInkiOjI0OS41fV0=" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path><path d="M87.008,289.5L87.008,295.75C87.008,302,87.008,314.5,87.008,326.999C87.008,339.498,87.008,351.996,87.008,358.244L87.008,364.493" id="diagram-fixture-edge9" class="edge-thickness-normal edge-pattern-solid transition" style="fill:none;;;fill:none" data-edge="true" data-et="edge" data-id="edge9" data-points="W3sieCI6ODcuMDA3ODEyNSwieSI6Mjg5LjV9LHsieCI6ODcuMDA3ODEyNSwieSI6MzI3fSx7IngiOjg3LjAwNzgxMjUsInkiOjM2NC40OTMzNTMzNjY4NTE4fV0=" data-look="classic" marker-end="url(#diagram-fixture_stateDiagram-barbEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="edge7" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="edge8" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="edge9" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="diagram-fixture-state-Running_start-7" data-look="classic" transform="translate(87.0078125, 52.5)"><circle class="state-start" r="7" width="14" height="14"></circle></g><g class="node  statediagram-state" id="diagram-fixture-state-Streaming-8" data-look="classic" transform="translate(87.0078125, 154.5)"><rect class="basic label-container" style="" rx="5" ry="5" x="-44.0078125" y="-20" width="88.015625" height="40"></rect><g class="label" style="" transform="translate(-36.0078125, -12)"><rect></rect><foreignObject width="72.015625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Streaming</p></span></div></foreignObject></g></g><g class="node  statediagram-state" id="diagram-fixture-state-Parsing-9" data-look="classic" transform="translate(87.0078125, 269.5)"><rect class="basic label-container" style="" rx="5" ry="5" x="-33.3046875" y="-20" width="66.609375" height="40"></rect><g class="label" style="" transform="translate(-25.3046875, -12)"><rect></rect><foreignObject width="50.609375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Parsing</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-state-Running_end-9" data-look="classic" transform="translate(87.0078125, 371.5)"><g class="outer-path"><path d="M7 0 C7 0.40517908122283747, 6.964012880168563 0.816513743121899, 6.893654271085456 1.2155372436685123 C6.823295662002349 1.6145607442151257, 6.716427752933756 2.013397210557766, 6.5778483455013586 2.394141003279681 C6.439268938068961 2.7748847960015954, 6.26476736710249 3.149104622578984, 6.062177826491071 3.4999999999999996 C5.859588285879653 3.8508953774210153, 5.622755194947063 4.189128084166967, 5.362311101832846 4.499513267805774 C5.10186700871863 4.809898451444582, 4.809898451444583 5.10186700871863, 4.499513267805775 5.362311101832846 C4.189128084166968 5.622755194947063, 3.8508953774210166 5.859588285879652, 3.500000000000001 6.06217782649107 C3.149104622578985 6.264767367102489, 2.7748847960015963 6.439268938068961, 2.3941410032796817 6.5778483455013586 C2.013397210557767 6.716427752933756, 1.6145607442151264 6.823295662002349, 1.2155372436685128 6.893654271085456 C0.8165137431218992 6.964012880168563, 0.4051790812228379 7, 4.286263797015736e-16 7 C-0.405179081222837 7, -0.8165137431218985 6.964012880168563, -1.2155372436685121 6.893654271085456 C-1.6145607442151257 6.823295662002349, -2.0133972105577667 6.716427752933756, -2.394141003279681 6.5778483455013586 C-2.774884796001595 6.439268938068961, -3.149104622578983 6.26476736710249, -3.4999999999999982 6.062177826491071 C-3.8508953774210135 5.859588285879653, -4.189128084166966 5.6227551949470636, -4.499513267805773 5.362311101832848 C-4.809898451444581 5.101867008718632, -5.101867008718628 4.809898451444586, -5.3623111018328435 4.499513267805779 C-5.622755194947059 4.189128084166971, -5.859588285879649 3.8508953774210206, -6.062177826491068 3.5000000000000053 C-6.264767367102486 3.14910462257899, -6.439268938068958 2.774884796001602, -6.577848345501356 2.394141003279688 C-6.716427752933754 2.0133972105577738, -6.823295662002347 1.614560744215134, -6.893654271085454 1.215537243668521 C-6.9640128801685615 0.816513743121908, -6.999999999999999 0.4051790812228472, -7 1.0183126166254463e-14 C-7.000000000000001 -0.40517908122282686, -6.964012880168565 -0.8165137431218878, -6.893654271085459 -1.215537243668501 C-6.823295662002352 -1.6145607442151142, -6.716427752933759 -2.0133972105577542, -6.577848345501363 -2.394141003279669 C-6.439268938068967 -2.7748847960015834, -6.264767367102496 -3.149104622578972, -6.062177826491078 -3.4999999999999876 C-5.859588285879661 -3.8508953774210033, -5.6227551949470715 -4.1891280841669545, -5.362311101832856 -4.499513267805763 C-5.10186700871864 -4.809898451444571, -4.809898451444594 -5.10186700871862, -4.499513267805787 -5.362311101832836 C-4.189128084166979 -5.622755194947053, -3.850895377421028 -5.859588285879643, -3.5000000000000133 -6.062177826491062 C-3.1491046225789985 -6.264767367102482, -2.774884796001611 -6.439268938068954, -2.3941410032796973 -6.577848345501353 C-2.0133972105577835 -6.716427752933752, -1.6145607442151435 -6.823295662002345, -1.2155372436685306 -6.893654271085453 C-0.8165137431219176 -6.9640128801685615, -0.40517908122285695 -6.999999999999999, -1.9937625952807352e-14 -7 C0.4051790812228171 -7.000000000000001, 0.8165137431218781 -6.964012880168565, 1.2155372436684913 -6.89365427108546 C1.6145607442151044 -6.823295662002354, 2.013397210557745 -6.716427752933763, 2.3941410032796595 -6.5778483455013665 C2.774884796001574 -6.43926893806897, 3.149104622578963 -6.2647673671025, 3.499999999999979 -6.062177826491083 C3.8508953774209953 -5.859588285879665, 4.189128084166947 -5.622755194947077, 4.499513267805756 -5.362311101832862 C4.809898451444564 -5.1018670087186475, 5.101867008718613 -4.809898451444602, 5.362311101832829 -4.499513267805796 C5.622755194947046 -4.189128084166989, 5.859588285879637 -3.8508953774210393, 6.062177826491056 -3.500000000000025 C6.2647673671024755 -3.1491046225790105, 6.439268938068949 -2.774884796001623, 6.577848345501348 -2.3941410032797092 C6.716427752933747 -2.0133972105577955, 6.823295662002342 -1.6145607442151562, 6.893654271085451 -1.2155372436685434 C6.96401288016856 -0.8165137431219307, 6.982275711847575 -0.2025895406114567, 7 -3.2800750208310675e-14 C7.017724288152425 0.2025895406113911, 7.017724288152424 -0.2025895406114242, 7 0" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M7 0 C7 0.40517908122283747, 6.964012880168563 0.816513743121899, 6.893654271085456 1.2155372436685123 C6.823295662002349 1.6145607442151257, 6.716427752933756 2.013397210557766, 6.5778483455013586 2.394141003279681 C6.439268938068961 2.7748847960015954, 6.26476736710249 3.149104622578984, 6.062177826491071 3.4999999999999996 C5.859588285879653 3.8508953774210153, 5.622755194947063 4.189128084166967, 5.362311101832846 4.499513267805774 C5.10186700871863 4.809898451444582, 4.809898451444583 5.10186700871863, 4.499513267805775 5.362311101832846 C4.189128084166968 5.622755194947063, 3.8508953774210166 5.859588285879652, 3.500000000000001 6.06217782649107 C3.149104622578985 6.264767367102489, 2.7748847960015963 6.439268938068961, 2.3941410032796817 6.5778483455013586 C2.013397210557767 6.716427752933756, 1.6145607442151264 6.823295662002349, 1.2155372436685128 6.893654271085456 C0.8165137431218992 6.964012880168563, 0.4051790812228379 7, 4.286263797015736e-16 7 C-0.405179081222837 7, -0.8165137431218985 6.964012880168563, -1.2155372436685121 6.893654271085456 C-1.6145607442151257 6.823295662002349, -2.0133972105577667 6.716427752933756, -2.394141003279681 6.5778483455013586 C-2.774884796001595 6.439268938068961, -3.149104622578983 6.26476736710249, -3.4999999999999982 6.062177826491071 C-3.8508953774210135 5.859588285879653, -4.189128084166966 5.6227551949470636, -4.499513267805773 5.362311101832848 C-4.809898451444581 5.101867008718632, -5.101867008718628 4.809898451444586, -5.3623111018328435 4.499513267805779 C-5.622755194947059 4.189128084166971, -5.859588285879649 3.8508953774210206, -6.062177826491068 3.5000000000000053 C-6.264767367102486 3.14910462257899, -6.439268938068958 2.774884796001602, -6.577848345501356 2.394141003279688 C-6.716427752933754 2.0133972105577738, -6.823295662002347 1.614560744215134, -6.893654271085454 1.215537243668521 C-6.9640128801685615 0.816513743121908, -6.999999999999999 0.4051790812228472, -7 1.0183126166254463e-14 C-7.000000000000001 -0.40517908122282686, -6.964012880168565 -0.8165137431218878, -6.893654271085459 -1.215537243668501 C-6.823295662002352 -1.6145607442151142, -6.716427752933759 -2.0133972105577542, -6.577848345501363 -2.394141003279669 C-6.439268938068967 -2.7748847960015834, -6.264767367102496 -3.149104622578972, -6.062177826491078 -3.4999999999999876 C-5.859588285879661 -3.8508953774210033, -5.6227551949470715 -4.1891280841669545, -5.362311101832856 -4.499513267805763 C-5.10186700871864 -4.809898451444571, -4.809898451444594 -5.10186700871862, -4.499513267805787 -5.362311101832836 C-4.189128084166979 -5.622755194947053, -3.850895377421028 -5.859588285879643, -3.5000000000000133 -6.062177826491062 C-3.1491046225789985 -6.264767367102482, -2.774884796001611 -6.439268938068954, -2.3941410032796973 -6.577848345501353 C-2.0133972105577835 -6.716427752933752, -1.6145607442151435 -6.823295662002345, -1.2155372436685306 -6.893654271085453 C-0.8165137431219176 -6.9640128801685615, -0.40517908122285695 -6.999999999999999, -1.9937625952807352e-14 -7 C0.4051790812228171 -7.000000000000001, 0.8165137431218781 -6.964012880168565, 1.2155372436684913 -6.89365427108546 C1.6145607442151044 -6.823295662002354, 2.013397210557745 -6.716427752933763, 2.3941410032796595 -6.5778483455013665 C2.774884796001574 -6.43926893806897, 3.149104622578963 -6.2647673671025, 3.499999999999979 -6.062177826491083 C3.8508953774209953 -5.859588285879665, 4.189128084166947 -5.622755194947077, 4.499513267805756 -5.362311101832862 C4.809898451444564 -5.1018670087186475, 5.101867008718613 -4.809898451444602, 5.362311101832829 -4.499513267805796 C5.622755194947046 -4.189128084166989, 5.859588285879637 -3.8508953774210393, 6.062177826491056 -3.500000000000025 C6.2647673671024755 -3.1491046225790105, 6.439268938068949 -2.774884796001623, 6.577848345501348 -2.3941410032797092 C6.716427752933747 -2.0133972105577955, 6.823295662002342 -1.6145607442151562, 6.893654271085451 -1.2155372436685434 C6.96401288016856 -0.8165137431219307, 6.982275711847575 -0.2025895406114567, 7 -3.2800750208310675e-14 C7.017724288152425 0.2025895406113911, 7.017724288152424 -0.2025895406114242, 7 0" stroke="#64748b" stroke-width="2" fill="none" stroke-dasharray="0 0" style=""></path><g><path d="M2.5 0 C2.5 0.14470681472244193, 2.487147457203058 0.29161205111496386, 2.46201938253052 0.4341204441673258 C2.436891307857982 0.5766288372196877, 2.3987241974763416 0.7190704323420595, 2.3492315519647713 0.8550503583141718 C2.299738906453201 0.991030284286284, 2.2374169168223177 1.124680222349637, 2.165063509461097 1.2499999999999998 C2.092710102099876 1.3753197776503625, 2.0081268553382365 1.496117172916774, 1.915111107797445 1.6069690242163481 C1.8220953602566536 1.7178208755159223, 1.7178208755159226 1.8220953602566536, 1.6069690242163484 1.915111107797445 C1.4961171729167742 2.0081268553382365, 1.375319777650363 2.0927101020998755, 1.2500000000000002 2.1650635094610964 C1.1246802223496375 2.2374169168223172, 0.9910302842862845 2.2997389064532, 0.8550503583141721 2.349231551964771 C0.7190704323420597 2.3987241974763416, 0.576628837219688 2.436891307857982, 0.43412044416732604 2.46201938253052 C0.291612051114964 2.487147457203058, 0.14470681472244212 2.5, 1.5308084989341916e-16 2.5 C-0.1447068147224418 2.5, -0.2916120511149638 2.487147457203058, -0.43412044416732576 2.46201938253052 C-0.5766288372196877 2.436891307857982, -0.7190704323420595 2.3987241974763416, -0.8550503583141718 2.3492315519647713 C-0.991030284286284 2.299738906453201, -1.124680222349637 2.2374169168223177, -1.2499999999999996 2.165063509461097 C-1.375319777650362 2.092710102099876, -1.4961171729167733 2.008126855338237, -1.6069690242163475 1.9151111077974459 C-1.7178208755159217 1.8220953602566548, -1.822095360256653 1.7178208755159234, -1.9151111077974443 1.6069690242163495 C-2.0081268553382357 1.4961171729167755, -2.0927101020998746 1.3753197776503645, -2.1650635094610955 1.250000000000002 C-2.2374169168223164 1.1246802223496395, -2.2997389064531992 0.9910302842862865, -2.34923155196477 0.8550503583141743 C-2.3987241974763407 0.7190704323420621, -2.436891307857981 0.5766288372196907, -2.4620193825305194 0.434120444167329 C-2.487147457203058 0.29161205111496724, -2.5 0.14470681472244545, -2.5 3.636830773662308e-15 C-2.5 -0.14470681472243818, -2.4871474572030587 -0.2916120511149599, -2.4620193825305208 -0.4341204441673218 C-2.436891307857983 -0.5766288372196837, -2.398724197476343 -0.7190704323420553, -2.3492315519647726 -0.8550503583141675 C-2.2997389064532023 -0.9910302842862798, -2.23741691682232 -1.1246802223496328, -2.165063509461099 -1.2499999999999956 C-2.092710102099878 -1.3753197776503583, -2.00812685533824 -1.4961171729167695, -1.9151111077974488 -1.606969024216344 C-1.8220953602566576 -1.7178208755159183, -1.7178208755159263 -1.82209536025665, -1.6069690242163523 -1.9151111077974416 C-1.4961171729167784 -2.0081268553382334, -1.3753197776503672 -2.0927101020998724, -1.2500000000000047 -2.1650635094610937 C-1.1246802223496422 -2.237416916822315, -0.9910302842862897 -2.299738906453198, -0.8550503583141776 -2.3492315519647686 C-0.7190704323420656 -2.3987241974763394, -0.5766288372196942 -2.4368913078579806, -0.43412044416733236 -2.462019382530519 C-0.29161205111497057 -2.4871474572030574, -0.1447068147224489 -2.4999999999999996, -7.120580697431198e-15 -2.5 C0.14470681472243463 -2.5000000000000004, 0.29161205111495647 -2.487147457203059, 0.4341204441673183 -2.4620193825305217 C0.5766288372196802 -2.436891307857984, 0.7190704323420518 -2.3987241974763442, 0.8550503583141642 -2.349231551964774 C0.9910302842862766 -2.2997389064532037, 1.1246802223496295 -2.2374169168223212, 1.2499999999999925 -2.165063509461101 C1.3753197776503554 -2.0927101020998804, 1.4961171729167668 -2.008126855338242, 1.6069690242163412 -1.915111107797451 C1.7178208755159157 -1.82209536025666, 1.8220953602566472 -1.7178208755159294, 1.915111107797439 -1.6069690242163557 C2.0081268553382308 -1.496117172916782, 2.09271010209987 -1.3753197776503712, 2.1650635094610915 -1.2500000000000089 C2.237416916822313 -1.1246802223496466, 2.299738906453196 -0.9910302842862939, 2.3492315519647673 -0.855050358314182 C2.3987241974763385 -0.71907043234207, 2.4368913078579792 -0.5766288372196986, 2.462019382530518 -0.4341204441673369 C2.487147457203057 -0.29161205111497523, 2.4936698970884197 -0.07235340736123454, 2.5 -1.1714553645825241e-14 C2.5063301029115803 0.07235340736121111, 2.50633010291158 -0.07235340736122292, 2.5 0" stroke="none" stroke-width="0" fill="#475569" style=""></path><path d="M2.5 0 C2.5 0.14470681472244193, 2.487147457203058 0.29161205111496386, 2.46201938253052 0.4341204441673258 C2.436891307857982 0.5766288372196877, 2.3987241974763416 0.7190704323420595, 2.3492315519647713 0.8550503583141718 C2.299738906453201 0.991030284286284, 2.2374169168223177 1.124680222349637, 2.165063509461097 1.2499999999999998 C2.092710102099876 1.3753197776503625, 2.0081268553382365 1.496117172916774, 1.915111107797445 1.6069690242163481 C1.8220953602566536 1.7178208755159223, 1.7178208755159226 1.8220953602566536, 1.6069690242163484 1.915111107797445 C1.4961171729167742 2.0081268553382365, 1.375319777650363 2.0927101020998755, 1.2500000000000002 2.1650635094610964 C1.1246802223496375 2.2374169168223172, 0.9910302842862845 2.2997389064532, 0.8550503583141721 2.349231551964771 C0.7190704323420597 2.3987241974763416, 0.576628837219688 2.436891307857982, 0.43412044416732604 2.46201938253052 C0.291612051114964 2.487147457203058, 0.14470681472244212 2.5, 1.5308084989341916e-16 2.5 C-0.1447068147224418 2.5, -0.2916120511149638 2.487147457203058, -0.43412044416732576 2.46201938253052 C-0.5766288372196877 2.436891307857982, -0.7190704323420595 2.3987241974763416, -0.8550503583141718 2.3492315519647713 C-0.991030284286284 2.299738906453201, -1.124680222349637 2.2374169168223177, -1.2499999999999996 2.165063509461097 C-1.375319777650362 2.092710102099876, -1.4961171729167733 2.008126855338237, -1.6069690242163475 1.9151111077974459 C-1.7178208755159217 1.8220953602566548, -1.822095360256653 1.7178208755159234, -1.9151111077974443 1.6069690242163495 C-2.0081268553382357 1.4961171729167755, -2.0927101020998746 1.3753197776503645, -2.1650635094610955 1.250000000000002 C-2.2374169168223164 1.1246802223496395, -2.2997389064531992 0.9910302842862865, -2.34923155196477 0.8550503583141743 C-2.3987241974763407 0.7190704323420621, -2.436891307857981 0.5766288372196907, -2.4620193825305194 0.434120444167329 C-2.487147457203058 0.29161205111496724, -2.5 0.14470681472244545, -2.5 3.636830773662308e-15 C-2.5 -0.14470681472243818, -2.4871474572030587 -0.2916120511149599, -2.4620193825305208 -0.4341204441673218 C-2.436891307857983 -0.5766288372196837, -2.398724197476343 -0.7190704323420553, -2.3492315519647726 -0.8550503583141675 C-2.2997389064532023 -0.9910302842862798, -2.23741691682232 -1.1246802223496328, -2.165063509461099 -1.2499999999999956 C-2.092710102099878 -1.3753197776503583, -2.00812685533824 -1.4961171729167695, -1.9151111077974488 -1.606969024216344 C-1.8220953602566576 -1.7178208755159183, -1.7178208755159263 -1.82209536025665, -1.6069690242163523 -1.9151111077974416 C-1.4961171729167784 -2.0081268553382334, -1.3753197776503672 -2.0927101020998724, -1.2500000000000047 -2.1650635094610937 C-1.1246802223496422 -2.237416916822315, -0.9910302842862897 -2.299738906453198, -0.8550503583141776 -2.3492315519647686 C-0.7190704323420656 -2.3987241974763394, -0.5766288372196942 -2.4368913078579806, -0.43412044416733236 -2.462019382530519 C-0.29161205111497057 -2.4871474572030574, -0.1447068147224489 -2.4999999999999996, -7.120580697431198e-15 -2.5 C0.14470681472243463 -2.5000000000000004, 0.29161205111495647 -2.487147457203059, 0.4341204441673183 -2.4620193825305217 C0.5766288372196802 -2.436891307857984, 0.7190704323420518 -2.3987241974763442, 0.8550503583141642 -2.349231551964774 C0.9910302842862766 -2.2997389064532037, 1.1246802223496295 -2.2374169168223212, 1.2499999999999925 -2.165063509461101 C1.3753197776503554 -2.0927101020998804, 1.4961171729167668 -2.008126855338242, 1.6069690242163412 -1.915111107797451 C1.7178208755159157 -1.82209536025666, 1.8220953602566472 -1.7178208755159294, 1.915111107797439 -1.6069690242163557 C2.0081268553382308 -1.496117172916782, 2.09271010209987 -1.3753197776503712, 2.1650635094610915 -1.2500000000000089 C2.237416916822313 -1.1246802223496466, 2.299738906453196 -0.9910302842862939, 2.3492315519647673 -0.855050358314182 C2.3987241974763385 -0.71907043234207, 2.4368913078579792 -0.5766288372196986, 2.462019382530518 -0.4341204441673369 C2.487147457203057 -0.29161205111497523, 2.4936698970884197 -0.07235340736123454, 2.5 -1.1714553645825241e-14 C2.5063301029115803 0.07235340736121111, 2.50633010291158 -0.07235340736122292, 2.5 0" stroke="#475569" stroke-width="2" fill="none" stroke-dasharray="0 0" style=""></path></g></g></g></g></g><g class="node  statediagram-state" id="diagram-fixture-state-Succeeded-10" data-look="classic" transform="translate(107.29296875, 1006)"><rect class="basic label-container" style="" rx="5" ry="5" x="-46.1484375" y="-20" width="92.296875" height="40"></rect><g class="label" style="" transform="translate(-38.1484375, -12)"><rect></rect><foreignObject width="76.296875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Succeeded</p></span></div></foreignObject></g></g><g class="node  statediagram-state" id="diagram-fixture-state-Failed-5" data-look="classic" transform="translate(60.71875, 802)"><rect class="basic label-container" style="" rx="5" ry="5" x="-29.8671875" y="-20" width="59.734375" height="40"></rect><g class="label" style="" transform="translate(-21.8671875, -12)"><rect></rect><foreignObject width="43.734375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Failed</p></span></div></foreignObject></g></g><g class="node  statediagram-state" id="diagram-fixture-state-Repairing-6" data-look="classic" transform="translate(60.71875, 916)"><rect class="basic label-container" style="" rx="5" ry="5" x="-41.4140625" y="-20" width="82.828125" height="40"></rect><g class="label" style="" transform="translate(-33.4140625, -12)"><rect></rect><foreignObject width="66.828125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Repairing</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-state-root_end-10" data-look="classic" transform="translate(107.29296875, 1083)"><g class="outer-path"><path d="M7 0 C7 0.40517908122283747, 6.964012880168563 0.816513743121899, 6.893654271085456 1.2155372436685123 C6.823295662002349 1.6145607442151257, 6.716427752933756 2.013397210557766, 6.5778483455013586 2.394141003279681 C6.439268938068961 2.7748847960015954, 6.26476736710249 3.149104622578984, 6.062177826491071 3.4999999999999996 C5.859588285879653 3.8508953774210153, 5.622755194947063 4.189128084166967, 5.362311101832846 4.499513267805774 C5.10186700871863 4.809898451444582, 4.809898451444583 5.10186700871863, 4.499513267805775 5.362311101832846 C4.189128084166968 5.622755194947063, 3.8508953774210166 5.859588285879652, 3.500000000000001 6.06217782649107 C3.149104622578985 6.264767367102489, 2.7748847960015963 6.439268938068961, 2.3941410032796817 6.5778483455013586 C2.013397210557767 6.716427752933756, 1.6145607442151264 6.823295662002349, 1.2155372436685128 6.893654271085456 C0.8165137431218992 6.964012880168563, 0.4051790812228379 7, 4.286263797015736e-16 7 C-0.405179081222837 7, -0.8165137431218985 6.964012880168563, -1.2155372436685121 6.893654271085456 C-1.6145607442151257 6.823295662002349, -2.0133972105577667 6.716427752933756, -2.394141003279681 6.5778483455013586 C-2.774884796001595 6.439268938068961, -3.149104622578983 6.26476736710249, -3.4999999999999982 6.062177826491071 C-3.8508953774210135 5.859588285879653, -4.189128084166966 5.6227551949470636, -4.499513267805773 5.362311101832848 C-4.809898451444581 5.101867008718632, -5.101867008718628 4.809898451444586, -5.3623111018328435 4.499513267805779 C-5.622755194947059 4.189128084166971, -5.859588285879649 3.8508953774210206, -6.062177826491068 3.5000000000000053 C-6.264767367102486 3.14910462257899, -6.439268938068958 2.774884796001602, -6.577848345501356 2.394141003279688 C-6.716427752933754 2.0133972105577738, -6.823295662002347 1.614560744215134, -6.893654271085454 1.215537243668521 C-6.9640128801685615 0.816513743121908, -6.999999999999999 0.4051790812228472, -7 1.0183126166254463e-14 C-7.000000000000001 -0.40517908122282686, -6.964012880168565 -0.8165137431218878, -6.893654271085459 -1.215537243668501 C-6.823295662002352 -1.6145607442151142, -6.716427752933759 -2.0133972105577542, -6.577848345501363 -2.394141003279669 C-6.439268938068967 -2.7748847960015834, -6.264767367102496 -3.149104622578972, -6.062177826491078 -3.4999999999999876 C-5.859588285879661 -3.8508953774210033, -5.6227551949470715 -4.1891280841669545, -5.362311101832856 -4.499513267805763 C-5.10186700871864 -4.809898451444571, -4.809898451444594 -5.10186700871862, -4.499513267805787 -5.362311101832836 C-4.189128084166979 -5.622755194947053, -3.850895377421028 -5.859588285879643, -3.5000000000000133 -6.062177826491062 C-3.1491046225789985 -6.264767367102482, -2.774884796001611 -6.439268938068954, -2.3941410032796973 -6.577848345501353 C-2.0133972105577835 -6.716427752933752, -1.6145607442151435 -6.823295662002345, -1.2155372436685306 -6.893654271085453 C-0.8165137431219176 -6.9640128801685615, -0.40517908122285695 -6.999999999999999, -1.9937625952807352e-14 -7 C0.4051790812228171 -7.000000000000001, 0.8165137431218781 -6.964012880168565, 1.2155372436684913 -6.89365427108546 C1.6145607442151044 -6.823295662002354, 2.013397210557745 -6.716427752933763, 2.3941410032796595 -6.5778483455013665 C2.774884796001574 -6.43926893806897, 3.149104622578963 -6.2647673671025, 3.499999999999979 -6.062177826491083 C3.8508953774209953 -5.859588285879665, 4.189128084166947 -5.622755194947077, 4.499513267805756 -5.362311101832862 C4.809898451444564 -5.1018670087186475, 5.101867008718613 -4.809898451444602, 5.362311101832829 -4.499513267805796 C5.622755194947046 -4.189128084166989, 5.859588285879637 -3.8508953774210393, 6.062177826491056 -3.500000000000025 C6.2647673671024755 -3.1491046225790105, 6.439268938068949 -2.774884796001623, 6.577848345501348 -2.3941410032797092 C6.716427752933747 -2.0133972105577955, 6.823295662002342 -1.6145607442151562, 6.893654271085451 -1.2155372436685434 C6.96401288016856 -0.8165137431219307, 6.982275711847575 -0.2025895406114567, 7 -3.2800750208310675e-14 C7.017724288152425 0.2025895406113911, 7.017724288152424 -0.2025895406114242, 7 0" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M7 0 C7 0.40517908122283747, 6.964012880168563 0.816513743121899, 6.893654271085456 1.2155372436685123 C6.823295662002349 1.6145607442151257, 6.716427752933756 2.013397210557766, 6.5778483455013586 2.394141003279681 C6.439268938068961 2.7748847960015954, 6.26476736710249 3.149104622578984, 6.062177826491071 3.4999999999999996 C5.859588285879653 3.8508953774210153, 5.622755194947063 4.189128084166967, 5.362311101832846 4.499513267805774 C5.10186700871863 4.809898451444582, 4.809898451444583 5.10186700871863, 4.499513267805775 5.362311101832846 C4.189128084166968 5.622755194947063, 3.8508953774210166 5.859588285879652, 3.500000000000001 6.06217782649107 C3.149104622578985 6.264767367102489, 2.7748847960015963 6.439268938068961, 2.3941410032796817 6.5778483455013586 C2.013397210557767 6.716427752933756, 1.6145607442151264 6.823295662002349, 1.2155372436685128 6.893654271085456 C0.8165137431218992 6.964012880168563, 0.4051790812228379 7, 4.286263797015736e-16 7 C-0.405179081222837 7, -0.8165137431218985 6.964012880168563, -1.2155372436685121 6.893654271085456 C-1.6145607442151257 6.823295662002349, -2.0133972105577667 6.716427752933756, -2.394141003279681 6.5778483455013586 C-2.774884796001595 6.439268938068961, -3.149104622578983 6.26476736710249, -3.4999999999999982 6.062177826491071 C-3.8508953774210135 5.859588285879653, -4.189128084166966 5.6227551949470636, -4.499513267805773 5.362311101832848 C-4.809898451444581 5.101867008718632, -5.101867008718628 4.809898451444586, -5.3623111018328435 4.499513267805779 C-5.622755194947059 4.189128084166971, -5.859588285879649 3.8508953774210206, -6.062177826491068 3.5000000000000053 C-6.264767367102486 3.14910462257899, -6.439268938068958 2.774884796001602, -6.577848345501356 2.394141003279688 C-6.716427752933754 2.0133972105577738, -6.823295662002347 1.614560744215134, -6.893654271085454 1.215537243668521 C-6.9640128801685615 0.816513743121908, -6.999999999999999 0.4051790812228472, -7 1.0183126166254463e-14 C-7.000000000000001 -0.40517908122282686, -6.964012880168565 -0.8165137431218878, -6.893654271085459 -1.215537243668501 C-6.823295662002352 -1.6145607442151142, -6.716427752933759 -2.0133972105577542, -6.577848345501363 -2.394141003279669 C-6.439268938068967 -2.7748847960015834, -6.264767367102496 -3.149104622578972, -6.062177826491078 -3.4999999999999876 C-5.859588285879661 -3.8508953774210033, -5.6227551949470715 -4.1891280841669545, -5.362311101832856 -4.499513267805763 C-5.10186700871864 -4.809898451444571, -4.809898451444594 -5.10186700871862, -4.499513267805787 -5.362311101832836 C-4.189128084166979 -5.622755194947053, -3.850895377421028 -5.859588285879643, -3.5000000000000133 -6.062177826491062 C-3.1491046225789985 -6.264767367102482, -2.774884796001611 -6.439268938068954, -2.3941410032796973 -6.577848345501353 C-2.0133972105577835 -6.716427752933752, -1.6145607442151435 -6.823295662002345, -1.2155372436685306 -6.893654271085453 C-0.8165137431219176 -6.9640128801685615, -0.40517908122285695 -6.999999999999999, -1.9937625952807352e-14 -7 C0.4051790812228171 -7.000000000000001, 0.8165137431218781 -6.964012880168565, 1.2155372436684913 -6.89365427108546 C1.6145607442151044 -6.823295662002354, 2.013397210557745 -6.716427752933763, 2.3941410032796595 -6.5778483455013665 C2.774884796001574 -6.43926893806897, 3.149104622578963 -6.2647673671025, 3.499999999999979 -6.062177826491083 C3.8508953774209953 -5.859588285879665, 4.189128084166947 -5.622755194947077, 4.499513267805756 -5.362311101832862 C4.809898451444564 -5.1018670087186475, 5.101867008718613 -4.809898451444602, 5.362311101832829 -4.499513267805796 C5.622755194947046 -4.189128084166989, 5.859588285879637 -3.8508953774210393, 6.062177826491056 -3.500000000000025 C6.2647673671024755 -3.1491046225790105, 6.439268938068949 -2.774884796001623, 6.577848345501348 -2.3941410032797092 C6.716427752933747 -2.0133972105577955, 6.823295662002342 -1.6145607442151562, 6.893654271085451 -1.2155372436685434 C6.96401288016856 -0.8165137431219307, 6.982275711847575 -0.2025895406114567, 7 -3.2800750208310675e-14 C7.017724288152425 0.2025895406113911, 7.017724288152424 -0.2025895406114242, 7 0" stroke="#64748b" stroke-width="2" fill="none" stroke-dasharray="0 0" style=""></path><g><path d="M2.5 0 C2.5 0.14470681472244193, 2.487147457203058 0.29161205111496386, 2.46201938253052 0.4341204441673258 C2.436891307857982 0.5766288372196877, 2.3987241974763416 0.7190704323420595, 2.3492315519647713 0.8550503583141718 C2.299738906453201 0.991030284286284, 2.2374169168223177 1.124680222349637, 2.165063509461097 1.2499999999999998 C2.092710102099876 1.3753197776503625, 2.0081268553382365 1.496117172916774, 1.915111107797445 1.6069690242163481 C1.8220953602566536 1.7178208755159223, 1.7178208755159226 1.8220953602566536, 1.6069690242163484 1.915111107797445 C1.4961171729167742 2.0081268553382365, 1.375319777650363 2.0927101020998755, 1.2500000000000002 2.1650635094610964 C1.1246802223496375 2.2374169168223172, 0.9910302842862845 2.2997389064532, 0.8550503583141721 2.349231551964771 C0.7190704323420597 2.3987241974763416, 0.576628837219688 2.436891307857982, 0.43412044416732604 2.46201938253052 C0.291612051114964 2.487147457203058, 0.14470681472244212 2.5, 1.5308084989341916e-16 2.5 C-0.1447068147224418 2.5, -0.2916120511149638 2.487147457203058, -0.43412044416732576 2.46201938253052 C-0.5766288372196877 2.436891307857982, -0.7190704323420595 2.3987241974763416, -0.8550503583141718 2.3492315519647713 C-0.991030284286284 2.299738906453201, -1.124680222349637 2.2374169168223177, -1.2499999999999996 2.165063509461097 C-1.375319777650362 2.092710102099876, -1.4961171729167733 2.008126855338237, -1.6069690242163475 1.9151111077974459 C-1.7178208755159217 1.8220953602566548, -1.822095360256653 1.7178208755159234, -1.9151111077974443 1.6069690242163495 C-2.0081268553382357 1.4961171729167755, -2.0927101020998746 1.3753197776503645, -2.1650635094610955 1.250000000000002 C-2.2374169168223164 1.1246802223496395, -2.2997389064531992 0.9910302842862865, -2.34923155196477 0.8550503583141743 C-2.3987241974763407 0.7190704323420621, -2.436891307857981 0.5766288372196907, -2.4620193825305194 0.434120444167329 C-2.487147457203058 0.29161205111496724, -2.5 0.14470681472244545, -2.5 3.636830773662308e-15 C-2.5 -0.14470681472243818, -2.4871474572030587 -0.2916120511149599, -2.4620193825305208 -0.4341204441673218 C-2.436891307857983 -0.5766288372196837, -2.398724197476343 -0.7190704323420553, -2.3492315519647726 -0.8550503583141675 C-2.2997389064532023 -0.9910302842862798, -2.23741691682232 -1.1246802223496328, -2.165063509461099 -1.2499999999999956 C-2.092710102099878 -1.3753197776503583, -2.00812685533824 -1.4961171729167695, -1.9151111077974488 -1.606969024216344 C-1.8220953602566576 -1.7178208755159183, -1.7178208755159263 -1.82209536025665, -1.6069690242163523 -1.9151111077974416 C-1.4961171729167784 -2.0081268553382334, -1.3753197776503672 -2.0927101020998724, -1.2500000000000047 -2.1650635094610937 C-1.1246802223496422 -2.237416916822315, -0.9910302842862897 -2.299738906453198, -0.8550503583141776 -2.3492315519647686 C-0.7190704323420656 -2.3987241974763394, -0.5766288372196942 -2.4368913078579806, -0.43412044416733236 -2.462019382530519 C-0.29161205111497057 -2.4871474572030574, -0.1447068147224489 -2.4999999999999996, -7.120580697431198e-15 -2.5 C0.14470681472243463 -2.5000000000000004, 0.29161205111495647 -2.487147457203059, 0.4341204441673183 -2.4620193825305217 C0.5766288372196802 -2.436891307857984, 0.7190704323420518 -2.3987241974763442, 0.8550503583141642 -2.349231551964774 C0.9910302842862766 -2.2997389064532037, 1.1246802223496295 -2.2374169168223212, 1.2499999999999925 -2.165063509461101 C1.3753197776503554 -2.0927101020998804, 1.4961171729167668 -2.008126855338242, 1.6069690242163412 -1.915111107797451 C1.7178208755159157 -1.82209536025666, 1.8220953602566472 -1.7178208755159294, 1.915111107797439 -1.6069690242163557 C2.0081268553382308 -1.496117172916782, 2.09271010209987 -1.3753197776503712, 2.1650635094610915 -1.2500000000000089 C2.237416916822313 -1.1246802223496466, 2.299738906453196 -0.9910302842862939, 2.3492315519647673 -0.855050358314182 C2.3987241974763385 -0.71907043234207, 2.4368913078579792 -0.5766288372196986, 2.462019382530518 -0.4341204441673369 C2.487147457203057 -0.29161205111497523, 2.4936698970884197 -0.07235340736123454, 2.5 -1.1714553645825241e-14 C2.5063301029115803 0.07235340736121111, 2.50633010291158 -0.07235340736122292, 2.5 0" stroke="none" stroke-width="0" fill="#475569" style=""></path><path d="M2.5 0 C2.5 0.14470681472244193, 2.487147457203058 0.29161205111496386, 2.46201938253052 0.4341204441673258 C2.436891307857982 0.5766288372196877, 2.3987241974763416 0.7190704323420595, 2.3492315519647713 0.8550503583141718 C2.299738906453201 0.991030284286284, 2.2374169168223177 1.124680222349637, 2.165063509461097 1.2499999999999998 C2.092710102099876 1.3753197776503625, 2.0081268553382365 1.496117172916774, 1.915111107797445 1.6069690242163481 C1.8220953602566536 1.7178208755159223, 1.7178208755159226 1.8220953602566536, 1.6069690242163484 1.915111107797445 C1.4961171729167742 2.0081268553382365, 1.375319777650363 2.0927101020998755, 1.2500000000000002 2.1650635094610964 C1.1246802223496375 2.2374169168223172, 0.9910302842862845 2.2997389064532, 0.8550503583141721 2.349231551964771 C0.7190704323420597 2.3987241974763416, 0.576628837219688 2.436891307857982, 0.43412044416732604 2.46201938253052 C0.291612051114964 2.487147457203058, 0.14470681472244212 2.5, 1.5308084989341916e-16 2.5 C-0.1447068147224418 2.5, -0.2916120511149638 2.487147457203058, -0.43412044416732576 2.46201938253052 C-0.5766288372196877 2.436891307857982, -0.7190704323420595 2.3987241974763416, -0.8550503583141718 2.3492315519647713 C-0.991030284286284 2.299738906453201, -1.124680222349637 2.2374169168223177, -1.2499999999999996 2.165063509461097 C-1.375319777650362 2.092710102099876, -1.4961171729167733 2.008126855338237, -1.6069690242163475 1.9151111077974459 C-1.7178208755159217 1.8220953602566548, -1.822095360256653 1.7178208755159234, -1.9151111077974443 1.6069690242163495 C-2.0081268553382357 1.4961171729167755, -2.0927101020998746 1.3753197776503645, -2.1650635094610955 1.250000000000002 C-2.2374169168223164 1.1246802223496395, -2.2997389064531992 0.9910302842862865, -2.34923155196477 0.8550503583141743 C-2.3987241974763407 0.7190704323420621, -2.436891307857981 0.5766288372196907, -2.4620193825305194 0.434120444167329 C-2.487147457203058 0.29161205111496724, -2.5 0.14470681472244545, -2.5 3.636830773662308e-15 C-2.5 -0.14470681472243818, -2.4871474572030587 -0.2916120511149599, -2.4620193825305208 -0.4341204441673218 C-2.436891307857983 -0.5766288372196837, -2.398724197476343 -0.7190704323420553, -2.3492315519647726 -0.8550503583141675 C-2.2997389064532023 -0.9910302842862798, -2.23741691682232 -1.1246802223496328, -2.165063509461099 -1.2499999999999956 C-2.092710102099878 -1.3753197776503583, -2.00812685533824 -1.4961171729167695, -1.9151111077974488 -1.606969024216344 C-1.8220953602566576 -1.7178208755159183, -1.7178208755159263 -1.82209536025665, -1.6069690242163523 -1.9151111077974416 C-1.4961171729167784 -2.0081268553382334, -1.3753197776503672 -2.0927101020998724, -1.2500000000000047 -2.1650635094610937 C-1.1246802223496422 -2.237416916822315, -0.9910302842862897 -2.299738906453198, -0.8550503583141776 -2.3492315519647686 C-0.7190704323420656 -2.3987241974763394, -0.5766288372196942 -2.4368913078579806, -0.43412044416733236 -2.462019382530519 C-0.29161205111497057 -2.4871474572030574, -0.1447068147224489 -2.4999999999999996, -7.120580697431198e-15 -2.5 C0.14470681472243463 -2.5000000000000004, 0.29161205111495647 -2.487147457203059, 0.4341204441673183 -2.4620193825305217 C0.5766288372196802 -2.436891307857984, 0.7190704323420518 -2.3987241974763442, 0.8550503583141642 -2.349231551964774 C0.9910302842862766 -2.2997389064532037, 1.1246802223496295 -2.2374169168223212, 1.2499999999999925 -2.165063509461101 C1.3753197776503554 -2.0927101020998804, 1.4961171729167668 -2.008126855338242, 1.6069690242163412 -1.915111107797451 C1.7178208755159157 -1.82209536025666, 1.8220953602566472 -1.7178208755159294, 1.915111107797439 -1.6069690242163557 C2.0081268553382308 -1.496117172916782, 2.09271010209987 -1.3753197776503712, 2.1650635094610915 -1.2500000000000089 C2.237416916822313 -1.1246802223496466, 2.299738906453196 -0.9910302842862939, 2.3492315519647673 -0.855050358314182 C2.3987241974763385 -0.71907043234207, 2.4368913078579792 -0.5766288372196986, 2.462019382530518 -0.4341204441673369 C2.487147457203057 -0.29161205111497523, 2.4936698970884197 -0.07235340736123454, 2.5 -1.1714553645825241e-14 C2.5063301029115803 0.07235340736121111, 2.50633010291158 -0.07235340736122292, 2.5 0" stroke="#475569" stroke-width="2" fill="none" stroke-dasharray="0 0" style=""></path></g></g></g></g></g></g><defs><filter id="diagram-fixture-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><defs><filter id="diagram-fixture-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><linearGradient id="diagram-fixture-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="hsl(180, 0%, 18.3529411765%)" stop-opacity="1"></stop></linearGradient></svg>
\ No newline at end of file
diff --git a/packages/ui/test-setup/fixtures/diagrams/09-class-diagram.geometry.json b/packages/ui/test-setup/fixtures/diagrams/09-class-diagram.geometry.json
new file mode 100644
index 000000000..056643e91
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/09-class-diagram.geometry.json
@@ -0,0 +1,160 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "0 0 712.328125 474",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 712.328125,
+		"height": 474
+	},
+	"svgCtm": {
+		"a": 1,
+		"b": 0,
+		"c": 0,
+		"d": 1,
+		"e": 0,
+		"f": 0
+	},
+	"elements": {
+		"diagram-fixture-id_Annotation_ImageAttachment_1": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relation",
+			"bbox": {
+				"x": 99.3010025024414,
+				"y": 189.14199829101562,
+				"width": 123.62499237060547,
+				"height": 120.85800170898438
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-id_Annotation_HtmlElementAnchor_2": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relation",
+			"bbox": {
+				"x": 348.7619934082031,
+				"y": 224,
+				"width": 0,
+				"height": 68
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-id_Annotation_ExternalAnnotation_3": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relation",
+			"bbox": {
+				"x": 474.7049865722656,
+				"y": 187.0959930419922,
+				"width": 130.92001342773438,
+				"height": 122.90400695800781
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-classId-Annotation-0": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -110.921875,
+				"y": -108,
+				"width": 221.84375,
+				"height": 216
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 348.76171875,
+				"f": 116
+			},
+			"label": "Annotation"
+		},
+		"diagram-fixture-classId-HtmlElementAnchor-1": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -108.16015625,
+				"y": -84,
+				"width": 216.3203125,
+				"height": 168
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 348.76171875,
+				"f": 382
+			},
+			"label": "HtmlElementAnchor"
+		},
+		"diagram-fixture-classId-ImageAttachment-2": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -91.30078125,
+				"y": -72,
+				"width": 182.6015625,
+				"height": 144
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 99.30078125,
+				"f": 382
+			},
+			"label": "ImageAttachment"
+		},
+		"diagram-fixture-classId-ExternalAnnotation-3": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -98.703125,
+				"y": -72,
+				"width": 197.40625,
+				"height": 144
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 605.625,
+				"f": 382
+			},
+			"label": "ExternalAnnotation"
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/09-class-diagram.svg b/packages/ui/test-setup/fixtures/diagrams/09-class-diagram.svg
new file mode 100644
index 000000000..f6731c5d6
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/09-class-diagram.svg
@@ -0,0 +1 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" class="classDiagram" style="max-width: 712.328125px;" viewBox="0 0 712.328125 474" role="graphics-document document" aria-roledescription="classDiagram"><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture g.classGroup text{fill:#475569;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#diagram-fixture g.classGroup text .title{font-weight:bolder;}#diagram-fixture .cluster-label text{fill:#f8fafc;}#diagram-fixture .cluster-label span{color:#f8fafc;}#diagram-fixture .cluster-label span p{background-color:transparent;}#diagram-fixture .cluster rect{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .cluster text{fill:#f8fafc;}#diagram-fixture .cluster span{color:#f8fafc;}#diagram-fixture .nodeLabel,#diagram-fixture .edgeLabel{color:#f8fafc;}#diagram-fixture .noteLabel .nodeLabel,#diagram-fixture .noteLabel .edgeLabel{color:rgb(183.8476190475, 181.5523809523, 181.5523809523);}#diagram-fixture .edgeLabel .label rect{fill:#1e293b;}#diagram-fixture .label text{fill:#f8fafc;}#diagram-fixture .labelBkg{background:#1e293b;}#diagram-fixture .edgeLabel .label span{background:#1e293b;}#diagram-fixture .classTitle{font-weight:bolder;}#diagram-fixture .node rect,#diagram-fixture .node circle,#diagram-fixture .node ellipse,#diagram-fixture .node polygon,#diagram-fixture .node path{fill:#1e293b;stroke:#475569;stroke-width:1;}#diagram-fixture .divider{stroke:#475569;stroke-width:1;}#diagram-fixture g.clickable{cursor:pointer;}#diagram-fixture g.classGroup rect{fill:#1e293b;stroke:#475569;}#diagram-fixture g.classGroup line{stroke:#475569;stroke-width:1;}#diagram-fixture .classLabel .box{stroke:none;stroke-width:0;fill:#1e293b;opacity:0.5;}#diagram-fixture .classLabel .label{fill:#475569;font-size:10px;}#diagram-fixture .relation{stroke:#64748b;stroke-width:1;fill:none;}#diagram-fixture .dashed-line{stroke-dasharray:3;}#diagram-fixture .dotted-line{stroke-dasharray:1 2;}#diagram-fixture [id$="-compositionStart"],#diagram-fixture .composition{fill:#64748b!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-compositionEnd"],#diagram-fixture .composition{fill:#64748b!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-dependencyStart"],#diagram-fixture .dependency{fill:#64748b!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-dependencyEnd"],#diagram-fixture .dependency{fill:#64748b!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-extensionStart"],#diagram-fixture .extension{fill:transparent!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-extensionEnd"],#diagram-fixture .extension{fill:transparent!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-aggregationStart"],#diagram-fixture .aggregation{fill:transparent!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-aggregationEnd"],#diagram-fixture .aggregation{fill:transparent!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-lollipopStart"],#diagram-fixture .lollipop{fill:#1e293b!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [id$="-lollipopEnd"],#diagram-fixture .lollipop{fill:#1e293b!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture .edgeTerminals{font-size:11px;line-height:initial;}#diagram-fixture .classTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#diagram-fixture .edgeLabel[data-look="neo"]{background-color:#1e293b;text-align:center;}#diagram-fixture .edgeLabel[data-look="neo"] p{background-color:#1e293b;}#diagram-fixture .edgeLabel[data-look="neo"] rect{opacity:0.5;background-color:#1e293b;fill:#1e293b;}#diagram-fixture .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#diagram-fixture .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker id="diagram-fixture_classDiagram-aggregationStart" class="marker aggregation classDiagram" refX="18" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-aggregationEnd" class="marker aggregation classDiagram" refX="1" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-aggregationStart-margin" class="marker aggregation classDiagram" refX="15" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z" style="stroke-width: 2;"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-aggregationEnd-margin" class="marker aggregation classDiagram" refX="1" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z" style="stroke-width: 2;"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-extensionStart" class="marker extension classDiagram" refX="18" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 1,7 L18,13 V 1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-extensionEnd" class="marker extension classDiagram" refX="1" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 1,1 V 13 L18,7 Z"></path></marker></defs><marker id="diagram-fixture_classDiagram-extensionStart-margin" class="marker extension classDiagram" refX="18" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse" viewBox="0 0 20 14"><polygon points="10,7 18,13 18,1" style="stroke-width: 2; stroke-dasharray: 0;"></polygon></marker><defs><marker id="diagram-fixture_classDiagram-extensionEnd-margin" class="marker extension classDiagram" refX="9" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse" viewBox="0 0 20 14"><polygon points="10,1 10,13 18,7" style="stroke-width: 2; stroke-dasharray: 0;"></polygon></marker></defs><defs><marker id="diagram-fixture_classDiagram-compositionStart" class="marker composition classDiagram" refX="18" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-compositionEnd" class="marker composition classDiagram" refX="1" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-compositionStart-margin" class="marker composition classDiagram" refX="15" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><path viewBox="0 0 15 15" d="M 18,7 L9,13 L1,7 L9,1 Z" style="stroke-width: 0;"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-compositionEnd-margin" class="marker composition classDiagram" refX="3.5" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L1,7 L9,1 Z" style="stroke-width: 0;"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-dependencyStart" class="marker dependency classDiagram" refX="6" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><path d="M 5,7 L9,13 L1,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-dependencyEnd" class="marker dependency classDiagram" refX="13" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-dependencyStart-margin" class="marker dependency classDiagram" refX="4" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><path d="M 5,7 L9,13 L1,7 L9,1 Z" style="stroke-width: 0;"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-dependencyEnd-margin" class="marker dependency classDiagram" refX="16" refY="7" markerWidth="20" markerHeight="28" orient="auto" markerUnits="userSpaceOnUse"><path d="M 18,7 L9,13 L14,7 L9,1 Z" style="stroke-width: 0;"></path></marker></defs><defs><marker id="diagram-fixture_classDiagram-lollipopStart" class="marker lollipop classDiagram" refX="13" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><circle fill="transparent" cx="7" cy="7" r="6"></circle></marker></defs><defs><marker id="diagram-fixture_classDiagram-lollipopEnd" class="marker lollipop classDiagram" refX="1" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><circle fill="transparent" cx="7" cy="7" r="6"></circle></marker></defs><defs><marker id="diagram-fixture_classDiagram-lollipopStart-margin" class="marker lollipop classDiagram" refX="13" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><circle fill="transparent" cx="7" cy="7" r="6" stroke-width="2"></circle></marker></defs><defs><marker id="diagram-fixture_classDiagram-lollipopEnd-margin" class="marker lollipop classDiagram" refX="1" refY="7" markerWidth="190" markerHeight="240" orient="auto" markerUnits="userSpaceOnUse"><circle fill="transparent" cx="7" cy="7" r="6" stroke-width="2"></circle></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M222.926,189.142L202.322,201.119C181.718,213.095,140.509,237.047,119.905,257.19C99.301,277.333,99.301,293.667,99.301,301.833L99.301,310" id="diagram-fixture-id_Annotation_ImageAttachment_1" class="edge-thickness-normal edge-pattern-solid relation" style=";;;" data-edge="true" data-et="edge" data-id="id_Annotation_ImageAttachment_1" data-points="W3sieCI6MjM3LjgzOTg0Mzc1LCJ5IjoxODAuNDczNzA4OTM0ODkwODV9LHsieCI6OTkuMzAwNzgxMjUsInkiOjI2MX0seyJ4Ijo5OS4zMDA3ODEyNSwieSI6MzEwfV0=" data-look="classic" marker-start="url(#diagram-fixture_classDiagram-aggregationStart)"></path><path d="M348.762,224L348.762,230.167C348.762,236.333,348.762,248.667,348.762,260C348.762,271.333,348.762,281.667,348.762,286.833L348.762,292" id="diagram-fixture-id_Annotation_HtmlElementAnchor_2" class="edge-thickness-normal edge-pattern-solid relation" style=";;;" data-edge="true" data-et="edge" data-id="id_Annotation_HtmlElementAnchor_2" data-points="W3sieCI6MzQ4Ljc2MTcxODc1LCJ5IjoyMjR9LHsieCI6MzQ4Ljc2MTcxODc1LCJ5IjoyNjF9LHsieCI6MzQ4Ljc2MTcxODc1LCJ5IjoyOTh9XQ==" data-look="classic" marker-end="url(#diagram-fixture_classDiagram-dependencyEnd)"></path><path d="M474.705,187.096L496.525,199.413C518.345,211.73,561.985,236.365,583.805,256.849C605.625,277.333,605.625,293.667,605.625,301.833L605.625,310" id="diagram-fixture-id_Annotation_ExternalAnnotation_3" class="edge-thickness-normal edge-pattern-solid relation" style=";;;" data-edge="true" data-et="edge" data-id="id_Annotation_ExternalAnnotation_3" data-points="W3sieCI6NDU5LjY4MzU5Mzc1LCJ5IjoxNzguNjE1NjkxMTA1MTI5NDl9LHsieCI6NjA1LjYyNSwieSI6MjYxfSx7IngiOjYwNS42MjUsInkiOjMxMH1d" data-look="classic" marker-start="url(#diagram-fixture_classDiagram-extensionStart)"></path></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(99.30078125, 261)"><g class="label" data-id="id_Annotation_ImageAttachment_1" transform="translate(-24.7421875, -12)"><foreignObject width="49.484375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>images</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(348.76171875, 261)"><g class="label" data-id="id_Annotation_HtmlElementAnchor_2" transform="translate(-41.3671875, -12)"><foreignObject width="82.734375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>htmlAnchor</p></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="id_Annotation_ExternalAnnotation_3" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeTerminals" transform="translate(215.17210659800412, 176.29955142562514)"><g class="inner" transform="translate(-2.890625, -8.25)"><foreignObject width="5.78125" height="16.5" style="width: 9px; height: 12px;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="edgeLabel"><p>1</p></span></div></foreignObject></g></g><g class="edgeTerminals" transform="translate(333.761719375, 241.5000005357143)"><g class="inner" transform="translate(-2.890625, -8.25)"><foreignObject width="5.78125" height="16.5" style="width: 9px; height: 12px;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="edgeLabel"><p>1</p></span></div></foreignObject></g></g><g class="edgeTerminals" transform="translate(109.30078062499999, 287.49999946428574)"><g class="inner" transform="translate(-8.9453125, -8.25)"></g><foreignObject width="17.890625" height="16.5" style="width: 36px; height: 12px;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="edgeLabel"><p>0..*</p></span></div></foreignObject></g><g class="edgeTerminals" transform="translate(358.761719375, 275.5000005357143)"><g class="inner" transform="translate(-9.8125, -8.25)"></g><foreignObject width="19.625" height="16.5" style="width: 36px; height: 12px;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5;"><span class="edgeLabel"><p>0..1</p></span></div></foreignObject></g></g><g class="nodes"><g class="node default" id="diagram-fixture-classId-Annotation-0" data-look="classic" transform="translate(348.76171875, 116)"><g class="basic label-container outer-path"><path d="M-110.921875 -108 L110.921875 -108 L110.921875 108 L-110.921875 108" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M-110.921875 -108 C-28.307971228651567 -108, 54.305932542696866 -108, 110.921875 -108 M-110.921875 -108 C-49.65670136147465 -108, 11.608472277050694 -108, 110.921875 -108 M110.921875 -108 C110.921875 -32.186204105336955, 110.921875 43.62759178932609, 110.921875 108 M110.921875 -108 C110.921875 -32.58132425116908, 110.921875 42.83735149766184, 110.921875 108 M110.921875 108 C33.401254063639655 108, -44.11936687272069 108, -110.921875 108 M110.921875 108 C26.066238544552604 108, -58.78939791089479 108, -110.921875 108 M-110.921875 108 C-110.921875 64.40863167239478, -110.921875 20.817263344789552, -110.921875 -108 M-110.921875 108 C-110.921875 32.680252103110874, -110.921875 -42.63949579377825, -110.921875 -108" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="annotation-group text" transform="translate(0, -84)"></g><g class="label-group text" transform="translate(-41.28125, -84)"><g class="label" style="font-weight: bolder" transform="translate(0,-12)"><foreignObject width="82.5625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 122px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>Annotation</p></span></div></foreignObject></g></g><g class="members-group text" transform="translate(-98.921875, -36)"><g class="label" style="" transform="translate(0,-12)"><foreignObject width="67.0625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 117px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string id</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,12)"><foreignObject width="105.171875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 153px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string blockId</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,36)"><foreignObject width="156.5625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 199px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+AnnotationType type</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,60)"><foreignObject width="137.796875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 182px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string originalText</p></span></div></foreignObject></g></g><g class="methods-group text" transform="translate(-98.921875, 84)"><g class="label" style="" transform="translate(0,-12)"><foreignObject width="122.84375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 164px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+export() : string</p></span></div></foreignObject></g></g><g class="divider" style=""><path d="M-110.921875 -60 C-25.334434165450304 -59.99961419944968, 60.25300666909939 -59.99922839889937, 110.921875 -59.999 M-110.921875 -60 C-39.85152690749146 -59.99967963781674, 31.218821185017077 -59.99935927563348, 110.921875 -59.999" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="divider" style=""><path d="M-110.921875 60 C-54.111808113388705 60.000256081439694, 2.698258773222591 60.00051216287938, 110.921875 60.001 M-110.921875 60 C-24.652579144885763 60.000388874132604, 61.616716710228474 60.00077774826521, 110.921875 60.001" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g></g><g class="node default" id="diagram-fixture-classId-HtmlElementAnchor-1" data-look="classic" transform="translate(348.76171875, 382)"><g class="basic label-container outer-path"><path d="M-108.16015625 -84 L108.16015625 -84 L108.16015625 84 L-108.16015625 84" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M-108.16015625 -84 C-41.3886025027756 -84, 25.382951244448805 -84, 108.16015625 -84 M-108.16015625 -84 C-44.36049388678265 -84, 19.439168476434702 -84, 108.16015625 -84 M108.16015625 -84 C108.16015625 -43.31614040692751, 108.16015625 -2.6322808138550187, 108.16015625 84 M108.16015625 -84 C108.16015625 -20.904855391206567, 108.16015625 42.190289217586866, 108.16015625 84 M108.16015625 84 C40.04171449936344 84, -28.076727251273127 84, -108.16015625 84 M108.16015625 84 C26.672624596133844 84, -54.81490705773231 84, -108.16015625 84 M-108.16015625 84 C-108.16015625 29.852628693003425, -108.16015625 -24.29474261399315, -108.16015625 -84 M-108.16015625 84 C-108.16015625 25.94280424636389, -108.16015625 -32.11439150727222, -108.16015625 -84" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="annotation-group text" transform="translate(0, -60)"></g><g class="label-group text" transform="translate(-75.3203125, -60)"><g class="label" style="font-weight: bolder" transform="translate(0,-12)"><foreignObject width="150.640625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 184px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>HtmlElementAnchor</p></span></div></foreignObject></g></g><g class="members-group text" transform="translate(-96.16015625, -12)"><g class="label" style="" transform="translate(0,-12)"><foreignObject width="111.3125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 154px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string selector</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,12)"><foreignObject width="117" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 162px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string tagName</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,36)"><foreignObject width="83.015625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 128px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string text</p></span></div></foreignObject></g></g><g class="methods-group text" transform="translate(-96.16015625, 84)"></g><g class="divider" style=""><path d="M-108.16015625 -36 C-45.77779694865952 -35.99971162042723, 16.604562352680958 -35.99942324085445, 108.16015625 -35.999 M-108.16015625 -36 C-27.23365461678256 -35.99962589504103, 53.69284701643488 -35.99925179008205, 108.16015625 -35.999" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="divider" style=""><path d="M-108.16015625 60 C-33.204024744819876 60.00034650528487, 41.75210676036025 60.000693010569734, 108.16015625 60.001 M-108.16015625 60 C-56.950260089940066 60.00023673179633, -5.740363929880132 60.000473463592655, 108.16015625 60.001" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g></g><g class="node default" id="diagram-fixture-classId-ImageAttachment-2" data-look="classic" transform="translate(99.30078125, 382)"><g class="basic label-container outer-path"><path d="M-91.30078125 -72 L91.30078125 -72 L91.30078125 72 L-91.30078125 72" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M-91.30078125 -72 C-41.97884081474463 -72, 7.343099620510742 -72, 91.30078125 -72 M-91.30078125 -72 C-50.65991461741271 -72, -10.01904798482542 -72, 91.30078125 -72 M91.30078125 -72 C91.30078125 -30.35979720873936, 91.30078125 11.280405582521283, 91.30078125 72 M91.30078125 -72 C91.30078125 -31.442240447066936, 91.30078125 9.115519105866127, 91.30078125 72 M91.30078125 72 C47.163409767772905 72, 3.026038285545809 72, -91.30078125 72 M91.30078125 72 C21.616423782777844 72, -48.06793368444431 72, -91.30078125 72 M-91.30078125 72 C-91.30078125 27.348183350581422, -91.30078125 -17.303633298837156, -91.30078125 -72 M-91.30078125 72 C-91.30078125 20.27047672582055, -91.30078125 -31.4590465483589, -91.30078125 -72" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="annotation-group text" transform="translate(0, -48)"></g><g class="label-group text" transform="translate(-65.8515625, -48)"><g class="label" style="font-weight: bolder" transform="translate(0,-12)"><foreignObject width="131.703125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 165px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>ImageAttachment</p></span></div></foreignObject></g></g><g class="members-group text" transform="translate(-79.30078125, 0)"><g class="label" style="" transform="translate(0,-12)"><foreignObject width="86" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 132px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string path</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,12)"><foreignObject width="92.75" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 139px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string name</p></span></div></foreignObject></g></g><g class="methods-group text" transform="translate(-79.30078125, 72)"></g><g class="divider" style=""><path d="M-91.30078125 -24 C-29.43896774643855 -23.999661219692445, 32.4228457571229 -23.99932243938489, 91.30078125 -23.999 M-91.30078125 -24 C-26.240578296132938 -23.999643704018393, 38.819624657734124 -23.999287408036786, 91.30078125 -23.999" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="divider" style=""><path d="M-91.30078125 48 C-22.16273091429335 48.00037862792294, 46.9753194214133 48.00075725584588, 91.30078125 48.001 M-91.30078125 48 C-47.83953447174468 48.00023801136301, -4.378287693489355 48.00047602272602, 91.30078125 48.001" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g></g><g class="node default" id="diagram-fixture-classId-ExternalAnnotation-3" data-look="classic" transform="translate(605.625, 382)"><g class="basic label-container outer-path"><path d="M-98.703125 -72 L98.703125 -72 L98.703125 72 L-98.703125 72" stroke="none" stroke-width="0" fill="#1e293b" style=""></path><path d="M-98.703125 -72 C-54.52661914318951 -72, -10.350113286379013 -72, 98.703125 -72 M-98.703125 -72 C-32.055495131230984 -72, 34.59213473753803 -72, 98.703125 -72 M98.703125 -72 C98.703125 -40.49374117395179, 98.703125 -8.987482347903573, 98.703125 72 M98.703125 -72 C98.703125 -16.997452126775208, 98.703125 38.005095746449584, 98.703125 72 M98.703125 72 C56.98861837649967 72, 15.274111752999346 72, -98.703125 72 M98.703125 72 C39.51237752291224 72, -19.678369954175523 72, -98.703125 72 M-98.703125 72 C-98.703125 34.211861685361164, -98.703125 -3.5762766292776718, -98.703125 -72 M-98.703125 72 C-98.703125 31.633621773325906, -98.703125 -8.732756453348188, -98.703125 -72" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="annotation-group text" transform="translate(0, -48)"></g><g class="label-group text" transform="translate(-72.78125, -48)"><g class="label" style="font-weight: bolder" transform="translate(0,-12)"><foreignObject width="145.5625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 176px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>ExternalAnnotation</p></span></div></foreignObject></g></g><g class="members-group text" transform="translate(-86.703125, 0)"><g class="label" style="" transform="translate(0,-12)"><foreignObject width="100.265625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 146px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string source</p></span></div></foreignObject></g><g class="label" style="" transform="translate(0,12)"><foreignObject width="100.625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 145px; text-align: center;"><span class="nodeLabel markdown-node-label" style=""><p>+string author</p></span></div></foreignObject></g></g><g class="methods-group text" transform="translate(-86.703125, 72)"></g><g class="divider" style=""><path d="M-98.703125 -24 C-20.433129467061264 -23.99960350801693, 57.83686606587747 -23.999207016033857, 98.703125 -23.999 M-98.703125 -24 C-49.59517173799999 -23.99975123405028, -0.48721847599998114 -23.99950246810056, 98.703125 -23.999" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="divider" style=""><path d="M-98.703125 48 C-29.972601883822833 48.00034816791827, 38.757921232354335 48.00069633583654, 98.703125 48.001 M-98.703125 48 C-58.331364505547775 48.000204511055216, -17.95960401109555 48.00040902211044, 98.703125 48.001" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g></g></g></g></g><defs><filter id="diagram-fixture-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><defs><filter id="diagram-fixture-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><linearGradient id="diagram-fixture-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="hsl(180, 0%, 18.3529411765%)" stop-opacity="1"></stop></linearGradient></svg>
\ No newline at end of file
diff --git a/packages/ui/test-setup/fixtures/diagrams/10-er-diagram.geometry.json b/packages/ui/test-setup/fixtures/diagrams/10-er-diagram.geometry.json
new file mode 100644
index 000000000..d424cc195
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/10-er-diagram.geometry.json
@@ -0,0 +1,198 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "0 0 457.75 742",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 457.75,
+		"height": 742
+	},
+	"svgCtm": {
+		"a": 1,
+		"b": 0,
+		"c": 0,
+		"d": 1,
+		"e": 0,
+		"f": 0
+	},
+	"elements": {
+		"diagram-fixture-id_entity-PROJECT-0_entity-PLAN-1_0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relationshipLine",
+			"bbox": {
+				"x": 226.3280029296875,
+				"y": 92,
+				"width": 0,
+				"height": 101
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-id_entity-PLAN-1_entity-VERSION-2_1": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relationshipLine",
+			"bbox": {
+				"x": 80.89099884033203,
+				"y": 266.8009948730469,
+				"width": 95.43700408935547,
+				"height": 111.19900512695312
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-id_entity-PLAN-1_entity-DECISION-3_2": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relationshipLine",
+			"bbox": {
+				"x": 276.3280029296875,
+				"y": 266.8009948730469,
+				"width": 95.43798828125,
+				"height": 132.57400512695312
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-id_entity-DECISION-3_entity-REVIEWER-4_3": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relationshipLine",
+			"bbox": {
+				"x": 371.7659912109375,
+				"y": 527.625,
+				"width": 0,
+				"height": 122.375
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-entity-PROJECT-0": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -52.0390625,
+				"y": -42,
+				"width": 104.078125,
+				"height": 84
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 226.328125,
+				"f": 50
+			},
+			"label": "PROJECT"
+		},
+		"diagram-fixture-entity-PLAN-1": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -50,
+				"y": -42,
+				"width": 100,
+				"height": 84
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 226.328125,
+				"f": 235
+			},
+			"label": "PLAN"
+		},
+		"diagram-fixture-entity-VERSION-2": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -72.890625,
+				"y": -85.5,
+				"width": 145.78125,
+				"height": 171
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 80.890625,
+				"f": 463.5
+			},
+			"label": "VERSION"
+		},
+		"diagram-fixture-entity-DECISION-3": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -77.984375,
+				"y": -64.125,
+				"width": 155.96875,
+				"height": 128.25
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 371.765625,
+				"f": 463.5
+			},
+			"label": "DECISION"
+		},
+		"diagram-fixture-entity-REVIEWER-4": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -55.9140625,
+				"y": -42,
+				"width": 111.828125,
+				"height": 84
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 371.765625,
+				"f": 692
+			},
+			"label": "REVIEWER"
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/10-er-diagram.svg b/packages/ui/test-setup/fixtures/diagrams/10-er-diagram.svg
new file mode 100644
index 000000000..70023ebf2
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/10-er-diagram.svg
@@ -0,0 +1 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" class="erDiagram" style="max-width: 457.75px;" viewBox="0 0 457.75 742" role="graphics-document document" aria-roledescription="er"><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture .entityBox{fill:#1e293b;stroke:#475569;}#diagram-fixture .relationshipLabelBox{fill:#0f172a;opacity:0.7;background-color:#0f172a;}#diagram-fixture .relationshipLabelBox rect{opacity:0.5;}#diagram-fixture .labelBkg{background-color:rgba(15, 23, 42, 0.5);}#diagram-fixture .edgeLabel{background-color:#1e293b;}#diagram-fixture .edgeLabel .label rect{fill:#1e293b;}#diagram-fixture .edgeLabel .label text{fill:#ccc;}#diagram-fixture .edgeLabel .label{fill:#475569;font-size:14px;}#diagram-fixture .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:8,8;}#diagram-fixture .node rect,#diagram-fixture .node circle,#diagram-fixture .node ellipse,#diagram-fixture .node polygon{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .relationshipLine{stroke:#64748b;stroke-width:1px;fill:none;}#diagram-fixture .marker{fill:none!important;stroke:#64748b!important;stroke-width:1;}#diagram-fixture [data-look=neo].labelBkg{background-color:rgba(15, 23, 42, 0.5);}#diagram-fixture .cluster rect{fill:#1e293b;stroke:#475569;stroke-width:1px;}#diagram-fixture .cluster text{fill:#f8fafc;}#diagram-fixture .cluster-label text{fill:#f8fafc;}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker id="diagram-fixture_er-onlyOneStart" class="marker onlyOne er" refX="0" refY="9" markerWidth="18" markerHeight="18" orient="auto"><path d="M9,0 L9,18 M15,0 L15,18"></path></marker></defs><defs><marker id="diagram-fixture_er-onlyOneEnd" class="marker onlyOne er" refX="18" refY="9" markerWidth="18" markerHeight="18" orient="auto"><path d="M3,0 L3,18 M9,0 L9,18"></path></marker></defs><defs><marker id="diagram-fixture_er-zeroOrOneStart" class="marker zeroOrOne er" refX="0" refY="9" markerWidth="30" markerHeight="18" orient="auto"><circle fill="white" cx="21" cy="9" r="6"></circle><path d="M9,0 L9,18"></path></marker></defs><defs><marker id="diagram-fixture_er-zeroOrOneEnd" class="marker zeroOrOne er" refX="30" refY="9" markerWidth="30" markerHeight="18" orient="auto"><circle fill="white" cx="9" cy="9" r="6"></circle><path d="M21,0 L21,18"></path></marker></defs><defs><marker id="diagram-fixture_er-oneOrMoreStart" class="marker oneOrMore er" refX="18" refY="18" markerWidth="45" markerHeight="36" orient="auto"><path d="M0,18 Q 18,0 36,18 Q 18,36 0,18 M42,9 L42,27"></path></marker></defs><defs><marker id="diagram-fixture_er-oneOrMoreEnd" class="marker oneOrMore er" refX="27" refY="18" markerWidth="45" markerHeight="36" orient="auto"><path d="M3,9 L3,27 M9,18 Q27,0 45,18 Q27,36 9,18"></path></marker></defs><defs><marker id="diagram-fixture_er-zeroOrMoreStart" class="marker zeroOrMore er" refX="18" refY="18" markerWidth="57" markerHeight="36" orient="auto"><circle fill="white" cx="48" cy="18" r="6"></circle><path d="M0,18 Q18,0 36,18 Q18,36 0,18"></path></marker></defs><defs><marker id="diagram-fixture_er-zeroOrMoreEnd" class="marker zeroOrMore er" refX="39" refY="18" markerWidth="57" markerHeight="36" orient="auto"><circle fill="white" cx="9" cy="18" r="6"></circle><path d="M21,18 Q39,0 57,18 Q39,36 21,18"></path></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M226.328,92L226.328,100.417C226.328,108.833,226.328,125.667,226.328,142.5C226.328,159.333,226.328,176.167,226.328,184.583L226.328,193" id="diagram-fixture-id_entity-PROJECT-0_entity-PLAN-1_0" class="edge-thickness-normal edge-pattern-solid relationshipLine" style="undefined;;;undefined" data-edge="true" data-et="edge" data-id="id_entity-PROJECT-0_entity-PLAN-1_0" data-points="W3sieCI6MjI2LjMyODEyNSwieSI6OTJ9LHsieCI6MjI2LjMyODEyNSwieSI6MTQyLjV9LHsieCI6MjI2LjMyODEyNSwieSI6MTkzfV0=" data-look="classic" marker-start="url(#diagram-fixture_er-onlyOneStart)" marker-end="url(#diagram-fixture_er-zeroOrMoreEnd)"></path><path d="M176.328,266.801L160.422,276.917C144.516,287.034,112.703,307.267,96.797,325.8C80.891,344.333,80.891,361.167,80.891,369.583L80.891,378" id="diagram-fixture-id_entity-PLAN-1_entity-VERSION-2_1" class="edge-thickness-normal edge-pattern-solid relationshipLine" style="undefined;;;undefined" data-edge="true" data-et="edge" data-id="id_entity-PLAN-1_entity-VERSION-2_1" data-points="W3sieCI6MTc2LjMyODEyNSwieSI6MjY2LjgwMDYwMTYzMzAwMzg1fSx7IngiOjgwLjg5MDYyNSwieSI6MzI3LjV9LHsieCI6ODAuODkwNjI1LCJ5IjozNzh9XQ==" data-look="classic" marker-start="url(#diagram-fixture_er-onlyOneStart)" marker-end="url(#diagram-fixture_er-oneOrMoreEnd)"></path><path d="M276.328,266.801L292.234,276.917C308.141,287.034,339.953,307.267,355.859,329.363C371.766,351.458,371.766,375.417,371.766,387.396L371.766,399.375" id="diagram-fixture-id_entity-PLAN-1_entity-DECISION-3_2" class="edge-thickness-normal edge-pattern-solid relationshipLine" style="undefined;;;undefined" data-edge="true" data-et="edge" data-id="id_entity-PLAN-1_entity-DECISION-3_2" data-points="W3sieCI6Mjc2LjMyODEyNSwieSI6MjY2LjgwMDYwMTYzMzAwMzg1fSx7IngiOjM3MS43NjU2MjUsInkiOjMyNy41fSx7IngiOjM3MS43NjU2MjUsInkiOjM5OS4zNzV9XQ==" data-look="classic" marker-start="url(#diagram-fixture_er-onlyOneStart)" marker-end="url(#diagram-fixture_er-zeroOrMoreEnd)"></path><path d="M371.766,527.625L371.766,539.604C371.766,551.583,371.766,575.542,371.766,595.938C371.766,616.333,371.766,633.167,371.766,641.583L371.766,650" id="diagram-fixture-id_entity-DECISION-3_entity-REVIEWER-4_3" class="edge-thickness-normal edge-pattern-solid relationshipLine" style="undefined;;;undefined" data-edge="true" data-et="edge" data-id="id_entity-DECISION-3_entity-REVIEWER-4_3" data-points="W3sieCI6MzcxLjc2NTYyNSwieSI6NTI3LjYyNX0seyJ4IjozNzEuNzY1NjI1LCJ5Ijo1OTkuNX0seyJ4IjozNzEuNzY1NjI1LCJ5Ijo2NTB9XQ==" data-look="classic" marker-start="url(#diagram-fixture_er-zeroOrMoreStart)" marker-end="url(#diagram-fixture_er-onlyOneEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(226.328125, 142.5)"><g class="label" data-id="id_entity-PROJECT-0_entity-PLAN-1_0" transform="translate(-26.15625, -10.5)"><foreignObject width="52.3125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>contains</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(80.890625, 327.5)"><g class="label" data-id="id_entity-PLAN-1_entity-VERSION-2_1" transform="translate(-37.65625, -10.5)"><foreignObject width="75.3125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>has versions</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(371.765625, 327.5)"><g class="label" data-id="id_entity-PLAN-1_entity-DECISION-3_2" transform="translate(-23.21875, -10.5)"><foreignObject width="46.4375" height="21"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>records</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(371.765625, 599.5)"><g class="label" data-id="id_entity-DECISION-3_entity-REVIEWER-4_3" transform="translate(-26.671875, -10.5)"><foreignObject width="53.34375" height="21"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>made by</p></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="diagram-fixture-entity-PROJECT-0" data-look="classic" transform="translate(226.328125, 50)"><rect class="basic label-container" style="" x="-52.0390625" y="-42" width="104.078125" height="84"></rect><g class="label" style="" transform="translate(-32.0390625, -12)"><rect></rect><foreignObject width="64.078125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>PROJECT</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-entity-PLAN-1" data-look="classic" transform="translate(226.328125, 235)"><rect class="basic label-container" style="" x="-50" y="-42" width="100" height="84"></rect><g class="label" style="" transform="translate(-18.3359375, -12)"><rect></rect><foreignObject width="36.671875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>PLAN</p></span></div></foreignObject></g></g><g class="node default" id="diagram-fixture-entity-VERSION-2" data-look="classic" transform="translate(80.890625, 463.5)"><g class="outer-path" style=""><path d="M-72.890625 -85.5 L72.890625 -85.5 L72.890625 85.5 L-72.890625 85.5" stroke="none" stroke-width="0" fill="#1e293b"></path><path d="M-72.890625 -85.5 C-31.19158587226812 -85.5, 10.507453255463759 -85.5, 72.890625 -85.5 M-72.890625 -85.5 C-29.932922996097844 -85.5, 13.024779007804312 -85.5, 72.890625 -85.5 M72.890625 -85.5 C72.890625 -45.938968777442234, 72.890625 -6.377937554884468, 72.890625 85.5 M72.890625 -85.5 C72.890625 -26.65485551922584, 72.890625 32.19028896154832, 72.890625 85.5 M72.890625 85.5 C25.38370374929982 85.5, -22.12321750140036 85.5, -72.890625 85.5 M72.890625 85.5 C32.54712340250754 85.5, -7.796378194984925 85.5, -72.890625 85.5 M-72.890625 85.5 C-72.890625 39.7032795749758, -72.890625 -6.093440850048395, -72.890625 -85.5 M-72.890625 85.5 C-72.890625 41.02465754685023, -72.890625 -3.450684906299543, -72.890625 -85.5" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g style="" class="row-rect-odd"><path d="M-72.890625 -42.75 L72.890625 -42.75 L72.890625 0 L-72.890625 0" stroke="none" stroke-width="0" fill="hsl(180, 1.5873015873%, 17.3529411765%)"></path><path d="M-72.890625 -42.75 C-38.27068789026768 -42.75, -3.650750780535361 -42.75, 72.890625 -42.75 M-72.890625 -42.75 C-18.137190618638982 -42.75, 36.616243762722036 -42.75, 72.890625 -42.75 M72.890625 -42.75 C72.890625 -34.01812015057392, 72.890625 -25.28624030114785, 72.890625 0 M72.890625 -42.75 C72.890625 -28.614371086978075, 72.890625 -14.47874217395615, 72.890625 0 M72.890625 0 C41.92359130457474 0, 10.956557609149478 0, -72.890625 0 M72.890625 0 C32.66357473426926 0, -7.563475531461478 0, -72.890625 0 M-72.890625 0 C-72.890625 -13.606224281919852, -72.890625 -27.212448563839704, -72.890625 -42.75 M-72.890625 0 C-72.890625 -10.741488153212979, -72.890625 -21.482976306425957, -72.890625 -42.75" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g style="" class="row-rect-even"><path d="M-72.890625 0 L72.890625 0 L72.890625 42.75 L-72.890625 42.75" stroke="none" stroke-width="0" fill="hsl(180, 1.5873015873%, 2.3529411765%)"></path><path d="M-72.890625 0 C-40.654832445779576 0, -8.419039891559152 0, 72.890625 0 M-72.890625 0 C-40.33858613623825 0, -7.786547272476497 0, 72.890625 0 M72.890625 0 C72.890625 16.62683949881599, 72.890625 33.25367899763198, 72.890625 42.75 M72.890625 0 C72.890625 13.205080488825104, 72.890625 26.410160977650207, 72.890625 42.75 M72.890625 42.75 C29.155579900740754 42.75, -14.579465198518491 42.75, -72.890625 42.75 M72.890625 42.75 C22.417276981426724 42.75, -28.056071037146552 42.75, -72.890625 42.75 M-72.890625 42.75 C-72.890625 30.719388996334807, -72.890625 18.688777992669614, -72.890625 0 M-72.890625 42.75 C-72.890625 31.68479179509343, -72.890625 20.61958359018686, -72.890625 0" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g style="" class="row-rect-odd"><path d="M-72.890625 42.75 L72.890625 42.75 L72.890625 85.5 L-72.890625 85.5" stroke="none" stroke-width="0" fill="hsl(180, 1.5873015873%, 17.3529411765%)"></path><path d="M-72.890625 42.75 C-16.4692027075414 42.75, 39.9522195849172 42.75, 72.890625 42.75 M-72.890625 42.75 C-32.84124104126098 42.75, 7.2081429174780425 42.75, 72.890625 42.75 M72.890625 42.75 C72.890625 56.64360929125012, 72.890625 70.53721858250024, 72.890625 85.5 M72.890625 42.75 C72.890625 53.814402268060114, 72.890625 64.87880453612023, 72.890625 85.5 M72.890625 85.5 C29.217575071872048 85.5, -14.455474856255904 85.5, -72.890625 85.5 M72.890625 85.5 C36.17243018621789 85.5, -0.5457646275642247 85.5, -72.890625 85.5 M-72.890625 85.5 C-72.890625 74.46252891637111, -72.890625 63.425057832742226, -72.890625 42.75 M-72.890625 85.5 C-72.890625 76.48405015144486, -72.890625 67.46810030288971, -72.890625 42.75" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="label name" transform="translate(-30.2109375, -76.125)" style=""><foreignObject width="60.421875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 169px; text-align: start;"><span class="nodeLabel"><p>VERSION</p></span></div></foreignObject></g><g class="label attribute-type" transform="translate(-60.390625, -33.375)" style=""><foreignObject width="19.65625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 117px; text-align: start;"><span class="nodeLabel"><p>int</p></span></div></foreignObject></g><g class="label attribute-name" transform="translate(4.984375, -33.375)" style=""><foreignObject width="54.625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 149px; text-align: start;"><span class="nodeLabel"><p>number</p></span></div></foreignObject></g><g class="label attribute-keys" transform="translate(85.390625, -33.375)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-comment" transform="translate(85.390625, -33.375)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-type" transform="translate(-60.390625, 9.375)" style=""><foreignObject width="40.375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 136px; text-align: start;"><span class="nodeLabel"><p>string</p></span></div></foreignObject></g><g class="label attribute-name" transform="translate(4.984375, 9.375)" style=""><foreignObject width="27.96875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 127px; text-align: start;"><span class="nodeLabel"><p>slug</p></span></div></foreignObject></g><g class="label attribute-keys" transform="translate(85.390625, 9.375)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-comment" transform="translate(85.390625, 9.375)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-type" transform="translate(-60.390625, 52.125)" style=""><foreignObject width="40.375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 136px; text-align: start;"><span class="nodeLabel"><p>string</p></span></div></foreignObject></g><g class="label attribute-name" transform="translate(4.984375, 52.125)" style=""><foreignObject width="55.40625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 147px; text-align: start;"><span class="nodeLabel"><p>content</p></span></div></foreignObject></g><g class="label attribute-keys" transform="translate(85.390625, 52.125)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-comment" transform="translate(85.390625, 52.125)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="divider"><path d="M-72.890625 -42.75005 L-72.890625 -42.74995 L72.890625 -42.74995 L72.890625 -42.75005" stroke="none" stroke-width="0" fill="#1e293b" fill-rule="evenodd"></path><path d="M-72.890625 -42.75005 C-72.890625 -42.75002174272777, -72.890625 -42.749993485455526, -72.890625 -42.74995 M-72.890625 -42.75005 C-72.890625 -42.75001783706775, -72.890625 -42.749985674135495, -72.890625 -42.74995 M-72.890625 -42.74995 C-34.022366013053066 -42.74995, 4.845892973893868 -42.74995, 72.890625 -42.74995 M-72.890625 -42.74995 C-20.591522710118902 -42.74995, 31.707579579762196 -42.74995, 72.890625 -42.74995 M72.890625 -42.74995 C72.890625 -42.749985497216535, 72.890625 -42.75002099443308, 72.890625 -42.75005 M72.890625 -42.74995 C72.890625 -42.74997784252223, 72.890625 -42.75000568504445, 72.890625 -42.75005 M72.890625 -42.75005 C15.456857199302327 -42.75005, -41.976910601395346 -42.75005, -72.890625 -42.75005 M72.890625 -42.75005 C43.30054596644275 -42.75005, 13.710466932885495 -42.75005, -72.890625 -42.75005" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="divider"><path d="M-7.515675 -42.75 L-7.515575 -42.75 L-7.515575 85.5 L-7.515675 85.5" stroke="none" stroke-width="0" fill="#1e293b" fill-rule="evenodd"></path><path d="M-7.515675 -42.75 C-7.515644342267052 -42.75, -7.515613684534104 -42.75, -7.515575 -42.75 M-7.515675 -42.75 C-7.515639305911494 -42.75, -7.5156036118229865 -42.75, -7.515575 -42.75 M-7.515575 -42.75 C-7.515575 -16.09510150293497, -7.515575 10.55979699413006, -7.515575 85.5 M-7.515575 -42.75 C-7.515575 5.490324016068513, -7.515575 53.730648032137026, -7.515575 85.5 M-7.515575 85.5 C-7.515606897481298 85.5, -7.515638794962596 85.5, -7.515675 85.5 M-7.515575 85.5 C-7.51561379174649 85.5, -7.5156525834929795 85.5, -7.515675 85.5 M-7.515675 85.5 C-7.515675 47.539279677119545, -7.515675 9.57855935423909, -7.515675 -42.75 M-7.515675 85.5 C-7.515675 55.2852305395179, -7.515675 25.070461079035795, -7.515675 -42.75" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="divider"><path d="M-72.890625 -42.75005 L-72.890625 -42.74995 L72.890625 -42.74995 L72.890625 -42.75005" stroke="none" stroke-width="0" fill="#1e293b" fill-rule="evenodd"></path><path d="M-72.890625 -42.75005 C-72.890625 -42.75002421176145, -72.890625 -42.749998423522904, -72.890625 -42.74995 M-72.890625 -42.75005 C-72.890625 -42.75002379777698, -72.890625 -42.749997595553964, -72.890625 -42.74995 M-72.890625 -42.74995 C-27.16358109563376 -42.74995, 18.56346280873248 -42.74995, 72.890625 -42.74995 M-72.890625 -42.74995 C-37.4216324184804 -42.74995, -1.952639836960799 -42.74995, 72.890625 -42.74995 M72.890625 -42.74995 C72.890625 -42.74997156657421, 72.890625 -42.749993133148415, 72.890625 -42.75005 M72.890625 -42.74995 C72.890625 -42.74997527286764, 72.890625 -42.750000545735276, 72.890625 -42.75005 M72.890625 -42.75005 C21.528367211403392 -42.75005, -29.833890577193216 -42.75005, -72.890625 -42.75005 M72.890625 -42.75005 C38.8572265775548 -42.75005, 4.823828155109595 -42.75005, -72.890625 -42.75005" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g></g><g class="node default" id="diagram-fixture-entity-DECISION-3" data-look="classic" transform="translate(371.765625, 463.5)"><g class="outer-path" style=""><path d="M-77.984375 -64.125 L77.984375 -64.125 L77.984375 64.125 L-77.984375 64.125" stroke="none" stroke-width="0" fill="#1e293b"></path><path d="M-77.984375 -64.125 C-26.441686676870475 -64.125, 25.10100164625905 -64.125, 77.984375 -64.125 M-77.984375 -64.125 C-36.013026039071015 -64.125, 5.95832292185797 -64.125, 77.984375 -64.125 M77.984375 -64.125 C77.984375 -36.93365700197177, 77.984375 -9.742314003943541, 77.984375 64.125 M77.984375 -64.125 C77.984375 -35.50573630275212, 77.984375 -6.886472605504238, 77.984375 64.125 M77.984375 64.125 C26.939657449865543 64.125, -24.105060100268915 64.125, -77.984375 64.125 M77.984375 64.125 C21.47632233667067 64.125, -35.03173032665866 64.125, -77.984375 64.125 M-77.984375 64.125 C-77.984375 33.86890935914768, -77.984375 3.612818718295351, -77.984375 -64.125 M-77.984375 64.125 C-77.984375 25.73262645091161, -77.984375 -12.65974709817678, -77.984375 -64.125" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g style="" class="row-rect-odd"><path d="M-77.984375 -21.375 L77.984375 -21.375 L77.984375 21.375 L-77.984375 21.375" stroke="none" stroke-width="0" fill="hsl(180, 1.5873015873%, 17.3529411765%)"></path><path d="M-77.984375 -21.375 C-22.178074043154687 -21.375, 33.628226913690625 -21.375, 77.984375 -21.375 M-77.984375 -21.375 C-39.05678835150732 -21.375, -0.12920170301464395 -21.375, 77.984375 -21.375 M77.984375 -21.375 C77.984375 -6.383565595464702, 77.984375 8.607868809070595, 77.984375 21.375 M77.984375 -21.375 C77.984375 -8.238974623905227, 77.984375 4.897050752189546, 77.984375 21.375 M77.984375 21.375 C43.18871321038242 21.375, 8.393051420764834 21.375, -77.984375 21.375 M77.984375 21.375 C16.807725186254082 21.375, -44.368924627491836 21.375, -77.984375 21.375 M-77.984375 21.375 C-77.984375 6.122615377215455, -77.984375 -9.12976924556909, -77.984375 -21.375 M-77.984375 21.375 C-77.984375 9.18195689936755, -77.984375 -3.0110862012648987, -77.984375 -21.375" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g style="" class="row-rect-even"><path d="M-77.984375 21.375 L77.984375 21.375 L77.984375 64.125 L-77.984375 64.125" stroke="none" stroke-width="0" fill="hsl(180, 1.5873015873%, 2.3529411765%)"></path><path d="M-77.984375 21.375 C-16.50608227996944 21.375, 44.97221044006112 21.375, 77.984375 21.375 M-77.984375 21.375 C-40.065749439031585 21.375, -2.1471238780631694 21.375, 77.984375 21.375 M77.984375 21.375 C77.984375 36.16524940496147, 77.984375 50.95549880992294, 77.984375 64.125 M77.984375 21.375 C77.984375 34.35832347228967, 77.984375 47.34164694457934, 77.984375 64.125 M77.984375 64.125 C38.78279664257246 64.125, -0.4187817148550863 64.125, -77.984375 64.125 M77.984375 64.125 C15.8092228838102 64.125, -46.3659292323796 64.125, -77.984375 64.125 M-77.984375 64.125 C-77.984375 54.18558226409409, -77.984375 44.246164528188174, -77.984375 21.375 M-77.984375 64.125 C-77.984375 54.40551199644359, -77.984375 44.68602399288719, -77.984375 21.375" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="label name" transform="translate(-32.7734375, -54.75)" style=""><foreignObject width="65.546875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 175px; text-align: start;"><span class="nodeLabel"><p>DECISION</p></span></div></foreignObject></g><g class="label attribute-type" transform="translate(-65.484375, -12)" style=""><foreignObject width="40.375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 136px; text-align: start;"><span class="nodeLabel"><p>string</p></span></div></foreignObject></g><g class="label attribute-name" transform="translate(-0.109375, -12)" style=""><foreignObject width="42.796875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 136px; text-align: start;"><span class="nodeLabel"><p>status</p></span></div></foreignObject></g><g class="label attribute-keys" transform="translate(90.484375, -12)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-comment" transform="translate(90.484375, -12)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-type" transform="translate(-65.484375, 30.75)" style=""><foreignObject width="40.375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 136px; text-align: start;"><span class="nodeLabel"><p>string</p></span></div></foreignObject></g><g class="label attribute-name" transform="translate(-0.109375, 30.75)" style=""><foreignObject width="65.59375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 158px; text-align: start;"><span class="nodeLabel"><p>feedback</p></span></div></foreignObject></g><g class="label attribute-keys" transform="translate(90.484375, 30.75)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="label attribute-comment" transform="translate(90.484375, 30.75)" style=""><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 100px; text-align: start;"><span class="nodeLabel"></span></div></foreignObject></g><g class="divider"><path d="M-77.984375 -21.37505 L-77.984375 -21.37495 L77.984375 -21.37495 L77.984375 -21.37505" stroke="none" stroke-width="0" fill="#1e293b" fill-rule="evenodd"></path><path d="M-77.984375 -21.37505 C-77.984375 -21.375023968205127, -77.984375 -21.37499793641025, -77.984375 -21.37495 M-77.984375 -21.37505 C-77.984375 -21.375024777255092, -77.984375 -21.374999554510183, -77.984375 -21.37495 M-77.984375 -21.37495 C-23.31843869244976 -21.37495, 31.34749761510048 -21.37495, 77.984375 -21.37495 M-77.984375 -21.37495 C-17.564469497856273 -21.37495, 42.855436004287455 -21.37495, 77.984375 -21.37495 M77.984375 -21.37495 C77.984375 -21.374989582015168, 77.984375 -21.37502916403034, 77.984375 -21.37505 M77.984375 -21.37495 C77.984375 -21.374987174971313, 77.984375 -21.375024349942628, 77.984375 -21.37505 M77.984375 -21.37505 C25.090331357841308 -21.37505, -27.803712284317385 -21.37505, -77.984375 -21.37505 M77.984375 -21.37505 C20.250771730473794 -21.37505, -37.48283153905241 -21.37505, -77.984375 -21.37505" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="divider"><path d="M-12.609425 -21.375 L-12.609325 -21.375 L-12.609325 64.125 L-12.609425 64.125" stroke="none" stroke-width="0" fill="#1e293b" fill-rule="evenodd"></path><path d="M-12.609425 -21.375 C-12.609394664233985 -21.375, -12.609364328467972 -21.375, -12.609325 -21.375 M-12.609425 -21.375 C-12.609385845921967 -21.375, -12.609346691843935 -21.375, -12.609325 -21.375 M-12.609325 -21.375 C-12.609325 1.8205229177680877, -12.609325 25.016045835536175, -12.609325 64.125 M-12.609325 -21.375 C-12.609325 9.167263799972076, -12.609325 39.70952759994415, -12.609325 64.125 M-12.609325 64.125 C-12.609353682572165 64.125, -12.609382365144329 64.125, -12.609425 64.125 M-12.609325 64.125 C-12.609353229724968 64.125, -12.609381459449937 64.125, -12.609425 64.125 M-12.609425 64.125 C-12.609425 31.915068630001294, -12.609425 -0.29486273999741286, -12.609425 -21.375 M-12.609425 64.125 C-12.609425 34.27941460383469, -12.609425 4.433829207669376, -12.609425 -21.375" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="divider"><path d="M-77.984375 -21.37505 L-77.984375 -21.37495 L77.984375 -21.37495 L77.984375 -21.37505" stroke="none" stroke-width="0" fill="#1e293b" fill-rule="evenodd"></path><path d="M-77.984375 -21.37505 C-77.984375 -21.37502311832401, -77.984375 -21.374996236648016, -77.984375 -21.37495 M-77.984375 -21.37505 C-77.984375 -21.37501622605815, -77.984375 -21.3749824521163, -77.984375 -21.37495 M-77.984375 -21.37495 C-42.467065382069826 -21.37495, -6.949755764139653 -21.37495, 77.984375 -21.37495 M-77.984375 -21.37495 C-15.732678724244856 -21.37495, 46.51901755151029 -21.37495, 77.984375 -21.37495 M77.984375 -21.37495 C77.984375 -21.374983543772167, 77.984375 -21.375017087544336, 77.984375 -21.37505 M77.984375 -21.37495 C77.984375 -21.374983911313745, 77.984375 -21.375017822627488, 77.984375 -21.37505 M77.984375 -21.37505 C42.223893072482866 -21.37505, 6.4634111449657325 -21.37505, -77.984375 -21.37505 M77.984375 -21.37505 C25.969874895643876 -21.37505, -26.044625208712247 -21.37505, -77.984375 -21.37505" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g></g><g class="node default" id="diagram-fixture-entity-REVIEWER-4" data-look="classic" transform="translate(371.765625, 692)"><rect class="basic label-container" style="" x="-55.9140625" y="-42" width="111.828125" height="84"></rect><g class="label" style="" transform="translate(-35.9140625, -12)"><rect></rect><foreignObject width="71.828125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>REVIEWER</p></span></div></foreignObject></g></g></g></g></g><defs><filter id="diagram-fixture-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><defs><filter id="diagram-fixture-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><linearGradient id="diagram-fixture-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="hsl(180, 0%, 18.3529411765%)" stop-opacity="1"></stop></linearGradient></svg>
\ No newline at end of file
diff --git a/packages/ui/test-setup/fixtures/diagrams/11-sequence-diagram.geometry.json b/packages/ui/test-setup/fixtures/diagrams/11-sequence-diagram.geometry.json
new file mode 100644
index 000000000..fc3ccb80b
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/11-sequence-diagram.geometry.json
@@ -0,0 +1,236 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "-50 -10 899 596",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 899,
+		"height": 596
+	},
+	"svgCtm": {
+		"a": 1,
+		"b": 0,
+		"c": 0,
+		"d": 1,
+		"e": 50,
+		"f": 10
+	},
+	"elements": {
+		"actor3": {
+			"tag": "line",
+			"class": "actor-line 200",
+			"bbox": {
+				"x": 724,
+				"y": 65,
+				"width": 0,
+				"height": 445
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"root-3": {
+			"tag": "g",
+			"class": "",
+			"bbox": {
+				"x": 649,
+				"y": 0,
+				"width": 150,
+				"height": 65
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"actor2": {
+			"tag": "line",
+			"class": "actor-line 200",
+			"bbox": {
+				"x": 475,
+				"y": 65,
+				"width": 0,
+				"height": 445
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"root-2": {
+			"tag": "g",
+			"class": "",
+			"bbox": {
+				"x": 400,
+				"y": 0,
+				"width": 150,
+				"height": 65
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"actor1": {
+			"tag": "line",
+			"class": "actor-line 200",
+			"bbox": {
+				"x": 275,
+				"y": 65,
+				"width": 0,
+				"height": 445
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"root-1": {
+			"tag": "g",
+			"class": "",
+			"bbox": {
+				"x": 200,
+				"y": 0,
+				"width": 150,
+				"height": 65
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"actor0": {
+			"tag": "line",
+			"class": "actor-line 200",
+			"bbox": {
+				"x": 75,
+				"y": 65,
+				"width": 0,
+				"height": 445
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"root-0": {
+			"tag": "g",
+			"class": "",
+			"bbox": {
+				"x": 0,
+				"y": 0,
+				"width": 150,
+				"height": 65
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"diagram-fixture-computer": {
+			"tag": "symbol",
+			"class": "",
+			"bbox": {
+				"x": 0,
+				"y": 1,
+				"width": 12,
+				"height": 10
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"diagram-fixture-database": {
+			"tag": "symbol",
+			"class": "",
+			"bbox": {
+				"x": 1.0000001192092896,
+				"y": 3.2136449590325356e-7,
+				"width": 10.000000953674316,
+				"height": 12
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		},
+		"diagram-fixture-clock": {
+			"tag": "symbol",
+			"class": "",
+			"bbox": {
+				"x": 0,
+				"y": 0,
+				"width": 12,
+				"height": 12
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 50,
+				"f": 10
+			},
+			"label": ""
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/11-sequence-diagram.svg b/packages/ui/test-setup/fixtures/diagrams/11-sequence-diagram.svg
new file mode 100644
index 000000000..ca586321c
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/11-sequence-diagram.svg
@@ -0,0 +1 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 899px;" viewBox="-50 -10 899 596" role="graphics-document document" aria-roledescription="sequence"><g><rect x="649" y="510" fill="#eaeaea" stroke="#666" width="150" height="65" name="B" rx="3" ry="3" class="actor actor-bottom"></rect><text x="724" y="542.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="724" dy="0">Browser</tspan></text></g><g><rect x="400" y="510" fill="#eaeaea" stroke="#666" width="150" height="65" name="S" rx="3" ry="3" class="actor actor-bottom"></rect><text x="475" y="542.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="475" dy="0">Bun server</tspan></text></g><g><rect x="200" y="510" fill="#eaeaea" stroke="#666" width="150" height="65" name="H" rx="3" ry="3" class="actor actor-bottom"></rect><text x="275" y="542.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="275" dy="0">Hook</tspan></text></g><g><rect x="0" y="510" fill="#eaeaea" stroke="#666" width="150" height="65" name="CC" rx="3" ry="3" class="actor actor-bottom"></rect><text x="75" y="542.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="75" dy="0">Claude Code</tspan></text></g><g><line id="actor3" x1="724" y1="65" x2="724" y2="510" class="actor-line 200" stroke-width="0.5px" stroke="#999" name="B" data-et="life-line" data-id="B"></line><g id="root-3" data-et="participant" data-type="participant" data-id="B"><rect x="649" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" name="B" rx="3" ry="3" class="actor actor-top"></rect><text x="724" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="724" dy="0">Browser</tspan></text></g></g><g><line id="actor2" x1="475" y1="65" x2="475" y2="510" class="actor-line 200" stroke-width="0.5px" stroke="#999" name="S" data-et="life-line" data-id="S"></line><g id="root-2" data-et="participant" data-type="participant" data-id="S"><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" name="S" rx="3" ry="3" class="actor actor-top"></rect><text x="475" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="475" dy="0">Bun server</tspan></text></g></g><g><line id="actor1" x1="275" y1="65" x2="275" y2="510" class="actor-line 200" stroke-width="0.5px" stroke="#999" name="H" data-et="life-line" data-id="H"></line><g id="root-1" data-et="participant" data-type="participant" data-id="H"><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" name="H" rx="3" ry="3" class="actor actor-top"></rect><text x="275" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="275" dy="0">Hook</tspan></text></g></g><g><line id="actor0" x1="75" y1="65" x2="75" y2="510" class="actor-line 200" stroke-width="0.5px" stroke="#999" name="CC" data-et="life-line" data-id="CC"></line><g id="root-0" data-et="participant" data-type="participant" data-id="CC"><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" name="CC" rx="3" ry="3" class="actor actor-top"></rect><text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor actor-box" style="text-anchor: middle; font-size: 16px; font-weight: 400;"><tspan x="75" dy="0">Claude Code</tspan></text></g></g><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture .actor{stroke:#ccc;fill:#1e293b;stroke-width:1;}#diagram-fixture rect.actor.outer-path[data-look="neo"]{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture rect.note[data-look="neo"]{stroke:hsl(180, 0%, 18.3529411765%);fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture text.actor&gt;tspan{fill:lightgrey;stroke:none;}#diagram-fixture .actor-line{stroke:#ccc;}#diagram-fixture .innerArc{stroke-width:1.5;stroke-dasharray:none;}#diagram-fixture .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:lightgrey;}#diagram-fixture .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:lightgrey;}#diagram-fixture [id$="-arrowhead"] path{fill:lightgrey;stroke:lightgrey;}#diagram-fixture .sequenceNumber{fill:black;}#diagram-fixture [id$="-sequencenumber"]{fill:lightgrey;}#diagram-fixture [id$="-crosshead"] path{fill:lightgrey;stroke:lightgrey;}#diagram-fixture .messageText{fill:lightgrey;stroke:none;}#diagram-fixture .labelBox{stroke:#ccc;fill:#1e293b;filter:none;}#diagram-fixture .labelText,#diagram-fixture .labelText&gt;tspan{fill:lightgrey;stroke:none;}#diagram-fixture .loopText,#diagram-fixture .loopText&gt;tspan{fill:lightgrey;stroke:none;}#diagram-fixture .sectionTitle,#diagram-fixture .sectionTitle&gt;tspan{fill:lightgrey;stroke:none;}#diagram-fixture .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:#ccc;fill:#ccc;}#diagram-fixture .note{stroke:hsl(180, 0%, 18.3529411765%);fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);}#diagram-fixture .noteText,#diagram-fixture .noteText&gt;tspan{fill:rgb(183.8476190475, 181.5523809523, 181.5523809523);stroke:none;font-weight:normal;}#diagram-fixture .activation0{fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);stroke:#ccc;}#diagram-fixture .activation1{fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);stroke:#ccc;}#diagram-fixture .activation2{fill:hsl(217.2413793103, 32.5842696629%, 33.4509803922%);stroke:#ccc;}#diagram-fixture .actorPopupMenu{position:absolute;}#diagram-fixture .actorPopupMenuPanel{position:absolute;fill:#1e293b;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#diagram-fixture .actor-man circle,#diagram-fixture line{fill:#1e293b;stroke-width:2px;}#diagram-fixture g rect.rect{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));stroke:#475569;}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><defs><symbol id="diagram-fixture-computer" width="24" height="24"><path transform="scale(.5)" d="M2 2v13h20v-13h-20zm18 11h-16v-9h16v9zm-10.228 6l.466-1h3.524l.467 1h-4.457zm14.228 3h-24l2-6h2.104l-1.33 4h18.45l-1.297-4h2.073l2 6zm-5-10h-14v-7h14v7z"></path></symbol></defs><defs><symbol id="diagram-fixture-database" fill-rule="evenodd" clip-rule="evenodd"><path transform="scale(.5)" d="M12.258.001l.256.004.255.005.253.008.251.01.249.012.247.015.246.016.242.019.241.02.239.023.236.024.233.027.231.028.229.031.225.032.223.034.22.036.217.038.214.04.211.041.208.043.205.045.201.046.198.048.194.05.191.051.187.053.183.054.18.056.175.057.172.059.168.06.163.061.16.063.155.064.15.066.074.033.073.033.071.034.07.034.069.035.068.035.067.035.066.035.064.036.064.036.062.036.06.036.06.037.058.037.058.037.055.038.055.038.053.038.052.038.051.039.05.039.048.039.047.039.045.04.044.04.043.04.041.04.04.041.039.041.037.041.036.041.034.041.033.042.032.042.03.042.029.042.027.042.026.043.024.043.023.043.021.043.02.043.018.044.017.043.015.044.013.044.012.044.011.045.009.044.007.045.006.045.004.045.002.045.001.045v17l-.001.045-.002.045-.004.045-.006.045-.007.045-.009.044-.011.045-.012.044-.013.044-.015.044-.017.043-.018.044-.02.043-.021.043-.023.043-.024.043-.026.043-.027.042-.029.042-.03.042-.032.042-.033.042-.034.041-.036.041-.037.041-.039.041-.04.041-.041.04-.043.04-.044.04-.045.04-.047.039-.048.039-.05.039-.051.039-.052.038-.053.038-.055.038-.055.038-.058.037-.058.037-.06.037-.06.036-.062.036-.064.036-.064.036-.066.035-.067.035-.068.035-.069.035-.07.034-.071.034-.073.033-.074.033-.15.066-.155.064-.16.063-.163.061-.168.06-.172.059-.175.057-.18.056-.183.054-.187.053-.191.051-.194.05-.198.048-.201.046-.205.045-.208.043-.211.041-.214.04-.217.038-.22.036-.223.034-.225.032-.229.031-.231.028-.233.027-.236.024-.239.023-.241.02-.242.019-.246.016-.247.015-.249.012-.251.01-.253.008-.255.005-.256.004-.258.001-.258-.001-.256-.004-.255-.005-.253-.008-.251-.01-.249-.012-.247-.015-.245-.016-.243-.019-.241-.02-.238-.023-.236-.024-.234-.027-.231-.028-.228-.031-.226-.032-.223-.034-.22-.036-.217-.038-.214-.04-.211-.041-.208-.043-.204-.045-.201-.046-.198-.048-.195-.05-.19-.051-.187-.053-.184-.054-.179-.056-.176-.057-.172-.059-.167-.06-.164-.061-.159-.063-.155-.064-.151-.066-.074-.033-.072-.033-.072-.034-.07-.034-.069-.035-.068-.035-.067-.035-.066-.035-.064-.036-.063-.036-.062-.036-.061-.036-.06-.037-.058-.037-.057-.037-.056-.038-.055-.038-.053-.038-.052-.038-.051-.039-.049-.039-.049-.039-.046-.039-.046-.04-.044-.04-.043-.04-.041-.04-.04-.041-.039-.041-.037-.041-.036-.041-.034-.041-.033-.042-.032-.042-.03-.042-.029-.042-.027-.042-.026-.043-.024-.043-.023-.043-.021-.043-.02-.043-.018-.044-.017-.043-.015-.044-.013-.044-.012-.044-.011-.045-.009-.044-.007-.045-.006-.045-.004-.045-.002-.045-.001-.045v-17l.001-.045.002-.045.004-.045.006-.045.007-.045.009-.044.011-.045.012-.044.013-.044.015-.044.017-.043.018-.044.02-.043.021-.043.023-.043.024-.043.026-.043.027-.042.029-.042.03-.042.032-.042.033-.042.034-.041.036-.041.037-.041.039-.041.04-.041.041-.04.043-.04.044-.04.046-.04.046-.039.049-.039.049-.039.051-.039.052-.038.053-.038.055-.038.056-.038.057-.037.058-.037.06-.037.061-.036.062-.036.063-.036.064-.036.066-.035.067-.035.068-.035.069-.035.07-.034.072-.034.072-.033.074-.033.151-.066.155-.064.159-.063.164-.061.167-.06.172-.059.176-.057.179-.056.184-.054.187-.053.19-.051.195-.05.198-.048.201-.046.204-.045.208-.043.211-.041.214-.04.217-.038.22-.036.223-.034.226-.032.228-.031.231-.028.234-.027.236-.024.238-.023.241-.02.243-.019.245-.016.247-.015.249-.012.251-.01.253-.008.255-.005.256-.004.258-.001.258.001zm-9.258 20.499v.01l.001.021.003.021.004.022.005.021.006.022.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.023.018.024.019.024.021.024.022.025.023.024.024.025.052.049.056.05.061.051.066.051.07.051.075.051.079.052.084.052.088.052.092.052.097.052.102.051.105.052.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.048.144.049.147.047.152.047.155.047.16.045.163.045.167.043.171.043.176.041.178.041.183.039.187.039.19.037.194.035.197.035.202.033.204.031.209.03.212.029.216.027.219.025.222.024.226.021.23.02.233.018.236.016.24.015.243.012.246.01.249.008.253.005.256.004.259.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.021.224-.024.22-.026.216-.027.212-.028.21-.031.205-.031.202-.034.198-.034.194-.036.191-.037.187-.039.183-.04.179-.04.175-.042.172-.043.168-.044.163-.045.16-.046.155-.046.152-.047.148-.048.143-.049.139-.049.136-.05.131-.05.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.053.083-.051.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.05.023-.024.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.023.01-.022.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.127l-.077.055-.08.053-.083.054-.085.053-.087.052-.09.052-.093.051-.095.05-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.045-.118.044-.12.043-.122.042-.124.042-.126.041-.128.04-.13.04-.132.038-.134.038-.135.037-.138.037-.139.035-.142.035-.143.034-.144.033-.147.032-.148.031-.15.03-.151.03-.153.029-.154.027-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.01-.179.008-.179.008-.181.006-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.006-.179-.008-.179-.008-.178-.01-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.027-.153-.029-.151-.03-.15-.03-.148-.031-.146-.032-.145-.033-.143-.034-.141-.035-.14-.035-.137-.037-.136-.037-.134-.038-.132-.038-.13-.04-.128-.04-.126-.041-.124-.042-.122-.042-.12-.044-.117-.043-.116-.045-.113-.045-.112-.046-.109-.047-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.05-.093-.052-.09-.051-.087-.052-.085-.053-.083-.054-.08-.054-.077-.054v4.127zm0-5.654v.011l.001.021.003.021.004.021.005.022.006.022.007.022.009.022.01.022.011.023.012.023.013.023.015.024.016.023.017.024.018.024.019.024.021.024.022.024.023.025.024.024.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.052.11.051.114.051.119.052.123.05.127.051.131.05.135.049.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.044.171.042.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.022.23.02.233.018.236.016.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.012.241-.015.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.048.139-.05.136-.049.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.051.051-.049.023-.025.023-.024.021-.025.02-.024.019-.024.018-.024.017-.024.015-.023.014-.023.013-.024.012-.022.01-.023.01-.023.008-.022.006-.022.006-.022.004-.021.004-.022.001-.021.001-.021v-4.139l-.077.054-.08.054-.083.054-.085.052-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.044-.118.044-.12.044-.122.042-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.035-.143.033-.144.033-.147.033-.148.031-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.009-.179.009-.179.007-.181.007-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.007-.179-.007-.179-.009-.178-.009-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.031-.146-.033-.145-.033-.143-.033-.141-.035-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.04-.126-.041-.124-.042-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.051-.093-.051-.09-.051-.087-.053-.085-.052-.083-.054-.08-.054-.077-.054v4.139zm0-5.666v.011l.001.02.003.022.004.021.005.022.006.021.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.024.018.023.019.024.021.025.022.024.023.024.024.025.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.051.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.043.171.043.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.021.23.02.233.018.236.017.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.013.241-.014.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.049.139-.049.136-.049.131-.051.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.049.023-.025.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.022.01-.023.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.153l-.077.054-.08.054-.083.053-.085.053-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.048-.105.048-.106.048-.109.046-.111.046-.114.046-.115.044-.118.044-.12.043-.122.043-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.034-.143.034-.144.033-.147.032-.148.032-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.024-.161.024-.162.023-.163.023-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.01-.178.01-.179.009-.179.007-.181.006-.182.006-.182.004-.184.003-.184.001-.185.001-.185-.001-.184-.001-.184-.003-.182-.004-.182-.006-.181-.006-.179-.007-.179-.009-.178-.01-.176-.01-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.023-.162-.023-.161-.024-.159-.024-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.032-.146-.032-.145-.033-.143-.034-.141-.034-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.041-.126-.041-.124-.041-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.048-.105-.048-.102-.048-.1-.05-.097-.049-.095-.051-.093-.051-.09-.052-.087-.052-.085-.053-.083-.053-.08-.054-.077-.054v4.153zm8.74-8.179l-.257.004-.254.005-.25.008-.247.011-.244.012-.241.014-.237.016-.233.018-.231.021-.226.022-.224.023-.22.026-.216.027-.212.028-.21.031-.205.032-.202.033-.198.034-.194.036-.191.038-.187.038-.183.04-.179.041-.175.042-.172.043-.168.043-.163.045-.16.046-.155.046-.152.048-.148.048-.143.048-.139.049-.136.05-.131.05-.126.051-.123.051-.118.051-.114.052-.11.052-.106.052-.101.052-.096.052-.092.052-.088.052-.083.052-.079.052-.074.051-.07.052-.065.051-.06.05-.056.05-.051.05-.023.025-.023.024-.021.024-.02.025-.019.024-.018.024-.017.023-.015.024-.014.023-.013.023-.012.023-.01.023-.01.022-.008.022-.006.023-.006.021-.004.022-.004.021-.001.021-.001.021.001.021.001.021.004.021.004.022.006.021.006.023.008.022.01.022.01.023.012.023.013.023.014.023.015.024.017.023.018.024.019.024.02.025.021.024.023.024.023.025.051.05.056.05.06.05.065.051.07.052.074.051.079.052.083.052.088.052.092.052.096.052.101.052.106.052.11.052.114.052.118.051.123.051.126.051.131.05.136.05.139.049.143.048.148.048.152.048.155.046.16.046.163.045.168.043.172.043.175.042.179.041.183.04.187.038.191.038.194.036.198.034.202.033.205.032.21.031.212.028.216.027.22.026.224.023.226.022.231.021.233.018.237.016.241.014.244.012.247.011.25.008.254.005.257.004.26.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.022.224-.023.22-.026.216-.027.212-.028.21-.031.205-.032.202-.033.198-.034.194-.036.191-.038.187-.038.183-.04.179-.041.175-.042.172-.043.168-.043.163-.045.16-.046.155-.046.152-.048.148-.048.143-.048.139-.049.136-.05.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.05.051-.05.023-.025.023-.024.021-.024.02-.025.019-.024.018-.024.017-.023.015-.024.014-.023.013-.023.012-.023.01-.023.01-.022.008-.022.006-.023.006-.021.004-.022.004-.021.001-.021.001-.021-.001-.021-.001-.021-.004-.021-.004-.022-.006-.021-.006-.023-.008-.022-.01-.022-.01-.023-.012-.023-.013-.023-.014-.023-.015-.024-.017-.023-.018-.024-.019-.024-.02-.025-.021-.024-.023-.024-.023-.025-.051-.05-.056-.05-.06-.05-.065-.051-.07-.052-.074-.051-.079-.052-.083-.052-.088-.052-.092-.052-.096-.052-.101-.052-.106-.052-.11-.052-.114-.052-.118-.051-.123-.051-.126-.051-.131-.05-.136-.05-.139-.049-.143-.048-.148-.048-.152-.048-.155-.046-.16-.046-.163-.045-.168-.043-.172-.043-.175-.042-.179-.041-.183-.04-.187-.038-.191-.038-.194-.036-.198-.034-.202-.033-.205-.032-.21-.031-.212-.028-.216-.027-.22-.026-.224-.023-.226-.022-.231-.021-.233-.018-.237-.016-.241-.014-.244-.012-.247-.011-.25-.008-.254-.005-.257-.004-.26-.001-.26.001z"></path></symbol></defs><defs><symbol id="diagram-fixture-clock" width="24" height="24"><path transform="scale(.5)" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.848 12.459c.202.038.202.333.001.372-1.907.361-6.045 1.111-6.547 1.111-.719 0-1.301-.582-1.301-1.301 0-.512.77-5.447 1.125-7.445.034-.192.312-.181.343.014l.985 6.238 5.394 1.011z"></path></symbol></defs><defs><marker id="diagram-fixture-arrowhead" refX="7.9" refY="5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M -1 0 L 10 5 L 0 10 z"></path></marker></defs><defs><marker id="diagram-fixture-crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="4" refY="4.5"><path fill="none" stroke="#000000" stroke-width="1pt" d="M 1,2 L 6,7 M 6,2 L 1,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><defs><marker id="diagram-fixture-filled-head" refX="15.5" refY="7" markerWidth="20" markerHeight="28" orient="auto"><path d="M 18,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><defs><marker id="diagram-fixture-sequencenumber" refX="15" refY="15" markerWidth="60" markerHeight="40" orient="auto"><circle cx="15" cy="15" r="6"></circle></marker></defs><defs><marker id="diagram-fixture-solidTopArrowHead" refX="7.9" refY="7.25" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M 0 0 L 10 8 L 0 8 z"></path></marker></defs><defs><marker id="diagram-fixture-solidBottomArrowHead" refX="7.9" refY="0.75" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M 0 0 L 10 0 L 0 8 z"></path></marker></defs><defs><marker id="diagram-fixture-stickTopArrowHead" refX="7.5" refY="7" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M 0 0 L 7 7" stroke="black" stroke-width="1.5" fill="none"></path></marker></defs><defs><marker id="diagram-fixture-stickBottomArrowHead" refX="7.5" refY="0" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M 0 7 L 7 0" stroke="black" stroke-width="1.5" fill="none"></path></marker></defs><g><rect x="719" y="203" fill="#EDF2AE" stroke="#666" width="10" height="46" class="activation0"></rect></g><g data-et="note" data-id="i7"><rect x="450" y="259" fill="#EDF2AE" stroke="#666" width="299" height="39" class="note"></rect><text x="600" y="264" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-size: 16px; font-weight: 400;"><tspan x="600">server stops on decision</tspan></text></g><g data-et="control-structure" data-id="i12"><line x1="64" y1="308" x2="486" y2="308" class="loopLine"></line><line x1="486" y1="308" x2="486" y2="490" class="loopLine"></line><line x1="64" y1="490" x2="486" y2="490" class="loopLine"></line><line x1="64" y1="308" x2="64" y2="490" class="loopLine"></line><line x1="64" y1="404" x2="486" y2="404" class="loopLine" style="stroke-dasharray: 3, 3;"></line><polygon points="64,308 114,308 114,321 105.6,328 64,328" class="labelBox"></polygon><text x="89" y="321" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="labelText" style="font-size: 16px; font-weight: 400;">alt</text><text x="300" y="326" text-anchor="middle" class="loopText" style="font-size: 16px; font-weight: 400;"><tspan x="300">[approved]</tspan></text><text x="275" y="422" text-anchor="middle" class="sectionTitle" style="font-size: 16px; font-weight: 400;">[denied]</text></g><text x="174" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-size: 16px; font-weight: 400;">ExitPlanMode</text><line x1="82" y1="111" x2="271" y2="111" class="messageLine0" data-et="message" data-id="i1" data-from="CC" data-to="H" stroke-width="2" stroke="none" marker-end="url(#diagram-fixture-arrowhead)" style="fill: none;"></line><line x1="75" y1="111" x2="75" y2="111" stroke-width="0" marker-start="url(#diagram-fixture-sequencenumber)"></line><text x="75" y="115" font-family="sans-serif" font-size="12px" text-anchor="middle" class="sequenceNumber">1</text><text x="374" y="126" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-size: 16px; font-weight: 400;">plan JSON on stdin</text><line x1="282" y1="157" x2="471" y2="157" class="messageLine0" data-et="message" data-id="i2" data-from="H" data-to="S" stroke-width="2" stroke="none" marker-end="url(#diagram-fixture-arrowhead)" style="fill: none;"></line><line x1="275" y1="157" x2="275" y2="157" stroke-width="0" marker-start="url(#diagram-fixture-sequencenumber)"></line><text x="275" y="161" font-family="sans-serif" font-size="12px" text-anchor="middle" class="sequenceNumber">2</text><text x="598" y="172" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-size: 16px; font-weight: 400;">open review UI</text><line x1="482" y1="203" x2="720" y2="203" class="messageLine0" data-et="message" data-id="i3" data-from="S" data-to="B" stroke-width="2" stroke="none" marker-end="url(#diagram-fixture-arrowhead)" style="fill: none;"></line><line x1="475" y1="203" x2="475" y2="203" stroke-width="0" marker-start="url(#diagram-fixture-sequencenumber)"></line><text x="475" y="207" font-family="sans-serif" font-size="12px" text-anchor="middle" class="sequenceNumber">3</text><text x="599" y="218" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-size: 16px; font-weight: 400;">POST /api/deny {feedback}</text><line x1="725" y1="249" x2="479" y2="249" class="messageLine1" data-et="message" data-id="i5" data-from="B" data-to="S" stroke-width="2" stroke="none" marker-end="url(#diagram-fixture-arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line><line x1="728" y1="249" x2="728" y2="249" stroke-width="0" marker-start="url(#diagram-fixture-sequencenumber)"></line><text x="728" y="253" font-family="sans-serif" font-size="12px" text-anchor="middle" class="sequenceNumber">4</text><text x="277" y="358" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-size: 16px; font-weight: 400;">{"behavior":"allow"}</text><line x1="480" y1="389" x2="79" y2="389" class="messageLine1" data-et="message" data-id="i9" data-from="S" data-to="CC" stroke-width="2" stroke="none" marker-end="url(#diagram-fixture-arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line><line x1="475" y1="389" x2="475" y2="389" stroke-width="0" marker-start="url(#diagram-fixture-sequencenumber)"></line><text x="475" y="393" font-family="sans-serif" font-size="12px" text-anchor="middle" class="sequenceNumber">5</text><text x="277" y="449" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-size: 16px; font-weight: 400;">{"behavior":"deny"}</text><line x1="480" y1="480" x2="79" y2="480" class="messageLine1" data-et="message" data-id="i11" data-from="S" data-to="CC" stroke-width="2" stroke="none" marker-end="url(#diagram-fixture-arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line><line x1="475" y1="480" x2="475" y2="480" stroke-width="0" marker-start="url(#diagram-fixture-sequencenumber)"></line><text x="475" y="484" font-family="sans-serif" font-size="12px" text-anchor="middle" class="sequenceNumber">6</text></svg>
\ No newline at end of file
diff --git a/packages/ui/test-setup/fixtures/diagrams/15-requirement-diagram.geometry.json b/packages/ui/test-setup/fixtures/diagrams/15-requirement-diagram.geometry.json
new file mode 100644
index 000000000..2f66e9a90
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/15-requirement-diagram.geometry.json
@@ -0,0 +1,122 @@
+{
+	"mermaid": "11.17.2",
+	"renderId": "diagram-fixture",
+	"viewBox": "0 0 386.78125 644",
+	"hostRect": {
+		"x": 0,
+		"y": 0,
+		"width": 960,
+		"height": 640
+	},
+	"svgRect": {
+		"x": 0,
+		"y": 0,
+		"width": 386.78125,
+		"height": 644
+	},
+	"svgCtm": {
+		"a": 1,
+		"b": 0,
+		"c": 0,
+		"d": 1,
+		"e": 0,
+		"f": 0
+	},
+	"elements": {
+		"diagram-fixture-strict_gate-result_file-0": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-solid relationshipLine",
+			"bbox": {
+				"x": 193.39100646972656,
+				"y": 378,
+				"width": 0,
+				"height": 74
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-cli-strict_gate-1": {
+			"tag": "path",
+			"class": "edge-thickness-normal edge-pattern-dashed relationshipLine",
+			"bbox": {
+				"x": 193.39100646972656,
+				"y": 120,
+				"width": 0,
+				"height": 74
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 0,
+				"f": 0
+			},
+			"label": ""
+		},
+		"diagram-fixture-strict_gate": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -185.390625,
+				"y": -92,
+				"width": 370.78125,
+				"height": 184
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 193.390625,
+				"f": 286
+			},
+			"label": "<<Requirement>>"
+		},
+		"diagram-fixture-result_file": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -140.8984375,
+				"y": -92,
+				"width": 281.796875,
+				"height": 184
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 193.390625,
+				"f": 544
+			},
+			"label": "<<Functional Requirement>>"
+		},
+		"diagram-fixture-cli": {
+			"tag": "g",
+			"class": "node default",
+			"bbox": {
+				"x": -56.3359375,
+				"y": -56,
+				"width": 112.671875,
+				"height": 112
+			},
+			"ctm": {
+				"a": 1,
+				"b": 0,
+				"c": 0,
+				"d": 1,
+				"e": 193.390625,
+				"f": 64
+			},
+			"label": "<<Element>>"
+		}
+	}
+}
diff --git a/packages/ui/test-setup/fixtures/diagrams/15-requirement-diagram.svg b/packages/ui/test-setup/fixtures/diagrams/15-requirement-diagram.svg
new file mode 100644
index 000000000..6cce37ab9
--- /dev/null
+++ b/packages/ui/test-setup/fixtures/diagrams/15-requirement-diagram.svg
@@ -0,0 +1,4 @@
+<svg id="diagram-fixture" width="100%" xmlns="http://www.w3.org/2000/svg" class="requirementDiagram" style="max-width: 386.78125px;" viewBox="0 0 386.78125 644" role="graphics-document document" aria-roledescription="requirement"><style>#diagram-fixture{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#diagram-fixture .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#diagram-fixture .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#diagram-fixture .error-icon{fill:#a44141;}#diagram-fixture .error-text{fill:#ddd;stroke:#ddd;}#diagram-fixture .edge-thickness-normal{stroke-width:1px;}#diagram-fixture .edge-thickness-thick{stroke-width:3.5px;}#diagram-fixture .edge-pattern-solid{stroke-dasharray:0;}#diagram-fixture .edge-thickness-invisible{stroke-width:0;fill:none;}#diagram-fixture .edge-pattern-dashed{stroke-dasharray:3;}#diagram-fixture .edge-pattern-dotted{stroke-dasharray:2;}#diagram-fixture .marker{fill:#64748b;stroke:#64748b;}#diagram-fixture .marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture p{margin:0;}#diagram-fixture marker{fill:lightgrey;stroke:lightgrey;}#diagram-fixture marker.cross{stroke:#64748b;}#diagram-fixture svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#diagram-fixture .reqBox{fill:#3b82f6;fill-opacity:1.0;stroke:#475569;stroke-width:1;}#diagram-fixture .reqTitle,#diagram-fixture .reqLabel{fill:#f8fafc;}#diagram-fixture .reqLabelBox{fill:#1e293b;fill-opacity:1.0;}#diagram-fixture .req-title-line{stroke:#475569;stroke-width:1;}#diagram-fixture .relationshipLine{stroke:lightgrey;stroke-width:1px;}#diagram-fixture .relationshipLabel{fill:lightgrey;}#diagram-fixture .edgeLabel{background-color:#1e293b;}#diagram-fixture .edgeLabel .label rect{fill:#1e293b;}#diagram-fixture .edgeLabel .label text{fill:lightgrey;}#diagram-fixture .divider{stroke:#475569;stroke-width:1;}#diagram-fixture .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#diagram-fixture .label text,#diagram-fixture span{fill:#ccc;color:#ccc;}#diagram-fixture .labelBkg{background-color:#1e293b;}#diagram-fixture .node .neo-node{stroke:#475569;}#diagram-fixture [data-look="neo"].node rect,#diagram-fixture [data-look="neo"].cluster rect,#diagram-fixture [data-look="neo"].node polygon{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].swimlane.cluster rect{filter:none;}#diagram-fixture [data-look="neo"].node path{stroke:url(#diagram-fixture-gradient);stroke-width:1px;}#diagram-fixture [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node .neo-line path{stroke:#475569;filter:none;}#diagram-fixture [data-look="neo"].node circle{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].node circle .state-start{fill:#000000;}#diagram-fixture [data-look="neo"].icon-shape .icon{fill:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture [data-look="neo"].icon-shape .icon-neo path{stroke:url(#diagram-fixture-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#diagram-fixture :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker id="diagram-fixture_requirement-requirement_containsStart" refX="0" refY="10" markerWidth="20" markerHeight="20" orient="auto"><g><circle cx="10" cy="10" r="9" fill="none"></circle><line x1="1" x2="19" y1="10" y2="10"></line><line y1="1" y2="19" x1="10" x2="10"></line></g></marker></defs><defs><marker id="diagram-fixture_requirement-requirement_arrowEnd" refX="20" refY="10" markerWidth="20" markerHeight="20" orient="auto"><path d="M0,0
+      L20,10
+      M20,10
+      L0,20"></path></marker></defs><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M193.391,378L193.391,384.167C193.391,390.333,193.391,402.667,193.391,415C193.391,427.333,193.391,439.667,193.391,445.833L193.391,452" id="diagram-fixture-strict_gate-result_file-0" class="edge-thickness-normal edge-pattern-solid relationshipLine" style="fill:none;;;;fill:none;" data-edge="true" data-et="edge" data-id="strict_gate-result_file-0" data-points="W3sieCI6MTkzLjM5MDYyNSwieSI6Mzc4fSx7IngiOjE5My4zOTA2MjUsInkiOjQxNX0seyJ4IjoxOTMuMzkwNjI1LCJ5Ijo0NTJ9XQ==" data-look="classic" marker-start="url(#diagram-fixture_requirement-requirement_containsStart)"></path><path d="M193.391,120L193.391,126.167C193.391,132.333,193.391,144.667,193.391,157C193.391,169.333,193.391,181.667,193.391,187.833L193.391,194" id="diagram-fixture-cli-strict_gate-1" class="edge-thickness-normal edge-pattern-dashed relationshipLine" style="fill:none;stroke-dasharray: 10,7;;;fill:none;stroke-dasharray: 10,7" data-edge="true" data-et="edge" data-id="cli-strict_gate-1" data-points="W3sieCI6MTkzLjM5MDYyNSwieSI6MTIwfSx7IngiOjE5My4zOTA2MjUsInkiOjE1N30seyJ4IjoxOTMuMzkwNjI1LCJ5IjoxOTR9XQ==" data-look="classic" marker-end="url(#diagram-fixture_requirement-requirement_arrowEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(193.390625, 415)"><g class="label" data-id="strict_gate-result_file-0" transform="translate(-46.671875, -12)"><foreignObject width="93.34375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>&lt;&lt;contains&gt;&gt;</p></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(193.390625, 157)"><g class="label" data-id="cli-strict_gate-1" transform="translate(-45.7578125, -12)"><foreignObject width="91.515625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"><p>&lt;&lt;satisfies&gt;&gt;</p></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="diagram-fixture-strict_gate" data-look="classic" transform="translate(193.390625, 286)"><g class="basic label-container outer-path" style=""><path d="M-185.390625 -92 L185.390625 -92 L185.390625 92 L-185.390625 92" stroke="none" stroke-width="0" fill="#1e293b"></path><path d="M-185.390625 -92 C-97.8080984683868 -92, -10.225571936773605 -92, 185.390625 -92 M-185.390625 -92 C-83.46734581978062 -92, 18.455933360438763 -92, 185.390625 -92 M185.390625 -92 C185.390625 -30.846420888417754, 185.390625 30.307158223164492, 185.390625 92 M185.390625 -92 C185.390625 -20.106783947167244, 185.390625 51.78643210566551, 185.390625 92 M185.390625 92 C53.8995883423089 92, -77.5914483153822 92, -185.390625 92 M185.390625 92 C68.41713874342773 92, -48.556347513144544 92, -185.390625 92 M-185.390625 92 C-185.390625 44.989494027677935, -185.390625 -2.0210119446441297, -185.390625 -92 M-185.390625 92 C-185.390625 54.54326540764661, -185.390625 17.086530815293216, -185.390625 -92" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="label" style="" transform="translate(-62.609375, -84)"><foreignObject width="125.21875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 243px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>&lt;&lt;Requirement&gt;&gt;</p></span></div></foreignObject></g><g class="label" style="; font-weight: bold;" transform="translate(-40.421875, -60)"><foreignObject width="80.84375" height="24"><div style="font-weight: bold; display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 117px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="; font-weight: bold;" class="nodeLabel markdown-node-label"><p>strict_gate</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-175.390625, -16)"><foreignObject width="33.359375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 83px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>ID: 1</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-175.390625, 8)"><foreignObject width="350.78125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 359px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Text: annotate gate must exit 0 only on approval</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-175.390625, 32)"><foreignObject width="70.921875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 120px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Risk: High</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-175.390625, 56)"><foreignObject width="122.171875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 159px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Verification: Test</p></span></div></foreignObject></g><g class="divider"><path d="M-185.390625 -24 C-57.61223417528997 -24, 70.16615664942006 -24, 185.390625 -24 M-185.390625 -24 C-62.28241390672052 -24, 60.82579718655896 -24, 185.390625 -24" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g></g><g class="node default" id="diagram-fixture-result_file" data-look="classic" transform="translate(193.390625, 544)"><g class="basic label-container outer-path" style=""><path d="M-140.8984375 -92 L140.8984375 -92 L140.8984375 92 L-140.8984375 92" stroke="none" stroke-width="0" fill="#1e293b"></path><path d="M-140.8984375 -92 C-34.413809834208976 -92, 72.07081783158205 -92, 140.8984375 -92 M-140.8984375 -92 C-43.35005793762912 -92, 54.198321624741766 -92, 140.8984375 -92 M140.8984375 -92 C140.8984375 -53.62666447569195, 140.8984375 -15.253328951383907, 140.8984375 92 M140.8984375 -92 C140.8984375 -39.27757240516228, 140.8984375 13.444855189675437, 140.8984375 92 M140.8984375 92 C50.59369405673722 92, -39.71104938652556 92, -140.8984375 92 M140.8984375 92 C59.76574872934319 92, -21.366940041313626 92, -140.8984375 92 M-140.8984375 92 C-140.8984375 34.16051070190238, -140.8984375 -23.678978596195236, -140.8984375 -92 M-140.8984375 92 C-140.8984375 26.67026497142298, -140.8984375 -38.65947005715404, -140.8984375 -92" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="label" style="" transform="translate(-102.6015625, -84)"><foreignObject width="205.203125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 315px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>&lt;&lt;Functional Requirement&gt;&gt;</p></span></div></foreignObject></g><g class="label" style="; font-weight: bold;" transform="translate(-38.7109375, -60)"><foreignObject width="77.421875" height="24"><div style="font-weight: bold; display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 114px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="; font-weight: bold;" class="nodeLabel markdown-node-label"><p>result_file</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-130.8984375, -16)"><foreignObject width="47.625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 95px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>ID: 1.1</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-130.8984375, 8)"><foreignObject width="261.796875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 283px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Text: result file publishes atomically</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-130.8984375, 32)"><foreignObject width="94.703125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 142px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Risk: Medium</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-130.8984375, 56)"><foreignObject width="122.171875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 159px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Verification: Test</p></span></div></foreignObject></g><g class="divider"><path d="M-140.8984375 -24 C-80.12391845376754 -24, -19.349399407535103 -24, 140.8984375 -24 M-140.8984375 -24 C-79.74641490726748 -24, -18.594392314534957 -24, 140.8984375 -24" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g></g><g class="node default" id="diagram-fixture-cli" data-look="classic" transform="translate(193.390625, 64)"><g class="basic label-container outer-path" style=""><path d="M-56.3359375 -56 L56.3359375 -56 L56.3359375 56 L-56.3359375 56" stroke="none" stroke-width="0" fill="#1e293b"></path><path d="M-56.3359375 -56 C-23.461659881768135 -56, 9.41261773646373 -56, 56.3359375 -56 M-56.3359375 -56 C-21.245744612046856 -56, 13.844448275906288 -56, 56.3359375 -56 M56.3359375 -56 C56.3359375 -33.098503622842706, 56.3359375 -10.197007245685413, 56.3359375 56 M56.3359375 -56 C56.3359375 -28.970133726373525, 56.3359375 -1.940267452747051, 56.3359375 56 M56.3359375 56 C23.833900093462148 56, -8.668137313075704 56, -56.3359375 56 M56.3359375 56 C16.12747949937325 56, -24.080978501253497 56, -56.3359375 56 M-56.3359375 56 C-56.3359375 19.546297244199295, -56.3359375 -16.90740551160141, -56.3359375 -56 M-56.3359375 56 C-56.3359375 13.689801248001423, -56.3359375 -28.620397503997154, -56.3359375 -56" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g><g class="label" style="" transform="translate(-46.3359375, -48)"><foreignObject width="92.671875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 214px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>&lt;&lt;Element&gt;&gt;</p></span></div></foreignObject></g><g class="label" style="; font-weight: bold;" transform="translate(-8.84375, -24)"><foreignObject width="17.6875" height="24"><div style="font-weight: bold; display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 66px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="; font-weight: bold;" class="nodeLabel markdown-node-label"><p>cli</p></span></div></foreignObject></g><g class="label" style="" transform="translate(-46.3359375, 20)"><foreignObject width="88.40625" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 131px; text-align: center;"><span class="nodeLabel markdown-node-label"><p>Type: binary</p></span></div></foreignObject></g><g class="divider"><path d="M-56.3359375 12 C-18.582590079317633 12, 19.170757341364734 12, 56.3359375 12 M-56.3359375 12 C-31.98994881597302 12, -7.643960131946038 12, 56.3359375 12" stroke="#475569" stroke-width="1.3" fill="none" stroke-dasharray="0 0"></path></g></g></g></g></g><defs><filter id="diagram-fixture-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><defs><filter id="diagram-fixture-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#FFFFFF"></feDropShadow></filter></defs><linearGradient id="diagram-fixture-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="hsl(180, 0%, 18.3529411765%)" stop-opacity="1"></stop></linearGradient></svg>
\ No newline at end of file
diff --git a/packages/ui/types.ts b/packages/ui/types.ts
index 76ab7d569..f0b952682 100644
--- a/packages/ui/types.ts
+++ b/packages/ui/types.ts
@@ -1,3 +1,7 @@
+import type { DiagramAnchor } from '@plannotator/core/diagram-anchor';
+
+export type { DiagramAnchor } from '@plannotator/core/diagram-anchor';
+
 export enum AnnotationType {
   DELETION = 'DELETION',
   COMMENT = 'COMMENT',
@@ -84,6 +88,7 @@ export interface Annotation {
   htmlAnchor?: HtmlElementAnchor; // raw-HTML pinpoint: serialized element anchor for reliable restoration
   elementContext?: HtmlElementContext; // raw-HTML / live-app pinpoint: bounded agent-facing description of the primary element (never used by restore)
   htmlAdditionalTargets?: HtmlAnnotationTarget[]; // raw-HTML shift-click multi-select: extra elements this one comment covers (primary stays htmlAnchor/originalText)
+  diagramAnchor?: DiagramAnchor; // a comment on a rendered diagram part (Mermaid / Graphviz fence): the part's own id, label and document source line; the highlighter skips it and the diagram overlay restores it (see @plannotator/core/diagram-anchor)
   // web-highlighter metadata for cross-element selections
   startMeta?: AnnotationTextMeta;
   endMeta?: AnnotationTextMeta;
diff --git a/packages/ui/utils/diagram-anchor-graphviz.ts b/packages/ui/utils/diagram-anchor-graphviz.ts
new file mode 100644
index 000000000..5c5405aca
--- /dev/null
+++ b/packages/ui/utils/diagram-anchor-graphviz.ts
@@ -0,0 +1,143 @@
+/**
+ * The Graphviz finder: the ONE function that owns the id grammar of the
+ * svg `@viz-js/viz` emits, beside the Mermaid codec in `diagram-anchor.ts`.
+ * The anchor it writes is the same `DiagramAnchor` shape, family `graphviz`:
+ *
+ *   { family: "graphviz", kind: "node", id: "Validate", label: "Validate" }
+ *   { family: "graphviz", kind: "edge", from: "Order", to: "Validate", label: "" }
+ *   { family: "graphviz", kind: "cluster", id: "cluster_0", label: "group" }
+ *
+ * Graphviz writes every part as `<g id="nodeN" class="node"><title>NAME
+ * </title>...`, `<g id="edgeN" class="edge"><title>A-&gt;B</title>` and
+ * `<g id="clustN" class="cluster"><title>cluster_0</title>`. The `nodeN`,
+ * `edgeN` and `clustN` ids are declaration-order counters and shift when a
+ * part is inserted mid-source (inserting `A -> Z` before `B -> C` moves C
+ * from node3 to node4), so the anchor is the DOT NAME from the group's
+ * `<title>`, never the id. Edges carry both ends in the title (`A->B` in a
+ * digraph, `A--B` in a graph); a port stays on its end (`A:p`) exactly as
+ * the title spells it. Restore order is the codec's: (1) the part whose
+ * name matches, (2) a node whose label text equals the stored label, (3)
+ * the source line as a gutter mark (the pane's job), (4) none: unanchored
+ * but listed.
+ *
+ * Pure: no React, no DOM globals beyond the Element the caller hands in.
+ */
+import { diagramWholeSourceLines, lineMentions, sameTarget, type DiagramTarget } from '@plannotator/core/diagram-anchor';
+import type { DiagramFinder } from './diagram-anchor';
+
+/** The selector of every element the pointer can address in a Graphviz svg. */
+export const GRAPHVIZ_TARGET_SELECTOR = 'g.node, g.edge, g.cluster';
+
+/** The group's own `<title>` (a direct child; nested groups carry their
+ * own), which is the DOT name of the part. Entities (`&#45;&gt;`) come back
+ * decoded by the parser. */
+function titleOf(el: Element): string | null {
+  for (const child of Array.from(el.children)) {
+    if (child.tagName.toLowerCase() === 'title') {
+      return (child.textContent ?? '').trim();
+    }
+  }
+  return null;
+}
+
+/** The text the part shows: every `<text>` under it, in order. A node
+ * with no label attribute shows its name; a record label shows its fields. */
+function labelOf(el: Element): string {
+  return Array.from(el.querySelectorAll('text'))
+    .map((text) => text.textContent ?? '')
+    .join(' ')
+    .replace(/\s+/gu, ' ')
+    .trim();
+}
+
+/** An edge title is `tail->head` (digraph) or `tail--head` (graph). Split
+ * at the FIRST operator: an unquoted DOT id never contains one, and a
+ * quoted name that does is not worth a grammar of its own. */
+function splitEdgeTitle(title: string): { from: string; to: string } | null {
+  const m = /^(.*?)(?:->|--)(.*)$/u.exec(title);
+  if (m === null) return null;
+  const from = (m[1] ?? '').trim();
+  const to = (m[2] ?? '').trim();
+  if (from === '' || to === '') return null;
+  return { from, to };
+}
+
+/**
+ * Describe the rendered element under the pointer as a target, or null when
+ * it is not one of the three groups (the graph root, the background, a
+ * label group). `renderId` is unused: Graphviz ids carry no prefix and the
+ * finder never reads them.
+ */
+export function graphvizTargetFromElement(_svg: Element, el: Element): DiagramTarget | null {
+  const title = titleOf(el);
+  if (title === null || title === '') return null;
+  if (el.classList.contains('node')) {
+    return { family: 'graphviz', kind: 'node', id: title, label: labelOf(el) };
+  }
+  if (el.classList.contains('edge')) {
+    const ends = splitEdgeTitle(title);
+    if (ends === null) return null;
+    return { family: 'graphviz', kind: 'edge', ...ends, label: labelOf(el) };
+  }
+  if (el.classList.contains('cluster')) {
+    return { family: 'graphviz', kind: 'cluster', id: title, label: labelOf(el) };
+  }
+  return null;
+}
+
+/**
+ * Step (1): the group whose title names the target. Step (2): a node whose
+ * label equals the stored label. Null when neither holds.
+ */
+export function graphvizFindTarget(svg: Element, target: DiagramTarget): Element | null {
+  if (target.kind === 'diagram') return svg;
+  for (const el of Array.from(svg.querySelectorAll(GRAPHVIZ_TARGET_SELECTOR))) {
+    const candidate = graphvizTargetFromElement(svg, el);
+    if (candidate !== null && sameTarget(candidate, target)) return el;
+  }
+  if (target.kind === 'node' && target.label !== '') {
+    // Only while the label names ONE node (see the Mermaid finder).
+    const matches = Array.from(svg.querySelectorAll('g.node')).filter((el) => labelOf(el) === target.label);
+    if (matches.length === 1) return matches[0] ?? null;
+  }
+  return null;
+}
+
+/**
+ * The 1-based line range that declares the part: DOT statements are one
+ * per line in the common case, so a node is the first line that names it
+ * as a whole token (its declaration, or the first edge that mentions it),
+ * an edge the first line that names both ends, a cluster its `subgraph`
+ * line. A quoted name (`"my node"`) matches inside its quotes. Null when
+ * the part is not found as a token, which is what a node that exists only
+ * in an unsaved draft reads as until it is saved.
+ */
+export function graphvizSourceLine(source: string, target: DiagramTarget): readonly [number, number] | null {
+  if (target.kind === 'diagram') return diagramWholeSourceLines(source);
+  const lines = source.split('\n');
+  const matches = (line: string): boolean => {
+    if (target.kind === 'edge') {
+      return (
+        target.from !== undefined &&
+        target.to !== undefined &&
+        lineMentions(line, target.from) &&
+        lineMentions(line, target.to)
+      );
+    }
+    if (target.id === undefined) return false;
+    if (target.kind === 'cluster') {
+      return /\bsubgraph\b/u.test(line) && lineMentions(line, target.id);
+    }
+    return lineMentions(line, target.id);
+  };
+  const index = lines.findIndex(matches);
+  return index === -1 ? null : [index + 1, index + 1];
+}
+
+/** The Graphviz finder behind the renderer slot's `graphviz` entry. */
+export const GRAPHVIZ_FINDER: DiagramFinder = {
+  targetSelector: GRAPHVIZ_TARGET_SELECTOR,
+  targetFromElement: (svg, el) => graphvizTargetFromElement(svg, el),
+  findTarget: (svg, target) => graphvizFindTarget(svg, target),
+  sourceLine: graphvizSourceLine,
+};
diff --git a/packages/ui/utils/diagram-anchor.ts b/packages/ui/utils/diagram-anchor.ts
new file mode 100644
index 000000000..d16d3e06d
--- /dev/null
+++ b/packages/ui/utils/diagram-anchor.ts
@@ -0,0 +1,401 @@
+/**
+ * The Mermaid anchor codec: the ONE module that owns Mermaid's rendered id
+ * grammar. The pure half (types, the wire parser, `sameTarget`, the names,
+ * `diagramSourceLine`) lives in `@plannotator/core/diagram-anchor` and is
+ * re-exported here so a host imports one module; this file adds the DOM
+ * walkers that read a rendered svg.
+ *
+ * The anchor is the Mermaid id (edges: from and to), never the rendered
+ * element id whole (`flowchart-B-3`: the trailing counter moves when nodes
+ * are added) and never geometry (ELK and dagre place the same node at
+ * different coordinates). Restore order: (1) the element whose id suffix
+ * matches the family's pattern for the id, (2) a node whose label text
+ * equals the stored label, (3) the source line as a gutter mark in the
+ * Source pane (the pane's job, not this file's), (4) none: unanchored but
+ * listed. The id patterns below are the ones captured from the real
+ * rendered SVG (see HANDOFF.md "Mermaid 12"), byte-identical between
+ * 11.17.2 and 12.0.0.
+ *
+ * Pure: no React, no DOM globals beyond the Element the caller hands in, so
+ * the codec runs the same in the browser and in happy-dom over captured SVGs.
+ */
+import {
+  diagramSourceLine,
+  sameTarget,
+  type DiagramFamily,
+  type DiagramTarget,
+} from '@plannotator/core/diagram-anchor';
+
+export * from '@plannotator/core/diagram-anchor';
+
+/**
+ * The finder seam (the renderer slot pairs one with each engine): everything
+ * the viewer needs to know about one engine's rendered id grammar. The
+ * mermaid finder is this file; the Graphviz finder is
+ * `diagram-anchor-graphviz.ts`. The viewer never branches on the kind itself.
+ */
+export interface DiagramFinder {
+  /** The selector of every element the pointer can address. */
+  readonly targetSelector: string;
+  /** Describe the rendered element under the pointer, or null when it is
+   * not one the engine addresses. */
+  targetFromElement(svg: Element, el: Element, renderId: string): DiagramTarget | null;
+  /** Restore steps (1) and (2): the element that names the target, else a
+   * node whose label equals the stored label; null when neither holds. */
+  findTarget(svg: Element, target: DiagramTarget, renderId: string): Element | null;
+  /** Restore step (3): the 1-based line range that declares the part in
+   * the source text, or null when the part is not found as a token. */
+  sourceLine(source: string, target: DiagramTarget): readonly [number, number] | null;
+}
+
+/** The family a rendered svg declares (`aria-roledescription`), mapped to the
+ * id grammar this file knows. Families without element ids (sequence,
+ * gitGraph, pie) are `other`: a comment there is diagram-level. */
+export function diagramFamilyOf(svg: Element): DiagramFamily {
+  const role = svg.getAttribute('aria-roledescription') ?? '';
+  if (role.startsWith('flowchart')) return 'flowchart';
+  if (role === 'stateDiagram') return 'state';
+  if (role === 'classDiagram') return 'class';
+  if (role === 'er') return 'er';
+  if (role === 'requirement') return 'requirement';
+  if (role === 'sequence') return 'sequence';
+  return 'other';
+}
+
+/** `render(id, …)` prefixes every element id with `${id}-`; the marker
+ * defs use `${id}_` and are never targets. */
+function idSuffix(elementId: string, renderId: string): string | null {
+  const prefix = `${renderId}-`;
+  return elementId.startsWith(prefix) ? elementId.slice(prefix.length) : null;
+}
+
+function stripCounter(suffix: string): string | null {
+  const m = /^(.+)-(\d+)$/u.exec(suffix);
+  return m === null ? null : (m[1] ?? null);
+}
+
+/** The node ids a rendered flowchart or class diagram declares on its
+ * `g.node` elements (`flowchart-{id}-{n}`, `classId-{Name}-{n}`), read once
+ * per walk so an edge stem can be split against them. */
+export function nodeIdsOf(svg: Element, family: DiagramFamily, renderId: string): ReadonlySet<string> {
+  const ids = new Set<string>();
+  const pattern =
+    family === 'flowchart' ? /^flowchart-(.+)-\d+$/u : family === 'class' ? /^classId-(.+)-\d+$/u : null;
+  if (pattern === null) return ids;
+  for (const node of svg.querySelectorAll('g.node')) {
+    const suffix = idSuffix(node.id, renderId);
+    const id = suffix === null ? undefined : pattern.exec(suffix)?.[1];
+    if (id !== undefined) ids.add(id);
+  }
+  return ids;
+}
+
+/**
+ * Split an edge stem `{from}_{to}` where either end may itself carry
+ * underscores (`user_login_check_auth` from `user_login --> check_auth`):
+ * the split where both halves are node ids the svg declares, longest
+ * `from` first; else the split whose `from` is a declared node; else the
+ * first underscore (an end the svg does not list, which a rendered edge
+ * never has).
+ */
+export function splitEdgeStem(
+  stem: string,
+  nodeIds: ReadonlySet<string>,
+): { from: string; to: string } | null {
+  const candidates: Array<{ from: string; to: string }> = [];
+  for (let at = stem.indexOf('_'); at !== -1; at = stem.indexOf('_', at + 1)) {
+    if (at > 0 && at < stem.length - 1) {
+      candidates.push({ from: stem.slice(0, at), to: stem.slice(at + 1) });
+    }
+  }
+  const longestFrom = (a: { from: string }, b: { from: string }) => b.from.length - a.from.length;
+  const both = candidates.filter((c) => nodeIds.has(c.from) && nodeIds.has(c.to)).sort(longestFrom)[0];
+  if (both !== undefined) return both;
+  const fromOnly = candidates.filter((c) => nodeIds.has(c.from)).sort(longestFrom)[0];
+  if (fromOnly !== undefined) return fromOnly;
+  return candidates[0] ?? null;
+}
+
+/** The label a rendered part shows: the htmlLabels span, else the svg text. */
+function partLabel(el: Element): string {
+  const span = el.querySelector('.nodeLabel, .label');
+  const text = (span ?? el.querySelector('text'))?.textContent ?? '';
+  return text.replace(/\s+/gu, ' ').trim();
+}
+
+/** The edge label Mermaid renders in a sibling group keyed by the edge's
+ * element id (`g.edgeLabels > g.edgeLabel > g.label[data-id]`; the
+ * `data-id` sits on the inner `g.label`), empty when the edge has none. */
+function edgeLabel(svg: Element, elementSuffix: string): string {
+  const group = svg.querySelector(`.label[data-id="${cssEscape(elementSuffix)}"]`);
+  return group === null ? '' : (group.textContent ?? '').replace(/\s+/gu, ' ').trim();
+}
+
+function cssEscape(value: string): string {
+  return value.replace(/["\\]/gu, '\\$&');
+}
+
+/** The sequence family's addressable elements. Mermaid gives them classes,
+ * never ids: actor boxes and lifelines carry the actor's `name`, a message
+ * is its text plus its line, a note its rect plus its text, a loop / alt /
+ * opt frame the group that holds its `loopLine`s and its label. */
+const SEQUENCE_TARGET_SELECTOR =
+  'rect.actor, text.actor, line.actor-line, text.messageText, line.messageLine0, line.messageLine1, path.messageLine0, path.messageLine1, rect.note, text.noteText, line.loopLine, polygon.labelBox, text.labelText, text.loopText';
+
+/** The selector of every element the pointer can address. An edge LABEL is
+ * one too: it is painted over its edge and is where a person clicks an edge,
+ * so it resolves to that edge. */
+export const DIAGRAM_TARGET_SELECTOR = `g.node, g.cluster, g.statediagram-cluster, path.flowchart-link, path.transition, path.relation, path.relationshipLine, g.edgeLabel, ${SEQUENCE_TARGET_SELECTOR}`;
+
+function cleanText(value: string | null | undefined): string {
+  return (value ?? '').replace(/\s+/gu, ' ').trim();
+}
+
+function sequenceMessageLines(svg: Element): Element[] {
+  return Array.from(svg.querySelectorAll('.messageLine0, .messageLine1'));
+}
+
+/** The frames of a sequence diagram: the distinct groups that hold
+ * `loopLine`s, in document order. */
+function sequenceFrames(svg: Element): Element[] {
+  const frames: Element[] = [];
+  for (const line of Array.from(svg.querySelectorAll('line.loopLine'))) {
+    const group = line.parentElement;
+    if (group !== null && !frames.includes(group)) frames.push(group);
+  }
+  return frames;
+}
+
+function sequenceActorLabel(svg: Element, name: string): string {
+  for (const rect of Array.from(svg.querySelectorAll('rect.actor'))) {
+    if (rect.getAttribute('name') !== name) continue;
+    const text = rect.parentElement?.querySelector('text.actor');
+    if (text) return cleanText(text.textContent);
+  }
+  return name;
+}
+
+function sequenceMessageTarget(svg: Element, index: number): DiagramTarget | null {
+  const lines = sequenceMessageLines(svg);
+  const line = lines[index];
+  if (line === undefined) return null;
+  const texts = Array.from(svg.querySelectorAll('text.messageText'));
+  // Texts and lines pair by document order; when the counts differ (a
+  // renderer that splits a message text) the label is left empty rather
+  // than guessed.
+  const label = texts.length === lines.length ? cleanText(texts[index]?.textContent) : '';
+  const from = line.getAttribute('data-from');
+  const to = line.getAttribute('data-to');
+  return {
+    family: 'sequence',
+    kind: 'edge',
+    id: `msg-${index + 1}`,
+    ...(from !== null && to !== null ? { from, to } : {}),
+    label,
+  };
+}
+
+function sequenceTargetFromElement(svg: Element, el: Element): DiagramTarget | null {
+  const cl = el.classList;
+  if (cl.contains('actor') || cl.contains('actor-line')) {
+    const name = el.getAttribute('name') ?? el.parentElement?.querySelector('rect.actor[name]')?.getAttribute('name') ?? null;
+    if (name === null || name === '') return null;
+    return { family: 'sequence', kind: 'node', id: name, label: sequenceActorLabel(svg, name) };
+  }
+  if (cl.contains('messageText')) {
+    const texts = Array.from(svg.querySelectorAll('text.messageText'));
+    if (texts.length !== sequenceMessageLines(svg).length) return null;
+    return sequenceMessageTarget(svg, texts.indexOf(el));
+  }
+  if (cl.contains('messageLine0') || cl.contains('messageLine1')) {
+    return sequenceMessageTarget(svg, sequenceMessageLines(svg).indexOf(el));
+  }
+  if (cl.contains('note') || cl.contains('noteText')) {
+    const group = el.parentElement;
+    const notes = Array.from(svg.querySelectorAll('rect.note'));
+    const index = notes.findIndex((note) => note === el || note.parentElement === group);
+    if (index === -1) return null;
+    return { family: 'sequence', kind: 'node', id: `note-${index + 1}`, label: cleanText(group?.querySelector('text.noteText')?.textContent) };
+  }
+  if (cl.contains('loopLine') || cl.contains('labelBox') || cl.contains('labelText') || cl.contains('loopText')) {
+    const index = sequenceFrames(svg).indexOf(el.parentElement as Element);
+    if (index === -1) return null;
+    const group = el.parentElement;
+    const label = cleanText(`${group?.querySelector('text.labelText')?.textContent ?? ''} ${group?.querySelector('text.loopText')?.textContent ?? ''}`);
+    return { family: 'sequence', kind: 'cluster', id: `frame-${index + 1}`, label };
+  }
+  return null;
+}
+
+/** The element that stands for a sequence part by its id alone. */
+function sequenceElementById(svg: Element, target: DiagramTarget): Element | null {
+  if (target.id === undefined) return null;
+  const ordinal = /^(msg|note|frame)-(\d+)$/u.exec(target.id);
+  if (ordinal === null) {
+    if (target.kind !== 'node') return null;
+    const rects = Array.from(svg.querySelectorAll('rect.actor')).filter((rect) => rect.getAttribute('name') === target.id);
+    return rects.find((rect) => rect.classList.contains('actor-top')) ?? rects[0] ?? null;
+  }
+  const index = Number(ordinal[2]) - 1;
+  if (ordinal[1] === 'msg') return target.kind === 'edge' ? (sequenceMessageLines(svg)[index] ?? null) : null;
+  if (ordinal[1] === 'note') return target.kind === 'node' ? (svg.querySelectorAll('rect.note')[index] ?? null) : null;
+  return target.kind === 'cluster' ? (sequenceFrames(svg)[index] ?? null) : null;
+}
+
+/**
+ * Sequence restore. Actors restore by name. Messages, notes and frames have
+ * only ordinals for ids, and an ordinal moves when a statement is inserted
+ * above it, so the label is checked too: the part at the ordinal when its
+ * label still matches, else the ONE part that carries the stored label,
+ * else the part at the ordinal (its text was edited in place).
+ */
+function findSequenceTarget(svg: Element, target: DiagramTarget): Element | null {
+  const byId = sequenceElementById(svg, target);
+  const isOrdinal = target.id !== undefined && /^(msg|note|frame)-\d+$/u.test(target.id);
+  if (!isOrdinal) {
+    if (byId !== null) return byId;
+    if (target.kind !== 'node' || target.label === '') return null;
+    const named = Array.from(svg.querySelectorAll('rect.actor.actor-top, rect.actor')).filter(
+      (rect) => sequenceActorLabel(svg, rect.getAttribute('name') ?? '') === target.label,
+    );
+    const names = new Set(named.map((rect) => rect.getAttribute('name')));
+    return names.size === 1 ? (named.find((rect) => rect.classList.contains('actor-top')) ?? named[0] ?? null) : null;
+  }
+  const labelOf = (el: Element): string => sequenceTargetFromElement(svg, el.matches('g') ? (el.querySelector('line.loopLine') ?? el) : el)?.label ?? '';
+  if (byId !== null && (target.label === '' || labelOf(byId) === target.label)) return byId;
+  if (target.label !== '') {
+    const pool =
+      target.kind === 'edge' ? sequenceMessageLines(svg) : target.kind === 'node' ? Array.from(svg.querySelectorAll('rect.note')) : sequenceFrames(svg);
+    const matches = pool.filter((el) => labelOf(el) === target.label);
+    if (matches.length === 1) return matches[0] ?? null;
+  }
+  return byId;
+}
+
+/**
+ * Describe the rendered element under the pointer as a target, or null when
+ * the element is not one this family addresses (a marker, a label group, a
+ * pseudo-state, the background). The caller hands the nearest ancestor that
+ * matches DIAGRAM_TARGET_SELECTOR.
+ */
+export function targetFromElement(
+  svg: Element,
+  el: Element,
+  renderId: string,
+  /** The family's declared node ids, when the caller walks many elements
+   * (findDiagramTarget); read from the svg otherwise. */
+  nodeIds?: ReadonlySet<string>,
+): DiagramTarget | null {
+  const family = diagramFamilyOf(svg);
+  if (family === 'sequence') return sequenceTargetFromElement(svg, el);
+  if (el.classList.contains('edgeLabel')) {
+    // An edge label names its edge through `data-id` (the edge's element
+    // id without the render prefix); it IS that edge to the pointer.
+    const dataId = (el.matches('[data-id]') ? el : el.querySelector('[data-id]'))?.getAttribute('data-id') ?? null;
+    if (dataId === null) return null;
+    const edge = svg.querySelector(`[id="${cssEscape(`${renderId}-${dataId}`)}"]`);
+    return edge === null || edge === el ? null : targetFromElement(svg, edge, renderId, nodeIds);
+  }
+  const suffix = idSuffix(el.id, renderId);
+  if (suffix === null) return null;
+  const isPath = el.tagName.toLowerCase() === 'path';
+  const declared = () => nodeIds ?? nodeIdsOf(svg, family, renderId);
+  switch (family) {
+    case 'flowchart': {
+      if (isPath) {
+        const stem = /^(L_.+)_\d+$/u.exec(suffix)?.[1];
+        if (stem === undefined) return null;
+        const pair = splitEdgeStem(stem.slice(2), declared());
+        if (pair === null) return null;
+        return { family, kind: 'edge', ...pair, label: edgeLabel(svg, suffix) };
+      }
+      if (el.classList.contains('cluster')) {
+        return { family, kind: 'cluster', id: suffix, label: partLabel(el) };
+      }
+      const node = /^flowchart-(.+)-\d+$/u.exec(suffix)?.[1];
+      if (node === undefined) return null;
+      return { family, kind: 'node', id: node, label: partLabel(el) };
+    }
+    case 'state': {
+      if (isPath) {
+        if (!/^edge\d+$/u.test(suffix)) return null;
+        return { family, kind: 'edge', id: suffix, label: edgeLabel(svg, suffix) };
+      }
+      const state = /^state-(.+)-\d+$/u.exec(suffix)?.[1];
+      if (state === undefined || /_(?:start|end)$/u.test(state)) return null;
+      return { family, kind: 'node', id: state, label: partLabel(el) };
+    }
+    case 'class': {
+      if (isPath) {
+        const stem = /^id_(.+)_\d+$/u.exec(suffix)?.[1];
+        if (stem === undefined) return null;
+        const pair = splitEdgeStem(stem, declared());
+        if (pair === null) return null;
+        return { family, kind: 'edge', ...pair, label: edgeLabel(svg, suffix) };
+      }
+      const name = /^classId-(.+)-\d+$/u.exec(suffix)?.[1];
+      if (name === undefined) return null;
+      return { family, kind: 'node', id: name, label: partLabel(el) };
+    }
+    case 'er': {
+      if (isPath) {
+        const m = /^id_entity-(.+)-\d+_entity-(.+)-\d+_\d+$/u.exec(suffix);
+        if (m === null) return null;
+        return { family, kind: 'edge', from: m[1] ?? '', to: m[2] ?? '', label: edgeLabel(svg, suffix) };
+      }
+      const entity = /^entity-(.+)-\d+$/u.exec(suffix)?.[1];
+      if (entity === undefined) return null;
+      return { family, kind: 'node', id: entity, label: partLabel(el) };
+    }
+    case 'requirement': {
+      if (isPath) {
+        const stem = stripCounter(suffix);
+        if (stem === null) return null;
+        return { family, kind: 'edge', id: stem, label: edgeLabel(svg, suffix) };
+      }
+      if (!el.classList.contains('node')) return null;
+      return { family, kind: 'node', id: suffix, label: partLabel(el) };
+    }
+    // (`sequence` returned above: its parts carry classes, not ids.)
+    case 'other':
+    // A Graphviz svg never reaches this codec: its finder is
+    // diagram-anchor-graphviz.ts, paired by the renderer slot.
+    case 'graphviz':
+      return null;
+  }
+}
+
+/**
+ * Step (1): the element whose id suffix names the target. Step (2): a node
+ * whose label equals the stored label. Null when neither holds; the caller
+ * treats that as unanchored (the gutter mark from `sourceLine` is the
+ * Source pane's concern).
+ */
+export function findDiagramTarget(svg: Element, target: DiagramTarget, renderId: string): Element | null {
+  if (target.kind === 'diagram') return svg;
+  const family = diagramFamilyOf(svg);
+  if (family === 'sequence') return findSequenceTarget(svg, target);
+  const nodeIds = nodeIdsOf(svg, family, renderId);
+  for (const el of Array.from(svg.querySelectorAll(DIAGRAM_TARGET_SELECTOR))) {
+    // A label resolves to its edge; the edge itself is the element.
+    if (el.classList.contains('edgeLabel')) continue;
+    const candidate = targetFromElement(svg, el, renderId, nodeIds);
+    if (candidate !== null && sameTarget(candidate, target)) return el;
+  }
+  if (target.kind === 'node' && target.label !== '') {
+    // Step (2) holds only while the label names ONE node: with two nodes
+    // carrying it, the first match is a coin toss onto the wrong node, so
+    // the restore falls through to the source line instead.
+    const matches = Array.from(svg.querySelectorAll('g.node')).filter((el) => partLabel(el) === target.label);
+    if (matches.length === 1) return matches[0] ?? null;
+  }
+  return null;
+}
+
+/** The mermaid finder: this file's grammar behind the seam. */
+export const MERMAID_FINDER: DiagramFinder = {
+  targetSelector: DIAGRAM_TARGET_SELECTOR,
+  targetFromElement: (svg, el, renderId) => targetFromElement(svg, el, renderId),
+  findTarget: findDiagramTarget,
+  sourceLine: diagramSourceLine,
+};
diff --git a/packages/ui/utils/diagram-projection.ts b/packages/ui/utils/diagram-projection.ts
new file mode 100644
index 000000000..41c445223
--- /dev/null
+++ b/packages/ui/utils/diagram-projection.ts
@@ -0,0 +1,66 @@
+/**
+ * The overlay projection: the canvas scales a wrapper around the rendered
+ * svg with a CSS transform; the overlay is a sibling of that wrapper,
+ * unscaled, so rings and badges keep constant pixel size at every zoom.
+ * Each target's box is read in svg user units (`getBBox`) and pushed
+ * through `getScreenCTM`, which carries the svg viewBox scaling and every
+ * ancestor transform, the wrapper's CSS zoom included. Minus the canvas
+ * host's own rect, that is the ring's rectangle in overlay pixels.
+ *
+ * Pure over two browser APIs; happy-dom has neither, so the tests install
+ * both on the captured fixture's elements with the numbers a real Chromium
+ * measured (test-setup/fixtures/diagrams/*.geometry.json).
+ */
+
+export interface ScreenRect {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+interface HostRect {
+  readonly left: number;
+  readonly top: number;
+}
+
+export function projectElement(el: Element, host: HostRect): ScreenRect | null {
+  const graphic = el as SVGGraphicsElement;
+  if (typeof graphic.getBBox !== 'function' || typeof graphic.getScreenCTM !== 'function') {
+    return null;
+  }
+  let box: DOMRect;
+  try {
+    box = graphic.getBBox();
+  } catch {
+    // A detached or display:none element throws in some engines.
+    return null;
+  }
+  const m = graphic.getScreenCTM();
+  if (m === null) return null;
+  const corners = [
+    [box.x, box.y],
+    [box.x + box.width, box.y],
+    [box.x, box.y + box.height],
+    [box.x + box.width, box.y + box.height],
+  ] as const;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const [x, y] of corners) {
+    const sx = m.a * x + m.c * y + m.e;
+    const sy = m.b * x + m.d * y + m.f;
+    minX = Math.min(minX, sx);
+    minY = Math.min(minY, sy);
+    maxX = Math.max(maxX, sx);
+    maxY = Math.max(maxY, sy);
+  }
+  if (!Number.isFinite(minX) || !Number.isFinite(minY)) return null;
+  return {
+    left: minX - host.left,
+    top: minY - host.top,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
diff --git a/packages/ui/utils/diagram-render.ts b/packages/ui/utils/diagram-render.ts
new file mode 100644
index 000000000..21a04c62b
--- /dev/null
+++ b/packages/ui/utils/diagram-render.ts
@@ -0,0 +1,668 @@
+/**
+ * The renderer slot: ONE seam between "a diagram kind" and "the engine that
+ * turns its source into an svg". `renderDiagram(kind, renderId, source,
+ * theme)` looks the kind up in a per-kind map (`mermaid` through the
+ * runtime slot in `./mermaid`, `graphviz` through the one in `./graphviz`);
+ * the entry loads its engine lazily and hands back the sanitized svg NODE
+ * plus the finder that knows that engine's id grammar (`diagramFinder(kind)`
+ * hands the viewer the same finder for the pointer and the anchors). A later
+ * engine is one entry here behind a lazy import, one finder and tests over a
+ * captured svg; nothing in the viewer, the source pane or the comment UI
+ * changes.
+ *
+ * Errors are values: a source that does not parse resolves to
+ * `{ ok: false, message, line, runtimeUnavailable: false }`, never a throw,
+ * so the canvas keeps the last good render dimmed under the strip. A
+ * runtime that could not be LOADED (a chunking host's fetch) resolves with
+ * `runtimeUnavailable: true`, which is the one failure a Retry can change:
+ * the entry re-attempts the load once after the slot's retry delay before
+ * giving up, and the block's Retry re-runs the render with a fresh import.
+ *
+ * Security: Mermaid runs under MERMAID_CONFIG with `securityLevel: 'strict'`
+ * (pinned by components/MermaidBlock.test.ts). The svg it emits is the
+ * runtime's output, sanitized by Mermaid's own DOMPurify pass;
+ * `sanitizeDiagramSvg` is the belt over that boundary, and it hands the
+ * viewer a NODE, never markup: DOMPurify parses the string under the svg
+ * profile and returns a DOM fragment, the post-pass walks that fragment, and
+ * the canvas mounts the element with `replaceChildren`. No html string
+ * crosses into the app DOM anywhere in the viewer. What the pass removes: no
+ * script, no event handler attribute, no javascript: or data: reference
+ * survives it, and no `<a>` keeps an href: under strict Mermaid disables
+ * click CALLBACKS but a `click A "https://..."` binding still wraps the node
+ * in an svg `<a href>`, which would turn the pinpoint click on that node
+ * into a navigation. The canvas owns every click.
+ */
+import DOMPurify from 'dompurify';
+import type { DiagramKind } from '@plannotator/core/diagram-anchor';
+import { MERMAID_FINDER, type DiagramFinder } from './diagram-anchor';
+import { GRAPHVIZ_FINDER } from './diagram-anchor-graphviz';
+import { getGraphvizRetryDelayMs, loadGraphvizRuntime, type GraphvizRuntime } from './graphviz';
+import { loadMathRenderer } from './math';
+import { getMermaidRetryDelayMs, loadMermaidRuntime } from './mermaid';
+import { hasMermaidMath } from './mermaid-math-slot';
+import { applyMermaidTheme, mermaidThemeKey, type MermaidThemeMode } from './mermaidTheme';
+
+export type { DiagramKind } from '@plannotator/core/diagram-anchor';
+
+type Mermaid = Awaited<ReturnType<typeof loadMermaidRuntime>>;
+
+/**
+ * The (palette, mode) a render is for: the same pair `useTheme()` resolves
+ * for code fences. The mermaid entry passes it to `applyMermaidTheme`, which
+ * runs the global `initialize` once per key; the graphviz entry recolors its
+ * defaults onto CSS tokens and needs neither. A host without ThemeProvider
+ * passes any palette id with the mode it renders in.
+ */
+export interface DiagramTheme {
+  readonly colorTheme: string;
+  readonly mode: MermaidThemeMode;
+}
+
+export type DiagramRenderError = {
+  readonly ok: false;
+  readonly message: string;
+  readonly line: number | null;
+  /** The engine could not be loaded (as opposed to the source not
+   * parsing): the one failure a Retry can change. */
+  readonly runtimeUnavailable: boolean;
+};
+
+export type DiagramRenderResult =
+  | {
+      readonly ok: true;
+      /** The sanitized svg root, ready to mount. The viewer never holds
+       * the markup: see the header. */
+      readonly svgNode: SVGSVGElement;
+      readonly findTarget: DiagramFinder['findTarget'];
+    }
+  | DiagramRenderError;
+
+interface DiagramRenderer {
+  render(renderId: string, source: string, theme: DiagramTheme): Promise<DiagramRenderResult>;
+  readonly finder: DiagramFinder;
+}
+
+/** Elements that never belong in a rendered diagram. DOMPurify's profiles
+ * already drop every one of them; the sweep below is the belt that does not
+ * depend on which profile a later config edit turns on. */
+const FORBIDDEN_ELEMENTS = 'script, iframe, object, embed, link, meta';
+
+/**
+ * The belt over the engine's output (see the header). DOMPurify parses the
+ * string under the svg, svg-filter and html profiles and hands back a
+ * detached fragment, so nothing executes and no markup reaches the app DOM.
+ * `foreignobject` and its html children are added back the way Mermaid's
+ * own pass adds them (the same ADD_TAGS, ADD_ATTR and
+ * HTML_INTEGRATION_POINTS entries); without them every html label in the
+ * diagram would be dropped. The walk afterwards closes what DOMPurify leaves
+ * open for an svg: an `<a href>` around a node, and a `data:` reference on
+ * an `<image>`.
+ *
+ * Returns the sanitized svg root, or null when the string carries no svg or
+ * there is no document to parse it with.
+ */
+export function sanitizeDiagramSvg(svg: string): SVGSVGElement | null {
+  const root = parseSvg(svg);
+  if (root === null) return null;
+  scrubDiagramSvg(root);
+  return root;
+}
+
+/**
+ * Step one of the sanitizer: DOMPurify parses the markup under the svg,
+ * svg-filter and html profiles and hands back a detached fragment; the svg
+ * root is adopted into the page's document so the node the canvas mounts
+ * belongs to it. Null when the markup carries no svg root, when there is no
+ * document, or when the fragment cannot be adopted.
+ */
+export function parseDiagramSvg(svg: string): SVGSVGElement | null {
+  if (typeof document === 'undefined') return null;
+  const fragment = DOMPurify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true, html: true },
+    ADD_TAGS: ['foreignobject'],
+    ADD_ATTR: ['dominant-baseline'],
+    HTML_INTEGRATION_POINTS: { foreignobject: true },
+    RETURN_DOM_FRAGMENT: true,
+  });
+  const root = fragment.querySelector('svg');
+  if (root === null) return null;
+  try {
+    return document.adoptNode(root) as SVGSVGElement;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Step two, in place on the tree that is about to be mounted: the belt that
+ * does not depend on which DOMPurify profile a later config edit turns on.
+ * Forbidden elements go, every `<style>` keeps only rules scoped under the
+ * svg's own root id (`scopeDiagramCss`), every `<a>` loses its target (svg `<a>` from a
+ * click binding, `<a>` in an html label alike — the element stays so the
+ * label text survives), every `on*` attribute goes, and a reference
+ * attribute keeps only a fragment or an http(s) URL.
+ */
+export function scrubDiagramSvg(root: SVGSVGElement): void {
+  for (const el of Array.from(root.querySelectorAll(FORBIDDEN_ELEMENTS))) el.remove();
+  // A `<style>` inside the svg is a page stylesheet once mounted: it can
+  // restyle elements OUTSIDE the diagram and fetch (`@import`, `url(`).
+  // Mermaid needs its own scoped sheet, so style elements are not dropped
+  // wholesale; each keeps only rules scoped under the svg's root id.
+  const rootId = root.getAttribute('id') ?? '';
+  for (const style of Array.from(root.querySelectorAll('style'))) {
+    const kept = scopeDiagramCss(style.textContent ?? '', rootId);
+    if (kept === '') style.remove();
+    else style.textContent = kept;
+  }
+  for (const anchor of Array.from(root.querySelectorAll('a'))) {
+    anchor.removeAttribute('href');
+    anchor.removeAttribute('xlink:href');
+  }
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+    scrubAttributes(node as Element);
+  }
+  scrubAttributes(root);
+}
+
+function scrubAttributes(el: Element): void {
+  for (const attribute of Array.from(el.attributes)) {
+    const name = attribute.name.toLowerCase();
+    const value = attribute.value.trim().toLowerCase();
+    if (name.startsWith('on')) {
+      el.removeAttribute(attribute.name);
+      continue;
+    }
+    if (
+      (name === 'href' || name === 'xlink:href' || name === 'src') &&
+      !value.startsWith('#') &&
+      !value.startsWith('http://') &&
+      !value.startsWith('https://') &&
+      value !== ''
+    ) {
+      el.removeAttribute(attribute.name);
+    }
+  }
+}
+
+/** The attribute an edge's widened hit path carries (its value is the
+ * edge's index in the layer); `diagramHitSource` maps one back to the
+ * visible edge it stands for. */
+export const DIAGRAM_HIT_ATTR = 'data-diagram-hit';
+/** The one group, appended LAST in the svg root, that holds every hit path. */
+export const DIAGRAM_HIT_LAYER_ATTR = 'data-diagram-hit-layer';
+/** The invisible stroke width of an edge hit path. A rendered edge is a 1–2
+ * px stroke that the pointer can only catch at random spots (owner
+ * feedback); 14 px is a comfortable target without swallowing its
+ * neighbours. */
+export const EDGE_HIT_STROKE_WIDTH = 14;
+
+/** Every edge element an engine draws: Mermaid's edge paths (flowchart,
+ * state transitions, class relations, ER relationship lines) and the
+ * sequence diagram's message lines; Graphviz's edge paths. */
+const EDGE_SELECTOR = [
+  'g.edgePaths > path',
+  'path.flowchart-link',
+  'path.transition',
+  'path.relation',
+  'path.relationshipLine',
+  'line.messageLine0',
+  'line.messageLine1',
+  'path.messageLine0',
+  'path.messageLine1',
+  'g.edge > path',
+].join(', ');
+
+/** The geometry a hit path keeps from its edge; everything else (id, class,
+ * every `data-*`, markers, inline style, dash pattern) is left behind, so a
+ * host's `[data-id="L_A_B_0"]` still matches exactly one element. */
+const HIT_GEOMETRY_ATTRS = ['d', 'x1', 'y1', 'x2', 'y2', 'points'];
+
+const hitSources = new WeakMap<Element, Element>();
+
+/** The visible edge a hit path stands for, or null for any other element. */
+export function diagramHitSource(el: Element): Element | null {
+  return hitSources.get(el) ?? null;
+}
+
+/** The transform list that places `el` in the svg root's user space: every
+ * ancestor's `transform` attribute, outermost first, then the element's
+ * own. An svg transform list composes left to right, so joining the
+ * attribute strings IS the composed transform — no layout needed, which is
+ * what lets this run on the detached node the slot hands over. */
+function transformToRoot(el: Element, root: Element): string {
+  const parts: string[] = [];
+  for (let node: Element | null = el; node !== null && node !== root; node = node.parentElement) {
+    const transform = node.getAttribute('transform');
+    if (transform !== null && transform.trim() !== '') parts.unshift(transform.trim());
+  }
+  return parts.join(' ');
+}
+
+/**
+ * Give every edge an invisible hit target, in ONE layer appended last in
+ * the svg root. A sibling clone is not enough: an edge's own LABEL box is
+ * painted after the edge paths and covers it exactly where a person clicks
+ * an edge, and a nested subgraph's cluster rect covers a parent edge the
+ * same way. Each hit path is a bare element of the edge's tag with only its
+ * geometry, a `transform` that re-creates the ancestors' placement,
+ * `stroke: transparent`, `fill: none`, `stroke-width: 14` (set `!important`
+ * so no inherited or scoped rule can narrow it) and `pointer-events:
+ * stroke`. The layer sits over the nodes too, so the canvas resolves a click
+ * by priority over everything under the pointer (node, then edge, then
+ * cluster), never by the topmost element alone. Idempotent; runs after the
+ * scrub, on the tree about to be mounted, so nothing it adds passes through
+ * DOMPurify.
+ */
+export function widenEdgeHitAreas(svg: SVGSVGElement): void {
+  const doc = svg.ownerDocument;
+  svg.querySelector(`:scope > [${DIAGRAM_HIT_LAYER_ATTR}]`)?.remove();
+  const edges = Array.from(new Set(Array.from(svg.querySelectorAll(EDGE_SELECTOR))));
+  if (edges.length === 0) return;
+  const layer = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+  layer.setAttribute(DIAGRAM_HIT_LAYER_ATTR, '');
+  layer.setAttribute('aria-hidden', 'true');
+  edges.forEach((edge, index) => {
+    const hit = doc.createElementNS('http://www.w3.org/2000/svg', edge.tagName.toLowerCase()) as SVGElement;
+    for (const name of HIT_GEOMETRY_ATTRS) {
+      const value = edge.getAttribute(name);
+      if (value !== null) hit.setAttribute(name, value);
+    }
+    const transform = transformToRoot(edge, svg);
+    if (transform !== '') hit.setAttribute('transform', transform);
+    hit.setAttribute(DIAGRAM_HIT_ATTR, String(index));
+    hit.setAttribute('fill', 'none');
+    hit.setAttribute('stroke', 'transparent');
+    hit.setAttribute('stroke-width', String(EDGE_HIT_STROKE_WIDTH));
+    hit.setAttribute('pointer-events', 'stroke');
+    const style = hit.style;
+    if (style) {
+      style.setProperty('fill', 'none', 'important');
+      style.setProperty('stroke', 'transparent', 'important');
+      style.setProperty('stroke-width', `${EDGE_HIT_STROKE_WIDTH}px`, 'important');
+      style.setProperty('stroke-dasharray', 'none', 'important');
+      style.setProperty('marker-start', 'none', 'important');
+      style.setProperty('marker-end', 'none', 'important');
+      style.setProperty('pointer-events', 'stroke', 'important');
+    }
+    hitSources.set(hit, edge);
+    layer.appendChild(hit);
+  });
+  svg.appendChild(layer);
+}
+
+/** CSS functions that fetch. `url(#fragment)` is the one reference kept. */
+const CSS_FETCHERS = /(?:^|[^a-z-])(?:image-set|image|src|cross-fade|paint|element)\(/iu;
+
+/** Resolve CSS escapes (`u\72l(` IS `url(` to a browser) so the checks
+ * below read what the engine would. */
+function decodeCssEscapes(css: string): string {
+  return css.replace(/\\([0-9a-f]{1,6})\s?|\\(.)/giu, (_m, hex: string | undefined, ch: string | undefined) =>
+    hex !== undefined ? String.fromCodePoint(Math.min(Number.parseInt(hex, 16) || 0xfffd, 0x10ffff)) : (ch ?? ''),
+  );
+}
+
+function cssFetches(block: string): boolean {
+  const decoded = decodeCssEscapes(block).toLowerCase();
+  if (decoded.includes('@import')) return true;
+  if (CSS_FETCHERS.test(decoded)) return true;
+  for (let at = decoded.indexOf('url('); at !== -1; at = decoded.indexOf('url(', at + 4)) {
+    const arg = decoded.slice(at + 4).trimStart().replace(/^["']/u, '');
+    if (!arg.startsWith('#')) return true;
+  }
+  return false;
+}
+
+/** Split on top-level commas (not inside parens, brackets or strings). */
+function splitSelectors(list: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let quote = '';
+  let current = '';
+  for (const ch of list) {
+    if (quote !== '') {
+      if (ch === quote) quote = '';
+    } else if (ch === '"' || ch === "'") quote = ch;
+    else if (ch === '(' || ch === '[') depth += 1;
+    else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+    else if (ch === ',' && depth === 0) {
+      out.push(current.trim());
+      current = '';
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim() !== '') out.push(current.trim());
+  return out;
+}
+
+/**
+ * Keep only what a diagram's own stylesheet may say. Mermaid scopes every
+ * rule it emits under the svg's root id (`#<renderId> .node rect{…}`) plus
+ * its `@keyframes`; that is exactly what survives. Dropped: `@import`, any
+ * rule that fetches (`url(` that is not a `#fragment`, `image-set(`, …),
+ * any rule with a selector NOT scoped under `#<rootId>` (which could
+ * restyle the page around the diagram), and every at-rule but `@keyframes`
+ * and the grouping rules, which are filtered recursively. A brace-matching
+ * pass over the text: a detached `<style>` has no CSSOM to ask.
+ */
+export function scopeDiagramCss(css: string, rootId: string): string {
+  const text = css.replace(/\/\*[\s\S]*?\*\//gu, '');
+  const scoped = (selector: string): boolean => {
+    if (rootId === '') return false;
+    const decoded = decodeCssEscapes(selector).trim();
+    if (!decoded.startsWith(`#${rootId}`)) return false;
+    const next = decoded[rootId.length + 1];
+    return next === undefined || !/[\w-]/u.test(next);
+  };
+  let out = '';
+  let i = 0;
+  while (i < text.length) {
+    // The prelude runs to the first top-level `{` or `;`.
+    let j = i;
+    let quote = '';
+    while (j < text.length) {
+      const ch = text[j] as string;
+      if (quote !== '') {
+        if (ch === '\\') j += 1;
+        else if (ch === quote) quote = '';
+      } else if (ch === '"' || ch === "'") quote = ch;
+      else if (ch === '{' || ch === ';') break;
+      j += 1;
+    }
+    const prelude = text.slice(i, j).trim();
+    if (j >= text.length) break;
+    if (text[j] === ';') {
+      // A statement at-rule (`@import …;`, `@charset`, `@namespace`): dropped.
+      i = j + 1;
+      continue;
+    }
+    // The block runs to its matching `}`.
+    let depth = 0;
+    let k = j;
+    quote = '';
+    for (; k < text.length; k += 1) {
+      const ch = text[k] as string;
+      if (quote !== '') {
+        if (ch === '\\') k += 1;
+        else if (ch === quote) quote = '';
+      } else if (ch === '"' || ch === "'") quote = ch;
+      else if (ch === '{') depth += 1;
+      else if (ch === '}') {
+        depth -= 1;
+        if (depth === 0) break;
+      }
+    }
+    const body = text.slice(j + 1, k);
+    i = k + 1;
+    if (prelude === '') continue;
+    if (prelude.startsWith('@')) {
+      const name = /^@([\w-]+)/u.exec(prelude)?.[1]?.toLowerCase() ?? '';
+      if (/^(?:-\w+-)?keyframes$/u.test(name)) {
+        if (!cssFetches(prelude) && !cssFetches(body)) out += `${prelude}{${body}}`;
+      } else if (name === 'media' || name === 'supports' || name === 'container' || name === 'layer') {
+        if (cssFetches(prelude)) continue;
+        const inner = scopeDiagramCss(body, rootId);
+        if (inner !== '') out += `${prelude}{${inner}}`;
+      }
+      continue;
+    }
+    if (cssFetches(body)) continue;
+    const selectors = splitSelectors(prelude);
+    if (selectors.length === 0 || !selectors.every(scoped)) continue;
+    out += `${prelude}{${body}}`;
+  }
+  return out;
+}
+
+let parseSvg: (svg: string) => SVGSVGElement | null = parseDiagramSvg;
+
+/**
+ * Test hook: stand in for the DOMPurify parse step. happy-dom cannot host
+ * DOMPurify (its `DOMParser` lands in a foreign realm and mislabels svg
+ * namespaces, and its in-place mode reads `nodeName` through a cached
+ * `Node.prototype` getter happy-dom overrides on `Element`), so DOM tests
+ * parse through an inert `<template>` instead; `scrubDiagramSvg` still runs
+ * on every test render. The real parse is proven in a browser.
+ */
+export function __setDiagramSvgParserForTests(next: ((svg: string) => SVGSVGElement | null) | undefined): void {
+  parseSvg = next ?? parseDiagramSvg;
+}
+
+/** Mermaid's parse errors say "Parse error on line N" (the hash carries the
+ * line for the parser errors that have one); Graphviz's say "syntax error
+ * in line N near '...'". */
+function errorLine(error: unknown): number | null {
+  if (typeof error === 'object' && error !== null) {
+    const hash = (error as { hash?: { line?: unknown; loc?: { first_line?: unknown } } }).hash;
+    const line = hash?.line ?? hash?.loc?.first_line;
+    if (typeof line === 'number' && Number.isFinite(line)) return line + 1;
+  }
+  const message = error instanceof Error ? error.message : String(error);
+  const m = /line (\d+)/iu.exec(message);
+  return m === null ? null : Number(m[1]);
+}
+
+function errorMessage(error: unknown, fallback: string): string {
+  const message = error instanceof Error ? error.message : String(error);
+  // Mermaid appends the expected-token dump after the first line; the
+  // first line is the human sentence.
+  return message.split('\n')[0]?.trim() || fallback;
+}
+
+const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Load an engine through its slot with ONE automatic re-attempt after a
+ * short delay: a transient chunk failure on a chunking host. In a
+ * single-file build the first await never rejects, so the second attempt is
+ * unreachable there and the success path is unchanged.
+ */
+async function loadWithRetry<T>(load: () => Promise<T>, delayMs: number): Promise<T> {
+  try {
+    return await load();
+  } catch {
+    await wait(delayMs);
+    return load();
+  }
+}
+
+async function renderMermaid(runtime: Mermaid, renderId: string, source: string): Promise<DiagramRenderResult> {
+  try {
+    const { svg } = await runtime.render(renderId, source);
+    const svgNode = sanitizeDiagramSvg(svg);
+    if (svgNode === null) {
+      return { ok: false, message: 'The diagram could not be rendered.', line: null, runtimeUnavailable: false };
+    }
+    widenEdgeHitAreas(svgNode);
+    return { ok: true, svgNode, findTarget: MERMAID_FINDER.findTarget };
+  } catch (error) {
+    return {
+      ok: false,
+      message: errorMessage(error, 'Failed to render diagram'),
+      line: errorLine(error),
+      runtimeUnavailable: false,
+    };
+  }
+}
+
+const mermaidRenderer: DiagramRenderer = {
+  finder: MERMAID_FINDER,
+  async render(renderId, source, theme) {
+    let runtime: Mermaid;
+    try {
+      runtime = await loadWithRetry(loadMermaidRuntime, getMermaidRetryDelayMs());
+    } catch (error) {
+      return {
+        ok: false,
+        message: errorMessage(error, 'Failed to render diagram'),
+        line: null,
+        runtimeUnavailable: true,
+      };
+    }
+    // A `$$` label makes Mermaid render KaTeX. On a host that redirects
+    // Mermaid's `katex` import to `utils/mermaid-math-slot` the label is
+    // typeset through the math slot, which must be filled by then: warm it
+    // with the registered loader first. A filled slot resolves at once; a
+    // load failure is left to the render, whose error names it.
+    if (hasMermaidMath(source)) {
+      try {
+        await loadMathRenderer();
+      } catch {
+        // Reported by the render below.
+      }
+    }
+    // Derive every Mermaid theme variable from the page's tokens before each
+    // render, so the diagram follows the palette and mode. Keyed on the
+    // runtime plus (palette, mode), so the lazy runtime is themed on its
+    // first render and re-initialized only when one of the three changes.
+    // With no tokens on the page it is a no-op and the static
+    // MERMAID_CONFIG (securityLevel strict) applies.
+    applyMermaidTheme(runtime, mermaidThemeKey(theme.colorTheme, theme.mode));
+    return renderMermaid(runtime, renderId, source);
+  },
+};
+
+/** A Graphviz default color, as `viz` writes it: a named default or its
+ * hex spelling. An author's hex spelling of the same default is
+ * indistinguishable from the default and is themed with it. */
+function isGraphvizDefault(value: string | null, ...names: string[]): boolean {
+  if (value === null) return false;
+  const bare = value.trim().toLowerCase();
+  return names.includes(bare.startsWith('#') ? bare.slice(1) : bare);
+}
+
+const BLACK = ['black', '000000', '000'];
+const WHITE = ['white', 'ffffff', 'fff'];
+const LIGHTGREY = ['lightgrey', 'lightgray', 'd3d3d3'];
+
+/**
+ * Graphviz has no theme system; every color lands as a presentation
+ * attribute from the DOT defaults (`stroke="black"`, `fill="none"`, a white
+ * page polygon) or from the author's attributes. This pass recolors the
+ * DEFAULTS onto the page tokens and leaves every author color alone:
+ *   - the page background polygon (the first polygon under `g.graph`,
+ *     `fill="white"`) is removed: the canvas is the ground;
+ *   - a node or cluster shape with `fill="none"` gets `var(--card)` (an
+ *     opaque interior, so the hover ring and the edge routing read), a
+ *     black stroke gets `var(--foreground)` on a node and `var(--border)`
+ *     on a cluster, a `lightgrey` fill (the `style=filled` default) gets
+ *     `var(--muted)`;
+ *   - an edge line or arrowhead in black gets `var(--foreground)`;
+ *   - text with no fill or a black fill gets `var(--foreground)`.
+ * What it does NOT touch: any named or hex color the author set
+ * (`fillcolor=gold`, `color=red`), `bgcolor`, font families and sizes,
+ * stroke widths and dash patterns. Idempotent.
+ */
+export function themeGraphvizSvg(svg: SVGSVGElement): void {
+  const graph = svg.querySelector(':scope > g.graph');
+  const page = graph?.querySelector(':scope > polygon') ?? null;
+  if (page !== null && isGraphvizDefault(page.getAttribute('fill'), ...WHITE)) {
+    page.remove();
+  }
+  const shapes = 'polygon, ellipse, circle, path, polyline, rect';
+  for (const group of Array.from(svg.querySelectorAll('g.node, g.cluster'))) {
+    const cluster = group.classList.contains('cluster');
+    for (const shape of Array.from(group.querySelectorAll(`:scope > ${shapes.replaceAll(', ', ', :scope > ')}`))) {
+      const fill = shape.getAttribute('fill');
+      if (isGraphvizDefault(fill, 'none', 'transparent')) {
+        shape.setAttribute('fill', 'var(--card)');
+      } else if (isGraphvizDefault(fill, ...LIGHTGREY)) {
+        shape.setAttribute('fill', 'var(--muted)');
+      }
+      if (isGraphvizDefault(shape.getAttribute('stroke'), ...BLACK)) {
+        shape.setAttribute('stroke', cluster ? 'var(--border)' : 'var(--foreground)');
+      }
+    }
+  }
+  for (const part of Array.from(svg.querySelectorAll('g.edge > path, g.edge > polygon, g.edge > ellipse'))) {
+    if (isGraphvizDefault(part.getAttribute('stroke'), ...BLACK)) {
+      part.setAttribute('stroke', 'var(--foreground)');
+    }
+    if (isGraphvizDefault(part.getAttribute('fill'), ...BLACK)) {
+      part.setAttribute('fill', 'var(--foreground)');
+    }
+  }
+  for (const text of Array.from(svg.querySelectorAll('text'))) {
+    const fill = text.getAttribute('fill');
+    if (fill === null || isGraphvizDefault(fill, ...BLACK)) {
+      text.setAttribute('fill', 'var(--foreground)');
+    }
+  }
+}
+
+/**
+ * The Graphviz entry: `@viz-js/viz` behind the runtime slot,
+ * `render(source, { format: "svg" })` as a value (`status: "failure"`
+ * carries the messages; nothing throws for a bad graph), the same sanitizer
+ * as Mermaid (Graphviz output has no foreignObject, no style, no url()
+ * reference, and a DOT `URL=` attribute emits the `<a xlink:href>` the pass
+ * strips), then the theme pass. The engine's output ids (`nodeN`) are
+ * positional and never prefixed by `renderId`; the finder keys on the DOT
+ * name from each `<title>`. The entry passes NO `images` option, so a DOT
+ * `image=` attribute is refused by the engine with a warning and emits no
+ * `<image>` at all.
+ */
+const graphvizRenderer: DiagramRenderer = {
+  finder: GRAPHVIZ_FINDER,
+  async render(_renderId, source) {
+    let viz: GraphvizRuntime;
+    try {
+      viz = await loadWithRetry(loadGraphvizRuntime, getGraphvizRetryDelayMs());
+    } catch (error) {
+      return {
+        ok: false,
+        message: errorMessage(error, 'The Graphviz engine could not be loaded.'),
+        line: null,
+        runtimeUnavailable: true,
+      };
+    }
+    try {
+      const result = viz.render(source, { format: 'svg' });
+      if (result.status === 'failure') {
+        const first = result.errors.find((entry) => entry.level !== 'warning') ?? result.errors[0];
+        const message = first?.message.trim() || 'The graph could not be rendered.';
+        return { ok: false, message, line: errorLine(message), runtimeUnavailable: false };
+      }
+      const svgNode = sanitizeDiagramSvg(result.output);
+      if (svgNode === null) {
+        return { ok: false, message: 'The graph could not be rendered.', line: null, runtimeUnavailable: false };
+      }
+      themeGraphvizSvg(svgNode);
+      widenEdgeHitAreas(svgNode);
+      return { ok: true, svgNode, findTarget: GRAPHVIZ_FINDER.findTarget };
+    } catch (error) {
+      return {
+        ok: false,
+        message: errorMessage(error, 'Failed to render diagram'),
+        line: errorLine(error),
+        runtimeUnavailable: false,
+      };
+    }
+  },
+};
+
+const RENDERERS: Record<DiagramKind, DiagramRenderer> = {
+  mermaid: mermaidRenderer,
+  graphviz: graphvizRenderer,
+};
+
+/** The finder for a kind, synchronously: the viewer wires the pointer and
+ * the anchors to it before the first render lands. */
+export function diagramFinder(kind: DiagramKind): DiagramFinder {
+  return RENDERERS[kind].finder;
+}
+
+/**
+ * Render one diagram source. `renderId` is the caller's stable prefix for
+ * the element ids; the finder in the result strips it when it matches
+ * anchors.
+ */
+export function renderDiagram(
+  kind: DiagramKind,
+  renderId: string,
+  source: string,
+  theme: DiagramTheme,
+): Promise<DiagramRenderResult> {
+  return RENDERERS[kind].render(renderId, source, theme);
+}
diff --git a/packages/ui/utils/diagramAnchor.test.ts b/packages/ui/utils/diagramAnchor.test.ts
new file mode 100644
index 000000000..bf3d74894
--- /dev/null
+++ b/packages/ui/utils/diagramAnchor.test.ts
@@ -0,0 +1,355 @@
+/**
+ * The Mermaid anchor codec and `findDiagramTarget` over REAL rendered SVGs
+ * (test-setup/fixtures/diagrams/*.svg: mermaid's own output captured from a
+ * headless Chromium with MERMAID_CONFIG — strict, htmlLabels — and render
+ * id "diagram-fixture"; every id shape is byte-identical under 12.0.0, see
+ * HANDOFF.md "Mermaid 12"). Nothing here is hand-written; happy-dom parses
+ * the svg, so the ids, classes and label text the codec reads are the real
+ * ones.
+ *
+ * What regresses if these fail:
+ * - `findDiagramTarget` misses or mis-resolves an id in a real svg: the
+ *   flowchart counter suffix (`flowchart-D-1`) is matched whole, an edge id
+ *   is split at the wrong underscore, a state pseudo-state (`root_start`)
+ *   is offered as a node, a requirement node is missed because its id has
+ *   no family prefix, or the label fallback (restore step 2) does not run
+ *   when the id is gone;
+ * - an edge between underscored node ids (`user_login --> check_auth`,
+ *   rendered as `L_user_login_check_auth_0`) is split at the first
+ *   underscore, so the wrong `from` and `to` are persisted;
+ * - the scrub belt lets a script, a handler attribute or a javascript:
+ *   reference through into the app DOM, or keeps an `<a href>` that would
+ *   turn a pinpoint click into a navigation.
+ *
+ * DOM-gated (DOM_TESTS=1).
+ */
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { parseInertSvg } from '../test-setup/diagramSvg';
+import {
+  DIAGRAM_TARGET_SELECTOR,
+  MERMAID_FINDER,
+  diagramFamilyOf,
+  findDiagramTarget,
+  splitEdgeStem,
+  targetFromElement,
+  type DiagramTarget,
+} from './diagram-anchor';
+import { diagramHitSource, scopeDiagramCss, scrubDiagramSvg, widenEdgeHitAreas } from './diagram-render';
+
+const hasDom = typeof document !== 'undefined';
+const FIXTURES = join(import.meta.dir, '..', 'test-setup', 'fixtures', 'diagrams');
+const RENDER_ID = 'diagram-fixture';
+
+function loadSvg(name: string): SVGSVGElement {
+  const markup = readFileSync(join(FIXTURES, `${name}.svg`), 'utf8');
+  const svg = parseInertSvg(markup);
+  if (svg === null) throw new Error(`fixture ${name} has no svg root`);
+  return svg;
+}
+
+/** Every addressable part the codec describes in a fixture, by element id. */
+function describeAll(svg: Element): Map<string, DiagramTarget> {
+  const out = new Map<string, DiagramTarget>();
+  for (const el of Array.from(svg.querySelectorAll(DIAGRAM_TARGET_SELECTOR))) {
+    const target = targetFromElement(svg, el, RENDER_ID);
+    if (target !== null) out.set(el.id, target);
+  }
+  return out;
+}
+
+describe.if(hasDom)('the flowchart family (06-flowchart-review-decision, 01-flowchart-td-subgraphs)', () => {
+  test('declares the family, describes nodes by Mermaid id with their label, edges by from and to', () => {
+    const svg = loadSvg('06-flowchart-review-decision');
+    expect(diagramFamilyOf(svg)).toBe('flowchart');
+    const parts = describeAll(svg);
+    expect(parts.get('diagram-fixture-flowchart-D-1')).toEqual({ family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?' });
+    expect(parts.get('diagram-fixture-flowchart-U-0')).toEqual({ family: 'flowchart', kind: 'node', id: 'U', label: 'Reviewer' });
+    expect(parts.get('diagram-fixture-L_D_M_0')).toEqual({ family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: 'Yes' });
+    expect(parts.get('diagram-fixture-L_U_D_0')).toEqual({ family: 'flowchart', kind: 'edge', from: 'U', to: 'D', label: '' });
+  });
+
+  test('restores by id whatever counter the render gave it, by from and to, by label when the id is gone, and null when both are', () => {
+    const svg = loadSvg('06-flowchart-review-decision');
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'node', id: 'M', label: 'stale label' }, RENDER_ID)?.id).toBe(
+      'diagram-fixture-flowchart-M-3',
+    );
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'edge', from: 'D', to: 'R', label: '' }, RENDER_ID)?.id).toBe(
+      'diagram-fixture-L_D_R_0',
+    );
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'node', id: 'Gone', label: 'Revise' }, RENDER_ID)?.id).toBe(
+      'diagram-fixture-flowchart-R-5',
+    );
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'node', id: 'Gone', label: 'Nowhere' }, RENDER_ID)).toBeNull();
+    // A wrong render id prefix is never a match.
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'node', id: 'M', label: '' }, 'diagram-other')).toBeNull();
+  });
+
+  test('addresses subgraphs as clusters by their subgraph id', () => {
+    const clustered = loadSvg('01-flowchart-td-subgraphs');
+    const parts = describeAll(clustered);
+    expect(parts.get('diagram-fixture-Browser')).toEqual({ family: 'flowchart', kind: 'cluster', id: 'Browser', label: 'Browser session' });
+    expect(findDiagramTarget(clustered, { family: 'flowchart', kind: 'cluster', id: 'Agent', label: '' }, RENDER_ID)?.id).toBe(
+      'diagram-fixture-Agent',
+    );
+    expect(parts.get('diagram-fixture-L_Serve_Boot_0')).toMatchObject({ kind: 'edge', from: 'Serve', to: 'Boot' });
+  });
+
+  test('an edge between underscored node ids reads both ends whole', () => {
+    // The declared node ids decide the split; the first underscore would
+    // persist `from: "user"` for `user_login --> check_auth`.
+    const nodeIds = new Set(['user_login', 'check_auth', 'user_home']);
+    expect(splitEdgeStem('user_login_check_auth', nodeIds)).toEqual({ from: 'user_login', to: 'check_auth' });
+    expect(splitEdgeStem('check_auth_user_home', nodeIds)).toEqual({ from: 'check_auth', to: 'user_home' });
+    // Through the real element walk: a minimal flowchart svg in the
+    // runtime's own id grammar.
+    const svg = parseInertSvg(
+      '<svg aria-roledescription="flowchart-v2">' +
+        '<g class="nodes"><g id="diagram-us-flowchart-user_login-0" class="node"><span class="nodeLabel">Login</span></g>' +
+        '<g id="diagram-us-flowchart-check_auth-1" class="node"><span class="nodeLabel">Auth?</span></g></g>' +
+        '<g class="edgePaths"><path id="diagram-us-L_user_login_check_auth_0" class="flowchart-link"/></g></svg>',
+    )!;
+    const edge = svg.querySelector('path')!;
+    expect(targetFromElement(svg, edge, 'diagram-us')).toEqual({ family: 'flowchart', kind: 'edge', from: 'user_login', to: 'check_auth', label: '' });
+    expect(MERMAID_FINDER.findTarget(svg, { family: 'flowchart', kind: 'edge', from: 'user_login', to: 'check_auth', label: '' }, 'diagram-us')).toBe(edge);
+  });
+});
+
+describe.if(hasDom)('the other id-bearing families', () => {
+  test('state: nodes by state id, transitions by ordinal, pseudo-states skipped', () => {
+    const svg = loadSvg('08-state-diagram');
+    expect(diagramFamilyOf(svg)).toBe('state');
+    const parts = describeAll(svg);
+    expect(parts.get('diagram-fixture-state-Idle-1')).toEqual({ family: 'state', kind: 'node', id: 'Idle', label: 'Idle' });
+    expect(parts.get('diagram-fixture-state-Running-7')).toMatchObject({ kind: 'node', id: 'Running' });
+    expect(parts.get('diagram-fixture-edge1')).toEqual({ family: 'state', kind: 'edge', id: 'edge1', label: 'launch job' });
+    expect(parts.has('diagram-fixture-state-root_start-0')).toBe(false);
+  });
+
+  test('class: classes by name, relations by from and to', () => {
+    const svg = loadSvg('09-class-diagram');
+    expect(diagramFamilyOf(svg)).toBe('class');
+    const parts = describeAll(svg);
+    expect(parts.get('diagram-fixture-classId-HtmlElementAnchor-1')).toMatchObject({ kind: 'node', id: 'HtmlElementAnchor' });
+    expect(parts.get('diagram-fixture-id_Annotation_ImageAttachment_1')).toMatchObject({ kind: 'edge', from: 'Annotation', to: 'ImageAttachment' });
+  });
+
+  test('er: entities by name, relationships by both entity names with the inner counters dropped', () => {
+    const svg = loadSvg('10-er-diagram');
+    expect(diagramFamilyOf(svg)).toBe('er');
+    const parts = describeAll(svg);
+    expect(parts.get('diagram-fixture-entity-DECISION-3')).toMatchObject({ kind: 'node', id: 'DECISION' });
+    expect(parts.get('diagram-fixture-id_entity-PLAN-1_entity-VERSION-2_1')).toMatchObject({ kind: 'edge', from: 'PLAN', to: 'VERSION' });
+  });
+
+  test('requirement: nodes by bare name (no family prefix), relations by stem', () => {
+    const svg = loadSvg('15-requirement-diagram');
+    expect(diagramFamilyOf(svg)).toBe('requirement');
+    const parts = describeAll(svg);
+    expect(parts.get('diagram-fixture-strict_gate')).toMatchObject({ kind: 'node', id: 'strict_gate' });
+    expect(parts.get('diagram-fixture-cli-strict_gate-1')).toMatchObject({ kind: 'edge', id: 'cli-strict_gate' });
+    expect(findDiagramTarget(svg, { family: 'requirement', kind: 'node', id: 'result_file', label: '' }, RENDER_ID)?.id).toBe(
+      'diagram-fixture-result_file',
+    );
+  });
+
+  test('sequence: parts carry classes, not ids, so actors go by name and messages, notes and frames by ordinal', () => {
+    // What regresses: clicking a sequence diagram does nothing (the owner's
+    // report), a bottom actor box is a different target from its top box,
+    // or a message's text and its line are two targets.
+    const svg = loadSvg('11-sequence-diagram');
+    expect(diagramFamilyOf(svg)).toBe('sequence');
+    const top = svg.querySelector('rect.actor-top[name="H"]')!;
+    const bottom = svg.querySelector('rect.actor-bottom[name="H"]')!;
+    const hook: DiagramTarget = { family: 'sequence', kind: 'node', id: 'H', label: 'Hook' };
+    expect(targetFromElement(svg, top, RENDER_ID)).toEqual(hook);
+    expect(targetFromElement(svg, bottom, RENDER_ID)).toEqual(hook);
+    expect(targetFromElement(svg, bottom.parentElement!.querySelector('text.actor')!, RENDER_ID)).toEqual(hook);
+    expect(findDiagramTarget(svg, hook, RENDER_ID)).toBe(top);
+
+    const lines = Array.from(svg.querySelectorAll('.messageLine0, .messageLine1'));
+    const texts = Array.from(svg.querySelectorAll('text.messageText'));
+    const first: DiagramTarget = { family: 'sequence', kind: 'edge', id: 'msg-1', from: 'CC', to: 'H', label: 'ExitPlanMode' };
+    expect(targetFromElement(svg, lines[0]!, RENDER_ID)).toEqual(first);
+    // The message TEXT is the same message: it is what a person clicks.
+    expect(targetFromElement(svg, texts[0]!, RENDER_ID)).toEqual(first);
+    expect(findDiagramTarget(svg, first, RENDER_ID)).toBe(lines[0]!);
+
+    expect(targetFromElement(svg, svg.querySelector('rect.note')!, RENDER_ID)).toEqual({
+      family: 'sequence', kind: 'node', id: 'note-1', label: 'server stops on decision',
+    });
+    expect(targetFromElement(svg, svg.querySelector('line.loopLine')!, RENDER_ID)).toEqual({
+      family: 'sequence', kind: 'cluster', id: 'frame-1', label: 'alt [approved]',
+    });
+    expect(targetFromElement(svg, svg.querySelector('rect.activation0')!, RENDER_ID)).toBeNull();
+  });
+
+  test('sequence restore: an ordinal that moved is found by its label; an edited label keeps its ordinal', () => {
+    const svg = loadSvg('11-sequence-diagram');
+    const lines = Array.from(svg.querySelectorAll('.messageLine0, .messageLine1'));
+    // A message was inserted above: the stored ordinal now names another
+    // message, but ONE message carries the stored label.
+    expect(findDiagramTarget(svg, { family: 'sequence', kind: 'edge', id: 'msg-1', label: 'open review UI' }, RENDER_ID)).toBe(lines[2]!);
+    // The text was edited in place: nothing carries the label, the ordinal stands.
+    expect(findDiagramTarget(svg, { family: 'sequence', kind: 'edge', id: 'msg-2', label: 'a label nobody has' }, RENDER_ID)).toBe(lines[1]!);
+    expect(findDiagramTarget(svg, { family: 'sequence', kind: 'edge', id: 'msg-99', label: 'gone' }, RENDER_ID)).toBeNull();
+    // An actor whose name is gone restores by its unique label.
+    expect(findDiagramTarget(svg, { family: 'sequence', kind: 'node', id: 'Renamed', label: 'Browser' }, RENDER_ID)).toBe(
+      svg.querySelector('rect.actor-top[name="B"]'),
+    );
+  });
+
+  test('the whole diagram is always restorable: its element is the svg root', () => {
+    const svg = loadSvg('11-sequence-diagram');
+    expect(findDiagramTarget(svg, { family: 'sequence', kind: 'diagram', label: 'sequenceDiagram' }, RENDER_ID)).toBe(svg);
+  });
+});
+
+describe.if(hasDom)('scrubDiagramSvg (the belt over the engine output)', () => {
+  test('drops script elements, handler attributes, javascript: and data: references, and every anchor target', () => {
+    const svg = parseInertSvg(
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" onload="window.pwned=1">' +
+        '<script>window.pwned = 1</script>' +
+        '<a href="https://example.com/away" target="_blank"><g id="x-flowchart-B-1" class="node"><rect width="4" height="4"/></g></a>' +
+        '<g id="x-flowchart-A-0" class="node" onclick="window.pwned=1"><rect width="4" height="4"/></g>' +
+        '<a href="javascript:alert(1)"><text>t</text></a>' +
+        '<a href="#x-flowchart-A-0"><text>u</text></a>' +
+        '<image href="data:text/html,x" width="1" height="1"/>' +
+        '<image href="https://example.com/a.png" width="1" height="1"/>' +
+        '<iframe src="https://example.com"></iframe>' +
+        '</svg>',
+    )!;
+    scrubDiagramSvg(svg);
+    const markup = svg.outerHTML;
+    expect(svg.querySelector('script')).toBeNull();
+    expect(svg.querySelector('iframe')).toBeNull();
+    expect(markup).not.toContain('onclick');
+    expect(markup).not.toContain('onload');
+    expect(markup).not.toContain('javascript:');
+    expect(markup).not.toContain('data:text/html');
+    // Every anchor loses its target, the fragment link included; the
+    // wrapped node survives.
+    expect(svg.querySelector('a[href]')).toBeNull();
+    expect(svg.querySelector('#x-flowchart-B-1')).not.toBeNull();
+    expect(markup).not.toContain('href="#x-flowchart-A-0"');
+    expect(markup).toContain('id="x-flowchart-A-0"');
+    // An http(s) image reference is the one external reference that stays;
+    // the data: one before it lost its href.
+    const images = Array.from(svg.querySelectorAll('image'));
+    expect(images).toHaveLength(2);
+    expect(images[0]!.hasAttribute('href')).toBe(false);
+    expect(images[1]!.getAttribute('href')).toBe('https://example.com/a.png');
+  });
+
+  test('leaves a real fixture whole (no element, id or label is lost)', () => {
+    const markup = readFileSync(join(FIXTURES, '06-flowchart-review-decision.svg'), 'utf8');
+    const raw = parseInertSvg(markup)!;
+    const clean = parseInertSvg(markup)!;
+    scrubDiagramSvg(clean);
+    expect(clean.querySelectorAll('foreignObject').length).toBeGreaterThan(0);
+    expect(clean.querySelectorAll('*').length).toBe(raw.querySelectorAll('*').length);
+    expect(clean.querySelectorAll('*').length).toBeGreaterThan(50);
+    expect(clean.querySelectorAll('[id]').length).toBe(raw.querySelectorAll('[id]').length);
+    expect(clean.textContent?.replace(/\s+/gu, ' ').trim()).toBe(raw.textContent?.replace(/\s+/gu, ' ').trim());
+  });
+});
+
+describe.if(hasDom)('edge labels, duplicate labels, and the hit layer', () => {
+  test('an edge LABEL resolves to its edge (it is painted over the edge, and is where a person clicks it)', () => {
+    const svg = loadSvg('06-flowchart-review-decision');
+    const label = Array.from(svg.querySelectorAll('g.edgeLabel')).find((g) => g.textContent?.includes('Yes'))!;
+    expect(label).toBeDefined();
+    expect(targetFromElement(svg, label, RENDER_ID)).toEqual({ family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: 'Yes' });
+    // Restore lands on the edge path, never on the label group.
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'edge', from: 'D', to: 'M', label: '' }, RENDER_ID)?.tagName.toLowerCase()).toBe('path');
+  });
+
+  test('the label fallback is skipped when two nodes carry the label (the first match is the wrong node half the time)', () => {
+    const svg = parseInertSvg(
+      '<svg xmlns="http://www.w3.org/2000/svg" aria-roledescription="flowchart-v2"><g class="nodes">' +
+        '<g id="r-flowchart-A-0" class="node"><text>Retry</text></g>' +
+        '<g id="r-flowchart-B-1" class="node"><text>Retry</text></g>' +
+        '<g id="r-flowchart-C-2" class="node"><text>Done</text></g></g></svg>',
+    )!;
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'node', id: 'Gone', label: 'Retry' }, 'r')).toBeNull();
+    expect(findDiagramTarget(svg, { family: 'flowchart', kind: 'node', id: 'Gone', label: 'Done' }, 'r')?.id).toBe('r-flowchart-C-2');
+  });
+
+  test('every edge gets ONE bare hit path in a layer appended last, placed by the ancestors\' transforms', () => {
+    // What regresses: an edge is a 1–2 px target; a sibling clone is covered
+    // by the edge's own label box; a clone that keeps `data-id` makes a
+    // host's `[data-id="L_D_M_0"]` match twice.
+    const svg = loadSvg('06-flowchart-review-decision');
+    const dataIdBefore = svg.querySelectorAll('[data-id="L_D_M_0"]').length;
+    widenEdgeHitAreas(svg);
+    widenEdgeHitAreas(svg); // idempotent
+    const layers = svg.querySelectorAll('[data-diagram-hit-layer]');
+    expect(layers.length).toBe(1);
+    expect(svg.lastElementChild).toBe(layers[0]!);
+    const edges = Array.from(svg.querySelectorAll('path.flowchart-link'));
+    const hits = Array.from(layers[0]!.children);
+    expect(hits.length).toBe(edges.length);
+    hits.forEach((hit, index) => {
+      expect(diagramHitSource(hit)).toBe(edges[index]!);
+      expect(hit.getAttribute('d')).toBe(edges[index]!.getAttribute('d'));
+      const names = Array.from(hit.attributes).map((a) => a.name).sort();
+      expect(names.filter((n) => n.startsWith('data-'))).toEqual(['data-diagram-hit']);
+      expect(names).not.toContain('id');
+      expect(names).not.toContain('class');
+      expect(names).not.toContain('marker-end');
+      expect(hit.getAttribute('stroke-width')).toBe('14');
+      expect(hit.getAttribute('pointer-events')).toBe('stroke');
+      expect(hit.getAttribute('stroke')).toBe('transparent');
+    });
+    expect(svg.querySelectorAll('[data-id="L_D_M_0"]').length).toBe(dataIdBefore);
+    expect(diagramHitSource(edges[0]!)).toBeNull();
+  });
+
+  test('a hit path in a nested group carries every ancestor transform, outermost first', () => {
+    const svg = parseInertSvg(
+      '<svg xmlns="http://www.w3.org/2000/svg"><g transform="translate(10,20)"><g class="root" transform="translate(5,5)">' +
+        '<g class="edgePaths"><path class="flowchart-link" d="M0,0L10,10" transform="scale(2)"/></g></g></g>' +
+        '<g class="edge"><path d="M0,0L1,1"/></g></svg>',
+    )!;
+    widenEdgeHitAreas(svg);
+    const hits = Array.from(svg.querySelectorAll('[data-diagram-hit]'));
+    expect(hits.map((h) => h.getAttribute('transform'))).toEqual(['translate(10,20) translate(5,5) scale(2)', null]);
+  });
+});
+
+describe.if(hasDom)('scopeDiagramCss: a <style> in a diagram may only style that diagram', () => {
+  test('the reviewer\'s payload: @import, a rule on an outside element and a fetching url( are dropped; scoped rules and keyframes stay', () => {
+    const css =
+      '@import url(//evil.example/x.css); #victim{color:red!important} ' +
+      '#d1 .node rect{fill:#123} #d1 .bg{background:url(//evil.example/a.png)} #d1 .f{filter:url(#drop)} ' +
+      '#d1 .a, #victim{color:red} #d10 .x{color:red} #d1 .e{background:u\\72l(//evil.example/b.png)} ' +
+      '#d1 .i{background:image-set("//evil.example/c.png" 1x)} @font-face{font-family:x;src:url(//evil.example/f.woff)} ' +
+      '@keyframes dash{to{stroke-dashoffset:0}} @media print{#d1 .node{fill:#000} #victim{display:none}}';
+    const kept = scopeDiagramCss(css, 'd1');
+    expect(kept).toBe('#d1 .node rect{fill:#123}#d1 .f{filter:url(#drop)}@keyframes dash{to{stroke-dashoffset:0}}@media print{#d1 .node{fill:#000}}');
+    // With no root id nothing can be scoped: only keyframes survive.
+    expect(scopeDiagramCss('#d1 .node{fill:red} @keyframes k{to{opacity:1}}', '')).toBe('@keyframes k{to{opacity:1}}');
+  });
+
+  test('the scrub applies it to the mounted tree, and every rule Mermaid itself emitted survives', () => {
+    const hostile = parseInertSvg(
+      '<svg xmlns="http://www.w3.org/2000/svg" id="d1"><style>@import url(//evil.example/x.css); #victim{color:red!important} #d1 .node{fill:red}</style><g class="node"/></svg>',
+    )!;
+    scrubDiagramSvg(hostile);
+    expect(hostile.querySelector('style')?.textContent).toBe('#d1 .node{fill:red}');
+    const onlyHostile = parseInertSvg('<svg xmlns="http://www.w3.org/2000/svg" id="d2"><style>#victim{color:red}</style></svg>')!;
+    scrubDiagramSvg(onlyHostile);
+    expect(onlyHostile.querySelector('style')).toBeNull();
+
+    for (const name of ['06-flowchart-review-decision', '08-state-diagram', '09-class-diagram', '10-er-diagram', '11-sequence-diagram', '15-requirement-diagram']) {
+      const svg = loadSvg(name);
+      const before = svg.querySelector('style')!.textContent!;
+      scrubDiagramSvg(svg);
+      const after = svg.querySelector('style')!.textContent!;
+      const rules = (text: string) => (text.match(/\{/gu) ?? []).length;
+      expect(rules(after)).toBe(rules(before));
+      expect(after.replace(/\s+/gu, '')).toBe(before.replace(/\/\*[\s\S]*?\*\//gu, '').replace(/\s+/gu, ''));
+    }
+  });
+});
diff --git a/packages/ui/utils/diagramAnchorGraphviz.test.ts b/packages/ui/utils/diagramAnchorGraphviz.test.ts
new file mode 100644
index 000000000..9765ccb95
--- /dev/null
+++ b/packages/ui/utils/diagramAnchorGraphviz.test.ts
@@ -0,0 +1,177 @@
+/**
+ * The Graphviz entry of the renderer slot over the REAL `@viz-js/viz` 3.30.0
+ * engine (the wasm runs under Bun; happy-dom parses the svg it emits, so
+ * every id, class and title below is the engine's own), and the Graphviz
+ * finder beside the Mermaid codec.
+ *
+ * What regresses if these fail:
+ * - the finder keys on the emitted `nodeN` id, which is a declaration
+ *   counter: inserting `A -> Z` before `B -> C` moves C from node3 to node4,
+ *   so every comment on C would restore onto Z. The anchor is the DOT name
+ *   from the group's `<title>`;
+ * - an edge is described without both ends, or a cluster is missed, so the
+ *   composer cannot open on them; the label fallback (restore step 2) does
+ *   not run when the name is gone;
+ * - `graphvizSourceLine` points at the wrong statement;
+ * - the Graphviz svg bypasses the scrub: a DOT `URL=` attribute emits
+ *   `<a xlink:href>` around the node (a pinpoint click becomes a
+ *   navigation) or a `javascript:` URL survives;
+ * - the theme pass recolors an author's color, leaves the white page
+ *   polygon (an opaque block on the dark canvas), or misses the default
+ *   black strokes and text;
+ * - a syntax error throws instead of resolving to a value with the line;
+ * - `diagramFinder("graphviz")` and the render result's `findTarget`
+ *   disagree (two seams).
+ *
+ * DOM-gated (DOM_TESTS=1).
+ */
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { installInertDiagramSvgParser } from '../test-setup/diagramSvg';
+import { buildDiagramAnchorValue, parseDiagramAnchor } from './diagram-anchor';
+import {
+  GRAPHVIZ_FINDER,
+  GRAPHVIZ_TARGET_SELECTOR,
+  graphvizFindTarget,
+  graphvizSourceLine,
+  graphvizTargetFromElement,
+} from './diagram-anchor-graphviz';
+import { diagramFinder, renderDiagram, themeGraphvizSvg } from './diagram-render';
+
+const hasDom = typeof document !== 'undefined';
+const THEME = { colorTheme: 'plannotator', mode: 'dark' } as const;
+
+let restoreParser: (() => void) | null = null;
+beforeAll(() => {
+  if (hasDom) restoreParser = installInertDiagramSvgParser();
+});
+afterAll(() => restoreParser?.());
+
+const CLUSTERED = ['digraph G {', '  A -> B', '  B -> C', '  subgraph cluster_0 { label="group"; B; C; }', '}', ''].join('\n');
+const BEFORE = ['digraph G {', '  A -> B', '  B -> C', '}', ''].join('\n');
+const AFTER = ['digraph G {', '  A -> B', '  A -> Z', '  B -> C', '}', ''].join('\n');
+
+async function render(source: string, id = 'diagram-gv'): Promise<SVGSVGElement> {
+  const result = await renderDiagram('graphviz', id, source, THEME);
+  if (result.ok === false) throw new Error(`render failed: ${result.message}`);
+  return result.svgNode;
+}
+
+function titled(svg: Element, selector: string, title: string): Element | null {
+  for (const el of Array.from(svg.querySelectorAll(selector))) {
+    const t = Array.from(el.children).find((c) => c.tagName.toLowerCase() === 'title');
+    if ((t?.textContent ?? '').trim() === title) return el;
+  }
+  return null;
+}
+
+describe.if(hasDom)('the Graphviz renderer entry over the real engine', () => {
+  test('renders a digraph with a cluster to the engine\'s own groups, and the finder describes every part by DOT name', async () => {
+    const svg = await render(CLUSTERED);
+    expect(svg.tagName.toLowerCase()).toBe('svg');
+    expect(svg.querySelector('g.graph > title')?.textContent).toBe('G');
+    const parts = new Map<string, unknown>();
+    for (const el of Array.from(svg.querySelectorAll(GRAPHVIZ_TARGET_SELECTOR))) {
+      const target = graphvizTargetFromElement(svg, el);
+      if (target !== null) parts.set(el.id, target);
+    }
+    expect(parts.get('node1')).toEqual({ family: 'graphviz', kind: 'node', id: 'A', label: 'A' });
+    expect(parts.get('node2')).toEqual({ family: 'graphviz', kind: 'node', id: 'B', label: 'B' });
+    expect(parts.get('node3')).toEqual({ family: 'graphviz', kind: 'node', id: 'C', label: 'C' });
+    expect(parts.get('edge1')).toEqual({ family: 'graphviz', kind: 'edge', from: 'A', to: 'B', label: '' });
+    expect(parts.get('edge2')).toMatchObject({ kind: 'edge', from: 'B', to: 'C' });
+    expect(parts.get('clust1')).toEqual({ family: 'graphviz', kind: 'cluster', id: 'cluster_0', label: 'group' });
+    expect(parts.has('graph0')).toBe(false);
+  }, 30000);
+
+  test('finds a node by name while the nodeN counter shifts under an insertion, and by label when the name is gone', async () => {
+    const before = await render(BEFORE, 'diagram-gv-before');
+    const after = await render(AFTER, 'diagram-gv-after');
+    const c = { family: 'graphviz' as const, kind: 'node' as const, id: 'C', label: 'C' };
+    expect(graphvizFindTarget(before, c)?.id).toBe('node3');
+    // The insertion moved C: the same anchor now lands on node4, whose
+    // title is C. An id-keyed finder would have returned Z (node3).
+    expect(graphvizFindTarget(after, c)?.id).toBe('node4');
+    expect(titled(after, 'g.node', 'Z')?.id).toBe('node3');
+    const bc = { family: 'graphviz' as const, kind: 'edge' as const, from: 'B', to: 'C', label: '' };
+    expect(graphvizFindTarget(before, bc)?.id).toBe('edge2');
+    expect(graphvizFindTarget(after, bc)?.id).toBe('edge3');
+    const relabeled = await render('digraph G { A -> B\n  B -> D [label=""]\n  D [label="C"] }', 'gv-l');
+    expect(graphvizFindTarget(relabeled, { family: 'graphviz', kind: 'node', id: 'C', label: 'C' })?.id).toBe(titled(relabeled, 'g.node', 'D')?.id);
+    expect(graphvizFindTarget(after, { family: 'graphviz', kind: 'node', id: 'Q', label: 'Q' })).toBeNull();
+  }, 30000);
+
+  test('maps a part to its first declaring line, quoted names inside their quotes, clusters to the subgraph line', () => {
+    const source = ['digraph G {', '  "Order intake" -> Validate', '  Validate -> Ship', '  subgraph cluster_ops { label=ops; Validate; Ship }', '}'].join('\n');
+    expect(graphvizSourceLine(source, { family: 'graphviz', kind: 'node', id: 'Order intake', label: 'Order intake' })).toEqual([2, 2]);
+    expect(graphvizSourceLine(source, { family: 'graphviz', kind: 'node', id: 'Ship', label: 'Ship' })).toEqual([3, 3]);
+    expect(graphvizSourceLine(source, { family: 'graphviz', kind: 'edge', from: 'Validate', to: 'Ship', label: '' })).toEqual([3, 3]);
+    expect(graphvizSourceLine(source, { family: 'graphviz', kind: 'cluster', id: 'cluster_ops', label: 'ops' })).toEqual([4, 4]);
+    expect(graphvizSourceLine('digraph { Shipping -> X }', { family: 'graphviz', kind: 'node', id: 'Ship', label: 'Ship' })).toBeNull();
+  });
+
+  test('passes the engine\'s svg through the scrub: no anchor href from URL=, no javascript:, no handler', async () => {
+    const svg = await render(
+      [
+        'digraph G {',
+        '  A [URL="javascript:alert(1)", label="Approve"]',
+        '  B [href="https://example.com/away", target="_blank"]',
+        '  C [label=<<b onclick="alert(1)">bold</b>>]',
+        '  A -> B -> C',
+        '}',
+      ].join('\n'),
+      'diagram-gv-hostile',
+    );
+    expect(svg.querySelector('script')).toBeNull();
+    expect(svg.querySelector('a[href], a[xlink\\:href]')).toBeNull();
+    expect(svg.querySelector('[onclick], [onload], [onerror]')).toBeNull();
+    expect(svg.outerHTML).not.toContain('javascript:');
+    expect(svg.outerHTML).not.toContain('example.com');
+    expect(svg.textContent).toContain('Approve');
+    expect(graphvizFindTarget(svg, { family: 'graphviz', kind: 'node', id: 'A', label: '' })).not.toBeNull();
+  }, 30000);
+
+  test('the theme pass recolors the Graphviz defaults onto the page tokens and leaves author colors alone', async () => {
+    const svg = await render(
+      ['digraph G {', '  A', '  B [style=filled, fillcolor="#fde68a", color=red, fontcolor=blue]', '  C [style=filled]', '  A -> B', '  subgraph cluster_0 { label="ops"; C }', '}'].join('\n'),
+      'diagram-gv-theme',
+    );
+    expect(svg.querySelector('g.graph > polygon[fill="white"]')).toBeNull();
+    const a = titled(svg, 'g.node', 'A')!;
+    expect(a.querySelector('ellipse')?.getAttribute('fill')).toBe('var(--card)');
+    expect(a.querySelector('ellipse')?.getAttribute('stroke')).toBe('var(--foreground)');
+    expect(a.querySelector('text')?.getAttribute('fill')).toBe('var(--foreground)');
+    const b = titled(svg, 'g.node', 'B')!;
+    expect(b.querySelector('ellipse')?.getAttribute('fill')).toBe('#fde68a');
+    expect(b.querySelector('ellipse')?.getAttribute('stroke')).toBe('red');
+    expect(b.querySelector('text')?.getAttribute('fill')).toBe('blue');
+    const c = titled(svg, 'g.node', 'C')!;
+    expect(c.querySelector('ellipse')?.getAttribute('fill')).toBe('var(--muted)');
+    expect(svg.querySelector('g.cluster > polygon')?.getAttribute('stroke')).toBe('var(--border)');
+    expect(svg.querySelector('g.edge > path')?.getAttribute('stroke')).toBe('var(--foreground)');
+    expect(svg.querySelector('g.edge > polygon')?.getAttribute('fill')).toBe('var(--foreground)');
+    const before = svg.outerHTML;
+    themeGraphvizSvg(svg);
+    expect(svg.outerHTML).toBe(before);
+  }, 30000);
+
+  test('a syntax error resolves to a value with the line, never a throw', async () => {
+    const result = await renderDiagram('graphviz', 'diagram-gv-bad', 'digraph G {\n  A ->\n}\n', THEME);
+    expect(result.ok).toBe(false);
+    if (result.ok !== false) return;
+    expect(result.message).toMatch(/syntax error/u);
+    expect(result.line).toBe(3);
+    expect(result.runtimeUnavailable).toBe(false);
+  }, 30000);
+
+  test('the codec writes and reads the graphviz family, and the slot\'s finder is the result\'s finder', async () => {
+    const target = { family: 'graphviz' as const, kind: 'node' as const, id: 'Ship', label: 'Ship' };
+    const anchor = buildDiagramAnchorValue(target, [3, 3]);
+    expect(parseDiagramAnchor(anchor)).toEqual({ ...target, v: 1, sourceLine: [3, 3] });
+    const result = await renderDiagram('graphviz', 'diagram-gv-seam', BEFORE, THEME);
+    expect(result.ok).toBe(true);
+    if (result.ok !== true) return;
+    expect(result.findTarget).toBe(GRAPHVIZ_FINDER.findTarget);
+    expect(diagramFinder('graphviz')).toBe(GRAPHVIZ_FINDER);
+    expect(diagramFinder('graphviz').targetSelector).toBe(GRAPHVIZ_TARGET_SELECTOR);
+  }, 30000);
+});
diff --git a/packages/ui/utils/graphviz.ts b/packages/ui/utils/graphviz.ts
new file mode 100644
index 000000000..ff051c78e
--- /dev/null
+++ b/packages/ui/utils/graphviz.ts
@@ -0,0 +1,93 @@
+/**
+ * Graphviz runtime slot — the same shape as `./mermaid`, one per engine so
+ * a host fills either independently.
+ *
+ * ONE code path feeds the renderer slot (`./diagram-render`):
+ * `loadGraphvizRuntime()`. It resolves at once from a filled slot and
+ * otherwise imports the engine lazily: `@viz-js/viz` (about 1.2 MB of
+ * Emscripten JS with the wasm inlined) is fetched on the first dot fence, a
+ * failed import is dropped from the memo so the next call issues a fresh
+ * `import()`, and the block re-attempts once and offers Retry. In
+ * Plannotator's single-file builds the import is inlined and resolves from
+ * the bundle; a host that bundles by route fetches it on demand.
+ *
+ * This module has NO static import of `@viz-js/viz`; the only place the
+ * dependency is named at runtime is the default loader's `import()`.
+ */
+import type { Viz } from '@viz-js/viz';
+
+export type GraphvizRuntime = Viz;
+
+/** Who filled the slot. */
+export type GraphvizRuntimeSource = 'loader' | 'host';
+
+export type GraphvizRuntimeLoader = () => Promise<Viz>;
+
+/** Default lazy loader: import the engine and instantiate its wasm once. */
+const defaultGraphvizLoader: GraphvizRuntimeLoader = () => import('@viz-js/viz').then((m) => m.instance());
+
+let runtime: Viz | null = null;
+let runtimeSource: GraphvizRuntimeSource | null = null;
+let loader: GraphvizRuntimeLoader = defaultGraphvizLoader;
+let pending: Promise<Viz> | null = null;
+
+/** Delay before the one automatic re-attempt after a failed lazy import. */
+let retryDelayMs = 750;
+
+/** Current runtime, or `null` while the slot is empty. */
+export function getGraphvizRuntime(): Viz | null {
+  return runtime;
+}
+
+/** How the current runtime was registered, or `null` while the slot is empty. */
+export function getGraphvizRuntimeSource(): GraphvizRuntimeSource | null {
+  return runtimeSource;
+}
+
+/** Register an already-instantiated engine (a host with its own import). */
+export function setGraphvizRuntime(next: Viz, source: GraphvizRuntimeSource = 'host'): void {
+  runtime = next;
+  runtimeSource = source;
+  pending = null;
+}
+
+/** The renderer's retry delay for the lazy path. */
+export function getGraphvizRetryDelayMs(): number {
+  return retryDelayMs;
+}
+
+/**
+ * Resolve the engine: at once from a filled slot, otherwise through the
+ * loader. A rejected load is dropped from the memo so the next call (the
+ * automatic re-attempt, a later mount, or the Retry button) issues a fresh
+ * `import()` instead of replaying the cached rejection.
+ */
+export function loadGraphvizRuntime(): Promise<Viz> {
+  if (runtime) return Promise.resolve(runtime);
+  if (!pending) {
+    const attempt = loader().then(
+      (loaded) => {
+        setGraphvizRuntime(loaded, 'loader');
+        return loaded;
+      },
+      (err: unknown) => {
+        if (pending === attempt) pending = null;
+        throw err;
+      },
+    );
+    pending = attempt;
+  }
+  return pending;
+}
+
+/** Test hook: empty the slot, stand in for the lazy import, shorten the retry delay. */
+export function __setGraphvizRuntimeLoaderForTests(
+  next: GraphvizRuntimeLoader | undefined,
+  options?: { retryDelayMs?: number },
+): void {
+  runtime = null;
+  runtimeSource = null;
+  pending = null;
+  loader = next ?? defaultGraphvizLoader;
+  retryDelayMs = options?.retryDelayMs ?? 750;
+}
diff --git a/packages/ui/utils/parser.diagramExport.test.ts b/packages/ui/utils/parser.diagramExport.test.ts
new file mode 100644
index 000000000..ceb2d15ee
--- /dev/null
+++ b/packages/ui/utils/parser.diagramExport.test.ts
@@ -0,0 +1,90 @@
+/**
+ * The export's location line for a comment made on a rendered diagram part.
+ *
+ * What regresses: the agent reading the feedback sees `Feedback on:
+ * "Approve?"` with no way to find the node in the fence — the part id and
+ * the document line are the grep handles; or a malformed anchor from
+ * another writer throws instead of being skipped; or every other
+ * annotation's export changes.
+ */
+import { describe, expect, test } from 'bun:test';
+import { AnnotationType, type Annotation, type Block } from '../types';
+import { exportAnnotationEntry, exportAnnotations, exportLinkedDocAnnotations, parseMarkdownToBlocks } from './parser';
+
+const MARKDOWN = ['# Plan', '', 'Some prose.', '', '```mermaid', 'flowchart LR', '  U --> D{Approve?}', '  D -->|Yes| M', '```', '', 'More prose.'].join('\n');
+
+function blocks(): Block[] {
+  return parseMarkdownToBlocks(MARKDOWN);
+}
+
+describe('exportAnnotations: diagram anchors', () => {
+  test('a diagram comment prints the location line under its heading', () => {
+    const fence = blocks().find((b) => b.type === 'code')!;
+    const ann: Annotation = {
+      id: 'd1',
+      blockId: fence.id,
+      startOffset: 0,
+      endOffset: 0,
+      type: AnnotationType.COMMENT,
+      text: 'Rename this step',
+      originalText: 'Approve?',
+      createdA: 1,
+      diagramAnchor: { v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [7, 7] },
+    };
+    const out = exportAnnotations(blocks(), [ann]);
+    expect(out).toContain('Feedback on: "Approve?"\nDiagram node Approve? (D), line 7\n> Rename this step');
+    // The fence's own line range still leads the heading.
+    expect(out).toContain('(lines 5–9) Feedback on: "Approve?"');
+  });
+
+  test('a malformed anchor is skipped and a text comment is byte-identical to before', () => {
+    const fence = blocks().find((b) => b.type === 'code')!;
+    const base: Annotation = {
+      id: 't1',
+      blockId: fence.id,
+      startOffset: 0,
+      endOffset: 0,
+      type: AnnotationType.COMMENT,
+      text: 'note',
+      originalText: 'Approve?',
+      createdA: 1,
+    };
+    const plain = exportAnnotations(blocks(), [base]);
+    const malformed = exportAnnotations(blocks(), [{ ...base, diagramAnchor: { kind: 'node' } as never }]);
+    expect(malformed).toBe(plain);
+    expect(plain).not.toContain('Diagram node');
+  });
+});
+
+describe('the other two export paths carry the location line too', () => {
+  // What regresses: a folder / linked-doc annotate submit, and a single
+  // copied entry, lose `Diagram node Approve? (D), line 7` while the main
+  // export keeps it.
+  const ann = (blockId: string): Annotation => ({
+    id: 'd1',
+    blockId,
+    startOffset: 0,
+    endOffset: 0,
+    type: AnnotationType.COMMENT,
+    text: 'Rename this step',
+    originalText: 'Approve?',
+    createdA: 1,
+    diagramAnchor: { v: 1, family: 'flowchart', kind: 'node', id: 'D', label: 'Approve?', sourceLine: [7, 7] },
+  });
+
+  test('exportLinkedDocAnnotations', () => {
+    const docBlocks = blocks();
+    const fence = docBlocks.find((b) => b.type === 'code')!;
+    const out = exportLinkedDocAnnotations(new Map([['docs/plan.md', { annotations: [ann(fence.id)], globalAttachments: [], blocks: docBlocks }]]));
+    expect(out).toContain('Feedback on: "Approve?"\nDiagram node Approve? (D), line 7\n> Rename this step');
+  });
+
+  test('exportAnnotationEntry', () => {
+    expect(exportAnnotationEntry(ann('block-x'))).toContain('Feedback on: "Approve?"\nDiagram node Approve? (D), line 7\n> Rename this step');
+  });
+
+  test('a whole-diagram comment prints the family and the fence range', () => {
+    const whole: Annotation = { ...ann('block-x'), originalText: 'flowchart LR', diagramAnchor: { v: 1, family: 'flowchart', kind: 'diagram', label: 'flowchart LR', sourceLine: [6, 8] } };
+    expect(exportAnnotationEntry(whole)).toContain('Diagram (flowchart), lines 6–8\n');
+  });
+});
diff --git a/packages/ui/utils/parser.ts b/packages/ui/utils/parser.ts
index cf73a4c05..fd72fc8b7 100644
--- a/packages/ui/utils/parser.ts
+++ b/packages/ui/utils/parser.ts
@@ -1,6 +1,7 @@
 import type { Block, Annotation, CodeAnnotation, EditorAnnotation, ImageAttachment } from '../types';
 import { planDenyFeedback } from '@plannotator/core/feedback-templates';
 import { resolveReplyParents } from '@plannotator/core/annotation-threads';
+import { diagramAnchorLocationLine, parseDiagramAnchor } from '@plannotator/core/diagram-anchor';
 import { skillReferenceExportBlock } from './skillReferences';
 
 /**
@@ -1249,7 +1250,7 @@ export const exportAnnotationEntry = (ann: any, opts: ElementContextExportOption
         output += `[${ann.text}] ${commentHeadingLine(ann)}\n`;
         if (ann.quickLabelTip) output += `> ${ann.quickLabelTip}\n`;
       } else {
-        output += `${commentHeadingLine(ann)}\n> ${ann?.text ?? ''}\n`;
+        output += `${commentHeadingLine(ann)}\n${diagramLocationExportLine(ann)}> ${ann?.text ?? ''}\n`;
       }
   }
   const resolvedOpts: ElementContextExportOptions = {
@@ -1267,6 +1268,16 @@ export const exportAnnotationEntry = (ann: any, opts: ElementContextExportOption
   return output;
 };
 
+/** The location line under a comment made on a rendered diagram part:
+ *  `Diagram node Approve? (D), line 4` — the part's own id (what the agent
+ *  greps the fence for) and the DOCUMENT line that declares it. Emits
+ *  nothing for every other annotation, keeping their output byte-identical;
+ *  a malformed anchor (an older or foreign writer) is skipped, never thrown. */
+const diagramLocationExportLine = (ann: any): string => {
+  const anchor = ann?.diagramAnchor === undefined ? null : parseDiagramAnchor(ann.diagramAnchor);
+  return anchor === null ? '' : `${safeInline(diagramAnchorLocationLine(anchor), 600)}\n`;
+};
+
 const lineLabelForAnnotation = (blocks: Block[], ann: any): string | null => {
   if (!ann.blockId || ann.type === 'GLOBAL_COMMENT') return null;
   if (typeof ann.blockId === 'string' && ann.blockId.startsWith('diff-block-')) return null;
@@ -1435,11 +1446,13 @@ export const exportAnnotations = (
       case 'COMMENT':
         if (ann.isQuickLabel) {
           output += `[${ann.text}] ${commentHeadingLine(ann)}\n`;
+          output += diagramLocationExportLine(ann);
           if (ann.quickLabelTip) {
             output += `> ${ann.quickLabelTip}\n`;
           }
         } else {
           output += `${commentHeadingLine(ann)}\n`;
+          output += diagramLocationExportLine(ann);
           output += `> ${ann.text}\n`;
         }
         break;
@@ -1554,6 +1567,7 @@ export const exportLinkedDocAnnotations = (
 
         case 'COMMENT':
           output += `${commentHeadingLine(ann)}\n`;
+          output += diagramLocationExportLine(ann);
           output += `> ${ann.text}\n`;
           break;
 
diff --git a/packages/ui/utils/sharing.multiTarget.test.ts b/packages/ui/utils/sharing.multiTarget.test.ts
index 88c645926..764b81e80 100644
--- a/packages/ui/utils/sharing.multiTarget.test.ts
+++ b/packages/ui/utils/sharing.multiTarget.test.ts
@@ -38,6 +38,31 @@ describe("sharing — multi-target annotations", () => {
     expect(JSON.stringify(shareable)).not.toContain("outline");
   });
 
+  test("a diagram anchor follows the same rule: the comment shares, the anchor does not", () => {
+    // A diagram anchor names a part of a render the link's recipient
+    // re-creates from the fence; the quoted label still restores by text
+    // search on the shared document, and the anchor itself never travels.
+    const DIAGRAM: Annotation = {
+      id: "ann-2",
+      blockId: "block-3",
+      startOffset: 0,
+      endOffset: 0,
+      type: AnnotationType.COMMENT,
+      text: "Rename this step",
+      originalText: "Approve?",
+      createdA: 2,
+      author: "reviewer",
+      diagramAnchor: { v: 1, family: "flowchart", kind: "node", id: "D", label: "Approve?", sourceLine: [4, 4] },
+    };
+    const shareable = toShareable([DIAGRAM]);
+    expect(shareable).toEqual([["C", "Approve?", "Rename this step", "reviewer", undefined]]);
+    expect(JSON.stringify(shareable)).not.toContain("diagramAnchor");
+    expect(JSON.stringify(shareable)).not.toContain("sourceLine");
+    const restored = fromShareable(shareable);
+    expect(restored[0]!.diagramAnchor).toBeUndefined();
+    expect(restored[0]!.originalText).toBe("Approve?");
+  });
+
   test("round trip keeps the comment but has no target array", () => {
     const restored = fromShareable(toShareable([MULTI]));
     expect(restored.length).toBe(1);
diff --git a/tests/entry-assets.test.ts b/tests/entry-assets.test.ts
index a9c7add83..b43d751ce 100644
--- a/tests/entry-assets.test.ts
+++ b/tests/entry-assets.test.ts
@@ -118,7 +118,10 @@ describe('review entry assets', () => {
     expect(read('packages/ui/utils/mermaid.ts')).not.toMatch(staticImport('mermaid'));
     expect(read('packages/ui/utils/mermaid.ts')).toContain("import('mermaid')");
     expect(read('packages/ui/components/GraphvizBlock.tsx')).not.toMatch(staticImport('@viz-js/viz'));
-    expect(read('packages/ui/components/GraphvizBlock.tsx')).toContain("import('@viz-js/viz')");
+    expect(read('packages/ui/components/DiagramBlock.tsx')).not.toMatch(staticImport('@viz-js/viz'));
+    expect(read('packages/ui/utils/diagram-render.ts')).not.toMatch(staticImport('@viz-js/viz'));
+    expect(read('packages/ui/utils/graphviz.ts')).not.toMatch(staticImport('@viz-js/viz'));
+    expect(read('packages/ui/utils/graphviz.ts')).toContain("import('@viz-js/viz')");
     expect(read('packages/ui/utils/generateIdentity.ts')).not.toMatch(staticImport('unique-username-generator'));
   });