Mermaid Live Editor
Write Mermaid code on the left and watch the diagram render on the right. Export it as PNG or SVG.
Free and private: your code stays in your browser. Nothing is uploaded.
Live preview
Type Mermaid code on the left to see the diagram.
How to use the Mermaid editor
- Pick an example from the menu, or paste your own Mermaid code.
- The diagram updates as you type. If the syntax is wrong, the message shows where.
- Choose a light or dark diagram, then download it as SVG or PNG.
To keep a diagram inside a Markdown file, wrap the code in a mermaid code fence. See Mermaid diagrams in Markdown on Mac for six copyable examples, or open a whole file in the online Markdown viewer.
Frequently asked questions
- Is this Mermaid editor free?
- Yes. It runs in your browser and needs no account.
- Is my diagram uploaded anywhere?
- No. The Mermaid code is rendered by your browser and is never sent to a server.
- Which diagram types can I draw?
- Any type supported by the bundled Mermaid version (12.2.0), including flowcharts, sequence diagrams, class diagrams, Gantt charts, pie charts and mind maps. Use the example menu to start from one.
- How do I export a diagram?
- Use Download SVG for a vector file or Download PNG for a 2x raster image. The PNG uses the background of the current theme, white or dark.
- How do I use a Mermaid diagram in a Markdown file?
- Put the code in a fenced block that starts with three backticks and the word mermaid, then close it with three backticks. Apps that render Mermaid, such as OpenMark, show the diagram instead of the code.