Templates
Types
EN

Order Status Diagram Guide

What an order status diagram is, the states every order flow needs, and three ready-to-edit templates — e-commerce, SaaS subscription, and food delivery.

Published on ·8 min read
order-statusstate-diagramecommercetemplate

What is an order status diagram?

An order status diagram is a state diagram of a single order's life: every status the order can be in, and every event that moves it from one status to the next. It answers two questions that a written spec answers badly — what statuses exist and what can follow what.

The distinction that matters: an order status diagram is about states, not steps. A step is something someone does ("pack the box"). A state is a condition the order sits in until something happens ("Processing"). Orders spend most of their life sitting still — waiting for payment to clear, waiting for a courier, waiting for a return window to close. Drawing states makes that waiting visible; drawing steps hides it.

Most teams already have this diagram, just not on paper. It lives in an enum, a status column, and a dozen if statements scattered across the codebase. The moment two of those disagree — the API says SHIPPED, the emails table says in_transit, support's macro says "Dispatched" — you get bugs nobody can reproduce. Putting the states on one page is how you find the disagreement before a customer does.

The natural notation is a Mermaid stateDiagram-v2: boxes are statuses, arrows are transitions, and the label on each arrow is the event that fires it.

Common states in an order flow

Almost every order flow, in any industry, is a variation on the same five states plus one escape hatch:

  • Pending — the order exists but money has not settled. Nothing physical has happened yet. This is where timeouts live.
  • Confirmed — payment is authorized and stock is reserved. The commitment is now two-sided.
  • Processing — someone is physically working on it: picking, packing, printing a label.
  • Shipped — it has left your control and is with a carrier. You can observe it but not act on it.
  • Delivered — the customer has it. Note that this is not a terminal state in most businesses; returns and refunds live past it.
  • Cancelled — the escape hatch. Reachable from several places, and the reasons differ by origin (payment timeout vs. customer request vs. out of stock).

Here is that skeleton as a diagram. It is deliberately minimal — start from this and add states only when you can name the event that reaches them.

View the Mermaid source
stateDiagram-v2
    [*] --> Pending
    Pending --> Confirmed: payment authorized
    Confirmed --> Processing: warehouse picks up
    Processing --> Shipped: handed to carrier
    Shipped --> Delivered: customer signs
    Delivered --> [*]
    Pending --> Cancelled: payment failed or timeout
    Confirmed --> Cancelled: customer cancels
    Cancelled --> [*]
A minimal order status diagram: Pending, Confirmed, Processing, Shipped, Delivered, with Cancelled reachable from Pending and Confirmed.

How to draw an order status diagram

Three steps. The first two are thinking; the third is typing.

Step 1 · Identify every state

Do not brainstorm. Go read the enum, the status column, and the list of transactional emails you send. Those three sources are the states your system actually has, and they usually disagree with each other — that disagreement is the first thing this exercise is worth.

Then apply one test to each candidate: can the order sit here indefinitely? If yes it is a state. If it always passes through in milliseconds, it is a step, and it belongs inside a transition, not as a box. "Charging card" is not a state. "Awaiting payment" is.

Watch for the states teams routinely forget: Refunding (money in flight, order neither done nor cancelled), PartiallyShipped (multi-item orders), Lost (carrier stopped scanning), and OnHold (fraud review). Every one of them turns into a support ticket if it has no box.

Step 2 · Define the transitions

For each arrow, write down the event that fires it — not the resulting state. Pending --> Confirmed: payment authorized is useful. Pending --> Confirmed: confirm is a tautology.

Then run three checks over the finished graph:

Reachability. Every state must have at least one incoming arrow, and [*] must reach all of them. An unreachable state is dead code in your status enum.

Termination. Every state must lead somewhere, or be explicitly terminal (--> [*]). A state with no way out is an order stuck forever — this is the single most common real bug this diagram catches.

No implicit backwards edges. If support can move an order from Shipped back to Processing, draw that arrow. Undrawn admin overrides are how status machines rot.

Step 3 · Draw it

