Mermaid Diagram Editor
Create flowcharts, sequence diagrams, class diagrams, Gantt charts, and more from simple text syntax. Live preview with SVG and PNG export.
Runs in your browser. No data leaves your device.
Frequently Asked Questions
How does the Mermaid Diagram Editor work?
The tool passes your text-based diagram definition to the Mermaid.js library, which parses the syntax into a graph data structure (nodes and edges), applies a layout algorithm (dagre for flowcharts, custom layouts for other types), and renders the result as an SVG element with positioned shapes, arrows, and labels. The live preview re-renders on each keystroke via debounced input.
What diagram types can I create?
Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, and more. Mermaid supports most common diagram types used in software documentation.
Do I need to know Mermaid syntax?
Basic syntax is simple to learn. A flowchart is just "A --> B" to draw an arrow from A to B. The editor includes examples and the preview updates in real time so you can experiment as you go.
Can I export my diagram?
Yes. Download your diagram as SVG (vector, infinite resolution) or PNG (raster image). SVG is ideal for documentation and websites, while PNG works for presentations and chat messages.