Is any of this sent to a server?

No. Mermaid is a JavaScript library that runs entirely in your browser — your source text never leaves the page. Your last diagram lives in localStorage so the editor picks up where you left off. Safe for internal architecture, NDA roadmaps, and anything you wouldn't paste into a random web tool.

Which Mermaid diagram types are supported?

All of them — flowchart, sequence, class, state, entity-relationship, gantt, pie, mindmap, gitGraph, journey, requirement, C4, and the rest. We render with the latest Mermaid library, so any syntax the official documentation supports will work here.

How do I get the diagram out?

Three ways: Copy SVG to clipboard (use the button in the preview's top right), Download SVG (vector, scales to any size), or Download PNG (2× rasterized bitmap with a solid background, ready for docs and slides).

Why does my diagram say 'Syntax error'?

Mermaid's parser is strict about indentation, arrow syntax, and reserved words. Common pitfalls: a node ID that contains spaces (use brackets like `A[My label]`), an arrow that's `-->` not `->`, or a keyword like `end` used as a label. Check the line indicated below the error.

Can I customize colors and styling?

Yes. Mermaid supports inline directives at the top of the diagram (`%%{init: {'theme': 'dark'}}%%`) and per-node style overrides (`style A fill:#ffe`). The Theme dropdown picks one of Mermaid's four built-in palettes; for finer control, embed the directives in the source itself.

Why is the PNG export at 2× resolution?

Because diagrams ship into docs and slides that get viewed on high-DPI displays, and a 1× raster looks fuzzy on retina screens and at zoom. 2× is a clean default — sharp on phones and on 4K monitors. If you need a specific size, download SVG and rasterize at your target dimensions.

Mermaid Live Editor

Render Mermaid diagrams live — flowchart, sequence, class, state, ER, gantt, pie, and more. On-device AI can describe an existing diagram or generate one from a natural-language brief.

Source

View

Style

Dir

Export

Pick a sample above or write your own Mermaid code

Your diagrams stay on your device.

Mermaid runs as JavaScript in your browser — no upload, no server-side rendering. Safe for internal architecture diagrams, roadmaps, or anything else you wouldn’t hand to a random site.

How to use it

1Write or paste Mermaid syntax into the editor on the left. The preview updates as you type.
2Pick a sample from the dropdown to see each diagram type at a glance — flowchart, sequence, class, state, ER, gantt, pie, mindmap.
3Switch theme (Default / Dark / Forest / Neutral) to match the surface you'll embed the diagram on.
4Use Split / Editor / Preview tabs to focus the viewport. Drag the textarea handle to resize the editor on long diagrams.
5Click SVG for a vector export, or PNG for a 2×-scaled bitmap that drops into docs, slides, or screenshots cleanly.

Common use cases

Sketch an architecture or sequence diagram for a design review without leaving the browser.
Generate the SVG to drop straight into a README or docs site that supports Mermaid (or accepts the rendered SVG inline).
Build a flowchart for an onboarding doc or a runbook and export PNG for paste into Notion / Confluence / Slack.
Visualize an ER diagram from a schema you're sketching — easier than firing up dbdiagram or a full ORM.
Turn LLM-generated Mermaid (ChatGPT, Claude, Gemini, Copilot all emit it) into an actual diagram you can see and tweak.

Frequently asked questions

Is any of this sent to a server?: No. Mermaid is a JavaScript library that runs entirely in your browser — your source text never leaves the page. Your last diagram lives in localStorage so the editor picks up where you left off. Safe for internal architecture, NDA roadmaps, and anything you wouldn't paste into a random web tool.
Which Mermaid diagram types are supported?: All of them — flowchart, sequence, class, state, entity-relationship, gantt, pie, mindmap, gitGraph, journey, requirement, C4, and the rest. We render with the latest Mermaid library, so any syntax the official documentation supports will work here.
How do I get the diagram out?: Three ways: Copy SVG to clipboard (use the button in the preview's top right), Download SVG (vector, scales to any size), or Download PNG (2× rasterized bitmap with a solid background, ready for docs and slides).
Why does my diagram say 'Syntax error'?: Mermaid's parser is strict about indentation, arrow syntax, and reserved words. Common pitfalls: a node ID that contains spaces (use brackets like `A[My label]`), an arrow that's `-->` not `->`, or a keyword like `end` used as a label. Check the line indicated below the error.
Can I customize colors and styling?: Yes. Mermaid supports inline directives at the top of the diagram (`%%{init: {'theme': 'dark'}}%%`) and per-node style overrides (`style A fill:#ffe`). The Theme dropdown picks one of Mermaid's four built-in palettes; for finer control, embed the directives in the source itself.
Why is the PNG export at 2× resolution?: Because diagrams ship into docs and slides that get viewed on high-DPI displays, and a 1× raster looks fuzzy on retina screens and at zoom. 2× is a clean default — sharp on phones and on 4K monitors. If you need a specific size, download SVG and rasterize at your target dimensions.