Swimlane Process Flowchart
The code
flowchart LR
subgraph Customer
A[Submit order] --> H[Receive delivery]
end
subgraph Sales
B[Validate order] --> C{Stock available?}
end
subgraph Warehouse
D[Pick items] --> E[Pack box]
end
subgraph Shipping
F[Print label] --> G[Dispatch carrier]
end
A --> B
C -- Yes --> D
C -- No --> B
E --> F
G --> H
How this template works
This template answers the question a plain flowchart cannot: who does each step. Instead of one long chain, the work is divided into lanes — one per team or role — and every arrow that crosses a lane boundary is a handoff. Process consultants call this a swimlane diagram, and in Mermaid it is built entirely from subgraphs. It is the right choice for order-to-delivery, hire-to-retire, or any process where the argument in the retrospective is about ownership rather than sequence.
The syntax has two layers. The first line, flowchart LR, lays the flow left to right, which makes the lanes stack vertically like rows in a table. Each lane is a subgraph: subgraph Customer opens the block, the nodes belonging to that team are declared inside it, and end closes it. Inside the Sales lane, B[Validate order] --> C{Stock available?} shows that a lane can contain its own internal flow, including a decision diamond. The cross-lane edges are listed after all the subgraphs — A --> B, C -- Yes --> D, and so on — and these are the handoffs. Notice the retry edge C -- No --> B stays inside one lane, while G --> H crosses from Shipping all the way back to Customer; the visual jump is exactly what makes the diagram useful.
The gotcha is lane membership. A node belongs to the subgraph where it is first declared, not where its edges are written. If you reference a node in an edge before declaring it inside a lane, Mermaid may place it outside every lane, and it will float awkwardly at the diagram edge. Declare every node inside its lane first, then draw the cross-lane arrows. Also remember that every subgraph needs a matching end, and lane names with spaces work best when kept free of parentheses and commas.
To adapt it, rename the lanes to your real teams and move nodes between lanes until each handoff matches reality. If a step genuinely has two owners, that is usually a sign the step should be split in two.
Related templates: the order fulfillment flowchart covers the same process without lanes, the approval workflow flowchart adds a money threshold to a signoff chain, and the data pipeline flowchart shows a machine-owned process that needs no lanes. The flowchart diagram guide documents subgraph syntax in full.
Variations to try
- Add a Finance lane with an invoice step between dispatch and delivery for made-to-order businesses.
- Switch the first line to `flowchart TD` when the lanes are few but the steps inside them are many.
- Rename the lanes to your actual team names so the diagram doubles as an ownership map.
