Mermaid Diagram Generator
Type Mermaid diagram syntax and watch it render live. Start from a ready-made template, fix syntax errors as you go, then copy or download the diagram as SVG or PNG.
Runs entirely in your browser — files never leave your device.
How it works
- 01Type or paste Mermaid syntax into the left pane, or click Examples to load a flowchart, sequence, class, state, Gantt, pie, or entity-relationship template.
- 02The diagram renders automatically as you type. Invalid syntax shows a plain-language error and keeps showing your last valid diagram, instead of clearing the preview.
- 03Use the − / % / + controls above the preview to zoom from 50% to 200% while you check details — this doesn't affect the exported file size.
- 04Copy the rendered diagram as an SVG string, or use "Download as" to save it as a standalone .svg or .png file.
- 05Paste the SVG or PNG into a doc, or embed the Mermaid source directly in Markdown on renderers that support it (GitHub, GitLab, Notion, and others render Mermaid code fences natively).
Frequently asked questions
Is this Mermaid diagram generator free?
Yes, with no account or limits. Diagrams are parsed and rendered entirely in your browser using the Mermaid.js library.
Does my diagram source get uploaded anywhere?
No. Rendering happens entirely client-side — the syntax you type never leaves your device.
What diagram types does Mermaid support?
Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, and several other diagram types — this tool renders any valid Mermaid syntax, not just flowcharts. The Examples menu includes a ready-made starting template for each of these seven types.
What happens if my syntax has an error?
The diagram pane shows a plain-language error message describing what Mermaid couldn't parse, instead of crashing or showing a blank page. If you already had a valid diagram rendered, it stays visible underneath the error so you don't lose your place — fix the syntax and the preview updates automatically.
Can I export as PNG, not just SVG?
Yes. Picking "PNG" from the "Download as" menu renders the diagram at 2x resolution with a white background, independent of whatever zoom level the preview is currently set to.
Can I use the output directly in Markdown?
Many renderers (GitHub, GitLab, Notion, Obsidian, and others) render ```mermaid code fences natively — in that case you can paste your raw syntax directly into a Markdown document with no export step. Use this tool's SVG or PNG export for renderers that don't support Mermaid natively.