Mermaid Live Editor
Turn Mermaid text into flowcharts, sequence, class and state diagrams with a live preview — then export SVG or PNG, all in your browser.
How it works
- 1
Write Mermaid
Type a Mermaid diagram definition, or start from the built-in example.
- 2
Preview live
The diagram renders instantly and re-renders as you edit.
- 3
Export
Download the diagram as a crisp SVG or a PNG for slides and docs.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- Which diagram types are supported?
- All Mermaid types — flowcharts, sequence, class, state, entity-relationship, Gantt, pie, mindmaps and more.
- Can I export the diagram?
- Yes. Export to scalable SVG for documentation, or to PNG when you need a raster image for slides or chat.
- Why isn’t my diagram rendering?
- Mermaid is whitespace- and syntax-sensitive. The editor shows the parser error so you can spot the offending line; check the diagram type declaration on the first line.
- Is my data sent to a server?
- No. Everything runs locally in your browser using JavaScript and WebAssembly. Your input never leaves your device, nothing is uploaded, and nothing is logged or stored.