Mermaid diagrams

One sample for each diagram type that Mermaid 11.16.1 registers, rendered by@hagicode/hagilight-mermaid. Each diagram reveals itself in the order its type reads. Hover a part to follow it through the diagram, or click a tile to enlarge it.

Mode
Preset
Engine

In the enlarged view: scroll to zoom, drag to move, 0 fits, 1 shows actual size, Esc closes.

Architecturearchitecture-beta

architecture-beta
  group cloud(cloud)[Cloud]
  group edge(internet)[Edge] in cloud
  service web(server)[Web] in edge
  service api(server)[API] in cloud
  service db(database)[Database] in cloud
  service cache(disk)[Cache] in cloud
  service queue(server)[Queue] in cloud
  web:R --> L:api
  api:B --> T:db
  api:R --> L:cache
  api:B --> T:queue

Blockblock-beta

block-beta
  columns 3
  a["Ingest"] b["Parse"] c["Store"]
  d("Queue") space e{{"Route"}}
  f["Render"]:2 g[("Index")]
  a --> b
  b --> c
  b --> d
  d --> e
  e --> f
  f --> g

C4C4Context

C4Context
  title System context
  Person(user, "User", "Writes docs")
  System(app, "Docs Site", "Renders diagrams")
  System_Ext(mail, "Mail", "Sends notices")
  SystemDb(db, "Store", "Holds pages")
  Rel(user, app, "Uses")
  Rel(app, db, "Reads and writes")
  Rel(app, mail, "Notifies")

ClassclassDiagram

classDiagram
  class Animal {
    +int age
    +String name
    +eat() void
  }
  class Duck {
    +swim() void
    +quack() void
  }
  class Fish
  class Pond {
    +int depth
  }
  Animal <|-- Duck
  Animal <|-- Fish
  Duck --> Pond : lives in
  Fish "1" --o "*" Pond : swims in

Class (v2 keyword)classDiagram-v2

classDiagram-v2
  class Shape {
    <<interface>>
    +area() double
  }
  class Circle {
    +double radius
  }
  class Square {
    +double side
  }
  class Canvas
  Shape <|.. Circle
  Shape <|.. Square
  Canvas o-- Shape : draws
  Canvas *-- Square : owns

Cynefincynefin-beta

cynefin-beta
  clear
    "Standard process"
    "Routine request"
  complicated
    "Expert review"
    "Architecture change"
  complex
    "New market"
  chaotic
    "Outage"

Entity relationshiperDiagram

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : "is sold as"
  CUSTOMER {
    string name
    string email PK
    int loyalty_points
  }
  ORDER {
    int id PK
    date placed_at
    string status
  }
  LINE_ITEM {
    int quantity
    decimal price
  }
  PRODUCT {
    string sku PK
    string title
    decimal list_price
  }

Event modelingeventmodeling

eventmodeling
  tf 01 cmd CreateOrder
  tf 02 evt OrderCreated
  tf 03 rmo OrderSummary
  tf 04 cmd ShipOrder
  tf 05 evt OrderShipped

Flowchartflowchart

