Skip to content

feat: add mermaid rendering support#1

Merged
vihu merged 2 commits intomainfrom
rg/mermaid-rendering
Dec 7, 2025
Merged

feat: add mermaid rendering support#1
vihu merged 2 commits intomainfrom
rg/mermaid-rendering

Conversation

@vihu
Copy link
Owner

@vihu vihu commented Dec 7, 2025

Summary

Add support for rendering Mermaid diagrams in Markdown preview. Mermaid code blocks are now automatically detected and rendered as interactive diagrams in the browser, following the same client-side rendering pattern used for syntax highlighting with highlight.js.

Changes

  • Intercept mermaid fenced code blocks in render.rs to emit <pre class="mermaid"> instead of standard code block markup
  • Prevent HTML escaping of mermaid content by converting Text events to Html events during parsing
  • Add mermaid.js v11 via CDN as an ESM module in page.html
  • Initialize mermaid with theme-aware configuration (dark/default based on current theme)
  • Re-render mermaid diagrams on WebSocket content updates and theme toggle

Examples / Usage

Mermaid diagrams now render automatically in the preview:
image

The diagram theme automatically adapts when toggling between light and dark modes.

@vihu vihu merged commit 736313e into main Dec 7, 2025
1 check 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