Mermaid diagram editor
Write or paste Mermaid code and watch the diagram draw as you type. Start from a flowchart, sequence, class, Gantt, pie or mind map example, pick a theme, and export Mermaid to PNG or SVG.
- 100% free
- Runs in your browser
- No uploads
The diagram appears here.
Your diagram code is saved in this browser only. Nothing is uploaded.
- Runs on your deviceEvery tool works directly in your browser. No files are uploaded.
- Your privacy mattersYour files never leave your device, so there's nothing for us to store.
- No limitsUse any tool as much as you need. No daily caps, no waiting.
- Completely freeNo signup and no trial to cancel. Ads keep the tools free.
How to make a Mermaid diagram
- Start from an example. Pick a diagram type above the editor, or paste Mermaid code from an AI answer or a README.
- Edit the code. The diagram redraws a moment after you stop typing. Tab indents lines.
- Choose a theme. Match the site, or use Mermaid's Default, Neutral, Forest or Dark themes.
- Export. Download PNG for documents and slides, Download SVG for the web, or Copy SVG to paste into a design tool.
Diagram types and their first line
| Diagram | Starts with | Good for |
|---|---|---|
| Flowchart | flowchart TD (or LR) | Processes, decisions, user flows |
| Sequence | sequenceDiagram | API calls, messages between systems |
| Class | classDiagram | Data models, object relationships |
| Gantt | gantt | Project timelines and milestones |
| Pie | pie title … | Simple shares of a whole |
| Mind map | mindmap | Brainstorms, outlines (indentation sets the levels) |
Try it with an example
The example is a sign-in sequence: a user, an app and a server exchanging four messages, with dashed arrows for the replies. Load it, change a message, then download it as a PNG.
Common Mermaid errors and fixes
- "No diagram type detected". The first line must name the type, such as
flowchart TD, spelled exactly. A```mermaidfence copied from Markdown is removed for you. - Parse error on a label. Labels with brackets, quotes or colons need quotes:
A["Total (USD)"]. - Mind map levels are wrong. Mind maps use indentation; use the same number of spaces for each level.
- Gantt bars don't appear. Check
dateFormatmatches your dates, for exampleYYYY-MM-DDfor 2025-01-06.
Frequently asked questions
How do I export a Mermaid diagram to PNG?
Press Download PNG. The image is drawn at twice the diagram's size, so it stays sharp on high-resolution screens and in slides. It has a white background (or dark, for the Dark theme) unless you tick Transparent background.
PNG or SVG: which should I use?
SVG is a vector file: it scales to any size without blurring and its text stays text, which suits websites, documentation and design tools like Figma. PNG is a picture that works everywhere, including Word, Google Slides, chat apps and email.
What happens when my code has an error?
The last diagram that worked stays on screen, faded, and Mermaid's message appears above it with the line it stopped at. Fix the line and the diagram updates. Nothing you typed is lost.
Is my diagram sent to a server?
No. Mermaid runs in your browser and the code is saved on this device only, so it's still here if you reload. That makes it safe for architecture diagrams and plans you can't share publicly.
Can a diagram run scripts or open links?
No. Mermaid runs in strict mode, which turns off click handlers and HTML in labels, and the drawn SVG is cleaned again before it's shown. Diagrams from AI tools or other people's documents are safe to paste.