draw.io Quick Guide | N5 Computing Science

What is draw.io?

draw.io (also called diagrams.net) is a free, browser-based tool for creating diagrams. You do not need to create an account. You can save your work to your computer, OneDrive, or Google Drive — it is completely free to use.

For N5 Computing Science, you will use draw.io to create structure diagrams and flowcharts as evidence for your tasks and SDD assignment.

Open draw.io →

Getting started

1

Open draw.io Go to app.diagrams.net. When asked "Where do you want to save your diagram?", choose Device. On school devices, OneDrive sign-in is blocked — always use Device and save the file to your H drive.
2

Create a new diagram Click Create New Diagram. When asked to choose a template, select Blank and click Create. You will see a blank white canvas.
3

Find the right shapes In the left panel you will see shape libraries. For flowcharts, the shapes you need are in the General or Flowchart library — scroll down the left panel to find them. For structure diagrams, use basic shapes from the General library.
4

Add a shape Click any shape in the left panel to add it to the canvas, or drag it onto the canvas. Double-click a shape to type a label inside it.
5

Connect shapes Hover over a shape until you see blue arrows appear on its edges. Click and drag from a blue arrow to another shape to draw a connector line.
6

Label connectors Double-click any connector line to add a label — for example, YES or NO on decision branches.
7

Resize and move Click a shape to select it. Drag the blue handles to resize. Drag the shape itself to move it.
8

Export as PNG When your diagram is finished: File → Export As → PNG. Keep the default settings and click Export. Save the file to your computer or OneDrive. Upload the PNG as evidence in your lesson task.

Shape reference card

Use these tabs to find the correct shape for each symbol. The right panel shows where to find it in draw.io.

Shape

Name

Where to find it in draw.io

Process

General → Rectangle

Loop

General → Rounded Rectangle
Increase corner radius to maximum in the style panel

Selection

General → Hexagon

Predefined process

Flowchart → Predefined Process

Shape

Name

Where to find it in draw.io

Terminal

Flowchart → Terminator
Used for START and END

Initialisation

Flowchart → Manual Input or General → Hexagon
Sets a variable's starting value

Input / Output

Flowchart → Data
The parallelogram shape

Decision

Flowchart → Decision
Diamond — two exits, label YES and NO

Process

General → Rectangle

Predefined process

Flowchart → Predefined Process

On-page connector

Flowchart → On-page reference
Continues a flowchart without crossing lines

Tips and common mistakes

Tips

Use the Flowchart library

The left panel shows General shapes by default. Click Search Shapes and type flowchart to find the dedicated flowchart shape set with correctly named symbols.

Label your decision branches

After connecting a decision diamond, double-click the connector line near the diamond to add a YES or NO label. Unlabelled branches lose marks.

Zoom in to check shapes

Use Ctrl+= to zoom in. Make sure each shape is correct before exporting — a rectangle and a parallelogram look similar when small.

Save often

Use Ctrl+S to save. draw.io saves as a .drawio XML file you can reopen later. Save to your H drive — not OneDrive (sign-in is blocked on school devices). Always export a separate PNG for submission.

Undo mistakes

Ctrl+Z undoes the last action. You can undo multiple steps in a row.

Align shapes neatly

Select multiple shapes with Ctrl+click, then use the Arrange panel on the right to set exact X/Y positions or use the align buttons.

Common mistakes

Wrong shape for input/output

The parallelogram (Data shape) is for input/output. Do not use a plain rectangle — that is a Process shape.

Missing START and END

Every flowchart needs a Terminator oval at the top (START) and bottom (END). Structure diagrams do not need these.

No labels on decision exits

Every arrow leaving a diamond must be labelled YES/NO or TRUE/FALSE. Missing labels will cost marks in the exam and assignment.

Keyboard shortcuts

Action	Windows / Linux	Mac
Save	`Ctrl`+`S`	`Cmd`+`S`
Undo	`Ctrl`+`Z`	`Cmd`+`Z`
Redo	`Ctrl`+`Y`	`Cmd`+`Shift`+`Z`
Zoom in	`Ctrl`+`=`	`Cmd`+`=`
Zoom out	`Ctrl`+`-`	`Cmd`+`-`
Fit page	`Ctrl`+`Shift`+`H`	`Cmd`+`Shift`+`H`
Select all	`Ctrl`+`A`	`Cmd`+`A`
Delete shape	`Delete`	`Delete`
Export	`Ctrl`+`Shift`+`E`	`Cmd`+`Shift`+`E`

Video walkthrough

Coming soon 📹

Video walkthrough coming soon — Creating a flowchart in draw.io from scratch (5 min)