Swimlanes in Mermaid With Subgraphs
Mermaid has no swimlane shape, but subgraphs do the job: one box per role. Build an online shop order flow across customer, sales and finance, with the hand-offs between lanes, in the free Mermaid live editor.
Step by step
Lanes for roles
- Swimlanes in Mermaid. Swimlanes show who does each step. Mermaid has no swimlane shape, but a subgraph does the same job: one box per role. Here an online shop order flow runs across Customer, Sales and Finance, built in the free Mermaid live editor.
- Diagram type. Clear the editor and type flowchart TD on the first line. TD means top down, so the flow runs from top to bottom.
flowchart TD
One subgraph per role
- Subgraph. Type subgraph Customer. Everything until the word end sits inside that lane. Indent the shapes so the lane is easy to read. A([Order placed]) is the customer's first step, drawn with rounded ends. The subgraph draws as a box labelled Customer around its shapes.
subgraph Customer A([Order placed]) end - Steps inside a lane. Now open the Sales lane with subgraph Sales. B[Check stock] --> C{In stock?} adds a step and a diamond-shaped decision. C -->|Yes| D[Confirm order] puts the label Yes on the arrow. C -->|No| X([Order cancelled]) adds the No path, and end closes the lane. Until you type end, the subgraph is still open and the editor greys out the drawing. Add the Finance lane the same way: subgraph Finance, then E[Take payment] --> F([Receipt sent]), closed with end. That gives 3 lanes, but no arrows join them yet.
subgraph Sales B[Check stock] --> C{In stock?} C -->|Yes| D[Confirm order]C -->|No| X([Order cancelled]) endsubgraph Finance E[Take payment] --> F([Receipt sent]) end
Hand-offs
- Hand-offs. At the bottom, outside every subgraph, write the hand-offs. A --> B sends the order to Sales, and D --> E sends a confirmed order to Finance. Now the arrows cross from lane to lane. Each crossing is a hand-off, and hand-offs are where delays and errors tend to hide.
A --> B D --> E - Clear owners. Every step in the Sales lane belongs to Sales. If a step has no clear owner, it has no lane, and that is a question to take to your stakeholders.
Recap
- The rules. The rules: one subgraph per role, closed with end. Put each step inside its owner's lane, and write the hand-offs outside every lane.
Common mistakes
- Forgetting end. Every subgraph needs its own end. Leave one out and Mermaid can't draw the diagram, so the editor greys it out until every lane is closed.
- Writing a hand-off inside a lane. If you type A --> B inside subgraph Sales, Mermaid can pull A into the Sales lane. Keep the arrows that cross between lanes at the bottom, outside every subgraph.
- Reusing a node ID in another lane. Each ID, like B or E, is one shape. Use the same ID again in another lane and Mermaid treats it as the same node, not a new step, so give every step its own ID.
- Using end as a step label. A node whose text is a lowercase end breaks a Mermaid flowchart. Write End or END, or use a clearer label like Order closed.
When a business analyst uses this
In a process-mapping workshop, a business analyst can type one subgraph per role while the group talks through the as-is order process. Every arrow that crosses lanes is a hand-off to check for delays, and any step nobody will own goes straight into the RAID log as an open question.
Questions people ask
Does Mermaid have a swimlane diagram?
Mermaid flowcharts have no swimlane shape. The usual way is to make one subgraph per role, so each role becomes a labelled box around its steps.
How do I make Mermaid lanes go left to right?
Change the first line to flowchart LR. You can also put direction LR inside a subgraph, but Mermaid ignores it when any node in that subgraph links to a node outside it.
Can a Mermaid subgraph title have spaces?
Yes. Give the subgraph a short ID and put the title in square brackets, like subgraph sales [Sales team].
