Mermaid live editor
Write Mermaid code and watch the diagram draw itself. Start from a flowchart, sequence diagram, Gantt chart or pie chart, then export it.
Runs in your browser. Nothing is uploaded.Diagram
How to use it
- Pick a template, or paste the Mermaid code your AI tool wrote.
- Edit the code; the diagram updates as you type.
- Fix anything flagged as a syntax error.
- Download a PNG for slides and docs, or an SVG for the web.
Questions
What is Mermaid?
Mermaid is a way to draw diagrams with text. AI coding tools often use it in plans and specs, inside ```mermaid code blocks.
Which diagram types work?
All the main Mermaid types, including flowcharts, sequence, class, state, entity-relationship, Gantt, pie, mindmap and timeline diagrams.
Is my diagram uploaded?
No. It's drawn in your browser.
Can I see diagrams inside my .md files?
Yes, with MDLumen for Mac. It draws Mermaid blocks right in the document and in Finder's Quick Look.