Mermaid Live Editor

How to use the Mermaid Live Editor

Type Mermaid code in the Mermaid code editor, or pick a starting point from Template (flowchart, sequence, class, ER, state, Gantt, pie, mindmap or git graph).

Watch the Preview update as you type; syntax errors appear under the preview.

Choose a Theme (Default, Neutral, Forest, Dark or Base) and use the zoom buttons to inspect details.

Click Export SVG or Export PNG to download the diagram, or Copy as Markdown to paste it into a README.

Mermaid Live Editor with Instant Preview and Export

Mermaid lets you describe a diagram in a few lines of text and have it drawn for you. This Mermaid live editor puts the code and the rendered diagram side by side, re-rendering a moment after you stop typing, so you can sketch a flowchart, API sequence or database schema and export it without installing anything.

What is Mermaid?

Mermaid is an open-source JavaScript library that turns a Markdown-like syntax into SVG diagrams. Because the source is plain text, diagrams live next to your code, show up in pull request diffs, and are easy to update when the system changes. GitHub, GitLab, Azure DevOps, Obsidian, Notion and many documentation generators render Mermaid code blocks natively.

The first line picks the diagram type. The editor supports the full range Mermaid offers, including flowchart, sequenceDiagram, classDiagram, erDiagram, stateDiagram-v2, gantt, pie, mindmap, gitGraph, timeline, journey, quadrantChart and the C4 diagrams.

Example: a request flow

flowchart LR
    A[Browser] -->|HTTPS| B(Load balancer)
    B --> C{Cache hit?}
    C -->|Yes| D[Return cached page]
    C -->|No| E[App server]
    E --> F[(Database)]
    E --> D

LR lays the chart out left to right (use TD for top-down). Brackets set the node shape: [ ] is a rectangle, ( ) rounded, { } a decision diamond and [( )] a database cylinder. Text between pipes, as in |HTTPS|, labels the arrow.

Features explained

Templates. Nine working starters: flowchart, sequence (a login call with numbered steps), class, entity relationship, state, Gantt, pie, mindmap and git graph. Picking one replaces the editor contents.
Themes. Default, Neutral, Forest, Dark and Base. Neutral suits black-and-white printouts, and Dark suits dark-mode docs; PNG exports get a matching background.
Zoom. Scale the preview from 25% to 300% to check small labels in large diagrams.
Export SVG. Downloads diagram.svg, a sharp vector file for docs, slides and websites.
Export PNG. Downloads diagram.png at twice the diagram size with a solid background, ready for chat apps and tools that do not accept SVG.
Copy as Markdown. Wraps your code in a ```mermaid fence so it renders directly in a GitHub README, issue or wiki page.

Common errors and fixes

Unknown diagram type. The first non-comment line must start with a keyword such as flowchart or sequenceDiagram. A typo like flowchat stops rendering straight away.
Special characters in labels. Parentheses, brackets or quotes inside node text confuse the parser. Wrap the label in double quotes: A["Save (draft)"].
The word end. A node named end in lowercase closes a subgraph and breaks flowcharts. Capitalize it or put it in quotes.
Arrow syntax differs by type. Flowcharts use -->, while sequence diagrams use ->> for calls and -->> for replies.
Gantt dates. Dates must match the dateFormat line exactly, or tasks disappear from the chart.

When the parser fails, the error message appears under the preview while the last successful render stays on screen. Check for that message before exporting, so you do not download an older version of the diagram.

Mermaid vs drawing tools

Drag-and-drop editors give you pixel control, but their files are hard to review and quickly fall out of date. Mermaid trades fine layout control for text that is diffable, searchable and easy to regenerate. It works best for flows, sequences and schemas that change with the code. For hand-tuned illustrations, export the SVG here and polish it in a vector editor.

Writing docs around the diagram? Draft them in the Markdown editor, inspect or tidy an exported file in the SVG viewer, and turn the finished page into HTML with Markdown to HTML.

Privacy

Mermaid runs entirely in your browser, and the preview is drawn in a sandboxed frame with Mermaid's strict security level. Your diagram code is never uploaded, which is useful when it describes internal systems.

Frequently asked questions

Does GitHub render Mermaid diagrams?

Yes. GitHub renders fenced code blocks marked mermaid in README files, issues, pull requests, discussions and wikis. Use Copy as Markdown here to get a block you can paste directly.

How do I export a Mermaid diagram as a PNG?

Click Export PNG. The diagram is rasterized in your browser at twice its size with a solid background matching the theme, and saved as diagram.png. If an image-based export fails in your browser, Export SVG always works and can be converted later.

Why does my Mermaid diagram show a syntax error?

The most common causes are a misspelled diagram type on the first line, unquoted labels containing brackets or parentheses, and using flowchart arrows in a sequence diagram. The error message under the preview usually names the line and the token Mermaid did not expect.

Can I change the colors of a Mermaid diagram?

Pick one of the built-in themes for a quick change. For finer control, add a classDef line and apply the class to nodes, or put a %%{init: ...}%% directive at the top of the code to set theme variables.

Is my diagram code saved or shared?

No. Rendering happens locally in your browser and the code is not sent to a server. Copy your code or export the diagram before closing the page if you want to keep it.