Skip to content

feat(frontend): render Mermaid diagrams in Markdown - #3

Merged
jtsang4 merged 1 commit into
mainfrom
feat/mermaid-rendering
Oct 5, 2026
Merged

jtsang4 merged 1 commit into
mainfrom
feat/mermaid-rendering

Conversation

@jtsang4

@jtsang4 jtsang4 commented Oct 5, 2026

Copy link
Copy Markdown
Owner

Add support for rendering Mermaid flowcharts, sequence diagrams, and other diagram types in agent replies, replacing the code block with the rendered SVG.

Changes

  • Mermaid integration: Display ```mermaid code blocks as diagrams, not code
  • Design system theming: Diagrams use theme colors (surface-2, input-strong, foreground, etc.) and match the design system's radius and styling
  • Copy source: The 复制代码 button still copies the diagram source, not the SVG
  • Wide diagram scrolling: Diagrams wider than 85% of viewport width shrink to 85%, then scroll sideways (same as code blocks)
  • Lazy loading: Mermaid loads only when the first diagram appears, not with the app startup
  • Graceful fallback: If Mermaid cannot parse the source, the block stays as code
  • Security: Mermaid runs at strict security level, output is sanitized with DOMPurify

Testing

  • Added E2E test verifying diagrams are drawn, colored correctly, and copy works
  • Added unit tests for parsing, sanitization, and fallback behavior
  • Updated screenshot and acceptance test setup to include a Mermaid diagram example
  • Fakeagent now responds to "流程图" with a flowchart example

@jtsang4
jtsang4 merged commit 1e37e25 into main Oct 5, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant