Mermaid Diagram Editor
Write Mermaid code and see flowcharts, sequence diagrams, and more; export SVG or PNG
- Files never leave your device
- Runs in your browser
- Free, no sign-up, no watermark
PreviewLoading Mermaid…
How to use Mermaid Diagram Editor
Write Mermaid code and see the diagram as you type: flowcharts, sequence, class, state, ER, Gantt, pie, mind map, timeline, and Git graphs. Zoom and pan the preview, then export SVG or PNG at up to 4× size. Rendering happens in your browser.
- 1
Type Mermaid code in the editor, or choose a diagram from Example to start from.
- 2
Pick a Theme: Default, Neutral, Dark, or Forest.
- 3
Check the preview. Scroll or pinch to zoom, drag to pan, and use Fit to view or Full screen.
- 4
Set Background and PNG size, then click SVG or PNG to download, or Copy SVG / Copy PNG for the clipboard.
Frequently asked questions
Is my diagram code sent to a server?
No. Mermaid runs inside the page, so your code and diagrams stay in your browser. The code is saved locally so it is still there next time.
What happens when my code has a syntax error?
The error appears under the editor with its line number, and the preview keeps showing the last diagram that rendered.
Can I export with a transparent background?
Yes. Set Background to Transparent before exporting SVG or PNG.
How do I get a sharper PNG?
Choose a PNG size of 2×, 3×, or 4×. The exact pixel dimensions are shown next to the setting.
Is there a keyboard shortcut to save?
Ctrl/⌘ + S in the editor downloads the SVG. In the preview, + and − zoom, arrow keys pan, 0 resets to 100%, and F fits the diagram.