Mermaid live editor
Type or paste Mermaid code on the left and the diagram redraws on the right as you go. Mistakes are explained in plain English, and your code stays in your browser.
How to use the Mermaid live editor
- Paste your Mermaid code, drop a .mmd file, or pick a template.
- Edit the code; the preview redraws a moment after you stop typing.
- If a line is wrong, read the hint and click Go to line.
- Download SVG, PNG, PDF or Word, or copy a share link.
What you get
- Live preview with zoom, pan and full screen
- Errors explained, with the line marked in the editor
- Themes and a hand-drawn style
- Your diagram kept in this browser between visits
About the Mermaid live editor
Fixes diagrams from AI chats
ChatGPT, Claude and Copilot answer with Mermaid inside a ```mermaid block. Paste the whole answer: the diagram is picked out and the rest is left behind. If the AI made a syntax slip, the hint tells you what to change.
Every diagram type
Flowcharts, sequence, class, state and ER diagrams, Gantt charts, mind maps, timelines, pie charts, user journeys, Git graphs, quadrant charts, bar and line charts and Kanban boards all have a starter template.
Frequently asked questions
- Is this the official Mermaid Live Editor?
- No. It is an independent editor built on the same open-source Mermaid library, with templates, plain-English error help and PDF and Word export added.
- Which Mermaid version does it use?
- A current Mermaid 12 release, so new diagram types and the Neo theme work.
- Is my code uploaded?
- No. The diagram is drawn in your browser. Only PDF and Word export send a picture of the diagram to our converter, which keeps nothing.