Skip to content
Devtoolry
Sign InJoin for Free

Mermaid Editor

Write Mermaid diagrams online with a live preview: flowcharts, sequence, class, ER, state and Gantt diagrams. Export SVG or PNG and share a link.

Runs in your browser · Nothing uploaded · No sign-up

Something not working, or missing a feature? Send feedback

About the Mermaid Editor

The Mermaid Editor is a live editor for Mermaid, the text-based diagram language: write flowcharts, sequence, class, ER, state and Gantt diagrams as code and see the drawing update as you type. Export SVG or PNG, or copy a share link that carries the diagram in the URL. Diagrams are drawn in your browser.

Everything runs in your browser, so your input is never uploaded to a server.

How to use the Mermaid Editor

  1. Start from an example (flowchart, sequence, class, ER, state, Gantt, pie or mind map) or paste your Mermaid code.
  2. Edit the code; the diagram redraws as you type, and syntax errors show the line.
  3. Pick a theme: Default, Neutral, Forest or Dark.
  4. Download SVG or PNG, copy the SVG, or copy a share link.

Common mistakes

  • Special characters in labels. Brackets, quotes and keywords such as end break the syntax. Put such labels in double quotes: A["Order (end of day)"].
  • Arrow syntax differs by diagram. Flowcharts use -->, sequence diagrams ->> and class diagrams <|--. Copy the arrow from an example of the same diagram type.

Works well with the Mermaid Editor

Frequently asked questions

What is Mermaid?

A diagram language that turns lines like A --> B into drawings. Because diagrams are text, they live in Git next to the code, show changes in diffs and render in GitHub, GitLab, Notion and Obsidian Markdown.

How do I show a Mermaid diagram on GitHub?

Put the code in a fenced code block with the language mermaid (```mermaid) in a README, issue or pull request. GitHub draws it automatically.

How do I put a diagram in a slide or document?

Download the PNG for slides and documents, or the SVG for web pages and print, where it stays sharp at any size.

Where is my diagram stored?

Nowhere on our side. The share link contains the compressed diagram after the #, which browsers never send to the server.

Related tools