Free tool · runs in your browser
Mermaid live editor
Write Mermaid diagram code and see the diagram as you type: flowcharts, sequence diagrams, Gantt charts, ER and class diagrams, mind maps and more. It runs Mermaid 12 in your browser in strict security mode, follows your light or dark setting, exports SVG, and makes share links without storing anything on a server.
Editor
Preview
Loading Mermaid…
Diagrams in Confluence? Markreef puts Markdown, Mermaid and highlighted code in one Confluence macro with a live preview, running entirely on Atlassian.
Mermaid in 30 seconds
Start with the diagram type, then one statement per line. A --> B draws an arrow; A[Text] is a box, B{Question} a decision, C[(Database)] a cylinder. In sequence diagrams, A->>B: message sends a message and -->> a reply. The Mermaid documentation covers every diagram type.
Frequently asked questions
Is this the official Mermaid Live Editor?
No. The official one is at mermaid.live. This is a small, private editor that runs the open-source Mermaid library (MIT) from this site, with nothing sent to a server.
Which diagram types work?
Everything Mermaid 12 supports, including flowchart, sequence, Gantt, class, ER, state, pie, mind map and git graph. Pick an example to start.
How does the share link work?
The diagram source is encoded into the part of the link after #, which browsers never send to the server. Anyone with the link sees the same diagram.
Can I use Mermaid in Confluence?
Confluence Cloud needs an app for Mermaid. Our Markreef app (coming to the Atlassian Marketplace) renders Markdown, Mermaid and code in one macro; other options are compared on our Confluence comparison page.
Third-party code: Mermaid 12.2.0, MIT License (includes DOMPurify and d3 under their own permissive licences, noted in the bundled file).
Last updated 8 November 2026. Questions or corrections: [email protected].