Which diagram types are supported?

Everything Mermaid 12 supports, including flowcharts, sequence, class, state, entity relationship, Gantt, pie, mindmap, timeline, Git graph, journey and quadrant charts.

Why does the PNG look sharper than a screenshot?

The PNG is drawn from the vector SVG at twice its natural size, so it stays crisp on high-density screens and in slides.

Can I use the exported SVG in GitHub or Notion?

Yes. The SVG is a standalone file with a fixed size and background, so it opens in browsers, design tools and documents. GitHub and many wikis can also render the Mermaid code itself.

Mermaid Live Editor — Online Diagram Editor

Write Mermaid code and watch flowcharts, sequence, class, state, ER and Gantt diagrams render live. Export SVG or PNG. Free and runs in your browser.

diagram.mmd

Loading Mermaid…

Rendered locally with Mermaid in strict mode. Your code is not uploaded.

Format references

Mermaid — Diagram syntax
Mermaid — Security level

Tool page updated: 2026-10-23

Guide and example

Related tools

Format references