feat(web): render Mermaid diagrams in markdown

[jdalmeida]

What Changed

T3 Code now renders fenced Mermaid diagrams in chat messages and rendered Markdown file previews.

The diagram viewport supports pointer controls, keyboard controls, bounded pan, 50–300 percent zoom, and a reset action.

Why

Markdown diagrams appeared as source code. This made agent plans and architecture notes harder to read.

A stable Markdown component prevents diagram flicker when thread data changes. The viewport limits zoom and pan positions.

Fixes #4571

UI Changes

Before

After

Interaction

Watch the zoom, pan, and reset controls

Checklist

• This PR is focused on Mermaid rendering.
• I explained what changed and why.
• I included before and after images.
• I included a video for the zoom and pan controls.

About 790 changed lines come from the generated lockfile update for Mermaid.

Validation

• pnpm exec vp test run apps/web/src/components/MermaidDiagram.test.ts
• pnpm exec vp lint apps/web/src/components/MermaidDiagram.tsx apps/web/src/components/MermaidDiagram.test.ts apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/FileMarkdownViewer.tsx
• pnpm --filter @t3tools/web typecheck
• pnpm --filter @t3tools/web build
• Local web test with an isolated T3 home and one new GPT-5.6-Sol thread.

Model: GPT-5.6 Codex

Harness: T3 Code Codex harness

Note

Render Mermaid diagrams in chat markdown with pan/zoom support

• Adds a MermaidDiagram component (MermaidDiagram.tsx) that renders mermaid code fences as interactive diagrams with toolbar controls for zoom in/out and reset.
• Diagrams render in strict security mode, respect the current light/dark theme, and serialize renders via a global queue to avoid concurrent conflicts.
• Introduces MarkdownRenderContext in ChatMarkdown.tsx to pass diffThemeName, isStreaming, and resolvedTheme to child renderers without prop drilling.
• Mermaid code fences are only rendered as diagrams when not streaming; during streaming they fall back to standard Shiki-highlighted code blocks.
• Risk: adds the mermaid package (~11.x) as a dependency, which is dynamically imported at render time.

^{Macroscope summarized 22a0072.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e329852a-a42a-4626-8000-9578b88debfa

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new feature with ~400 lines of new component code for rendering Mermaid diagrams with interactive pan/zoom controls. New user-facing capabilities with substantial new logic warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

We're closing this PR as we clean up the T3 Code backlog. Thank you for taking the time to put this together.

#6191 is the smaller and safer Mermaid implementation. It lazy-loads Mermaid, uses strict security mode, preserves source text, handles failures, and covers shared Markdown views without this branch's extra pan and zoom code.

If you believe we closed this in error, please reopen the PR and leave a comment explaining what we missed.