Browser-only diagram studio
Mermaid to SVG
Paste diagram-as-code, preview it live, and download a clean, standalone SVG for your README, docs or slides. Nothing is uploaded.
Live workspace
Draw with text. Export with one click.
Syntax updates render automatically after 400 ms.
Supports flowcharts, sequence, class, state, ER, gantt, pie and other Mermaid diagram types. Maximum 50,000 characters.
Loading the Mermaid renderer…
Your diagram will appear here.
Exports as mermaid-diagram.svg with its viewBox preserved.
How it works
Three steps from diagram code to a file you can commit.
Paste Mermaid syntax
Start with the example or drop in a flowchart, sequence diagram, ER diagram and more.
Pick a theme
Choose the visual language that matches light docs, dark slides or a neutral print layout.
Download the SVG
Save a standalone vector file or copy the markup directly into a README, CMS or design tool.
Built for documentation workflows
Fast, private and sized for real developer work.
Instant live rendering
Edits are debounced and rendered on the spot, so the feedback loop stays quick.
Nothing uploaded
The parser runs in your browser. Your architecture and internal notes stay on your device.
Resolution-independent
SVG stays sharp at every size and preserves the diagram viewBox for responsive embedding.
Frequently asked questions
Which Mermaid diagrams are supported?
The editor uses the Mermaid 11 renderer, so flowcharts, sequence, class, state, ER, gantt, pie, journey and many other diagram types work. Support varies with the syntax features in each diagram type.
Is my diagram code sent anywhere?
No. Rendering and export happen in your browser. The page loads the open-source Mermaid library, but your diagram source is never uploaded to this site.
How do I use the downloaded SVG?
Commit it to a repository, import it into slides or a design tool, or reference it from documentation. The file includes its SVG namespace and viewBox so it scales cleanly.
Why is my preview showing a syntax error?
Mermaid is strict about arrows, node brackets and indentation. Compare the failing line with the Mermaid syntax reference, fix the first reported issue and the preview will refresh automatically.