How to Sketch a System Context Diagram in Excalidraw
A system context diagram shows your system in the middle and everyone it talks to around it. Sketch one in Excalidraw: the system, the people and systems outside it, labelled arrows for what flows between them, and an export to PNG for your requirements document. Example: a made-up online shop.
Step by step
What a context diagram shows
- System context. A system context diagram sets the scope before anyone writes a requirement. It shows your system in the middle and everyone it talks to around it. The example here is a made-up online shop.
- excalidraw.com. Open excalidraw.com with an empty canvas.
The system
- The system. Your system goes in the middle. Draw a big rectangle and label it Online Shop.
Who it talks to
- Outside parties. Everything else is outside the system. Draw a rectangle on the left for the Customer.
- Label the flows. Draw an arrow from Customer to Online Shop. Press Enter and type what flows along it: Orders.
- Outside parties. On the right, add a rectangle for the Payment provider. It's another system, but not ours.
- Label the flows. Draw an arrow from Online Shop to Payment provider and label it Payments.
- Outside parties. Below the shop, add a rectangle for the Warehouse that packs the orders.
- Label the flows. Draw an arrow from Online Shop to Warehouse and label it Pick lists.
- Outside parties. Above the shop, add a rectangle for the Shop staff who keep the stock up to date.
- Label the flows. Draw an arrow from Shop staff to Online Shop and label it Stock updates.
Show the scope
- In scope. Select Online Shop and give it a light blue background (#a5d8ff). Now everyone can see which box is in scope.
- The finished diagram. Click an empty spot to deselect. The diagram has 1 system, 4 outside parties, and every arrow says what it carries.
Export
- Export. To add it to your requirements document, open the menu, choose Export image and click PNG.
Recap
- The rules. The rules: the system goes in the middle, every outside party goes around it, and every arrow gets a label. If it isn't on the diagram, it's out of scope.
Common mistakes
- Arrows with no labels. An arrow on its own only says two things are connected. Select it, press Enter and type what flows, like Orders or Pick lists, so people can check each flow.
- Drawing the inside of the system. A context diagram shows the system as one box. Keep its screens, databases and modules out of it and show only what crosses the boundary.
- Leaving out an outside party. Anything missing from the diagram reads as out of scope. List every person and system that sends or receives something, like the Payment provider and the Warehouse, before you call it finished.
- Arrows pointing the wrong way. Direction shows who sends what. Payments go from Online Shop to Payment provider, and Stock updates go from Shop staff into the shop, so check each arrowhead against the label.
When a business analyst uses this
In a scoping workshop, a business analyst sketches the context diagram live with stakeholders, adding each outside party and flow as people name them. The exported PNG goes into the requirements document, so everyone signs off on the same scope.
Questions people ask
What is a system context diagram?
It's a high-level diagram that shows one system in the middle, the people and systems outside it, and labelled arrows for what flows between them. It shows the scope, not how the system works inside.
How do I export an Excalidraw diagram as an image?
Open the menu, choose Export image, and click PNG. The PNG file can then go straight into a requirements document or a slide.
Is Excalidraw free to use?
Yes. You can open excalidraw.com in a browser and draw for free without making an account.