flowchart LR
  subgraph ingest_group["INGEST stage"]
    direction TB
    ingest0["ingest step 0"]
    ingest1["ingest step 1"]
    ingest2["ingest step 2"]
    ingest3["ingest step 3"]
    ingest4["ingest step 4"]
    ingest5["ingest step 5"]
    ingest6["ingest step 6"]
    ingest7["ingest step 7"]
    ingest8["ingest step 8"]
    ingest9["ingest step 9"]
    ingest10["ingest step 10"]
    ingest11["ingest step 11"]
    ingest12["ingest step 12"]
    ingest13["ingest step 13"]
    ingest14["ingest step 14"]
    ingest15["ingest step 15"]
    ingest16["ingest step 16"]
    ingest17["ingest step 17"]
  end
  subgraph parse_group["PARSE stage"]
    direction TB
    parse0["parse step 0"]
    parse1["parse step 1"]
    parse2["parse step 2"]
    parse3["parse step 3"]
    parse4["parse step 4"]
    parse5["parse step 5"]
    parse6["parse step 6"]
    parse7["parse step 7"]
    parse8["parse step 8"]
    parse9["parse step 9"]
    parse10["parse step 10"]
    parse11["parse step 11"]
    parse12["parse step 12"]
    parse13["parse step 13"]
    parse14["parse step 14"]
    parse15["parse step 15"]
    parse16["parse step 16"]
    parse17["parse step 17"]
  end
  subgraph index_group["INDEX stage"]
    direction TB
    index0["index step 0"]
    index1["index step 1"]
    index2["index step 2"]
    index3["index step 3"]
    index4["index step 4"]
    index5["index step 5"]
    index6["index step 6"]
    index7["index step 7"]
    index8["index step 8"]
    index9["index step 9"]
    index10["index step 10"]
    index11["index step 11"]
    index12["index step 12"]
    index13["index step 13"]
    index14["index step 14"]
    index15["index step 15"]
    index16["index step 16"]
    index17["index step 17"]
  end
  subgraph rank_group["RANK stage"]
    direction TB
    rank0["rank step 0"]
    rank1["rank step 1"]
    rank2["rank step 2"]
    rank3["rank step 3"]
    rank4["rank step 4"]
    rank5["rank step 5"]
    rank6["rank step 6"]
    rank7["rank step 7"]
    rank8["rank step 8"]
    rank9["rank step 9"]
    rank10["rank step 10"]
    rank11["rank step 11"]
    rank12["rank step 12"]
    rank13["rank step 13"]
    rank14["rank step 14"]
    rank15["rank step 15"]
    rank16["rank step 16"]
    rank17["rank step 17"]
  end
  subgraph render_group["RENDER stage"]
    direction TB
    render0["render step 0"]
    render1["render step 1"]
    render2["render step 2"]
    render3["render step 3"]
    render4["render step 4"]
    render5["render step 5"]
    render6["render step 6"]
    render7["render step 7"]
    render8["render step 8"]
    render9["render step 9"]
    render10["render step 10"]
    render11["render step 11"]
    render12["render step 12"]
    render13["render step 13"]
    render14["render step 14"]
    render15["render step 15"]
    render16["render step 16"]
    render17["render step 17"]
  end
  ingest17 --> parse0
  parse17 --> index0
  index17 --> rank0
  rank17 --> render0
  ingest0 --> ingest1
  ingest1 --> ingest2
  ingest2 --> ingest3
  ingest3 --> ingest4
  ingest4 --> ingest5
  ingest5 --> ingest6
  ingest6 --> ingest7
  ingest7 --> ingest8
  ingest8 --> ingest9
  ingest9 --> ingest10
  ingest10 --> ingest11
  ingest11 --> ingest12
  ingest12 --> ingest13
  ingest13 --> ingest14
  ingest14 --> ingest15
  ingest15 --> ingest16
  ingest16 --> ingest17
  parse0 --> parse1
  parse1 --> parse2
  parse2 --> parse3
  parse3 --> parse4
  parse4 --> parse5
  parse5 --> parse6
  parse6 --> parse7
  parse7 --> parse8
  parse8 --> parse9
  parse9 --> parse10
  parse10 --> parse11
  parse11 --> parse12
  parse12 --> parse13
  parse13 --> parse14
  parse14 --> parse15
  parse15 --> parse16
  parse16 --> parse17
  index0 --> index1
  index1 --> index2
  index2 --> index3
  index3 --> index4
  index4 --> index5
  index5 --> index6
  index6 --> index7
  index7 --> index8
  index8 --> index9
  index9 --> index10
  index10 --> index11
  index11 --> index12
  index12 --> index13
  index13 --> index14
  index14 --> index15
  index15 --> index16
  index16 --> index17
  rank0 --> rank1
  rank1 --> rank2
  rank2 --> rank3
  rank3 --> rank4
  rank4 --> rank5
  rank5 --> rank6
  rank6 --> rank7
  rank7 --> rank8
  rank8 --> rank9
  rank9 --> rank10
  rank10 --> rank11
  rank11 --> rank12
  rank12 --> rank13
  rank13 --> rank14
  rank14 --> rank15
  rank15 --> rank16
  rank16 --> rank17
  render0 --> render1
  render1 --> render2
  render2 --> render3
  render3 --> render4
  render4 --> render5
  render5 --> render6
  render6 --> render7
  render7 --> render8
  render8 --> render9
  render9 --> render10
  render10 --> render11
  render11 --> render12
  render12 --> render13
  render13 --> render14
  render14 --> render15
  render15 --> render16
  render16 --> render17
  render17 -. retry .-> ingest0

Flowchart (ELK layout)flowchart-elk

flowchart-elk LR
  subgraph frontend["Frontend"]
    ui["Editor"] --> preview["Preview"]
  end
  subgraph backend["Backend"]
    api["API"] --> worker["Worker"]
    worker --> store[("Store")]
  end
  preview --> api
  api --> ui

Ganttgantt

gantt
  title Release plan
  dateFormat YYYY-MM-DD
  section Design
  Research :done, r1, 2026-01-01, 7d
  Prototype :active, p1, after r1, 5d
  section Build
  Core :c1, after p1, 10d
  Web :w1, after p1, 8d
  Tests :t1, after c1, 4d
  section Launch
  Docs :d1, after w1, 3d
  Release :milestone, m1, after t1, 0d

Git graphgitGraph

gitGraph
  commit id: "init"
  branch develop
  checkout develop
  commit id: "feat-a"
  commit id: "feat-b"
  checkout main
  commit id: "hotfix"
  merge develop
  branch release
  commit id: "rc1"
  checkout main
  merge release tag: "v1.0"

Infoinfo

info showInfo

Ishikawaishikawa-beta

ishikawa-beta
  Slow release
    Process
      Manual steps
      Review queue
    People
      Few reviewers
    Tooling
      Flaky tests

User journeyjourney

journey
  title Onboarding
  section Sign up
    Open page: 5: User
    Create account: 3: User
  section Setup
    Install CLI: 2: User, Admin
    Configure: 4: User
  section Use
    First run: 5: User

Kanbankanban

