Mermaid Diagram Editor

About this tool

Mermaid turns a few lines of text into a diagram, which makes diagrams easy to write, review in version control and keep up to date. This editor shows the result as you type. It supports the main Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, mind maps and git graphs. Pick an example to see the syntax, change it, choose a theme and download the diagram as an SVG (sharp at any size) or a PNG (up to 3 times the diagram's size, white background). If the code has a mistake, the message from Mermaid explains where, and the last good diagram stays on screen. The diagram engine is the open-source Mermaid library, run entirely in your browser; your text is not uploaded, and the code you wrote is remembered in this browser for next time. The engine is loaded only on this page: a core of about 650 KB plus a part for each kind of diagram you draw, fetched from this site when needed. For safety the engine runs in its strict mode: HTML in labels is cleaned or shown as text, click handlers and links to scripts are switched off, and the diagram is shown as a picture, so a diagram from an unknown source cannot run code on this page. Labels are drawn as plain SVG text, which keeps the exported PNG reliable in every browser, but means that a few advanced layout features that need HTML labels look simpler. Limits: 50,000 characters and 500 edges per diagram. The editor does not draw by dragging; the text is the source of truth.

How to use it

1. Choose an example, or write your own Mermaid code.
2. Pick a theme if you want another look.
3. Fix any error shown below the editor; the preview updates as you type.
4. Download the diagram as SVG or PNG.

Common problems

It shows a parse error

Read the line and character in the message. Common causes are a missing diagram type on the first line (for example flowchart TD), unbalanced brackets or quotes, and special characters in labels: put labels with brackets or colons in double quotes.

The PNG is blurry or too small

The PNG is rendered up to 3 times the diagram's size. For print or very large use, download the SVG, which stays sharp at any size.

My diagram is very large and slow

Diagrams are limited to 50,000 characters and 500 edges. Split a big diagram into several smaller ones.

Text in the diagram looks different from other Mermaid tools

This editor draws labels as plain SVG text for dependable PNG export, so line wrapping and some HTML-style formatting in labels differ from tools that use HTML labels.

A click link or callback does nothing

Click handlers and script links are disabled on purpose, to keep diagrams safe.