[Ryan-PG]

• Add MermaidDiagram component for rendering mermaid code blocks
• Integrate mermaid support into MarkdownCodeBlock
• Improve fallback handling for invalid diagrams
• Optimize mermaid initialization and theme handling

Summary

Adds Mermaid diagram rendering support to markdown code blocks in the assistant UI.

Changes

• Add MermaidDiagram component for rendering Mermaid code blocks
• Integrate Mermaid support into MarkdownCodeBlock
• Improve fallback handling for invalid diagrams (fallback to standard code block rendering)
• Optimize Mermaid initialization and theme handling for client-side rendering

Description

This PR introduces support for rendering Mermaid diagrams inside markdown code blocks. When a code block is labeled as mermaid, it is rendered as a live SVG diagram using Mermaid. If rendering fails due to invalid syntax or runtime errors, the component safely falls back to the standard code block renderer.

Motivation and Context

Mermaid diagrams are widely used for visualizing flows, graphs, and sequences in technical documentation. This feature improves readability and user experience in the assistant UI by enabling inline diagram rendering instead of plain text code blocks.

Fixes #1497

API Changes

• This PR includes API changes

Change Type

• New feature

Testing Performed

• Tested locally
• Manual/QA verification

Checklist

• Follows project coding standards and conventions
• No lint/build errors or new warnings
• Documentation updated as needed
• Dependencies updated as needed
• All relevant tests are passing (UI verified manually)

High-level PR Summary

This PR adds support for rendering Mermaid diagrams in markdown code blocks within the assistant UI. When a code block is marked with the mermaid language, it renders as an interactive SVG diagram instead of plain text. The implementation includes proper error handling that falls back to standard code block rendering if the diagram syntax is invalid or rendering fails. The feature also handles theme switching between dark and light modes and optimizes Mermaid initialization to avoid redundant setup.

⏱️ Estimated Review Time: 5-15 minutes

💡 Review Order Suggestion

Order	File Path
1	surfsense_web/components/assistant-ui/mermaid-diagram.tsx
2	surfsense_web/components/assistant-ui/markdown-code-block.tsx

[vercel]

@Ryan-PG is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0bc2272f-53da-4eb1-9d6a-fbfc9d029459

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[MODSetter]

@Ryan-PG Thanks for this. Really appreciate it.