Diagrams

A fenced code block marked mermaid is drawn as a picture rather than printed as code. It works in every Markdown area — a note's body, a checklist item's note, a card's description, a map node's note.

```mermaid
flowchart LR
  Type[Type this] --> Get[Get a picture]
```

flowchart LR
  Type[Type this] --> Get[Get a picture]

What it costs

The drawing library is 11.17.2 and about three and a half megabytes. It is served from this application rather than from somebody else's, and it is fetched only for a note that has a diagram in it — a shopping list never asks for it. That is also why this page is slower to arrive than the rest of the documentation: it has nine.

Flowchart

Boxes and arrows. TD draws top-down and LR left to right; { } makes a decision, ([ ]) a rounded start or end, and a label after a pipe names the branch.

```mermaid
flowchart TD
  start([Offer accepted]) --> survey[Survey booked]
  survey --> ok{Anything found?}
  ok -->|No| exchange[Exchange]
  ok -->|Yes| quote[Get a quote]
  quote --> exchange
```

flowchart TD
  start([Offer accepted]) --> survey[Survey booked]
  survey --> ok{Anything found?}
  ok -->|No| exchange[Exchange]
  ok -->|Yes| quote[Get a quote]
  quote --> exchange

Sequence

Who said what to whom, in order. A solid arrow is a message, a dashed one a reply.

```mermaid
sequenceDiagram
  Buyer->>Solicitor: Send the paperwork
  Solicitor->>Seller: Raise enquiries
  Seller-->>Solicitor: Answers
  Solicitor-->>Buyer: Ready to exchange
```

sequenceDiagram
  Buyer->>Solicitor: Send the paperwork
  Solicitor->>Seller: Raise enquiries
  Seller-->>Solicitor: Answers
  Solicitor-->>Buyer: Ready to exchange

State

What something can be, and what moves it. [*] is where it starts and ends — the shape a board's columns already have.

```mermaid
stateDiagram-v2
  [*] --> Planning
  Planning --> Doing
  Doing --> Done
  Doing --> Planning: Sent back
  Done --> [*]
```

stateDiagram-v2
  [*] --> Planning
  Planning --> Doing
  Doing --> Done
  Doing --> Planning: Sent back
  Done --> [*]

Class

Types and what they carry. <|-- is inheritance.

```mermaid
classDiagram
  class Note {
    +String title
    +history()
  }
  Note <|-- Checklist
  Note <|-- Board
```

classDiagram
  class Note {
    +String title
    +history()
  }
  Note <|-- Checklist
  Note <|-- Board

Entity relationship

Tables and how they relate. ||--o{ reads "one of these holds many of those".

```mermaid
erDiagram
  WORKSPACE ||--o{ FOLDER : holds
  FOLDER ||--o{ NOTE : holds
  NOTE ||--o{ VERSION : keeps
```

erDiagram
  WORKSPACE ||--o{ FOLDER : holds
  FOLDER ||--o{ NOTE : holds
  NOTE ||--o{ VERSION : keeps

Journey

Steps somebody takes and how they felt about each — the number is a score out of five.

```mermaid
journey
  title Moving house
  section Before
    Book the survey: 4: Buyer
    Chase the solicitor: 2: Buyer
  section After
    Get the keys: 5: Buyer
```

journey
  title Moving house
  section Before
    Book the survey: 4: Buyer
    Chase the solicitor: 2: Buyer
  section After
    Get the keys: 5: Buyer

Gantt

Work against dates. dateFormat says how yours are written.

```mermaid
gantt
  title Moving out
  dateFormat YYYY-MM-DD
  section Paperwork
    Survey :2026-09-01, 5d
    Searches :2026-09-04, 10d
  section Moving
    Pack :2026-09-14, 3d
```

gantt
  title Moving out
  dateFormat YYYY-MM-DD
  section Paperwork
    Survey :2026-09-01, 5d
    Searches :2026-09-04, 10d
  section Moving
    Pack :2026-09-14, 3d

Pie

Proportions of one whole. The title is on the first line.

```mermaid
pie title Where the space goes
  "Photographs" : 62
  "PDFs" : 25
  "Everything else" : 13
```

pie title Where the space goes
  "Photographs" : 62
  "PDFs" : 25
  "Everything else" : 13

Mindmap

Indentation is the tree — no arrows to draw. (( )) makes the root a circle.

```mermaid
mindmap
  root((Ashgrove Road))
    Survey
      Damp
      Roof
    Mortgage
      Offer
    Moving
      Van
```

mindmap
  root((Ashgrove Road))
    Survey
      Damp
      Roof
    Mortgage
      Offer
    Moving
      Van

When one does not draw

A block Mermaid cannot parse is left as the text you typed rather than replaced with an error — so a typo costs you a picture, never your writing. The live preview beside the editor shows what it will look like before you save.

Mermaid can draw more than the nine here — Git graphs, quadrant charts, timelines, Sankey diagrams and others. These are the ones people reach for; the rest are in Mermaid's own documentation, and anything valid in 11.17.2 will draw here.