feat(markdown): add mermaid diagram rendering

AGENTS.md

@@ -55,6 +55,7 @@ Describe and preserve what is already true in the repo today.
 
 - `markdown` renders as sanitized GFM and supports download plus browser print-to-PDF.
 - Markdown code fences reuse the CodeMirror viewer approach instead of a second highlighting stack.
+- Markdown ` ```mermaid ` fenced code blocks render as interactive diagrams via the dynamically imported `mermaid` library with theme-aware rendering and strict security.
 - `code` uses a read-only CodeMirror surface with language-aware loading.
 - `diff` uses a review-style git patch viewer with unified and split modes.
 - `csv` renders as a readable table/grid.
@@ -109,6 +110,7 @@ If you change the payload contract, update the code, docs, examples, and the Ope
 
 ### Renderers
 - `src/components/renderers/markdown-renderer.tsx`
+- `src/components/renderers/mermaid-block.tsx` - inline mermaid diagram renderer used within markdown fences
 - `src/components/renderers/code-renderer.tsx`
 - `src/components/renderers/diff-renderer.tsx`
 - `src/components/renderers/csv-renderer.tsx`

docs/architecture.md

@@ -19,7 +19,7 @@ GitHub Pages is strongest when the application behaves like a static shell inste
 
 ## Renderer implementation
 
-- `markdown` - formatted document view with shell copy, download, and print-to-PDF flows plus embedded premium code fences
+- `markdown` - formatted document view with shell copy, download, and print-to-PDF flows plus embedded premium code fences and inline mermaid diagram rendering
 - `code` - read-only CodeMirror view with syntax-aware rendering and code affordances
 - `diff` - review-style diff view with unified and split modes
 - `csv` - table-focused data grid built from parsed rows and dynamic columns
@@ -42,6 +42,10 @@ This round explicitly evaluated Shiki and rejected it for now.
 
 If markdown fence fidelity becomes a repeated product problem after these bundle reductions, Shiki remains the next serious candidate, but it should replace rather than supplement the current fence path.
 
+## Mermaid diagram support
+
+Markdown artifacts render ` ```mermaid ` fenced code blocks as interactive diagrams using the `mermaid` library. The library is dynamically imported on first encounter to avoid bloating the initial bundle. Diagrams respond to theme changes (light/dark) and fall back to displaying the raw mermaid source if rendering fails. Security level is set to `strict` to prevent script injection via diagram definitions.
+
 ## Raw code renderer choice
 
 The raw code viewer now keeps CodeMirror, but the architecture is cleaner:

docs/dependency-notes.md

@@ -15,6 +15,7 @@
 - `@tanstack/react-table` - MIT
 - `lz-string` - MIT
 - `fflate` - MIT
+- `mermaid` - MIT
 
 ## Notes
 
@@ -30,6 +31,7 @@
 - `@git-diff-view/*` fits review-style diffs better than a generic merge editor for the current viewer.
 - `papaparse` plus `@tanstack/react-table` keeps CSV parsing and rendering readable without coupling to a heavyweight data-grid framework.
 - `fflate` provides portable deflate/inflate support across iOS Safari and Android Chromium without relying on browser-specific compression streams.
+- `mermaid` renders diagram definitions (flowcharts, sequence diagrams, etc.) to SVG client-side. Dynamically imported within the markdown renderer so it does not affect initial bundle size.
 
 ## Notable removals
 

docs/payload-format.md

@@ -139,7 +139,7 @@ Two sample envelopes live in `src/lib/payload/examples.ts` for local development
 }
 ```
 
-Markdown artifacts use the `content` field and currently support client-side clipboard copy, file download, and browser print-to-PDF from the viewer shell.
+Markdown artifacts use the `content` field and currently support client-side clipboard copy, file download, and browser print-to-PDF from the viewer shell. Mermaid fenced code blocks (` ```mermaid `) within markdown content are rendered as interactive diagrams.
 
 ### Code artifact example