Mermaid diagram editor
Render Mermaid code — flowcharts, sequence, class, ER and Gantt diagrams — to an SVG you can preview and download.
Input
Result
The result will appear here.Mermaid turns a few lines of text into a diagram, and GitHub, GitLab, Notion and most documentation tools render it — but when a diagram will not render, or you need it as an image for slides or a design document, you want to see it on its own. Paste the code and this editor renders it with Mermaid itself, in the page, in one of four themes. A syntax error comes back with Mermaid's own message and line number; a valid diagram comes back as a preview and as SVG code you can download or paste into a design tool.
How it works
- It runs the Mermaid library (version 12), so any diagram type it supports works: flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline and more.
- Labels are drawn as SVG text rather than embedded HTML, so the file looks the same when opened in Figma, Inkscape or a browser tab.
- Mermaid runs in strict security mode: click handlers and HTML in labels are disabled, and the preview is shown as an image, so pasted code cannot run script.
- Mermaid is a large library, so it downloads only the first time you run this tool.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
This tool is free and needs no account. Its results exist only in your open page and are not saved anywhere.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- Why does my diagram show a parse error?
- Mermaid reports the line and what it expected. The usual causes are a label containing brackets, quotes or a colon — wrap it in double quotes, A["Label (v2)"] — an arrow without a target, or a diagram type keyword that is misspelled or missing from the first line.
- Can I get a PNG instead of an SVG?
- This tool produces SVG, which stays sharp at any size and is what documentation sites embed. For a PNG, open the downloaded SVG with the SVG to PNG tool on this site, which renders it at the resolution you choose.
- Will my diagram look the same on GitHub?
- The layout is Mermaid's, so the structure is the same, but GitHub renders with its own Mermaid version and its own theme, which follows the reader's light or dark mode. Very new syntax may not work on GitHub until it upgrades.
- Can AI write the Mermaid code for me?
- Yes — the AI Mermaid diagram tool on this site turns a plain-language description into Mermaid code with your own API key. Paste its output here to check and render it.
The open-source behind it
This tool runs on mermaid-js/mermaid, released under MIT. If you need the same behaviour inside your own program, that is the library to reach for.
mermaid-js/mermaidAlso known as
- mermaid editor
- mermaid live editor
- mermaid to svg
- mermaid diagram online
- render mermaid diagram
- mermaid flowchart