Mermaid Editor

about this tool

A diagram you can diff

Mermaid describes a diagram as text, which means it can live beside the code it documents, be reviewed in a pull request and show up in a diff. This editor draws it as you type and hands back an SVG or a PNG.

Write the source on the left. The first line names the kind of diagram, and the panel says which one it recognised: flowchart, sequence, class, state, entity relationship, Gantt, pie, journey, mind map, timeline, git graph, quadrant, XY, Sankey or C4. The samples along the bottom are one of each of the common ones, short enough to read in a glance and to edit into something of your own.

When it will not draw

Mermaid refuses a diagram it cannot parse rather than guessing at it. The last good drawing stays on screen while you fix the source, so the preview does not flash empty on every keystroke, and the error is rewritten into something worth reading: which line, what Mermaid expected there, what it found instead, and the line itself quoted back.

Drawing is delayed a quarter of a second after you stop typing, and each attempt is numbered, so a slow render of an older version cannot overwrite a newer one.

Saving it

SVG is the diagram itself. It stays sharp at any size, is a fraction of the bytes of a picture, and can be edited later. Mermaid sizes its output to fill whatever element it drew into, so the file gets its real width and height put back, along with the namespaces a standalone file needs.

PNG is for somewhere that will not take an SVG. It is drawn at one, two or three times the natural size; take 2× at least, since a PNG cannot be scaled up afterwards without going soft.

Either can carry a white background or be left transparent. Transparent suits a slide deck with its own colour; white suits anything printed.

Limits

Mermaid is about a megabyte, so it is fetched the first time a diagram is drawn rather than when the page loads. Diagrams are drawn with the strict security setting, which escapes any HTML in a label rather than running it — so a label cannot carry markup, deliberately. There is no shareable link and nothing is stored between visits: the text is the document, so keep it. A very large diagram draws slowly and prints small, which the panel says once it passes a couple of hundred lines.

The Markdown editor renders mermaid fenced blocks inline, which is how a diagram gets into a README. To put a finished diagram in a slide, code to image renders the source itself, and the HTML, CSS & JS playground is the place to embed one in a page.

questions

What can it draw?

Everything Mermaid does: flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts, pie charts, user journeys, mind maps, timelines, git graphs, quadrant and XY charts, Sankey diagrams and C4 context diagrams. The first line names the type, and the panel tells you which one it recognised.

SVG or PNG?

SVG is the diagram itself: sharp at any size, a fraction of the bytes, and still editable later. Take a PNG only for somewhere that will not accept an SVG, and take it at 2× or 3× so it survives being scaled. Either can have a white background or be left transparent.

Why has my diagram stopped drawing?

Mermaid refuses a diagram it cannot parse rather than drawing half of it, and the last good drawing stays on screen while you fix it. The error names the line, quotes it back, and says what Mermaid expected to find there.

Is my diagram sent anywhere?

No. Mermaid runs in the page, loaded the first time a diagram is drawn — it is about a megabyte, which is why it is not loaded before then. Nothing is uploaded and nothing is stored between visits, so keep the text if you want it back.

Can I use this inside a Markdown document?

Yes. Any diagram that works here works in a fenced block tagged mermaid, which the Markdown Editor renders, as do GitHub, GitLab and most documentation tools. Keeping a diagram as text beside the prose means it can be reviewed and diffed like anything else.