feat: support mermaid diagrams

[maxy-shpfy]

TL;DR

Adds native Mermaid diagram rendering to the chat markdown renderer, with a magnifier loupe and fullscreen zoom/pan viewer.

What changed?

Fenced ```mermaid code blocks in chat messages now render as interactive SVG diagrams instead of plain code blocks. The implementation includes:

• MermaidDiagram — the top-level component that gates rendering on stream completion, falls back to a code block while streaming or on parse failure, and shows a red error banner if Mermaid rejects the source. Once rendered, it sizes the diagram to fit within 90% of the viewport in both dimensions.
• MermaidFullscreen — a portalled fullscreen overlay with wheel-to-cursor zoom, drag-to-pan, zoom in/out buttons, and a reset. Dismissible via Escape or backdrop click.
• MermaidLoupe — a circular magnifier lens that follows the cursor over the inline diagram, zooming to a readable scale based on how much the diagram has been shrunk to fit its container.
• useMermaidSvg — a hook that lazily imports Mermaid, re-renders on source or theme changes, and isolates concurrent render calls with a per-call ID to avoid DOM collisions during streaming and React StrictMode double-invokes. The last successfully rendered SVG is retained so a transient failure never drops a good diagram.
• An isStreaming prop is threaded from ChatMessage through Markdown down to MermaidDiagram so rendering is deferred until the full source is available, preventing flicker from transiently-valid half-written diagrams.
• Mermaid theme is mapped from the app's light/dark theme to Mermaid's "default" / "dark" options.

Screen Recording 2026-07-01 at 12.21.47 PM.mov (uploaded via Graphite)

How to test?

1. Start a chat session and prompt the agent to produce a Mermaid diagram (e.g. "Draw a flowchart of a login flow in Mermaid").
2. Confirm the diagram renders as an SVG once streaming completes, not as a raw code block.
3. Hover over the diagram and verify the toolbar appears with a magnifier and fullscreen button.
4. Toggle the magnifier and move the cursor over the diagram to confirm the loupe follows and zooms correctly.
5. Open the fullscreen viewer, test wheel zoom, drag-to-pan, zoom buttons, reset, and Escape/backdrop dismissal.
6. Switch between light and dark themes and confirm the diagram re-renders with the appropriate Mermaid theme.
7. Send a deliberately broken Mermaid block and confirm the error message and code block fallback appear.

Why make this change?

Agents frequently emit Mermaid diagrams as part of their responses. Displaying them as raw code blocks forces users to copy the source and render it elsewhere. Rendering diagrams inline — with tools to inspect dense or large diagrams — significantly improves the readability and usefulness of agent output.

[maxy-shpfy]

• feat: support mermaid diagrams #53 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.