Is the Mermaid editor free?

Yes, free, without sign-up. It runs in your browser, so there is nothing to install.

Do I need to know Mermaid syntax?

Not to start. Pick a template and change it on the canvas: press (+) on a node or a link to add to the diagram, double-click a label to rename it. The code appears beside it as you go, which is also a good way to learn the syntax.

How do I use the editor full screen?

Press the Full screen button, or press F while the editor has focus. Esc or the Exit full screen button leaves it. Your diagram is kept. On browsers that do not allow full screen for a page, such as iPhone Safari, the editor covers the window instead.

Is my diagram sent to a server?

No. Mermaid draws the diagram in your browser. The share link keeps the code in the part of the URL after #, which browsers never send to a server.

Which diagram types are supported?

Everything the bundled Mermaid version supports, including flowchart, sequence, class, state, ER, Gantt, pie, mind map, timeline and git graph. The template buttons cover the seven most used. The canvas edits flowcharts, state, class, ER, sequence, Gantt, pie, mind map and timeline diagrams; the rest are edited in the code.

Why do I get a syntax error?

Mermaid is strict about its syntax. The message under the editor shows the line and what the parser expected. The usual causes are a missing arrow, an unclosed bracket, or a special character in a label that needs to be in quotes.

How do I put the diagram in a README?

Copy the code and paste it between a line of three backticks followed by mermaid and a closing line of three backticks. GitHub and GitLab render it as a diagram.

Can I get a transparent PNG?

The PNG has a white or dark background matching the theme so that text stays readable anywhere. For a transparent background, export SVG.

Mermaid live editor

Draw the diagram on the canvas or write the code, and the other side follows. Hover a node or a link and press (+) to grow the diagram without typing Mermaid. Pick a template, share a link, export SVG or PNG, or open the editor full screen. Runs entirely in your browser.

Runs in your browser. Nothing you paste or draw is uploaded.

Templates

Mermaid code9 lines

flowchart TD
    A[Pull request opened] --> B{Tests pass?}
    B -- Yes --> C[Review]
    B -- No --> D[Fix and push]
    D --> B
    C --> E{Approved?}
    E -- Yes --> F[Merge to main]
    E -- No --> D
    F --> G[Deploy]

Loading the diagram engine...

How to use it

Step 1: Pick a template (flowchart, sequence, class, ER, Gantt, state or mind map), or paste your own Mermaid code.
Step 2: Edit on the canvas: hover a node and press (+) to add a connected node, or hover a link and press (+) to insert a node into it. Double-click a label to rename it, or click a node in a flowchart to change its shape or colour. Or edit the code beside it. Either side updates the other.
Step 3: Press F or the Full screen button to give the editor the whole window. Esc brings you back and the diagram stays as it was.
Step 4: Copy the link to share the diagram, which is packed into the part of the URL after #. Export SVG or PNG, or copy the code and paste it into a ```mermaid block in your Markdown.

Edit without writing Mermaid

The canvas works on the diagram itself. In flowcharts, state, class and ER diagrams, hovering a node shows a (+) that adds a connected node and a handle you can drag to another node to link them. Hovering a link shows a (+) in its middle that drops a new node into the connection, so A to B becomes A to new node to B. In a flowchart, clicking a node also lets you rename it, change its shape or colour, duplicate it or delete it. Undo and Redo cover canvas edits, typing and templates alike.

Other diagram types get the edits that make sense for them: participants in a sequence diagram, tasks in a Gantt chart, slices in a pie chart, and ideas or periods in mind maps and timelines. Every canvas edit is written into the code as a small text change, so the code beside it stays readable and you can keep working in either place.

Full screen for bigger diagrams

Full screen gives the code, the canvas and the preview the whole window. Use the button or press F when the editor has focus (F is ignored while you type in the code box). Esc or the same button leaves full screen. Where a browser does not allow full screen for a page, such as iPhone Safari, the editor fills the window instead. The page you came from, and your diagram, are untouched either way.

The editor stores your code, compressed, in the URL fragment (the part after #). There is no account and no save button: copy the address and send it. Browsers do not send the fragment to a server, so the diagram is not uploaded; anyone you give the link to can read it, so do not put secrets in a diagram you share.

Use the code in Markdown

GitHub, GitLab and many wikis draw a fenced block marked mermaid as a diagram. Copy the code, wrap it in three backticks followed by the word mermaid, and it renders in place. Because the diagram stays plain text, it is reviewed and versioned like the rest of the document.

SVG or PNG

SVG is sharp at any size and good for docs and slides. PNG is rendered at twice the preview size for places that do not take SVG. Both follow the theme you picked in the editor.

What it does not do

The canvas edits the structure and style of a diagram (nodes, links, labels, shapes, colours), not its layout. Mermaid places the shapes, so you cannot drag a node to a position of your choice.
Not every diagram type can be edited on the canvas. Git graph, journey, quadrant and other types still draw, and you edit them in the code.
If the code has a syntax error, the canvas and the exports keep the last diagram that worked until you fix it.
Very large diagrams can take a few seconds to draw. Mermaid itself limits the size of the text it accepts.
Beta diagram types may differ between Mermaid versions, so a diagram can look different on GitHub or in your wiki than here.
Icons and fonts that Mermaid loads from other sites are not available offline.

Diagrams that live with your docs

In Folio, these diagrams live in your wiki pages as code in Git, and you edit them with the same visual editor or in the code. A change to a diagram is a reviewable change to a text file.

Install Folio Open the demo

Questions

Is the Mermaid editor free?: Yes, free, without sign-up. It runs in your browser, so there is nothing to install.
Do I need to know Mermaid syntax?: Not to start. Pick a template and change it on the canvas: press (+) on a node or a link to add to the diagram, double-click a label to rename it. The code appears beside it as you go, which is also a good way to learn the syntax.
How do I use the editor full screen?: Press the Full screen button, or press F while the editor has focus. Esc or the Exit full screen button leaves it. Your diagram is kept. On browsers that do not allow full screen for a page, such as iPhone Safari, the editor covers the window instead.
Is my diagram sent to a server?: No. Mermaid draws the diagram in your browser. The share link keeps the code in the part of the URL after #, which browsers never send to a server.
Which diagram types are supported?: Everything the bundled Mermaid version supports, including flowchart, sequence, class, state, ER, Gantt, pie, mind map, timeline and git graph. The template buttons cover the seven most used. The canvas edits flowcharts, state, class, ER, sequence, Gantt, pie, mind map and timeline diagrams; the rest are edited in the code.
Why do I get a syntax error?: Mermaid is strict about its syntax. The message under the editor shows the line and what the parser expected. The usual causes are a missing arrow, an unclosed bracket, or a special character in a label that needs to be in quotes.
How do I put the diagram in a README?: Copy the code and paste it between a line of three backticks followed by mermaid and a closing line of three backticks. GitHub and GitLab render it as a diagram.
Can I get a transparent PNG?: The PNG has a white or dark background matching the theme so that text stays readable anywhere. For a transparent background, export SVG.

Updated 12 October 2026.

Confluence to Markdown

All tools

Also free: Markdown templates for meeting notes, SOPs, PRDs, runbooks and more.