fix(web): render Mermaid diagrams in Markdown

[adamblumoff]

Mermaid fences currently render as ordinary code blocks in T3 Code, so diagrams in Markdown lose the visual structure available in renderers that support Mermaid.

This change lazy-loads Mermaid when a completed Mermaid fence is present, serializes rendering because Mermaid configuration is global, and falls back to the original fenced code if rendering fails. Diagrams use strict security mode, follow the active theme, retain readable intrinsic sizing, and preserve their original Markdown for copy operations.

The shared web Markdown renderer covers chat, timelines, plans, Markdown file previews, and pull request bodies and reviews. Desktop inherits the web behavior; mobile remains unchanged because it uses a separate native renderer.

Validation

• vp test run apps/web/src/components/MermaidDiagram.test.ts
• vp lint apps/web/src/components/MermaidDiagram.tsx apps/web/src/components/MermaidDiagram.test.ts apps/web/src/components/ChatMarkdown.tsx apps/web/src/markdown-clipboard.ts
• vp run --filter @t3tools/web typecheck
• vp run --filter @t3tools/web build
• Rendered a sequence diagram in dark and light themes in an isolated dev environment
• Verified a 1247px diagram scrolls inside a 758px Markdown viewport

Model: GPT-5.6 Codex in T3 Code.

Note

Render Mermaid diagrams in chat Markdown code fences

• Adds a MermaidDiagram component that dynamically imports and renders Mermaid when a code fence is tagged mermaid and streaming is not in progress; other code fences continue to use Shiki.
• Rendering is serialized through a module-level promise queue and canceled on unmount to avoid stale updates; security level is set to strict.
• Diagram SVG width is adjusted to match the viewBox, and the original fenced source is preserved in a data-markdown-copy attribute for clipboard support.
• Adds CSS in index.css for diagram borders, background, title, padding, and SVG sizing.
• Behavioral Change: while streaming, mermaid fences fall back to plain code block rendering.

^{Macroscope summarized fa0583d.}

---

Note

Medium Risk
Injects Mermaid-generated SVG via dangerouslySetInnerHTML (mitigated by strict Mermaid security) and adds a sizable client dependency; behavior is gated to non-streaming fences with code-block fallback.

Overview
Completed mermaid fenced blocks in shared chat Markdown now render as diagrams instead of only Shiki-highlighted code. While a message is still streaming, behavior is unchanged (code block only).

Rendering lazy-loads the mermaid package, runs with securityLevel: "strict", follows light/dark theme, and uses a global render queue so Mermaid’s one-at-a-time initialization stays safe. Failed or in-progress renders fall back to the existing code block UI.

Diagrams get layout/CSS (bordered figure, optional fence title, horizontal scroll) and data-markdown-copy via a new serializeMarkdownCodeFence helper so copy/paste keeps valid fenced source even when the diagram source contains backticks.

^{Reviewed by Cursor Bugbot for commit fa0583d. Bugbot is set up for automated code reviews on this repo. Configure here.}

[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: 284c4f42-9e37-43a2-a4f9-8c0c640879da

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.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit 4653760. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new feature: rendering Mermaid diagrams in Markdown chat responses. It adds ~1000 lines including a new component that injects SVG via dangerouslySetInnerHTML. New user-facing rendering capabilities with potential security surface area warrant human review.

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4653760dcf

ℹ️ 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".