Mermaid is a popular open-source library that turns simple text definitions into diagrams – flowcharts, sequence diagrams, ER diagrams, Gantt charts, pie charts and more.

Is this Mermaid editor free?

Yes, this Mermaid live editor is completely free to use, with live preview and SVG/PNG export, and no account needed.

Where can I use the diagrams I create?

Download them as SVG (best for embedding and editing) or PNG (best for slides and documents), or copy the Mermaid code to paste into tools that support Mermaid like GitHub, Notion or GitLab.

Mermaid live editor

A lightweight, free playground for Mermaid.js. Write any supported Mermaid diagram type and see it rendered live, right in your browser – no installation, no account, no data leaves your device.

Diagram code

Preview

Theme

Default

Try an example

How to use the Mermaid live editor

Pick any Mermaid diagram type – flowchart, sequence diagram, pie chart and more.
Type or paste your Mermaid code into the editor on the left.
Check the live preview on the right for syntax errors and layout.
Copy the code or export the rendered diagram as SVG/PNG.

Mermaid editor FAQ

What is Mermaid?: Mermaid is a popular open-source library that turns simple text definitions into diagrams – flowcharts, sequence diagrams, ER diagrams, Gantt charts, pie charts and more.
Is this Mermaid editor free?: Yes, this Mermaid live editor is completely free to use, with live preview and SVG/PNG export, and no account needed.
Where can I use the diagrams I create?: Download them as SVG (best for embedding and editing) or PNG (best for slides and documents), or copy the Mermaid code to paste into tools that support Mermaid like GitHub, Notion or GitLab.

More diagram tools

Diagram maker home Flowchart maker Sequence diagram tool ER diagram tool Gantt chart maker