feat(web): render Mermaid diagrams in chat

[Nortus222]

What Changed

Render fenced mermaid blocks as diagrams in web and desktop chat, including user messages. Add Source/Preview switching while preserving copy and line wrapping. Mobile continues displaying Mermaid source code.

Why

Chat currently displays Mermaid diagrams as ordinary code blocks. Load Mermaid only when a completed diagram enters the viewport, render locally in strict mode, and show source when rendering fails. Serialize diagram rendering so concurrent theme configurations cannot interfere.

UI Changes

Draft pending before/after screenshots and a short Source/Preview interaction recording. Automated browser interaction was unavailable.

Validation: 58 focused chat rendering and clipboard tests, web typecheck, and web production build passed. Targeted lint reported no errors and three existing warnings in unchanged renderer code. Most added lines are Mermaid dependency lockfile entries.

Screenshots

Before:

After:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Model: GPT-6 · Harness: Codex

Summary by CodeRabbit

• New Features

  • Mermaid code blocks now render as diagram previews in web and desktop chat.
  • Switch between diagram preview and source code, and copy the original Mermaid source.
  • Diagrams appear after streaming finishes; invalid diagrams remain readable as source.
  • Mobile continues to display Mermaid blocks as code.

• Documentation

  • Added guidance on using Mermaid diagrams in the composer.

[luisdalmolin]

This would be great

[Nortus222]

Note

GPT-6 via Codex, on behalf of Ihor.

Acknowledging substantial overlap with #9621: both PRs render completed Mermaid fences, lazy-load Mermaid, support light/dark themes, serialize rendering, and fall back to source while streaming or on render failure.

This PR additionally provides a Source/Preview toggle and defers rendering until a diagram becomes visible. #9621 includes caching across remounts and Markdown source handling when copying a selected diagram. The core rendering work is largely duplicate, so coordinating around #9621 would avoid maintaining competing implementations.

@juliusmarminge let me know you if you want me to close this or maybe merge with #9621

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 22d522ce-a597-479b-9793-a4fccac98095

📥 Commits

Reviewing files that changed from the base of the PR and between 0f602b3 and 3f08da0.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• apps/web/package.json
• apps/web/src/components/ChatMarkdown.test.tsx
• apps/web/src/components/ChatMarkdown.tsx
• apps/web/src/components/MarkdownMermaidBlock.tsx
• apps/web/src/lib/mermaidRendering.test.ts
• apps/web/src/lib/mermaidRendering.ts
• docs/user/composer.md

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The web composer now renders Mermaid fences as lazy SVG previews after streaming. Users can switch between preview and source, copy the original code, and read source when rendering fails. Rendering uses serialized, themed Mermaid calls with strict security settings.

Changes

Mermaid Markdown previews

Layer / File(s)	Summary
Serialized Mermaid rendering apps/web/package.json, apps/web/src/lib/mermaidRendering.ts, apps/web/src/lib/mermaidRendering.test.ts	Adds Mermaid and a queued renderer that applies strict theme settings, generates unique IDs, returns SVG, and recovers after rejected renders. Tests cover serialization, themes, and failures.
Markdown preview integration apps/web/src/components/ChatMarkdown.tsx, apps/web/src/components/MarkdownMermaidBlock.tsx, apps/web/src/components/ChatMarkdown.test.tsx, docs/user/composer.md	Adds lazy Mermaid previews, source and preview toggles, streaming-aware mounting, source fallback, interaction tests, and composer documentation.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Suggested reviewers: juliusmarminge, t3dotgg

Sequence Diagram(s)

sequenceDiagram
  participant ChatMarkdown
  participant MarkdownCodeBlock
  participant MarkdownMermaidBlock
  participant renderMermaidDiagram
  participant mermaid
  ChatMarkdown->>MarkdownCodeBlock: provide Mermaid fence
  MarkdownCodeBlock->>MarkdownMermaidBlock: mount after streaming ends
  MarkdownMermaidBlock->>renderMermaidDiagram: request themed diagram
  renderMermaidDiagram->>mermaid: initialize and render SVG
  mermaid-->>renderMermaidDiagram: SVG or error
  renderMermaidDiagram-->>MarkdownMermaidBlock: render result
  MarkdownMermaidBlock-->>MarkdownCodeBlock: preview or source fallback

Loading

Merge Risk: ⚪ Minimal · up to 3f08d

This PR adds Mermaid diagram rendering to chat messages with a safe, sandboxed rendering path, a source/preview toggle that preserves copy behavior, and graceful fallback to source text when a diagram fails to render or is still streaming. No unresolved correctness, security, or stability concerns were identified, so this change looks safe to merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files. (2 skipped: 2…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: rendering Mermaid diagrams in chat.
Description check	✅ Passed	The description includes all required sections, explains the change and rationale, documents UI changes with before and after screenshots, and provides validation results. The interaction video is not…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}