[bkrem]

Why

GitHub renders ```mermaid fences as diagrams, so PR descriptions and comments often include them. Codiff shows them as raw code.

What changed

This PR renders them as diagrams in PR/MR descriptions, comments, and shared plans. Markdown editors keep showing the code.

flowchart LR
    A[mermaid fence] --> B{Read-only view?}
    B -- No --> C[Code block]
    B -- Yes --> D[Lazy-load Mermaid and render]
    D -- SVG --> E[Diagram with controls]
    D -- Parse error --> F[Code block plus error note]

Loading

• A code-block descriptor outranks CodeMirror's for the mermaid language. Only ReadOnlyMarkdownView turns it on, through a renderDiagrams prop.
• Hovering a diagram shows GitHub's zoom, reset, and pan buttons, plus Copy code and Show source. ⌘/Ctrl+scroll zooms around the cursor, dragging pans, and double-click resets. Plain scrolling still scrolls the page.
• Diagrams follow the light and dark themes. Renders go through one queue, because Mermaid's config is global, and results land in an LRU cache of 50.
• If Mermaid can't parse a fence, the code block stays, with "Unable to render Mermaid diagram" under it.

Security

Each diagram is an <img> with an SVG data URL, so nothing inside the SVG can run. Comments come from any GitHub user and the renderer can reach the preload bridge, so this sits on top of Mermaid's securityLevel: 'strict' instead of relying on it.

Bundle size

Nothing loads until a page has a Mermaid fence. Incremental cost, measured on dist/assets from vpr build:

Loads on	Raw	Gzip
First diagram (Mermaid core)	668 kB	166 kB
First flowchart (diagram plus dagre)	149 kB	52 kB
First sequence diagram	118 kB	31 kB

Mermaid 12 lays diagrams out with ELK by default, which adds 1,468 kB (451 kB gzip). The renderer sets layout: 'dagre', so ELK loads only for diagrams that ask for it, such as flowchart-elk.

Verification

• vp test: 1,314 passed, 4 skipped. The new tests in core/__tests__/mermaid.test.ts and core/__tests__/ReadOnlyMarkdownView.test.tsx mock only mermaid.
• vp check and vpr build pass.

Preview

Screen.Recording.2026-10-30.at.14.09.31.mov

[cpojer]

Thank you!