Developer / Diagrams
Mermaid Live Editor
Write Mermaid code and see the diagram as you type: flowcharts, sequence diagrams, class diagrams, Gantt charts, and pie charts, with SVG and PNG downloads.
Mermaid Live Editor: The editor draws diagrams with Mermaid, the open-source library GitHub, GitLab, and many documentation tools use for diagrams written as text. It runs in strict mode, so code from someone else cannot run scripts or add click handlers. SVG downloads stay sharp at any size; PNG downloads are drawn at twice the on-screen size on a white background. Runs 100% locally in your browser with zero server file uploads.
- Category
- Developer tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
Diagrams are drawn in your browser with Mermaid, in strict mode, so diagram code cannot run scripts. Paste the same code into GitHub, GitLab, or Notion Markdown in a mermaid code block to show it there.
Diagrams as text
A diagram drawn in a graphics program goes stale because changing it means opening the file again. A Mermaid diagram is a few lines of text that sit next to the code or the document they describe, change in the same commit, and show in a review as a readable diff.
Each diagram starts with its type: flowchart with a direction such as TD (top down) or LR (left to right), sequenceDiagram, classDiagram, gantt, or pie. Nodes are written once with their label, A[Start], and then referred to by name, A --> B.
Exporting
SVG keeps lines and text sharp at any size and is the better choice for documents and slides; PNG suits chat apps and places that do not accept SVG. To edit the exported SVG by hand, open it in the SVG editor.
How to use it
- Start from an example or paste your own Mermaid code.
- Edit the code; the diagram redraws as you type, or shows the error.
- Download the diagram as SVG or PNG, or copy the code.
Privacy & limitations
Diagrams are drawn in your browser, and your code is kept only in this browser so it is still there next time.
Related tools
Frequently asked questions
What is Mermaid?
A way to write diagrams as text. A line such as A --> B draws two boxes joined by an arrow, so diagrams can live in Markdown files and code reviews and change with a text edit rather than a drawing tool.
How do I show the diagram on GitHub?
Put the code in a fenced code block marked mermaid in a Markdown file, issue, or pull request: three backticks followed by the word mermaid, the code, then three backticks. GitHub, GitLab, and Notion draw it in place.
Why does my diagram show an error?
The message names the line Mermaid could not read. Common causes are a missing diagram type on the first line, such as flowchart TD, brackets or quotes that are not closed, and text with special characters that needs quotes round it.
Which diagram types are supported?
Every type in the Mermaid version the editor loads, including flowcharts, sequence, class, state, entity-relationship, Gantt, pie, mind maps, timelines, and git graphs. The examples cover the most common five.
Free tool · runs in your browser · no account required