Mermaid Playground

Write Mermaid diagrams with a live preview — export PNG/SVG, copy image or markdown, and browse the syntax reference

Example

Mermaid code

flowchart LR
  A[Start] --> B{Is it working?}
  B -- Yes --> C[Ship it]
  B -- No --> D[Debug]
  D --> B

flowchart LR
  A[Start] --> B{Is it working?}
  B -- Yes --> C[Ship it]
  B -- No --> D[Debug]
  D --> B

Diagram

100%

Mermaid syntax reference

Short, copy-pasteable snippets. Paste any into the editor to try it.

Diagram types›

Every diagram starts with a keyword declaring its type. The rest of the syntax depends on that keyword.

flowchart      graph nodes & links
sequenceDiagram  messages over time
classDiagram     OOP structure
stateDiagram-v2  state machines
erDiagram        entity relations
gantt / pie / mindmap / gitGraph

Flowchart · direction›

After `flowchart`, set the layout direction: LR (left→right), RL, TB/TD (top→bottom) or BT.

flowchart LR
  A --> B --> C

Flowchart · node shapes›

The brackets around a node's text choose its shape.

flowchart TD
  a[Rectangle]
  b(Rounded)
  c([Stadium])
  d{Diamond}
  e((Circle))
  f[/Parallelogram/]

Flowchart · links & labels›

Arrows connect nodes; add a label with `|text|` or `-- text -->`.

flowchart LR
  A --> B
  A --- C
  A -- yes --> D
  A -.-> E
  A ==> F

Sequence diagram›

Declare participants, then messages. `->>` is a solid arrow, `-->>` a dashed reply. `activate`/`deactivate` show lifelines.

sequenceDiagram
  participant A
  participant B
  A->>B: Request
  B-->>A: Response

Subgraphs & styling›

Group nodes with `subgraph … end`, and colour a node with `style` or a reusable `classDef`.

flowchart TB
  subgraph Group
    A --> B
  end
  classDef hot fill:#ef4444,color:#fff
  class A hot

Comments›

Lines starting with `%%` are ignored — useful for notes or disabling a line.

flowchart LR
  %% this is a comment
  A --> B

Full Mermaid docs ↗