Mermaid Diagram Editor

Write Mermaid syntax and see a live flowchart, sequence, or class diagram preview, then export it as SVG.

About this tool

Mermaid turns plain-text syntax into flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and more — the same rendering engine behind diagram support in GitHub, GitLab, and Notion, running here as a live, side-by-side editor so you can write and export a diagram without checking it into a markdown file first.

How to use it

  1. Type or paste Mermaid syntax into the editor (a starter flowchart is filled in by default).
  2. The preview on the right re-renders automatically a moment after you stop typing.
  3. Once it looks right, copy the raw SVG markup or download it as a .svg file.

FAQ

What diagram types does Mermaid support?

Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, and several others — start any diagram with its keyword (e.g. flowchart, sequenceDiagram, classDiagram, gantt) and the renderer picks the right layout automatically.

Is my diagram sent to a server to render?

No — the Mermaid rendering library runs entirely in your browser and turns your syntax straight into an SVG locally; nothing you type is transmitted anywhere.

What does the error message under the preview mean?

Mermaid could not parse the syntax as written — the preview keeps showing the last diagram that did render successfully until the error is fixed, so you never lose your place.

Can I get a PNG instead of an SVG?

The tool exports SVG, which is the format Mermaid renders natively and scales cleanly at any size; most image editors and browsers can open an SVG directly or convert it to PNG if you specifically need a raster file.

Related tools

← All tools · Blog · FAQ