draw.io Tutorial for Business Analysts: Your First Flowchart
draw.io is a free diagram tool that runs in your browser, with no account. Learn the basics a business analyst needs: drag shapes from the Shapes panel, connect them with the blue arrows, type labels, label the paths out of a decision and colour a shape, using an online shop order flow.
Step by step
Free diagrams in the browser
- draw.io for BAs. Need a process map but you don't have Visio? draw.io is free, it runs in your browser, and you don't need an account. Here's the order flow we'll build for our online shop.
- app.diagrams.net. Go to app dot diagrams.net and start a blank diagram. Shapes are on the left, and the big grid is your page.
Shapes and labels
- Drag a shape. Drag an ellipse onto the page for the start. Then just type. Order received. A rectangle is a step. Drop it to the right and call it check payment.
Connect the steps
- Connect. Now connect them. Hover over a shape and blue arrows appear. Drag an arrow onto the next shape, and draw.io joins them with a line.
- Decision. A diamond is a decision. Ask one short question. Payment okay?
- Connect. Connect check payment to the decision, the same way.
Label the paths
- Label the paths. If the payment is okay, we ship the order. Add a step on the right. Connect the decision to it, then double click the line and type yes. Every path out of a decision needs a label. If the payment fails, we ask the customer for a new card. Put that step under the decision. Connect it from the decision and label this line no.
- Loop back. Then the payment is checked again. Drag a line from the left of this step back to check payment. That's a loop.
Finish the flow
- The end. Every path must end somewhere. Add an ellipse under ship order. Order shipped. And connect ship order down to the end.
- Colour. Want the decision to stand out? Select it, click fill color in the toolbar, and pick a soft yellow.
- The finished flow. Click on an empty spot to see the finished flow. One start, one decision with labelled paths, and one end.
Recap
- The rules. So, drag shapes from the left, hover and drag the blue arrow to connect, and just type to label. Label every path out of a decision. Subscribe for more draw.io tips for business analysts.
