feat(desktop): render Mermaid diagrams in markdown file preview

[liuhao1024]

Summary

Render Mermaid diagrams in the Desktop markdown file preview. Fenced code blocks with language mermaid are now rendered as interactive SVG diagrams instead of showing raw source text.

Fixes #38654

Root Cause

The custom MarkdownCode component override in preview-file.tsx routes all fenced code blocks through ShikiHighlighter, bypassing Streamdown's internal mermaid plugin dispatch. Even if @streamdown/mermaid were wired as a plugin, the custom components.code would intercept before the plugin could fire.

Solution

Detect language === 'mermaid' inside MarkdownCode and delegate to a lazy-loaded MermaidBlock component that calls mermaid.render() with securityLevel: 'strict'. The mermaid library is code-split via React.lazy so it only loads when a mermaid block is actually encountered.

Changes

File	Change
apps/desktop/package.json	Add mermaid ^11.15.0 dependency
apps/desktop/src/components/chat/mermaid-block.tsx	New MermaidBlock component
apps/desktop/src/app/chat/right-rail/preview-file.tsx	Mermaid detection in MarkdownCode

Implementation Details

• Lazy loading: MermaidBlock is loaded via React.lazy() — the ~2MB mermaid library is only fetched when a user opens a file containing mermaid blocks
• Security: mermaid.render() uses securityLevel: 'strict' which strips <script> tags and event handlers from generated SVG
• Error handling: Render errors show a collapsible error message with the raw source for debugging
• Dark mode: Mermaid theme adapts to the current dark/light mode via document.documentElement.classList.contains('dark')
• Zero impact on non-mermaid files: The new code path only activates for language === 'mermaid' — all other fenced blocks continue through ShikiHighlighter as before

Testing

1. Create a .md file with a mermaid block:

   ```mermaid
   graph TD
       A[Start] --> B{Decision}
       B -->|Yes| C[OK]
       B -->|No| D[End]
   ```

2. Open the file in Desktop right-rail preview
3. Verify the diagram renders as an SVG (not raw text)
4. Verify dark/light mode switching updates the diagram theme
5. Verify malformed mermaid source shows an error with collapsible source view

[Morad37]

Nice to see this land. The file preview is the right place to start — securityLevel: 'strict' and lazy importing mermaid avoid the main bundle bloat.

Related: #40493 is about getting the same rendering in the chat assistant responses (the markdown-text.tsx component in the chat surface, not the file preview). The MermaidBlock component you built here could be reused there with the same Suspense wrapper once the chat stream finishes.

[alpindiay]

PR #40531 Review -- Mermaid diagram rendering in markdown preview

Summary: Clean feature implementation that adds Mermaid diagram rendering to the file preview pane. Good use of lazy loading and Suspense.

What Changed

• New dependency: mermaid@^11.15.0 added to apps/desktop/package.json
• Preview file integration (preview-file.tsx): Detects language === 'mermaid' in fenced code blocks and renders via lazy-loaded MermaidBlock component wrapped in Suspense.
• New component (mermaid-block.tsx): 84-line component handling three states -- loading spinner, error display (with source toggle), and rendered SVG.

Findings

Severity	Category	Details
PASS	Security	Mermaid initialized with securityLevel: 'strict' -- prevents XSS via malicious diagram markup. dangerouslySetInnerHTML is used for the rendered SVG, but strict mode sanitizes output, making this safe.
PASS	Correctness	Clean-up via cancelled flag pattern in useEffect is correct. Singleton loadMermaid() avoids duplicate imports. Proper error boundary with try/catch.
MEDIUM	Tests	No tests added. The MermaidBlock component has multiple states (loading, error, rendered) and async rendering logic. A basic smoke test (e.g., renders a valid chart, shows error on invalid syntax) would significantly improve confidence.
PASS	Performance	lazy() + Suspense means the large mermaid library is only loaded when a mermaid code block is actually encountered. Good code-splitting.
INFO	Style	Math.random().toString(36).slice(2, 10) for generating element IDs is technically not collision-proof but is fine for per-render unique IDs. No practical issue.

Verdict: APPROVE with suggestion

The implementation is solid. I would strongly recommend adding a basic test file for mermaid-block.tsx in a follow-up PR, covering at minimum:

• Renders a simple valid mermaid chart (flowchart/graph)
• Displays error state on invalid syntax
• Cleanup on unmount

No blocking issues -- this is good to merge.

[teknium1]

Salvaged into #40630 with your authorship credited (Co-authored-by). Re-verified on current main, tightened, tested. Thanks!

#40630

[teknium1]

Merged via #40630 — thanks @liuhao1024 for the original implementation in this PR; your commit is preserved (rebase-merge) with a follow-up that routes the preview pane through the shared embeds registry that landed in #52935.