A Mermaid diagram editor with instant preview and clean exports
Mermaid lets you describe a diagram in a few lines of text — A --> B for an arrow, B{Decision} for a diamond — and renders it as a picture. This Mermaid diagram editor shows the result as you type, with templates for the twelve most used diagram types, five colour themes, syntax errors reported by line, and one-click export to SVG or high-resolution PNG. Diagrams are rendered on your device with the open-source Mermaid library (version 11, MIT licence); nothing is uploaded.
It suits anyone who already writes Mermaid in GitHub README files, GitLab, Notion, Obsidian or Confluence and wants a bigger canvas, as well as people who need a quick flowchart or sequence diagram for a document or slide without opening a drawing tool. The code stays the source of truth, so diagrams can live in version control.
Your work is kept in this browser between visits, and Copy share link packs the code and theme into the page address — compressed, so even a long diagram fits — for sending to a colleague or bookmarking.
How to use the Mermaid Diagram Editor
- Pick a starting point from Template: flowchart, sequence, class, state, ER, Gantt, pie, mind map, timeline, Git graph, user journey or quadrant chart.
- Edit the Mermaid code. The preview updates shortly after you stop typing; the Tab key inserts four spaces.
- If something is wrong, read the red message under the preview. It names the line and what Mermaid expected, and the last good diagram stays visible, faded, until the code is fixed.
- Choose a Theme (default, dark, forest, neutral or base) to restyle the whole diagram without touching the code.
- Press Download PNG (choose 1× to 4× in PNG scale) or Download SVG for a vector file that scales to any size.
- Use Copy code to paste the Mermaid source into Markdown, or Copy share link to send the editable diagram as a URL.
Mermaid Diagram Editor features
Twelve diagram types
Flowchart, sequence, class, state (v2), entity-relationship, Gantt, pie, mind map, timeline, Git graph, user journey and quadrant chart templates, each a realistic example.
Live preview with error lines
The code is parsed before it is drawn, so a typo produces a precise “Syntax error on line N” message instead of a broken picture.
Portable SVG
Labels are rendered as real SVG text rather than embedded HTML, so the exported file opens correctly in Inkscape, Illustrator, Figma, Word and PowerPoint, not just in browsers.
Sharp PNG export
The SVG is drawn to a canvas at 1×, 2×, 3× or 4× resolution with a white (or dark-theme) background — 4× is enough for print.
Shareable links
The diagram and theme are compressed and stored in the URL hash, so the link is self-contained: no account, no server, no expiry.
Themes and drafts
Switch between five built-in Mermaid themes; your last diagram is restored from local storage on your next visit.
Mermaid syntax cheat sheet
Every diagram starts with a keyword that sets its type. The most common building blocks:
| Diagram | Starts with | Key syntax |
|---|---|---|
| Flowchart | flowchart TD (or LR, BT, RL) | A[box], B(rounded), C{diamond}, D[(database)], A --> B, A -- text --> B, subgraph … end |
| Sequence | sequenceDiagram | participant/actor, A->>B: message, B-->>A: reply, activate, loop, alt/else, Note over A,B: text |
| Class | classDiagram | class Name { +field +method() }, A --|> B inheritance, A *-- B composition, A --> B association |
| State | stateDiagram-v2 | [*] --> Idle, Idle --> Running : start, nested state Name { … } |
| ER | erDiagram | A ||--o{ B : label (one to many), A ||--|| B (one to one), attribute blocks with PK/FK |
| Gantt | gantt | dateFormat YYYY-MM-DD, section, Task :id, 2026-10-01, 7d, after id, done/active/milestone |
| Pie / mind map | pie showData / mindmap | "Label" : 42 per line; mind maps nest by indentation under root((Title)) |
Tips for diagrams that stay readable
- Keep flowcharts to one direction (
TDtop-down for processes,LRleft-right for pipelines) and group related steps withsubgraph. - Quote labels that contain punctuation:
A["Save (draft)"]. Parentheses and brackets inside unquoted labels are a common cause of syntax errors. - Give nodes short ids and put the wording in the label —
db[(Orders table)]— so edges remain easy to read in the code. - Use
%% commentsto explain intent for the next editor; they are ignored by the renderer. - For a dark slide deck, switch the theme to Dark before exporting the PNG so the background matches.
Using the output elsewhere
GitHub, GitLab, Azure DevOps, Obsidian, Notion and many documentation generators render Mermaid directly from a fenced ```mermaid block, so Copy code is usually all you need. For a README that goes somewhere without Mermaid support, export the SVG and link to it instead. The Markdown to HTML converter and Markdown Formatter help with the surrounding document.
The SVG export is a standard vector file: open it in design tools, or convert it with the SVG to PNG tool for other sizes or a transparent background.
Mermaid Diagram Editor FAQ
Is this Mermaid diagram editor free and private?
Yes. It is free with no sign-up, and every diagram is rendered by JavaScript in your browser. The code is only stored in your own local storage and, when you choose to share, inside the link you copy.
Which Mermaid version is used?
Mermaid 11.17, the current 11.x release (MIT licence), loaded from a CDN the first time you render. New syntax such as stateDiagram-v2, mind maps, timelines and quadrant charts is supported.
Why does my diagram show a syntax error?
Mermaid is strict about grammar. The most frequent causes are unquoted labels containing brackets or parentheses, a missing arrow between nodes, wrong indentation in mind maps, and using a reserved word such as end as a node id (write End or quote it). The message names the line.
How do I get a transparent PNG?
The PNG export uses a solid background so the diagram looks right on any slide. For transparency, download the SVG and convert it with the SVG to PNG tool, which can keep the alpha channel.
How long can a share link be?
The code is compressed before it is placed in the URL, so a typical diagram makes a link of a few hundred characters. Browsers handle URLs of tens of thousands of characters, but some chat apps truncate very long ones — the editor warns when a link exceeds 8,000 characters.
Can I export a diagram for Word, PowerPoint or Google Docs?
Yes. Insert the SVG in Word and PowerPoint for a crisp vector image, or a 3×–4× PNG in Google Docs and Slides, which do not accept SVG.