Mermaid examples

2026-11-06

One example of each diagram type the site's Mermaid draws, to check how each looks in light and dark mode.

Flowchart

flowchart LR
  A[Plan the trip] --> B{Weather ok?}
  B -->|yes| C[Ride]
  B -->|no| D[Fix the bike]
  D --> B
  C --> E((Home))

Sequence

sequenceDiagram
  participant N as Node
  participant P as Phone
  N->>P: position, every 2 s
  P-->>N: ack
  Note right of P: shows the rider on the map
  N-)P: help request

Class

classDiagram
  class Post {
    +string slug
    +string title
    +bool draft
    +publish()
  }
  class File {
    +string name
    +int size
  }
  Post "1" --> "*" File : has

State

stateDiagram-v2
  [*] --> Draft
  Draft --> Published : publish
  Published --> Draft : unpublish
  Published --> [*]

Entity relationship

erDiagram
  POST ||--o{ REVISION : keeps
  POST ||--o{ FILE : has
  POST {
    string slug
    string title
  }
  REVISION {
    int id
    int saved_at
  }

User journey

journey
  title A day on the bike
  section Morning
    Coffee: 5: Me
    Fuel up: 3: Me
  section Afternoon
    Pass road: 5: Me, Friend
    Rain: 1: Me, Friend

Gantt

gantt
  title Trip preparation
  dateFormat YYYY-MM-DD
  section Bike
  Service       :a1, 2026-05-01, 3d
  New tyres     :after a1, 1d
  section Route
  Plan          :2026-05-02, 2d
  Book hotels   :2026-05-04, 1d

Pie

pie title Time on the road
  "Riding" : 62
  "Coffee" : 18
  "Fuel" : 8
  "Photos" : 12

Quadrant

quadrantChart
  title Roads
  x-axis Boring --> Twisty
  y-axis Bad surface --> Good surface
  quadrant-1 Go there
  quadrant-2 Commute
  quadrant-3 Avoid
  quadrant-4 Adventure
  Pass road: [0.85, 0.8]
  Motorway: [0.1, 0.9]
  Gravel track: [0.7, 0.2]

Requirement

requirementDiagram
  requirement duty_cycle {
    id: 1
    text: under 10 percent per hour
    risk: medium
    verifymethod: analysis
  }
  element node {
    type: firmware
  }
  node - satisfies -> duty_cycle

Git graph

gitGraph
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
  commit

C4 context

C4Context
  title The site
  Person(rider, "Rider", "writes trip posts")
  System(site, "codevoid.de", "PHP and SQLite")
  System_Ext(tiles, "OpenFreeMap", "map tiles")
  Rel(rider, site, "writes posts")
  Rel(site, tiles, "loads tiles")

Mind map

mindmap
  root((Trip))
    Bike
      Tyres
      Chain
    Route
      Passes
      Coffee stops
    Gear
      Rain suit

Timeline

timeline
  title The site
  2019 : First posts
  2023 : OpenBSD series
  2026 : Post editor : Map images

Sankey

sankey-beta

Fuel,Riding,62
Fuel,Idle,8
Riding,Pass roads,40
Riding,Motorway,22

XY chart

xychart-beta
  title "Kilometres per day"
  x-axis [Mon, Tue, Wed, Thu, Fri]
  y-axis "km" 0 --> 400
  bar [312, 287, 150, 340, 90]
  line [312, 287, 150, 340, 90]

Block

block-beta
  columns 3
  node["Node"] radio["LoRa"] phone["Phone"]
  node --> radio
  radio --> phone

Packet

packet-beta
  title Record, 14 bytes
  0-23: "uid suffix"
  24-47: "latitude"
  48-71: "longitude"
  72-87: "ts"
  88-95: "spd"
  96-103: "crs"
  104-111: "status"

Kanban

kanban
  todo[To do]
    t1[Service the bike]
    t2[Plan the route]
  doing[Doing]
    t3[Write the post]
  done[Done]
    t4[Book hotels]

Architecture

architecture-beta
  group site(cloud)[Host]
  service httpd(server)[httpd] in site
  service php(server)[php fpm] in site
  service db(database)[SQLite] in site
  httpd:R --> L:php
  php:R --> L:db

Radar

radar-beta
  title Bikes
  axis comfort["Comfort"], speed["Speed"], range["Range"], offroad["Off road"]
  curve a["Tourer"]{4, 3, 5, 1}
  curve b["Enduro"]{2, 3, 3, 5}
  max 5

Treemap

treemap-beta
"Trip budget"
    "Bike"
        "Fuel": 180
        "Tyres": 240
    "Stay"
        "Hotels": 420
        "Food": 210

Tree view

treeView-beta
├── htdocs/
│   ├── posts.php ## the blog
│   └── site.php ## shared by every page
└── assets/
    └── style.css

Venn

venn-beta
  title Riders
  set A["Touring"]
  set B["Off road"]
  union A,B["Adventure"]

Ishikawa

ishikawa
  Bike won't start
    Battery
      Old
    Fuel
      Empty tank
    Ignition
      Kill switch

Railroad

railroad-beta
  title The map tag
  map = sequence(terminal("[map:"), nonterminal("lat"), terminal(","), nonterminal("lng"), optional(sequence(terminal(","), nonterminal("zoom"))), terminal("]")) ;

Swimlane

swimlane-beta LR
  subgraph Writer
    a[Write the post]
    b[Publish]
  end
  subgraph Site
    c[Render]
    d[Show it to readers]
  end
  a --> b --> c --> d

Wardley

wardley-beta
  title Blog
  component Reader [0.95, 0.6]
  component Post [0.8, 0.5]
  component SQLite [0.3, 0.9]
  Reader -> Post
  Post -> SQLite

Cynefin

cynefin-beta
  title Problems on a trip
  clear
    "Change a tyre"
  complicated
    "Tune the carburettor"
  complex
    "Plan a group trip"
  chaotic
    "Crash on the pass"
  chaotic --> complex : "first aid, then plan"

Event modeling

eventmodeling

tf 01 ui Editor
tf 02 cmd Publish ->> 01
tf 03 evt Published ->> 02
tf 04 rmo PostPage ->> 03