Skip to content

Add Mermaid diagram rendering support#132

Open
tomquist wants to merge 1 commit intotanabe:mainfrom
tomquist:feature/mermaid-support
Open

Add Mermaid diagram rendering support#132
tomquist wants to merge 1 commit intotanabe:mainfrom
tomquist:feature/mermaid-support

Conversation

@tomquist
Copy link

Summary

Adds support for rendering Mermaid diagrams in the preview pane, matching how GitHub renders ```mermaid fenced code blocks.

When a user writes a fenced code block with the mermaid language identifier, the preview now renders it as an interactive SVG diagram instead of displaying the raw source.

What's included

  • Mermaid library integration: Added mermaid as a dependency, rendering diagrams client-side via mermaid.render()
  • Custom marked extension: A renderer extension intercepts ```mermaid code blocks during Markdown parsing and replaces them with placeholder <div> elements, which are then rendered to SVGs in a post-parse async pass
  • Dark mode support: Mermaid diagrams automatically switch between default and dark themes when the user toggles dark mode, with diagrams re-rendering on theme change
  • GitHub-style styling: Mermaid containers are centered with a subtle background and rounded corners, matching GitHub's rendering style
  • Error handling: Invalid mermaid syntax gracefully falls back to showing the raw source with an error indicator
  • Default template: Added a simple flowchart example to the default template so new users can see mermaid support immediately
  • Vite code-splitting: Mermaid's diagram types are automatically code-split by Vite, so only the diagram types actually used are loaded

Supported diagram types

All mermaid diagram types are supported, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, and more.

Test plan

  • Open the app and verify the default template renders the mermaid flowchart as an SVG diagram
  • Toggle dark mode and verify the mermaid diagram re-renders with the dark theme
  • Type a new mermaid code block (e.g., sequenceDiagram) and verify it renders live
  • Type invalid mermaid syntax and verify it shows the raw source with error styling
  • Verify non-mermaid code blocks still render normally as <pre><code> blocks
  • Verify PDF export still works with mermaid diagrams in the preview
  • Run npm run build and verify no build errors

Renders ```mermaid fenced code blocks as interactive SVG diagrams,
matching GitHub's rendering behavior.

- Add mermaid as a dependency
- Custom marked renderer extension intercepts mermaid code blocks and
  replaces them with placeholder divs, which are then rendered to SVG
  via mermaid.render() after DOMPurify sanitization
- Mermaid theme follows the dark/light mode toggle, re-rendering
  diagrams when the theme changes
- Add GitHub-style CSS for mermaid containers (centered, rounded
  background, error state styling)
- Include a mermaid flowchart example in the default template
@tomquist tomquist force-pushed the feature/mermaid-support branch from 2a9199a to 52d0584 Compare March 10, 2026 15:57
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.

2 participants