Mermaid.js Live Diagram Editor

What diagram types does Mermaid.js support?

Mermaid supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, requirement diagrams, git graphs, mind maps, timeline diagrams, C4 context diagrams, and block diagrams — each with its own syntax flavor.

Can I use Mermaid in Markdown files?

Yes! Mermaid is natively supported in many platforms including GitHub, GitLab, Notion, Confluence, and Markdown editors. Simply wrap your Mermaid code in a ```mermaid code fence. This tool helps you create and test the diagram code before embedding it.

What file formats can I export?

You can export your diagrams as SVG (Scalable Vector Graphics) for high-quality scalable images, or PNG (Portable Network Graphics) for raster images suitable for embedding in documents and presentations. SVG is recommended for web use and documentation.

Why is my diagram not rendering?

Common issues include syntax errors in the Mermaid markup, incorrect diagram type declarations, or mismatched brackets. Check the error message displayed below the input area, and use the example buttons to see correctly formatted code for each diagram type.

Is my diagram data sent to a server?

No. All diagram rendering is done locally in your browser using the Mermaid.js library. Your diagram code and rendered output never leave your device.