State diagram or flowchart?

Use a state diagram for the lifecycle of one object (order, ticket, account) and a flowchart for the steps people or systems perform in order. Order systems usually need both.

Start and end. [*] --> PendingPayment is the initial state and Completed --> [*] a final state; there can be several finals.

Can state names contain spaces?

Declare an alias first: state "Pending payment" as s1, then use s1 in the transitions. Names without spaces can be used directly.

Order Status State Diagram Template

E-commerce order lifecycle as a state diagram: pending payment, paid, awaiting shipment, shipped, delivered, completed, cancelled, return in progress and refunded, with triggering events on the transitions. Free PNG, Word and PowerPoint export.

Previewed in the “Indigo” theme; you can switch themes in the editor

Open in the editorFree · No sign-up · No watermark

Edit the text, pick a theme, export Word / PowerPoint / PDF

When to use it

Order system design documents, the status field in API documentation and e-commerce project reports. A state diagram only cares about "which state the order is in and which event moves it to another", which describes a status field better than a flowchart.

Making it yours

Rename states directly; the transition condition is the text after the colon.
Add states such as "PartiallyRefunded" or "ExchangeInProgress" with a line like Delivered --> ExchangeInProgress : Exchange requested, then give them exits.
To break "Shipped → Delivered" into in-transit and out-for-delivery, use a composite state: state Shipped { … }.
The default layout is top to bottom; add direction LR for left to right.

Mermaid code

stateDiagram-v2
    [*] --> PendingPayment : Order placed
    PendingPayment --> Paid : Payment succeeded
    PendingPayment --> Cancelled : Timed out or cancelled by customer
    Paid --> AwaitingShipment : Merchant accepted
    Paid --> Refunded : Cancelled before shipment
    AwaitingShipment --> Shipped : Left the warehouse
    Shipped --> Delivered : Customer confirmed delivery
    Delivered --> Completed : No claim within 7 days
    Delivered --> ReturnInProgress : Return requested
    ReturnInProgress --> Refunded : Merchant received the return
    Completed --> [*]
    Cancelled --> [*]
    Refunded --> [*]

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

Draw an e-commerce order state diagram in Mermaid stateDiagram-v2 syntax with states PendingPayment, Paid, AwaitingShipment, Shipped, Delivered, Completed, Cancelled, ReturnInProgress and Refunded. Placing an order enters PendingPayment; payment success goes to Paid, timeout or customer cancellation to Cancelled; merchant acceptance goes to AwaitingShipment, cancellation before shipment to Refunded; leaving the warehouse goes to Shipped; customer confirmation to Delivered; no claim within 7 days to Completed, a return request to ReturnInProgress; the merchant receiving the return goes to Refunded. Completed, Cancelled and Refunded are final. Write the events after the colon. Output only the mermaid code block.

FAQ

State diagram or flowchart?: Use a state diagram for the lifecycle of one object (order, ticket, account) and a flowchart for the steps people or systems perform in order. Order systems usually need both.
What does [*] mean?: Start and end. [*] --> PendingPayment is the initial state and Completed --> [*] a final state; there can be several finals.
Can state names contain spaces?: Declare an alias first: state "Pending payment" as s1, then use s1 in the transitions. Names without spaces can be used directly.

Order Status State Diagram Template

When to use it

Making it yours

Mermaid code

Ask an AI for one with this structure

FAQ

More in this category