Mermaid Diagram Editor

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

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. Or pick a diagram from the Load example menu (flowchart, sequence, class, ER, Gantt, or state) and edit it to fit.
  3. The preview on the right re-renders automatically a moment after you stop typing; use the zoom buttons for big diagrams, and the percentage button to fit it back to the box.
  4. Once it looks right, copy the raw SVG markup, download it as a .svg file, or download a 2x-resolution .png to paste into Slack, slides, or a ticket.
  5. Click Copy share link to get a URL that reopens this exact diagram for a teammate.

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?

Yes — use Download .png for a 2x-resolution image that pastes straight into Slack, Google Slides, PowerPoint, or an issue tracker. It is rasterized in your browser (nothing is uploaded) on a background matching the preview, so a diagram made in dark mode stays readable. Use the .svg download when you want a file that scales cleanly at any size.

How do I share a diagram with someone?

Click Copy share link. The diagram is compressed and stored in the part of the URL after the #, so the link reopens it exactly as you left it. Browsers never send that part of a URL to any server, so the diagram stays private to you and whoever you give the link to, and nothing is stored on our side.

Will my diagram still be here if I refresh the page?

Yes — the editor autosaves your latest diagram in this browser (local storage) and restores it on your next visit. It never leaves your device, and Clear removes it. Opening a share link always shows the shared diagram instead of your saved one, without overwriting your saved copy.

My diagram is very large or very tall — how do I see all of it?

The preview scales the diagram down to fit the box. Very large diagrams stop shrinking at a readable minimum and scroll instead, and the zoom buttons let you enlarge any part; click the percentage to fit it back to the box.

Related tools

Guides & comparisons

← All tools · Text & Data · Blog · Cheat sheets · FAQ