Open
Conversation
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
2a9199a to
52d0584
Compare
akii09
approved these changes
Mar 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds support for rendering Mermaid diagrams in the preview pane, matching how GitHub renders
```mermaidfenced code blocks.When a user writes a fenced code block with the
mermaidlanguage identifier, the preview now renders it as an interactive SVG diagram instead of displaying the raw source.What's included
mermaidas a dependency, rendering diagrams client-side viamermaid.render()```mermaidcode blocks during Markdown parsing and replaces them with placeholder<div>elements, which are then rendered to SVGs in a post-parse async passdefaultanddarkthemes when the user toggles dark mode, with diagrams re-rendering on theme changeSupported 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
sequenceDiagram) and verify it renders live<pre><code>blocksnpm run buildand verify no build errors