📊 Mermaid Live Preview

Type Mermaid syntax and render SVG live. Supports flowchart, sequence, class, state, gantt, pie, mindmap, gitGraph and journey. Copy SVG, download SVG or PNG, switch themes.

100% Free No signup Browser-only 5 languages Dark mode

🔒 Mermaid is loaded from a CDN and rendering happens entirely in your browser. Your diagram source is never sent to any server.

Samples: Theme:

📝 Mermaid Input

👁 Preview

📖 Where people get stuck

Type Mermaid syntax and the diagram renders immediately, with switchable themes and SVG or PNG export. Rendering is done in the browser by Mermaid loaded from a CDN, and the source is never uploaded. Only the syntax is checked; nothing looks at whether the diagram is right — a dangling arrow or a flow that makes no sense draws quietly so long as it parses. There is a gap between rendering and communicating.

Case	What happens	What to do
Brackets or punctuation in a label cause a syntax error	Write `A[step (1)]` and the parser reads the `)` as the end of a node shape and breaks there. The same happens with `#`, `:`, `;`, `{` and `"`. The unhelpful part is how it fails: Mermaid rarely tells you which line or column is at fault, so either the whole diagram vanishes or you get a message pointing somewhere unrelated. You are then hunting one character in fifty lines.	Wrap labels in double quotes — `A["step (1)"]` treats the contents as a string and brackets and punctuation come through intact. To include an actual `"` in the label, use Mermaid own entity `#quot;`, and use `<br/>` for a line break. For diagnosis, suspect the line you just added: if a working diagram broke after one new line, that line is almost certainly it. When building something large, re-render every five lines — writing fifty lines and then discovering it is broken is where the afternoon goes.
PNG export changes the font or drops text	PNG export works by painting the already-rendered SVG onto a canvas. Along the way, web fonts referenced by the SVG are not resolved on the canvas side and fall back to a system font, which is why a table you had lined up in a monospaced face comes out ragged. Worse, when Mermaid renders labels as HTML inside a `foreignObject`, some browsers produce blank labels once it hits the canvas — the screen looks right and only the exported PNG has no text in it.	Use the SVG wherever you can. GitHub READMEs, Zenn, Notion and most CMSes accept SVG directly, and SVG scales without loss and stays selectable as text. Where PNG is genuinely required — pasting into Slack, a social card image — steer the diagram font toward something guaranteed to exist, such as `sans-serif` or `system-ui`. Always open the exported file and look at it: a blank label is indistinguishable from a successful export until you do.
The diagram sprawls sideways and cannot be read	A `flowchart TD` (top to bottom) widens as branches multiply, and `LR` (left to right) lengthens as steps accumulate. In both cases the layout engine places everything automatically and you cannot control the width. Pasted into a GitHub README it is scaled to the container, so past roughly fifteen nodes the labels stop being readable. On mobile it is worse still — plenty of contexts do not allow horizontal scrolling — and in practice nothing gets across at all.	Stop cramming everything into one diagram. The main reason a diagram is unreadable is not the layout engine but the attempt to explain the whole system in a single picture. Draw the overview in about seven nodes and split each part into its own diagram and both become readable. Grouping with `subgraph` creates visual chunks and holds the width down. Choose the direction by purpose: `LR` reads well for sequences of steps and `TD` for decision branches. Always check at the real width of wherever you are pasting it — the preview here is wide, so readable here does not mean readable in a README.

Mermaid syntax changes between versions. Between the 8.x and 11.x lines, graph was superseded by flowchart, and the gantt date format and classDiagram notation also changed. This page runs Mermaid 11.x, but GitHub, GitLab, Notion and the various CMSes each run their own version, and some do not publish which — so rendering correctly here never guarantees rendering at the destination. Whenever you reach for newer syntax such as mindmaps or the newer shapes, confirm how it looks where you are pasting it. Also: Mermaid defaults to securityLevel: strict, which disables HTML in labels and click events. There are settings to relax that, but never relax it in a service that renders Mermaid submitted by users — labels are an XSS entry point.

📖 How to Use

1

Type syntax

Type Mermaid syntax in the left editor. Use sample buttons for templates.
2

Choose a theme

Pick default, dark, forest or neutral; the diagram re-renders.
3

Export

Copy SVG to clipboard, or download as SVG or PNG.

❓ Frequently Asked Questions

What diagram types are supported?

flowchart, sequence, class, state, gantt, pie, mindmap, gitGraph and journey. Uses Mermaid 11 syntax.

How does PNG download work?

The rendered SVG is drawn onto a Canvas and exported as PNG. All in your browser.

Is the Mermaid source sent externally?

No. The Mermaid library is loaded from a CDN, but your diagram text is processed only inside your browser.

🔗 Related Tools

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.