Scenarios

A scenario Name block lists steps. Steps run one after another; each becomes a stop for the step buttons and arrow keys.

Step reference

a -> b : label          token travels along the edge (reverse direction works too)
a -> b -> c             chain
a -> b & c              fan out (parallel)
a -> b, c -> d          parallel clauses
api is active           states: idle active done error warn skipped
a, b are done           (aliases: running, success, failed, degraded, …)
note api : text         callout on a node        note "text"  caption band
caption Step 2 of 3     subtitle under the diagram
highlight api           pulse
wait 500ms              pause (also 1s, 1.5s)
together … end          block of parallel steps
reset                   clear states and notes

Parallel

flowchart TB
  api[Orders API] --> bus{{Event bus}}
  bus --> billing[Billing] & stock[Inventory] & email[Email] & analytics[(Warehouse)]

scenario order.created
  api -> bus : order.created
  bus -> billing & stock & email & analytics
  billing, stock, email are done
  analytics is active
  note analytics : batched every 5 min

Many scenarios, one diagram

Add as many scenario blocks as you like; the player shows a picker. Exports play them back to back.

Settings (frontmatter)

---
title: Checkout
theme: auto          # auto | light | dark
speed: 1.5           # playback multiplier
travel: 700ms        # time for one hop
loop: true
autoplay: true
controls: true
spacing: relaxed     # compact | normal | relaxed
---