From click to doorstep

Mermaid ยท three diagrams written as plain text ยท a typical online order

The whole journey

Four teams, two decisions, one happy customer

flowchart LR
  subgraph SHOP["๐Ÿ›’ Online store"]
    A([Customer clicks Buy]) --> B[Payment checked]
    B --> C{Card OK?}
    C -- no --> C2[Ask for another card]:::bad
    C2 --> B
  end
  subgraph WH["๐Ÿญ Warehouse"]
    D{In stock?}
    D -- no --> D2[Backorder and email]:::warn
    D -- yes --> E[Pick from shelf]
    E --> F[Pack and label]
  end
  subgraph CARRIER["๐Ÿšš Carrier"]
    G[Sort hub] --> H[Line haul overnight]
    H --> I[Local depot]
    I --> J[Out for delivery]
  end
  subgraph HOME["๐Ÿ  Customer"]
    K{Someone home?}
    K -- yes --> L([Delivered]):::good
    K -- no --> M[Safe place or locker]
    M --> L
  end
  C -- yes --> D
  F --> G
  J --> K
  classDef good fill:#d1fae5,stroke:#059669,color:#064e3b
  classDef bad fill:#fee2e2,stroke:#dc2626,color:#7f1d1d
  classDef warn fill:#fef3c7,stroke:#d97706,color:#78350f

Who talks to whom

The messages behind one order

sequenceDiagram
  autonumber
  actor C as Customer
  participant S as Store
  participant P as Payments
  participant W as Warehouse
  participant D as Driver
  C->>S: Place order
  S->>P: Charge $48.20
  P-->>S: Approved
  S-->>C: Confirmation email
  S->>W: Ship order #1042
  W-->>S: Tracking number
  S-->>C: It's on the way
  W->>D: Hand over parcel
  D-->>C: Photo at the door

Two days, hour by hour

Where the time actually goes

gantt
  dateFormat YYYY-MM-DD HH:mm
  axisFormat %a %H:%M
  section Store
  Order and payment     :done, a1, 2026-10-19 09:00, 15m
  section Warehouse
  Queue for picking     :a2, after a1, 3h
  Pick, pack, label     :a3, after a2, 1h
  Wait for truck        :crit, a4, after a3, 5h
  section Carrier
  Sort hub              :a5, after a4, 2h
  Line haul overnight   :a6, after a5, 9h
  Local depot sort      :a7, after a6, 2h
  Out for delivery      :a8, after a7, 5h
  section Customer
  Delivered             :milestone, after a8, 0m