Mermaid Live Editor
Free Mermaid live editor. Write flowcharts, sequence, class and Gantt diagrams, preview instantly and export to PNG or SVG. No signup required.
What Is a Mermaid Live Editor?
A mermaid live editor is a browser tool that renders Mermaid diagram syntax into an SVG picture as you type, so you can see a flowchart, sequence diagram or Gantt chart take shape line by line. Mermaid is the diagram language that GitHub, GitLab, Notion and most documentation generators understand inside a fenced code block, which makes it the usual choice for diagrams that live next to markdown.
This mermaid editor runs the official Mermaid library in your browser. The code pane on the left and the preview on the right stay in sync with a short delay, syntax errors are reported with the line number, and the finished diagram can be downloaded as SVG or PNG, copied as a markdown block, or shared through a link that carries the code in the URL.
How to Draw a Mermaid Diagram
- Pick a template from the Template menu, or type your own code starting with a diagram keyword such as
flowchart TD. - Add nodes and arrows:
A[Start] --> B{Decision}. The preview updates about 300 ms after you stop typing. - If the error box appears, fix the line it names. The last valid diagram stays visible while you edit.
- Choose a theme and use the zoom buttons or drag the canvas to inspect large diagrams.
- Export: Download SVG for documents and print, Download PNG at 2x or 3x for slides and chat, or Copy markdown block to paste a
```mermaidfence into a README.
Mermaid Diagram Types and Keywords
Every diagram starts with a keyword on the first line. The templates menu loads a working sample for each one.
| Diagram | First line | Typical use |
|---|---|---|
| Flowchart | flowchart TD or graph LR | Processes, decision trees, architecture |
| Sequence | sequenceDiagram | API calls, message flows between actors |
| Class | classDiagram | Object models, inheritance |
| State | stateDiagram-v2 | Lifecycles, workflows with transitions |
| Entity relationship | erDiagram | Database schemas |
| Gantt | gantt | Project timelines |
| Pie | pie | Simple shares and percentages |
| Mind map | mindmap | Brainstorms, topic outlines |
| Timeline | timeline | Chronologies, roadmaps |
| Git graph | gitGraph | Branching and merge strategies |
| User journey | journey | Experience maps with satisfaction scores |
Mermaid to PNG and SVG Export
SVG is the best format for documentation and print: it stays sharp at any size and the text remains selectable. The exported file includes the SVG namespace and an inline font declaration, so it opens correctly in browsers, Figma, Inkscape and Word. Use mermaid to png when the target does not accept SVG, for example Slack, Google Slides or a social post. The PNG scale multiplies the pixel dimensions; a 2x export of an 800 px wide diagram is 1600 px wide and looks crisp on high-density displays.
Copy SVG puts the markup on the clipboard for pasting into an HTML page or a design tool, and Copy markdown block wraps the code in a ```mermaid fence for GitHub, GitLab or the markdown editor on this site, which renders Mermaid inline.
Tips for a Readable Mermaid Flowchart
Keep node ids short (A, db) and put the readable text in brackets, quote labels that contain punctuation (A["Save (draft)"]), and switch between TD and LR to find the direction that fits the page. A mermaid flowchart with more than 25 nodes is usually clearer split into subgraphs or two diagrams. Because this mermaid live editor keeps the code in the URL, you can bookmark a work-in-progress diagram and come back to it, and the same code renders identically in the site's markdown editor and in any README on GitHub.
Frequently Asked Questions
What is Mermaid and where can I use the diagrams?
Mermaid is a text syntax for diagrams: you describe nodes and arrows in plain text and a renderer draws the picture. GitHub, GitLab, Notion, Obsidian, Docusaurus and many markdown editors render ```mermaid code blocks directly, so the same text works in a README, a wiki page or a pull request description.
How do I convert a Mermaid diagram to PNG?
Pick a PNG scale (1x, 2x or 3x) and click Download PNG. The mermaid live editor rasterises the rendered SVG on a canvas in your browser, so nothing is uploaded. Use 2x or 3x for slides and retina screens; 1x is enough for a quick chat message.
Why does my diagram show a syntax error?
Mermaid is strict about its grammar. The most common causes are a missing diagram keyword on the first line (flowchart, sequenceDiagram, classDiagram...), an arrow with no target node, and unquoted labels that contain characters such as parentheses or brackets. The error box names the failing line so you can jump straight to it.
Can I share a diagram without exporting a file?
Yes. Click Copy share link. The diagram code is base64-encoded into the URL hash, so anyone who opens the link sees the same diagram and can keep editing it. No account or server storage is involved.
Does the theme change the exported image?
Yes. The Default, Dark, Forest and Neutral themes are applied at render time, and the SVG and PNG exports capture whatever is on screen. Default follows the site's light or dark mode; choose an explicit theme when you need a fixed look for documentation.
Is my diagram code uploaded anywhere?
No. Parsing, rendering and image export all run in your browser with the Mermaid JavaScript library. The share link stores the code in the URL itself, not on a server.