Mermaid in Markdown
Write a diagram as text, watch it draw itself, and drop it into any Markdown file.
How it works
- 1
Type Mermaid on the left, or start from an example: flowchart, sequence, Gantt and more.
- 2
The diagram redraws as you type; zoom, pan, or download it as SVG.
- 3
Copy it as a ```mermaid code block, or open it in HermesMarkdown to keep writing around it.
Runs in your browser. Nothing is uploaded.
Keep writing in HermesMarkdown
A local-first Markdown editor that runs in your browser: notes stay on your device, with tables, diagrams and AI when you want it. No account needed.
FAQ
How do I put a Mermaid diagram in Markdown?
Wrap the diagram in a fenced code block whose language is mermaid: three backticks and the word mermaid, the diagram, then three backticks. Copy Markdown gives you exactly that block. GitHub, GitLab, Obsidian, Notion and HermesMarkdown draw it as a diagram.
Which diagram types are supported?
Everything Mermaid supports, including flowcharts, sequence, class, state, entity-relationship, Gantt, pie and mind map diagrams. Pick one from the examples to start from working syntax.
Is this the official Mermaid editor?
No. Mermaid in Markdown is an independent tool from HermesMarkdown, built on the open-source Mermaid library. It focuses on getting a diagram into a Markdown file.
Is my diagram uploaded?
No. Diagrams are drawn in your browser and never sent to a server. The source is kept only in this browser tab, so a refresh doesn't lose it.
Can I keep editing it later?
Yes. Open in HermesMarkdown carries the diagram into the editor as a draft, where it renders inline in your note and you can save it as a Markdown file on your device.