Mermaid diagrams in fenced blocks

[SyNeto]

Goal

Render ` ```mermaid ` fenced code blocks as actual SVG diagrams using Mermaid, fully offline, no CDN.

Why

Mermaid is the dominant diagram-as-code language for Markdown docs. GitHub renders these natively, so users expect to see diagrams when reading the same files locally.

Proposed approach

• `npm install --save-dev mermaid` and bundle into `vendor/` with esbuild. Heads-up: Mermaid is the heaviest dependency so far (~2 MB minified).
• After `marked.parse()`, post-process the DOM: find every `pre code.language-mermaid`, hand the source to `mermaid.render()`, replace the `

  ` with the resulting SVG.

• Theme: respect `prefers-color-scheme` (Mermaid has built-in light/dark themes).

Optimizations to consider

• Lazy load. Only inject `vendor/mermaid.min.js` when the parsed output contains a `language-mermaid` block. Saves the 2 MB on docs without diagrams. Must stay extension-local — load via dynamic `<script>` pointing at `chrome.runtime.getURL(...)`, never a CDN.
• Cache rendered SVGs keyed by source hash to avoid re-rendering on every toggle.

Constraints

• No CDN. Mermaid bundled and shipped locally.
• Watch for CSP violations — Mermaid uses runtime `<style>` injection.

Acceptance criteria

• A ```mermaid \n flowchart LR \n A --> B \n ``` block renders as an SVG diagram
• No network requests issued by Mermaid
• Works in light and dark themes
• No CSP violations in extension manifest