Diagrams Mermaid

Diagrams (Mermaid)

A code block whose language is mermaid stops being code and is drawn underneath, using Mermaid. It is redrawn when you switch between light and dark, it reaches the PDF, and it is drawn by code inside Tisty — nothing is fetched, so it works offline.

GitHub draws Mermaid too, so every example below is live on this page and in your file on GitHub.

A shape

graph TD
  R[Rina] --> V[Vaccines]
  R --> W[Walks]
  R --> C[Vet]

Loading

```mermaid
graph TD
  R[Rina] --> V[Vaccines]
  R --> W[Walks]
  R --> C[Vet]
```

A decision

flowchart TD
  A[Rina stares at you] --> B{Been out today?}
  B -- No --> C[Take her out]
  B -- Yes --> D{Still staring?}
  D -- Yes --> C
  D -- No --> E[It was hunger]

Loading

Splitting a total

pie title Walks this week
  "Morning" : 7
  "Evening" : 5
  "Both" : 2

Loading

Who says what to whom

sequenceDiagram
  You->>Tisty: I write a task
  Tisty->>Disk: I note it in the log
  Disk-->>Tisty: filed

Loading

Writing one

Type / and pick the diagram block, or write the fence by hand. A block can also carry a name, like any code block: ```mermaid title="Release flow".