← ACARA Digital Technologies Years 7–8

Drawing a flowchart in draw.io

A free online editor where you drag standard flowchart shapes onto the page, type text inside them and join them with connector arrows.

Part of: ACARA Digital Technologies Years 7–8 — Algorithms, Flowcharts and Pseudocode — Module 35

Understanding Drawing a flowchart in draw.io in ACARA Digital Technologies Years 7–8

What it does: The Yes and No labels on the connectors show which path is taken when the condition is true or false. The align tools in draw.io line shapes up in a tidy column, which makes the flow easier to follow. A decision is drawn as a diamond. Rounded shapes are used for Start and End. Connector arrows are lines attached to the shapes. They stay joined when you move the shapes. In draw.io you double-click a shape and type the text right inside it. draw.io only draws diagrams. It does not run the algorithm. The Flowchart shape library holds the standard flowchart shapes you drag onto the draw.io page.

Common mistakes: A question needs the Decision (diamond) shape, not a Process rectangle. The line should be '4 Drag Decision: Is it dark?'. Arrows leaving a decision are labelled Yes or No. 'Maybe' is not a valid answer to a yes/no question, so the line should be 'Arrow down, label it Yes'.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Drawing a flowchart in draw.io to a class →

This module's key terms are also in a printable crossword (Modules 365–411) and word search (Modules 331–411).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
You want to draw a decision in draw.io. Which shape do you drag onto the page?
A rounded rectangleA diamond
Matches
Diamond: Is it raining? (one arrow out, no label)
↓
A decision diamond needs two labelled arrows, Yes and No, leaving it. This one has only one unlabelled arrow, so the reader cannot tell what happens when the answer is different.
Applying
Meanings
Term
draw.io
Meaning
A free online editor where you drag standard flowchart shapes onto the page, type text inside them and join them with connector arrows.
Practice
Start (terminator)
Testing
Gaps
Drag a shape onto the page
Check Answer
Spots
33 Drag Terminator: Start
44 Drag Process: Is it dark?

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Gulper Eel' badge — Deep Streak, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. You want to draw a decision in draw.io. Which shape do you drag onto the page?
A. A rounded rectangle
B. A diamond ✓
A decision is drawn as a diamond. Rounded shapes are used for Start and End.
2. How do you join two shapes in draw.io?
A. Drag a connector arrow from one shape to the other ✓
B. Type an arrow symbol inside each shape
Connector arrows are lines attached to the shapes. They stay joined when you move the shapes.
3. Which is the best way to find the standard flowchart shapes in draw.io?
A. Open the Flowchart shape library in the left panel ✓
B. Draw every shape by hand with the pen
The Flowchart library holds ready-made standard shapes like the diamond, rectangle and rounded Start/End.
4. A diamond has two arrows leaving it. What should you write on those connectors?
A. Nothing, the arrows will explain themselves
B. Yes on one arrow and No on the other ✓
Labelling the connectors Yes and No shows which path to follow for each answer.
5. Where do you type the words for a step, like 'Add 1 to count'?
A. Inside the shape ✓
B. Only in a separate document
In draw.io you double-click a shape and type the text right inside it.

Match the Pairs

Shapes > Flowchart → Opens the flowchart shape library in draw.io so you can drag standard shapes like start, step and decision onto the page
Drag a connector arrow from one shape to the next → Joins two flowchart shapes so the arrow shows which step comes next
Each arrow leaving a decision diamond needs a label so the reader knows which path to follow → Diamond: Score > 50? --Yes--> Pass --No--> Try again
Shapes should be lined up neatly in draw.io so the flowchart is easy to read from top to bottom → Select all shapes > Arrange > Align > Center
Diamond: Is it raining? (one arrow out, no label) → A decision diamond needs two labelled arrows, Yes and No, leaving it. This one has only one unlabelled arrow, so the reader cannot tell what happens when the answer is different.
Start > Add 1 to count > Show count (shapes typed as text with no connectors) → The shapes are not joined by connector arrows, so the order of the steps is unclear. Each shape must be linked to the next with an arrow.

Key Term

draw.io
A free online editor where you drag standard flowchart shapes onto the page, type text inside them and join them with connector arrows.

Fill in the Blanks

1. Drag a Decision shape onto the page
Hint: Type the name of the diamond shape used for a question with two outcomes.
2. More Shapes > tick Flowchart in the list
Hint: Type the name of the shape library you switch on to get the standard flowchart shapes.
3. Arrow 1 label: Yes Arrow 2 label: No
Hint: Type the label for the connector taken when the condition is false.
4. Select shapes > Arrange > Align > Center
Hint: Type the alignment option that lines up stacked shapes along one vertical line.
5. Alternatives: PowerPoint or Google Slides
Hint: Type the name of Google's presentation tool, which can also draw flowcharts.

Spot the Error

Question 1
A 1 Open draw.io in a browser
B 2 Turn on the Flowchart shapes
C 3 Drag Terminator: Start
D 4 Drag Process: Is it dark?
Line D — A question needs the Decision (diamond) shape, not a Process rectangle. The line should be '4 Drag Decision: Is it dark?'.
Question 2
A Drag Decision: Is it raining?
B Arrow down, label it Maybe
C Arrow right, label it No
Line B — Arrows leaving a decision are labelled Yes or No. 'Maybe' is not a valid answer to a yes/no question, so the line should be 'Arrow down, label it Yes'.
Question 3
A Select the shapes in a column
B Arrange > Align > Top
C Check arrows stay straight
Line B — To line up shapes stacked in a column you centre them with Arrange > Align > Center. Aligning to the Top is for shapes laid out in a row.
Question 4
A Drag Terminator: Start
B Drag Process: Add 1 to count
C Drag a blue arrow from Start
D Drop arrow tip on empty page
Line D — A connector must end on the next shape so it stays joined to it. Dropping it on an empty page leaves a loose arrow. It should be 'Drop arrow tip on the Process'.
Question 5
A Open Notepad to draw shapes
B Insert > Shapes > Flowchart
C Pick Process, type the step
Line A — Notepad is a plain text editor and cannot draw shapes. PowerPoint or Google Slides are the alternatives, so the line should be 'Open PowerPoint or Slides'.

Student with a class code? Join your class →