Mermaid Viewer

Example Theme

Your current code hasn't rendered — these exports are the last good diagram, not your latest code.

PNG scale

PNG exports at 3× resolution.

Syntax docs ↗

Code

Preview

Syntax error

Your diagram will appear here.
Write some Mermaid code, or pick an example above.

Loading Mermaid… 0 lines · 0 chars Mermaid —

Every Mermaid diagram

23 types

The full gallery — every diagram type Mermaid supports, each with a working example rendered live. Open any one in the editor to start from it, or copy its source.

No matching diagrams
Try a different term or choose another category.

Mermaid syntax — quick reference

Start a diagram

The first line picks the type: flowchart TD, sequenceDiagram, classDiagram, gantt, pie… — every type has a working example under All diagrams.
Directions: TD top-down, LR left-right, BT, RL.

Flowchart nodes

A[Rectangle] · A(Rounded) · A{Decision}
A([Stadium]) · A((Circle)) · A[[Subroutine]]
A[(Database)] · A>Flag]

Arrows & labels

A --> B arrow · A --- B plain line · A -.-> B dotted
A ==> B thick · A <--> B both ways
Label an edge: A -->|yes| B or A -- text --> B

Sequence essentials

A->>B: message call · B-->>A: reply dashed reply
Note over A,B: text · blocks: alt / else / end

Good habits

Quote labels containing spaces or symbols: A["Cost (est.)"]
Comments start with %% and run to the end of the line
One statement per line; indent with two spaces
Stuck? The error bar names the line — it's highlighted in the margin

Full reference: mermaid.js.org ↗

Replace current code?