Mermaid types and keywords

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

Mermaid decides which diagram to draw from the first keyword in the source. This is the full list, which is also the fastest way to discover a type you did not know existed.

If a keyword produces nothing, the version we pin may not include that type yet.

#When you need this page

  • Looking up the keyword for a type you have not used before.

  • Debugging a diagram that renders as the wrong type.

  • Deciding whether Mermaid can do something before reaching for PlantUML.

#The detail

Field

What it does

flowchart TD

Flowchart. TD, LR, BT, RL set the direction.

sequenceDiagram

Sequence diagram, with activations, loops and alt blocks.

classDiagram

UML class diagram.

stateDiagram-v2

State machine, with composite and concurrent states.

erDiagram

Entity relationship diagram with crow's foot cardinality.

journey

User journey with per-step satisfaction scores.

gantt

Gantt chart with sections, dependencies and milestones.

pie

Pie chart.

quadrantChart

Two-by-two quadrant chart.

requirementDiagram

Requirements and their relationships.

gitGraph

Git branching and merging.

mindmap

Mind map from indentation.

timeline

Timeline grouped into sections.

sankey-beta

Sankey flow diagram from CSV-style rows.

xychart-beta

Bar and line charts on x and y axes.

block-beta

Block diagram with explicit column layout.

packet-beta

Packet or byte layout diagram.

architecture-beta

Cloud and service architecture with icon groups.

#A worked example

A state machine, one of the less used types:

Mermaid types and keywords

The source, which you can paste into a new diagram and edit:

stateDiagram-v2
  [*] --> Draft
  Draft --> InReview: submit
  InReview --> Draft: request changes
  InReview --> Approved: approve
  InReview --> Rejected: reject
  Approved --> Published: publish
  Rejected --> [*]
  Published --> Archived: archive
  Archived --> [*]

  note right of InReview
    Reminders are sent
    every 48 hours
  end note

#A few things that catch people out

  • Types marked beta upstream can change syntax between versions. Use them knowingly.

  • The keyword must be the first non-comment line, or Mermaid guesses wrong.

  • Direction keywords differ per type: flowchart uses TD and LR, state diagrams use direction LR.

Eighteen types. Most people use three.