Mermaid Diagram Editor
Write Mermaid syntax and see flowcharts, sequence diagrams, class diagrams, ERDs and more rendered live. Copy as SVG or PNG.
How to use the Mermaid Diagram Editor
-
Pick a diagram type or start typing Mermaid syntax.
-
Watch the diagram render live.
-
Export as SVG or PNG when you're done.
What is Mermaid?
Mermaid is a JavaScript-based diagramming tool that renders diagrams from Markdown-like text definitions. Instead of drawing boxes and arrows manually, you describe the structure in simple text, and Mermaid renders it as a vector diagram. It's perfect for documentation, architecture diagrams, and READMEs — and renders natively on GitHub. This editor gives you a live preview with SVG/PNG export.
Key features
- Live two-panel editor: code on the left, diagram on the right
- Supports flowcharts, sequence, class, ER diagrams, Gantt, pie, and state diagrams
- Export as SVG or PNG download
- Sample templates for each diagram type
Frequently asked questions
Does this render on GitHub?
Yes — Mermaid is natively supported in GitHub Markdown, GitLab, and many documentation platforms. The syntax you write here works there too.
Which diagram types are supported?
Flowchart, sequence diagram, class diagram, ER diagram, state diagram, Gantt chart, pie chart, and git graph.
Is my diagram uploaded?
No. Rendering happens entirely in your browser using the Mermaid library.