Type the states and transitions as plain sentences and let text2diagram lay them out — you write "an order starts as pending, becomes confirmed once payment is authorized, then processing, then shipped, then delivered; it can be cancelled from pending or confirmed", and it comes back as a stateDiagram-v2 you can edit.

Or skip the typing entirely: open any diagram on this page in the editor with one click, then rename the states to match your own. That is usually faster than starting from a blank canvas, because the shape of the graph — not the vocabulary — is the part that takes thought.

Order status diagram examples

Three real shapes. Notice how differently the same six-state skeleton bends once the business is specific.

1 · E-commerce order flow

The complication here is everything that happens after delivery. Delivered is a waypoint, not an end: returns, refunds and lost-parcel claims all branch off it or off Shipped. Teams that model Delivered as terminal end up processing refunds outside the status machine, in a spreadsheet.

View the Mermaid source
stateDiagram-v2
    [*] --> Pending
    Pending --> Confirmed: payment captured
    Pending --> Cancelled: 30 min timeout
    Confirmed --> Processing: stock reserved
    Confirmed --> Refunding: customer cancels
    Processing --> Shipped: tracking number issued
    Shipped --> Delivered: proof of delivery
    Shipped --> Lost: no scan for 14 days
    Delivered --> ReturnRequested: within 7 days
    ReturnRequested --> Refunding: return received
    Refunding --> Refunded: money back
    Lost --> Refunding: claim approved
    Delivered --> [*]
    Refunded --> [*]
    Cancelled --> [*]
An e-commerce order status diagram covering payment timeout, stock reservation, shipping, lost parcels, returns and refunds.

2 · SaaS subscription lifecycle

A subscription is an order that never ends, so its diagram has cycles where an e-commerce one has a line. PastDue --> Active (a dunning retry succeeded) and Cancelled --> Active (a win-back) are the two arrows people forget, and they are exactly the two the revenue team cares about.

Also note Cancelling as a distinct state from Cancelled: the user has asked to leave but still has paid access until the period ends. Collapsing those two is how you accidentally cut off a customer who paid through the end of the month.

View the Mermaid source
stateDiagram-v2
    [*] --> Trialing
    Trialing --> Active: card charged
    Trialing --> Expired: trial ends, no card
    Active --> PastDue: renewal payment fails
    PastDue --> Active: retry succeeds
    PastDue --> Cancelled: 3 retries fail
    Active --> Cancelling: user cancels
    Cancelling --> Active: user resubscribes
    Cancelling --> Cancelled: period ends
    Cancelled --> Active: user comes back
    Expired --> [*]
    Cancelled --> [*]
A SaaS subscription lifecycle diagram with trial, active, past-due dunning retries, cancelling grace period, and win-back.

3 · Food delivery order states

Two things make this one different. First, there are three parties — customer, restaurant, courier — so several transitions are fired by someone other than the buyer or your system. Second, the whole thing runs in about 40 minutes, which means the customer is watching the status change live, and every unlabelled state is a support call.

Rejected deserves its own box rather than folding into Cancelled: the customer paid and it was the restaurant that said no, so the refund path and the messaging are both different.

View the Mermaid source
stateDiagram-v2
    [*] --> Placed
    Placed --> Accepted: restaurant confirms
    Placed --> Rejected: restaurant is closed or busy
    Accepted --> Preparing: kitchen starts
    Preparing --> ReadyForPickup: food is bagged
    ReadyForPickup --> PickedUp: courier collects
    PickedUp --> Delivered: handed to customer
    PickedUp --> Undeliverable: nobody answers
    Rejected --> [*]
    Delivered --> [*]
    Undeliverable --> [*]
A food delivery order status diagram with restaurant acceptance, kitchen preparation, courier pickup and an undeliverable branch.

Keep the diagram and the enum in the same pull request

An order status diagram is only worth drawing if it stays true. Because the source here is plain Mermaid text, the practical move is to commit it next to the code that owns the status enum and update both in the same change. A diagram that is one release out of date is worse than no diagram, because people trust it.

FAQ

Continue reading

Try text2diagram now

Open the tool
← Back to all tutorials