UML Activity Diagram With Swimlanes in draw.io (Fork and Join)
A UML activity diagram with swimlanes shows each action, who does it, and which work runs at the same time. Learn how to draw one for free in draw.io: lanes for each team, the start dot, actions, a fork and a join bar, and the final node, using an online shop order.
Step by step
Work that runs together
- Activity diagrams. An activity diagram shows how work flows. Swimlanes show who does each action. Fork and join bars show work that runs at the same time. The example is an online shop order.
- Blank diagram. Start a blank diagram in draw.io. First, turn on the UML 2.5 shapes in More Shapes, so the initial node, the fork bar and the final node appear in the shape panel.
Lanes
- Lanes. Open the Advanced shapes and drag a horizontal pool (Horizontal Pool 2) onto the page. Make it wider, name the pool Online order, and give it 3 lanes: Sales, Finance and Warehouse.
Start and fork
- Start dot. From the UML 2.5 shapes, drop the initial node, a solid black dot, into the Sales lane, where the order comes in. The activity starts here.
- Fork. Next, drop a Join/Fork Node into the Sales lane. It is a thick black bar. As a fork, it takes 1 flow in and sends 2 flows out, and both run at the same time. Hover over the start dot and drag its blue arrow onto the bar to connect them.
Actions in lanes
- Actions. Actions are rounded boxes, named with a verb and a noun. Drop a Rounded Rectangle from the General shapes into the Finance lane and type Take payment. Connect the fork to Take payment. The line crosses into the Finance lane, which shows the work changing hands. At the same time, the warehouse packs the items. Add a second rounded box, Pack items, in the Warehouse lane under the fork.
- Fork. Connect the fork to Pack items as well. 2 arrows now leave the fork, so both actions start together.
Join and finish
- Join. Now drop a second Join/Fork Node into the Warehouse lane, under Take payment. This one is a join: 2 flows come in and 1 flow goes out. Connect Take payment down to the join. The bar is thin, so connect Pack items another way: select Pack items, hold Ctrl and click the join, then click Directional Connector in the General shapes. The join waits for both actions, so no order ships before it is paid.
- Final node. End with the final node from the UML 2.5 shapes, a dot inside a ring. Drop it in the Warehouse lane after the join. Connect the join to the final node. Only then is the order done.
- The finished activity. Click an empty part of the page to see the whole activity: 3 lanes, 1 fork, 1 join, and each action in the lane of who does it.
Recap
- The rules. The rules: start with the black dot, put each action in the lane of who does it, open work that runs at the same time with a fork, and close it with a join. A yes or no choice uses a diamond instead, just like in a flowchart.
Common mistakes
- Using a diamond for work that runs at the same time. A diamond is a decision, so only one of its paths is taken. When payment and packing both happen, use a fork bar so both paths start.
- Ending the paths without a join. If one path runs straight into the final node, reaching it ends the whole activity, even while the other path is still running. Merge the paths with a join first, then go to the final node.
- An arrow that isn't attached to the thin bar. If you let go of the line near the bar instead of on it, the arrow stays loose and won't follow when you move the bar. Select the action, hold Ctrl and click the bar, then click Directional Connector in the General shapes.
- Putting an action in the wrong lane. Each action goes in the lane of the team that does it, like Take payment in Finance. Drop it fully inside that lane so it moves with the lane.
When a business analyst uses this
In a process workshop with sales, finance and the warehouse, a business analyst draws the order flow with one lane per team. The fork and join show that payment and packing run at the same time. The join makes the rule "no order ships before it is paid" easy to see, so the teams can confirm it before sign-off.
Questions people ask
What is the difference between a fork and a decision in an activity diagram?
A fork is a thick bar that splits one flow into paths that all run at the same time. A decision is a diamond where only one of its outgoing paths is taken, chosen by a condition such as a yes or no answer.
What is the difference between a fork and a join in UML?
Both use the same thick bar. A fork splits 1 flow into paths that run at the same time. A join waits until all its incoming flows are finished, then carries on as 1 flow.
Is draw.io free for UML activity diagrams?
Yes. draw.io is free and includes UML 2.5 shapes, which you turn on in More Shapes.
