Order Fulfillment Flowchart
The code
flowchart TD
A[Order placed] --> B{Payment authorized?}
B -- No --> C[Cancel order]
B -- Yes --> D[Reserve stock]
D --> E{In stock?}
E -- No --> F[Create backorder]
F --> D
E -- Yes --> G[Pick and pack]
G --> H[Create shipment]
H --> I[Hand off to carrier]
I --> J{Delivered?}
J -- No --> K[Open support ticket]
J -- Yes --> L((Order complete))
How this template works
This template traces the operational life of an e-commerce order, from checkout to the moment the parcel reaches the customer. It deliberately includes the three branches that dominate real fulfillment work: failed payment authorization, out-of-stock inventory, and delivery problems after handoff. Operations managers use it to get warehouse, finance, and support teams onto one shared picture, while engineers treat it as the specification for the order service they are about to build.
The syntax rewards a close read. flowchart TD declares a top-down flowchart, which suits a process with a clear start and finish. Rectangles such as A[Order placed] are process steps, and the text inside the square brackets becomes the printed label. Diamonds written with curly braces, like B{Payment authorized?}, mark decisions where the flow splits. Edge labels use the double-dash form: B -- No --> C draws an arrow from B to C with the word No attached, so the reader never has to guess which branch is which. The back edge F --> D is the most important line in the diagram — it turns a straight pipeline into a realistic loop where a backorder re-enters stock reservation once inventory arrives. Finally, L((Order complete)) uses double parentheses to render a rounded terminator node, a visual signal that the process has genuinely ended rather than merely paused.
One gotcha bites people who customize the labels. Edge labels follow the same quoting rules as node labels: if you add punctuation such as parentheses or commas, wrap the label in quotes, as in B -- "No (card declined)" --> C. Unquoted special characters make the parser lose track of where the edge ends, and the resulting error rarely points at the real line. Also keep node ids unique — reusing an id silently merges two steps into one node.
To adapt the template, rename the steps to match your own fulfillment stack, then delete branches you do not operate. If you never backorder, remove nodes E and F and connect D straight to G. Paste the code into the editor and every edit re-renders instantly in your browser.
Related templates: the user onboarding flowchart for another funnel with a retry loop, the customer support triage flowchart for the ticket path this diagram hands off to, and the data pipeline flowchart for the batch processing running behind the storefront. The flowchart diagram guide has the complete syntax reference.
Variations to try
- Wrap the pick, pack, and shipment steps in a subgraph named Warehouse to show team ownership.
- Insert a fraud check diamond between payment authorization and stock reservation for high-risk markets.
- Change the first line to `flowchart LR` when the diagram must fit a wide slide layout.
