# Mermaid types and keywords

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](https://help.gocapable.com/images/att1418461422.svg)

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.

---

## Related

[MermaidBack to the Mermaid overview.](https://help.gocapable.com/diagrams/mermaid.html)

---

_Eighteen types. Most people use three._