Mermaid Editor — edit, preview and export Mermaid diagrams online

mermaid.tools is a free, browser-based visual editor for Mermaid diagrams. Write or paste Mermaid syntax on the left, watch it render live on the right, then export to PNG, SVG, PDF or a shareable link — no account required.

Mermaid is an open-source JavaScript diagramming library that turns short text definitions into rendered diagrams — flowcharts, sequence diagrams, Gantt charts and more. Instead of dragging shapes, you describe the diagram in plain text and Mermaid draws it for you.

Supported diagram types

Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines, quadrant charts, sankey diagrams, and every other type in Mermaid v11.

Key features

• Live preview — see your diagram update as you type
• 12 built-in themes with custom colour overrides
• Pan, zoom, and click-to-select visual editing
• Export to PNG (up to 4× resolution), JPEG, SVG, or PDF
• Shareable links and embeddable iframes
• Version history with diff view
• Works offline — no backend, no account needed

How to export a Mermaid diagram

1. Write or paste your Mermaid code into the editor — the preview renders as you type.
2. Optionally pick one of the 12 themes or override colours to style the diagram.
3. Choose Export and pick a format: PNG (up to 4× resolution), JPEG, SVG, PDF, raw .mmd, or JSON backup.
4. Or copy a shareable link / iframe embed code instead of downloading a file.

Frequently asked questions

What is Mermaid?

Mermaid is an open-source JavaScript diagramming library that turns short text definitions into rendered diagrams — flowcharts, sequence diagrams, Gantt charts and more. Instead of dragging shapes, you describe the diagram in plain text and Mermaid draws it for you.

What is mermaid.tools?

mermaid.tools is a free, browser-based visual editor for Mermaid diagrams. It lets you write Mermaid syntax, see it render live, customise themes and layout, then export to PNG, SVG, PDF or shareable link — all without creating an account.

What diagram types does mermaid.tools support?

It supports every diagram type in Mermaid v11 — flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines, quadrant charts, sankey diagrams and more.

Is mermaid.tools free?

Yes. mermaid.tools is completely free with no sign-up, no watermarks, and no usage limits. Everything runs in your browser — your diagrams never leave your machine.

How do I export a Mermaid diagram as a PNG, SVG or PDF?

Paste or write your Mermaid code in mermaid.tools, then choose Export. You can download PNG (up to 4× resolution), JPEG, SVG, PDF, the raw .mmd file, or a JSON project backup — or copy a shareable link or iframe embed code instead.

Does mermaid.tools upload my diagrams to a server?

No. Rendering, styling and exporting all happen locally in your browser. Projects are saved to your browser's localStorage, and shareable links encode the diagram in a compressed URL hash, so diagram content is never stored on a server.

Privacy

Your diagrams never leave your machine. All processing happens locally in the browser using the official Mermaid.js library loaded from a CDN.