Mermaid code
flowchart LR
subgraph Requester
A[Fill purchase request] --> B[Attach quotes]
end
subgraph Manager
C{Amount under 1000?}
C -- Yes --> D[Approve]
C -- No --> E[Forward to finance]
end
subgraph Finance
F{Budget available?}
F -- Yes --> G[Approve and issue PO]
F -- No --> H[Reject with reason]
end
B --> C
E --> F
D --> I[Purchase order sent]
G --> I
H --> J[Request returned] Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Flowchart guide.
What this diagram shows
Mermaid has no built-in swimlane shape, so this example uses three subgraph blocks named Requester, Manager, and Finance. Each lane holds only the steps that role performs, and the edges between lanes (B --> C, E --> F) are the handoffs. The Amount under 1000? diamond is the threshold that keeps small purchases out of the finance queue.
Reading left to right with flowchart LR makes the lanes stack as columns, which is the layout most people expect from an approval chart.
How to adapt it
- Change the threshold text in
C{Amount under 1000?}to match your policy, or add a second diamond for a director-level tier. - Add a
Legalsubgraph when contracts above a certain value need review before the purchase order goes out. - Give each subgraph a direction with
direction TBinside it if a lane grows beyond three steps. - Attach
classDefstyles to the two approve nodes so the happy path stands out in a printed handbook.
FAQ
Can Mermaid draw real swimlanes with horizontal bands?
Not directly. Subgraphs are the closest equivalent; they draw a labeled box around a group of nodes. For true bands, render in flowchart TB and keep each subgraph to one row of nodes.
Why are the edges between lanes written outside the subgraphs?
Edges can be declared anywhere, but keeping cross-lane edges at the bottom makes the handoffs easy to spot and edit. Nodes referenced inside a subgraph belong to that subgraph regardless of where their edges appear.