Mermaid Diagram Editor
Write Mermaid syntax on the left and watch your flowchart, sequence or Gantt diagram render live on the right.
Everything you need to create diagrams as code
Instant live preview
Watch your diagram render the moment you type — no build step, no button presses, no waiting.
All Mermaid diagram types
Flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, mindmaps and more — the full Mermaid 11 syntax.
Theme switcher
Flip between default, neutral and dark themes to match your docs, slides or dashboards without changing a line of code.
Export SVG & PNG
Download a crisp vector SVG or a high-resolution PNG, or copy the SVG markup straight to your clipboard.
Private, nothing uploaded
All rendering happens locally in your browser — your diagram never leaves your device, with no size limits and no account.
Clear syntax errors
Invalid diagrams are caught instantly and shown with a readable error, so you can fix the syntax fast.
About Mermaid Diagram Editor
Mermaid Diagram Editor is a free, in-browser tool for writing and previewing Mermaid diagrams. Type Mermaid syntax on the left and see the rendered diagram update live on the right, with three built-in themes — default, neutral and dark. Once your diagram looks right, copy the code or SVG, or download it as a vector SVG or high-resolution PNG. Because everything runs locally with the open-source Mermaid library, there are no uploads, no size limits and no account required.
How to create a Mermaid diagram
Three steps from idea to a shareable diagram.
Write your diagram as text
Start from the built-in sample or type Mermaid syntax directly — flowcharts, sequence diagrams, class diagrams and more.
Watch it render live
The diagram updates automatically as you edit. Switch themes with the dropdown to find the look you want.
Export or share
Copy the Mermaid code or SVG, or download the diagram as an SVG or PNG file for docs, slides and READMEs.
Things to know
Diagrams render with Mermaid 11 in strict security mode, which sanitizes labels so no HTML or scripts execute — interactive click handlers are disabled in the preview. Exported PNGs are rendered at 2x resolution for crisp prints, and everything runs locally so there is no file size limit.