Mermaid Live Editor – Export SVG & PNG

Supported diagram types

Each guide covers the syntax, worked examples and common mistakes for one diagram type.

Diagram	Starts with	Good for
Flowchart	`flowchart`	Processes, decisions, architecture sketches
Sequence Diagram	`sequenceDiagram`	API calls, auth flows, message exchanges over time
Class Diagram	`classDiagram`	Domain models, classes and their relationships
State Diagram	`stateDiagram-v2`	State machines, lifecycles, UI flows
ER Diagram	`erDiagram`	Database tables, columns and relationships
Gantt Chart	`gantt`	Project schedules with dependencies and milestones
Pie Chart	`pie`	Parts of a whole
Mindmap	`mindmap`	Brainstorming, outlines, topic maps
Timeline	`timeline`	Product histories, roadmaps
Git Graph	`gitGraph`	Branching strategies, commits and merges
User Journey	`journey`	How users feel at each step of a task
Quadrant Chart	`quadrantChart`	Effort vs impact and other 2×2 matrices
XY Chart	`xychart-beta`	Simple bar and line charts

Have a database schema already? SQL to Mermaid draws an ER diagram from your CREATE TABLE statements.

Render Mermaid on your own page

HTML

<pre class="mermaid">
flowchart LR
  A --> B
</pre>
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@12/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true, securityLevel: 'strict' });
</script>

Mermaid finds every .mermaid element and replaces it with the diagram. To make image files in a build step or CI, use the Mermaid CLI:

Node.js (mermaid-cli)

import { run } from '@mermaid-js/mermaid-cli';

// npm i -D @mermaid-js/mermaid-cli   (downloads a headless Chromium)
await run('diagram.mmd', 'diagram.svg');

Command line

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b white

Frequently asked questions

Is my diagram uploaded anywhere?

No. Mermaid runs in your browser, and the SVG and PNG files are made there too. The diagram isn’t stored; download it as .mmd or use Share link, which puts the source in the link itself (after the #, which browsers never send to a server).

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

Use the SVG or PNG buttons above the preview. SVG is a vector file that stays sharp at any size and opens in Figma, Inkscape or a browser. PNG is rendered at twice the diagram’s size so it looks sharp on high-resolution screens and in slides. Both get a solid background that matches the theme.

Why does my diagram show a parse error?

Mermaid stops at the first line it can’t read and reports its line number. Common causes are the word end in lowercase inside a flowchart or sequence diagram, special characters such as parentheses in node text without quotes, and a missing diagram keyword on the first line. The last diagram that worked stays visible, faded, until the error is fixed.

How do I put a Mermaid diagram in a GitHub README?

Use Copy as Markdown and paste the result into the README. It is a fenced code block with the language mermaid, which GitHub draws as a diagram in READMEs, issues, pull requests, discussions and wikis.

Which Mermaid version does the editor use?

Mermaid 12, the current major version, with the strict security level: links and click handlers in diagrams are disabled and labels are sanitized. Labels are drawn as SVG text, so exported files work in tools that don’t support embedded HTML.