Mermaid diagram samples

This page exists for one reason: to check that the blog theme styles every Mermaid diagram type the bundled renderer (v11.16) can draw — not just flowcharts. If a diagram below looks unstyled (default purple, white background panel, invisible axis lines), it's a gap in blog_share_theme.css, and this page is where it shows up. All sources are deliberately minimal so the styling, not the content, is the test.

Flowchart#

flowchart LR
  A[Your prompt] --> B{Fits in cache?}
  B -- yes --> C[Reuse KV]
  B -- no --> D[Prefill everything]
  C --> E[Decode]
  D --> E

Sequence#

sequenceDiagram
  autonumber
  actor User as Client
  participant S as llama-server
  participant M as Model
  Client->>S: chat/completions
  activate S
  S->>M: forward pass
  M-->>S: next token
  loop until EOT
    S->>M: decode step
    M-->>S: token
  end
  S-->>Client: stream SSE
  deactivate S
  Note over Client,S: timings in every response

Class#

classDiagram
  class TokenBucket {
    +int capacity
    +refill() void
  }
  class RateLimiter {
    +check() bool
  }
  RateLimiter --> TokenBucket : uses
  TokenBucket <|-- BurstBucket : extends

State#

stateDiagram-v2
  [*] --> Disarmed
  Disarmed --> Armed : operator
  Armed --> EmergencyStop : watchdog
  EmergencyStop --> Disarmed : reset
  state pick <<choice>>
  Disarmed --> pick
  pick --> Armed : ok

ER#

erDiagram
  EXPOSURE ||--o{ STACK : contains
  EXPOSURE {
    int id
    string filter
  }
  STACK {
    int id
    date night
  }

Gantt#

gantt
  title Bench plan
  dateFormat YYYY-MM-DD
  section Setup
  RAM upgrade      :done, a1, 2026-09-10, 1d
  section Runs
  Fit A/B sweeps   :active, b1, 2026-09-12, 1d
  Spec A/B         :crit, b2, after b1, 1d
  Production cut   :milestone, b3, after b2, 0d

User journey#

journey
  title Serving a 95 GB model
  Order RAM: 5: Me
  Wait for delivery: 2: Me
  First token arrives: 4: Me, GPU
  Parity sync ruins benchmark: 1: Array

Pie#

pie title Where a decode token spends its time
  "expert reads (RAM)" : 62
  "attention + KV (VRAM)" : 21
  "n-gram lookup (SSD)" : 12
  "sampling" : 5

Quadrant#

quadrantChart
  title Homelab GPUs
  x-axis Low VRAM --> High VRAM
  y-axis Slow RAM --> Fast RAM
  quadrant-1 Dream machine
  quadrant-2 Tolerated
  quadrant-3 The grind
  quadrant-4 Sweet spot
  RTX 3060 + DDR4: [0.25, 0.30]
  RTX 4090 + DDR5: [0.90, 0.85]
  Jetson: [0.55, 0.20]

XY chart (bars + line)#

xychart-beta
  title "Decode t/s across the context ladder"
  x-axis [220, "1.9k", "7.5k", "22.3k", "59.6k"]
  y-axis "tokens/s" 6 --> 10
  bar [8.9, 9.2, 8.6, 8.1, 6.8]
  line [8.8, 9.3, 8.8, 8.1, 6.7]

Mindmap#

mindmap
  root((Flash-Next))
    RAM
      routed experts
      never pageable
    SSD
      n-gram table
      2.7 KB per token
    VRAM
      attention
      KV cache

Timeline#

timeline
  title The ten days
  2026-09-02 : 35B article live
  2026-09-11 : 94.5 GB download done : thrashing at 1,2 t/s
  2026-09-12 : 96 GB installed : 9,2 t/s measured

Git graph#

gitGraph
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit tag: "v1"

Packet#

packet-beta
  0-31: "Magic"
  32-47: "Length"
  48-55: "Type"
  56-63: "Flags"
  64-95: "Payload"

Architecture#

architecture-beta
  group rack(cloud)[Home rack]
  service srv(server)[Unraid] in rack
  service gpu(server)[RTX 3060] in rack
  service db(database)[GGUF store] in rack
  service net(internet)[Clients]
  srv:L--R:gpu
  db:T--B:srv
  srv:R-->L:net

Sankey#

%%{init: {"sankey": {"nodeColors": {"Prompt tokens": "#83a598", "Prefill": "#fabd2f", "KV cache": "#fb4934", "Decode step": "#b8bb26", "Expert reads": "#d3869b", "Attention": "#fe8019", "RAM": "#8ec07c", "VRAM": "#a89984"}}}%%
sankey-beta
Prompt tokens,Prefill,90
Prefill,KV cache,90
Decode step,Expert reads,80
Decode step,Attention,20
Expert reads,RAM,80
Attention,VRAM,20

Block#

block-beta
  columns 2
  a["Request"] space b["llama-server"]
  b --> c["VRAM"]
  b --> d["RAM"]

Requirement#

requirementDiagram

    requirement failsafe {
    id: "R-1"
    text: "Drive starts disarmed"
    risk: high
    verifymethod: test
    }

    element vcu {
    type: "component"
    }

    vcu - satisfies -> failsafe

Kanban#

kanban
  Todo[not planned]
    [VRAM check ctx 98k]
  Doing[in progress]
    [Spec A/B runs]
  Done[shipped]
    [96 GB install]

C4#

C4Context
  title Serving stack
  Person(op, "Operator", "me")
  System_Boundary(homelab, "Rack") {
    System(server, "llama-server", "12 GB GPU")
    SystemDb(model, "GGUF store", "95 GB mmap")
  }
  Rel(op, server, "prompts", "HTTPS")
  Rel(server, model, "reads")

Venn#

venn-beta
  set gpu ["GPU-bound"]:20
  set ram ["RAM-bound"]:25
  union gpu, ram:12

Info#

info
  title Mermaid v11.16