Home › Developer Tools › Mermaid Diagram Editor

Mermaid Diagram Editor

Write diagrams as text with Mermaid syntax and watch them render as you type. Start from a template, pick a theme, then download a clean SVG or a high-resolution PNG. Your diagrams are rendered in your browser and never uploaded.

Theme

Mermaid codeLn 1

Preview

Loading Mermaid…

Scale Background

How to use the Mermaid Diagram Editor

Pick a template such as Flowchart or Sequence, or paste your own Mermaid code into the editor.
Edit the code. The diagram updates a moment after you stop typing; syntax errors are shown with the line to fix.
Choose a theme and zoom the preview to check the details.
Download SVG for docs and further editing, or Download PNG for slides and chat, with a white or transparent background.
Share or embed: copy a link that contains the diagram, or copy a Markdown block to paste into GitHub, GitLab or Notion.

Mermaid syntax cheat sheet

Every diagram starts with a line that names its type. Below are the building blocks you will use most.

Diagram	First line	Example
Flowchart	`flowchart TD` (TD top-down, LR left-right)	`A[Box] --> B{Decision}`, `B -- yes --> C(Rounded)`, `D((Circle))`
Sequence	`sequenceDiagram`	`Alice->>Bob: Hello` (solid), `Bob-->>Alice: Hi` (dashed reply)
Gantt	`gantt`	`dateFormat YYYY-MM-DD`, `Task :t1, 2026-01-05, 3d`, `Next :after t1, 2d`
Class	`classDiagram`	`Animal <\|-- Dog` (inheritance), `+name: String`, `+bark() void`
ER	`erDiagram`	`CUSTOMER \|\|--o{ ORDER : places` (one to zero-or-many)
Pie	`pie` (add `showData` for values)	`"Label" : 42`
State	`stateDiagram-v2`	`[*] --> Idle`, `Idle --> Busy : start`
Mind map	`mindmap`	Indentation sets the level; `root((Topic))` for a round center

Fixing common Mermaid errors

Special characters in labels. Wrap labels that contain parentheses, brackets, colons or quotes in double quotes: A["Save (Ctrl+S)"]. Use #quot; for a literal double quote.
Reserved word "end". A flowchart node called end breaks parsing; write End or finish instead.
Gantt dates. Every date must match dateFormat exactly. Durations use d, w or h, for example 5d.
Mind map indentation. Children must be indented more than their parent, consistently with spaces.
ER cardinality. The markers are |o zero or one, || exactly one, }o zero or more and }| one or more, written on each side of --.

Frequently asked questions

What is Mermaid?

Mermaid is an open-source JavaScript library that turns plain-text definitions into diagrams. A line like A --> B becomes two boxes joined by an arrow. GitHub, GitLab, Notion, Obsidian and many documentation tools render Mermaid code blocks natively.

Is my diagram uploaded to a server?

No. The Mermaid library runs in your browser and draws the diagram locally. The only network request is loading the library itself from a public CDN the first time. The share link stores the code in the URL fragment (after #), which browsers do not send to servers.

Which diagram types are supported?

Everything the current Mermaid version supports, including flowchart, sequence, class, state, entity relationship (ER), Gantt, pie, mind map, timeline, user journey, git graph, quadrant and more. The templates cover the most popular ones.

Why does my diagram show a syntax error?

Mermaid is strict about syntax. Common causes are a missing diagram type on the first line (for example flowchart TD), special characters like parentheses or quotes inside a node label without wrapping the label in double quotes, and wrong indentation in mind maps. The error message shows the line where parsing failed.

How do I put a Mermaid diagram on GitHub?

Click Copy Markdown and paste the result into a README, issue or pull request. GitHub renders any fenced code block that starts with ```mermaid as a diagram.

SVG or PNG: which should I download?

SVG is a vector file that stays sharp at any size and can be edited in tools like Figma or Inkscape; use it for docs and the web. PNG is a regular image that works everywhere, including slides and chat apps; export at 2× or higher for sharp text.

Related tools