kanban
  Todo
    t1[Write spec]
    t2[Review draft]
  In progress
    t3[Build feature]
  Done
    t4[Ship release]
    t5[Update docs]

Mindmapmindmap

mindmap
  root((Hagilight))
    Packages
      core
      astro
      starlight
      docusaurus
      mermaid
    Demo
      pages
      samples
    Release
      npm
      CI

Packetpacket-beta

packet-beta
  title TCP header
  0-15: "Source port"
  16-31: "Destination port"
  32-63: "Sequence number"
  64-95: "Acknowledgment number"
  96-99: "Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window"

Piepie

pie showData title Pets adopted
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
  "Birds" : 5

Quadrant chartquadrantChart

quadrantChart
  title Reach and engagement
  x-axis Low reach --> High reach
  y-axis Low engagement --> High engagement
  quadrant-1 We should expand
  quadrant-2 Need to promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.3, 0.6]
  Campaign B: [0.45, 0.23]
  Campaign C: [0.57, 0.69]
  Campaign D: [0.78, 0.34]
  Campaign E: [0.4, 0.34]
  Campaign F: [0.35, 0.78]

Radarradar-beta

radar-beta
  title Skills
  axis a["Design"], b["Code"], c["Test"], d["Docs"], e["Ops"]
  curve team1["Team A"]{ 4, 3, 5, 2, 3 }
  curve team2["Team B"]{ 2, 5, 3, 4, 4 }
  max 5

Railroadrailroad-beta

railroad-beta
  expression = sequence(terminal("a"), nonterminal("b")) ;

Railroad (ABNF grammar)railroad-abnf-beta

railroad-abnf-beta
  title Rule
  rule = "a" / "b" ;

Railroad (EBNF grammar)railroad-ebnf-beta

railroad-ebnf-beta
  title Identifier
  identifier = letter, { letter | digit } ;

Railroad (PEG grammar)railroad-peg-beta

railroad-peg-beta
  pair <- key ":" value ;

RequirementrequirementDiagram

requirementDiagram
  requirement login_req {
    id: 1
    text: The system shall authenticate users.
    risk: high
    verifymethod: test
  }
  element login_test {
    type: simulation
  }
  element auth_service {
    type: module
  }
  login_test - verifies -> login_req
  auth_service - satisfies -> login_req

Sankeysankey-beta

sankey-beta
Agriculture,Food processing,60
Agriculture,Exports,20
Food processing,Households,30
Food processing,Restaurants,25
Food processing,Waste,5
Exports,Overseas,20

SequencesequenceDiagram

sequenceDiagram
  autonumber
  participant U as User
  participant W as Web
  participant A as API
  participant D as Database
  U->>W: Open page
  W->>A: GET /pages
  loop every refresh
    A->>D: query
    D-->>A: rows
  end
  alt cache hit
    A-->>W: cached
  else cache miss
    A->>D: fetch
    D-->>A: result
    A-->>W: fresh
  end
  opt error
    A--xW: failed
  end
  Note over W,A: rendered in place
  par notify
    W-->>U: show
  and log
    A->>A: write log
  end

StatestateDiagram-v2

stateDiagram-v2
  [*] --> Idle
  Idle --> Loading : fetch
  state Loading {
    [*] --> Queued
    Queued --> Running
    Running --> [*]
  }
  Loading --> Ready : done
  Loading --> Failed : error
  Failed --> Idle : retry
  Ready --> [*]
  note right of Ready : terminal

Swimlaneswimlane-beta

swimlane-beta
  a1["Place order"]
  a2["Pick items"]
  a3["Pack box"]
  a4["Deliver"]
  a1 --> a2
  a2 --> a3
  a3 --> a4

Timelinetimeline

timeline
  title Release history
  section 2025
    Q1 : Prototype
    Q2 : Alpha : Beta
  section 2026
    Q1 : Public preview
    Q3 : General availability

Tree viewtreeView-beta

treeView-beta
  "src"
    "components"
      "Button.tsx"
      "Card.tsx"
    "utils"
      "theme.ts"
  "package.json"

Treemaptreemap-beta

treemap-beta
"Root"
    "Packages"
        "core": 40
        "astro": 25
        "mermaid": 20
    "Demo"
        "pages": 10
        "samples": 15

Vennvenn-beta

venn-beta
  title Team skills
  set A["Design"]
  set B["Engineering"]
  set C["Product"]
  union A,B["Prototype"]
  union B,C["Spec"]
  union A,B,C["Launch"]

Wardley mapwardley-beta

wardley-beta
  title Hosting
  component User [0.9, 0.1]
  component Website [0.75, 0.3]
  component Database [0.55, 0.5]
  component Compute [0.4, 0.7]
  component Storage [0.25, 0.85]
  User -> Website
  Website -> Database
  Database -> Compute
  Compute -> Storage

XY chartxychart-beta

xychart-beta
  title "Monthly visitors"
  x-axis [Jan, Feb, Mar, Apr, May, Jun]
  y-axis "Visitors" 0 --> 5000
  bar [1200, 1800, 2400, 3100, 3900, 4500]
  line [1000, 1600, 2300, 3000, 3700, 4300]