feat: add inline Mermaid diagram rendering

[chriswingler]

Summary

• Render ```mermaid fenced code blocks as interactive SVG diagrams instead of syntax-highlighted text
• Lazy-load the mermaid library (~2MB) via React.lazy() + dynamic import() so the initial bundle size is unaffected
• Add fullscreen modal view, copy-to-clipboard, error handling with syntax hints, and dark theme

Motivation

When LLM assistants generate Mermaid diagrams in chat responses, they currently appear as plain syntax-highlighted code. This PR enables visual rendering of those diagrams inline, making flowcharts, sequence diagrams, class diagrams, and other Mermaid diagram types immediately useful.

Changes

File	Change
web/package.json	Add mermaid dependency
web/src/components/ai-elements/mermaid-diagram.tsx	New MermaidDiagram + MermaidModal components
web/src/components/ai-elements/streamdown.tsx	Detect language === "mermaid" in StreamdownCode and route to MermaidDiagram via Suspense

Architecture

Markdown with ```mermaid block
  │
  ▼
StreamdownCode (streamdown.tsx)
  │ detects language === "mermaid"
  ▼
<Suspense> boundary (loading fallback)
  │
  ▼
<MermaidDiagram> (lazy-loaded)
  │ dynamic import("mermaid")
  │ mermaid.parse() → validate
  │ mermaid.render() → SVG
  ▼
Inline SVG with controls
  ├── Copy source code
  └── Fullscreen modal (Dialog)

Key design decisions:

1. Lazy loading — Mermaid is ~2MB. Using React.lazy() for the component and dynamic import() for the library ensures zero impact on initial load.

2. Intercept at StreamdownCode — Cleanest integration point. No changes to CodeBlock or MessageResponse. Follows the same pattern as the existing html preview special-case in CodeBlock.

3. Reuse existing UI primitives — Uses the project's Dialog, Button, Tooltip components and cn() utility. Matches CodeBlock's styling patterns (border-term-border, bg-card, hover-reveal toolbar).

4. Dark theme — Configured for readability on dark backgrounds, matching the existing code block aesthetic.

Supported diagram types

All Mermaid diagram types are supported: flowchart, sequence, class, state, ER, gantt, pie, git graph, mindmap, timeline, quadrant, requirement, C4, and more.

Test plan

• Verify ```mermaid code blocks render as SVG diagrams
• Verify non-mermaid code blocks are unaffected
• Verify fullscreen modal opens/closes correctly
• Verify copy button copies mermaid source code
• Verify error state shows helpful message for invalid syntax
• Verify initial page load is not affected (lazy loading)
• Verify npm run build succeeds
• Verify npm run typecheck passes
• Verify npm run lint passes

🤖 Generated with Claude Code

---

[devin-ai-integration]

Devin Review found 2 potential issues.

View 5 additional findings in Devin Review.

[Copilot]

Pull request overview

This PR adds inline rendering of Mermaid diagrams from fenced code blocks (```mermaid), replacing plain syntax-highlighted text with interactive SVG visualizations. The implementation uses lazy-loading to avoid impacting the initial bundle size and integrates cleanly with the existing markdown rendering pipeline.

Changes:

• Added mermaid package dependency (version 11.4.1) for diagram rendering
• Created new MermaidDiagram component with fullscreen modal, copy functionality, and error handling
• Modified StreamdownCode to intercept mermaid language code blocks and route them to the diagram renderer via Suspense boundary

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 11 comments.

File	Description
web/package.json	Adds mermaid library dependency (v11.4.1) for diagram rendering
web/src/components/ai-elements/mermaid-diagram.tsx	New component providing diagram rendering, modal view, error handling, and copy functionality with lazy-loaded mermaid library
web/src/components/ai-elements/streamdown.tsx	Intercepts mermaid code blocks in markdown and routes to MermaidDiagram component via lazy-loading with Suspense fallback

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3c28a89e68

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".