Drawing a flowchart in draw.io

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1Shapes > Flowchart		ADiamond: Score > 50? --Yes--> Pass --No--> Try again
2Drag a connector arrow from one shape to the next		BSelect all shapes > Arrange > Align > Center
3Each arrow leaving a decision diamond needs a label so the reader knows which path to follow		CThe 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.
4Shapes should be lined up neatly in draw.io so the flowchart is easy to read from top to bottom		DOpens the flowchart shape library in draw.io so you can drag standard shapes like start, step and decision onto the page
5Diamond: Is it raining? (one arrow out, no label)		EJoins two flowchart shapes so the arrow shows which step comes next
6Start > Add 1 to count > Show count (shapes typed as text with no connectors)		FA 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.

Definitions

draw.io

Fill in the Blanks

Complete each line of code by filling in the missing parts.

Drag a ________ shape onto the page

More Shapes > tick _________ in the list

Arrow 1 label: Yes Arrow 2 label: __

Select shapes > Arrange > Align > ______

Alternatives: PowerPoint or Google ______

Spot the Error

Shade in the letter of the line that contains an 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?

Question 2

A Drag Decision: Is it raining?

B Arrow down, label it Maybe

C Arrow right, label it No

Question 3

A Select the shapes in a column

B Arrange > Align > Top

C Check arrows stay straight

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

Question 5

A Open Notepad to draw shapes

B Insert > Shapes > Flowchart

C Pick Process, type the step

Answer Key

Drawing a flowchart in draw.io

Section A: Quick Questions

B — A diamond

A — Drag a connector arrow from one shape to the other

A — Open the Flowchart shape library in the left panel

B — Yes on one arrow and No on the other

A — Inside the shape

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

Drag a Decision shape onto the page

More Shapes > tick Flowchart in the list

Arrow 1 label: Yes
Arrow 2 label: No

Select shapes > Arrange > Align > Center

Alternatives: PowerPoint or Google Slides

Section E: Spot the Error

D — A question needs the Decision (diamond) shape, not a Process rectangle. The line should be '4 Drag Decision: Is it dark?'.

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'.

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.

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'.

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'.