Mermaid — diagrams as code

$ flowchart LR
  A[Write text] --> B[Parse] --> C[Render SVG]

  A[Write text] --> B[Parse] --> C[Render SVG]

  # renders a left-to-right flowchart with three nodes
  # and two arrows — that is the whole syntax

The minimal flowchart. `LR` = left-to-right; `TD` = top-down. `[text]` is a rectangle node, `-->` is an arrow.

$ flowchart TD
  A[Start] --> B{Is it a diagram?}
  B -- yes --> C[Write mermaid text]
  B -- no --> D[Write prose]
  C --> E[Render] --> F[Commit to git] --> G[Ship docs]

  A[Start] --> B{Is it a diagram?}
  B -- yes --> C[Write mermaid text]
  B -- no --> D[Write prose]
  C --> E[Render] --> F[Commit to git] --> G[Ship docs]

  # {} is a decision diamond, -- label --> is a labeled edge

A real decision flow. `{}` makes a diamond, and `-- yes -->` labels the edge. This is the shape of most flowcharts you will ever write.

$ sequenceDiagram
  participant U as User
  participant B as Browser
  participant M as Mermaid
  U->>B: open docs page
  B->>M: render("flowchart", src)
  M-->>B: SVG string
  B-->>U: draw diagram

  User -> Browser -> Mermaid
  open docs page
  render("flowchart", src)
  SVG string
  draw diagram

  # sequence diagrams model message passing between actors

Sequence diagrams model who talks to whom, in order. `->>` is a solid arrow, `-->>` a dashed reply. `participant X as Label` renames the actor.

$ gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Build
  Frontend :b1, 2026-09-10, 10d
  Backend :b2, 2026-09-10, 12d
  section Ship
  QA :c1, 2026-09-22, 5d
  Launch :c2, after c1, 2d

  gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Build
  Frontend :b1, 2026-09-10, 10d
  Backend :b2, 2026-09-10, 12d
  section Ship
  QA :c1, 2026-09-22, 5d
  Launch :c2, after c1, 2d

  # a Gantt chart from a few lines of text

Gantt charts track tasks over time. `section` groups tasks, `:id, start, duration` defines each bar, and `after c1` chains dependencies.

$ erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  USER {
    int id PK
    string name
    string email
  }

  USER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  USER {
    int id PK
    string name
    string email
  }

  # entity-relationship diagram with cardinality

ER diagrams model data. `||--o{` reads as "one to zero or more" and `||--|{` as "one to one or more" — in each marker the outermost character is the maximum and the inner one the minimum. Fields go inside the entity block with `PK`/`FK` markers.