Examples

---
title: Checkout request
---
flowchart LR
  client([Browser]) --> gw[API Gateway]
  gw -->|verify| auth[Auth]
  gw --> orders[Orders]
  orders --> db[(Postgres)]
  orders -.-> queue{{Queue}}
  queue --> mail[Email worker]
  subgraph backend [Backend]
    auth
    orders
    db
  end

scenario Happy path
  client -> gw : POST /checkout
  gw -> auth : token
  auth is done
  gw -> orders
  orders is active
  orders -> db : insert
  db is done
  orders -> queue, orders -> gw
  note orders : Order #42 created
  queue -> mail : receipt
  mail is done
  gw -> client : 201 Created
  orders is done

scenario Token expired
  client -> gw : POST /checkout
  gw -> auth
  auth is error
  note auth : JWT expired
  gw -> client : 401
  client is warn

flowchart LR
  push([git push]) --> build[Build]
  build --> unit[Unit tests] & lint[Lint] & e2e[E2E tests]
  unit & lint & e2e --> gate{All green?}
  gate -->|yes| deploy[Deploy]
  gate -->|no| fix[Fix & retry]
  deploy --> prod[(Production)]

scenario Green build
  push -> build
  build is active
  wait 400ms
  build is done
  build -> unit, build -> lint, build -> e2e
  unit, lint, e2e are active
  wait 600ms
  unit, lint, e2e are done
  unit -> gate, lint -> gate, e2e -> gate
  gate -> deploy : yes
  deploy is active
  deploy -> prod
  prod, deploy are done
  caption Shipped to production

scenario Flaky E2E
  push -> build
  build is done
  build -> unit, build -> e2e
  unit is done
  e2e is error
  note e2e : timeout in checkout.spec.ts
  e2e -> gate
  gate -> fix : no
  fix is warn

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

sequenceDiagram
  autonumber
  actor U as User
  participant App
  participant IdP as Identity provider
  database DB
  U->>App: Click "Sign in"
  App->>IdP: Redirect /authorize
  IdP->>U: Login page
  U->>IdP: Credentials
  alt valid
    IdP-->>App: code
    App->>+IdP: POST /token
    IdP-->>-App: access_token
    App->>DB: upsert user
    App-->>U: Signed in
  else invalid
    IdP-->>U: Try again
  end

sequenceDiagram
  participant C as Client
  participant S as Server
  C->>S: SYN
  S->>C: SYN-ACK
  C->>S: ACK
  Note over C,S: connection established
  par
    C->>S: data
  and
    S->>C: data
  end
  C-)S: FIN

stateDiagram-v2
  [*] --> Pending
  Pending --> Paid : pay
  Paid --> Shipped : ship
  Shipped --> Delivered : deliver
  Pending --> Cancelled : cancel
  Delivered --> [*]
  Cancelled --> [*]

scenario Delivered
  __start_root -> Pending
  Pending is active
  Pending -> Paid : pay
  Paid is active
  Paid -> Shipped : ship
  Shipped -> Delivered : deliver
  Delivered is done

flowchart LR
  agent([AI agent]) -->|GET| manifest[["/__agent__/manifest.json"]]
  agent --> ui[Checkout UI]
  ui --> confirm{Human confirms?}
  confirm -->|yes| pay[make-payment]:::danger
  confirm -->|no| stop[Stop]:::muted

scenario Safe purchase
  agent -> manifest : fetch contracts
  manifest is done
  note manifest : hmac-sha256 signature valid
  agent -> ui : place-order
  ui -> confirm
  confirm is warn
  note confirm : safetyLevel critical — ask the human
  wait 800ms
  confirm -> pay : yes
  pay is done

array Bubble sort
  values 5 1 4 2 8
  pointer i 4
  compare 0 1
  swap 0 1
  compare 1 2
  swap 1 2
  compare 2 3
  swap 2 3
  compare 3 4
  mark 4 done
  pointer i 3
  compare 0 1
  compare 1 2
  swap 1 2
  compare 2 3
  mark 3 done
  pointer i 2
  compare 0 1
  compare 1 2
  mark 2 done
  pointer i 1
  compare 0 1
  mark 1 done
  mark 0 done
  pointer i none
  note "Sorted — the largest value bubbled up each pass"

array Binary search for 23
  values 2 5 8 12 16 23 38 56 72 91
  pointer lo 0
  pointer hi 9
  pointer mid 4
  mark 4 active
  unmark 4
  mark 0,1,2,3,4 skipped
  pointer lo 5
  pointer hi 9
  pointer mid 7
  mark 7 active
  unmark 7
  mark 7,8,9 skipped
  pointer lo 5
  pointer hi 6
  pointer mid 5
  mark 5 active
  mark 5 done
  note "Found 23 at index 5"