← Course home N5 Computing Science  ·  James Gillespie's
SDD  ·  Lesson 3

Design: Structure Diagrams & Flowcharts

⏱ 60 min 📋 Design ✏️ draw.io activity
Learning intentions
  • Understand what structure diagrams and flowcharts are, and why they are used in software design
  • Identify and use the correct symbols for both design notations
  • Read and interpret existing structure diagrams and flowcharts
  • Create your own structure diagrams and flowcharts to represent simple programs
Success criteria
  • I can name and draw all four structure diagram symbols: process, loop, selection, predefined process
  • I can name and draw all seven flowchart symbols: terminal, initialisation, input/output, decision, process, predefined process, on-page connector
  • I can read a structure diagram or flowchart and trace through the order of execution
  • I can identify where loops and selections appear in a diagram
  • I can create a structure diagram or flowchart for a simple program from a description
Warm up — what do you already know?

Answer before the lesson begins. These check prior knowledge — it's fine if you're unsure.

1. In the analysis phase, what term describes a numbered list of what a program must do?

2. Which column of the IPO model would "calculate the total price" appear in?

3. At which stage of the development cycle does design take place?

Key vocabulary

design notation
A standardised method of planning a program visually before writing any code.
structure diagram
A graphical design tool that breaks a problem into steps and sub-steps, read top-down, left-to-right.
flowchart
A graphical design tool using standard shapes and arrows to show the order in which program instructions are carried out.
process
A step that performs a task, such as a calculation; shown as a rectangle in both notations.
loop
A repeated section of a program; shown as a rounded rectangle (stadium shape) in structure diagrams; shown using back-arrows in flowcharts.
selection
A decision point where the program follows different paths; shown as a hexagon in structure diagrams, a diamond in flowcharts.
predefined process
A call to a function or procedure defined elsewhere; shown with vertical lines inside a rectangle.
terminal
The oval start/end symbol used only in flowcharts.
initialisation
Declaring a variable or setting its starting value; shown as a hexagon in flowcharts.
input/output
Receiving data from the user or displaying data; shown as a parallelogram in flowcharts.
on-page connector
A small circle used in flowcharts to continue the diagram on the same page without crossing lines.

Design: Structure Diagrams & Flowcharts

Why design before coding?

When developers receive a problem to solve, they do not jump straight into writing code. Instead, they produce a design — a plan for how the program will work before a single line of code is written. This saves time because errors in logic are much cheaper to fix on paper than in code that has already been built.

The SQA specification requires you to be able to read, understand, and create two graphical design notations: structure diagrams and flowcharts. Both represent the same program logic — they are just different ways of drawing it. You need to know both, and you need to be able to choose one and use it correctly.

Design happens after analysis (where you identify what the program must do) and before implementation (where you write the code).

Structure diagrams

A structure diagram breaks a problem into steps and sub-steps, arranged as a tree read from top to bottom, left to right. Each main step can be broken down (refined) into smaller sub-steps below it.

The four symbols used in structure diagrams are:

  • Process — a plain rectangle; represents a single action or calculation.
  • Loop — a stadium shape (rectangle with fully rounded ends); represents a section that repeats.
  • Selection — a hexagon; represents a decision point where different branches are taken.
  • Predefined process — a rectangle with a vertical line near each end; represents a call to a sub-program defined elsewhere.
Process
A step or process in the program, such as a calculation.
Loop
A section that repeats — a fixed number of times or while a condition is met.
Selection
A decision point — the program branches depending on a condition.
Predefined process
A call to a function or procedure defined separately.

Reading order: Always follow each branch from top to bottom before moving to the next branch from left to right. The root node at the top is the overall problem.

Flowcharts

A flowchart uses standard shapes connected by arrows to show the exact order instructions execute. Unlike a structure diagram, a flowchart shows flow explicitly through arrows — including loops, which are formed by arrows pointing back up the diagram.

The seven symbols used in flowcharts are:

  • Flow line — an arrow connecting symbols to show the direction of execution.
  • Terminal — an oval; marks the START or END of the program.
  • Initialisation — a hexagon; sets up a variable with a starting value before the main logic runs.
  • Input/Output — a parallelogram; receives data from the user or displays data to the screen.
  • Decision — a diamond; evaluates a condition; has exactly two exits labelled Yes/No or True/False.
  • Process — a rectangle; performs a calculation or action.
  • Predefined process — a rectangle with vertical lines at each end; calls a sub-program defined elsewhere.
  • On-page connector — a small circle; used to continue a flowchart on the same page without crossing flow lines.
Flow line
Shows the direction of flow between symbols.
Terminal
Marks the START and END of the program.
Initialisation
Declares a variable or sets its initial value.
Input/Output
Data entered by the user (input) or displayed to the user (output).
Decision
A condition that causes branching. Two exits: True and False.
Process
A step that performs a task, such as a calculation.
Predefined process
A call to a function or procedure defined elsewhere.
On-page connector
Splits a flowchart across columns to keep it on one page.

Key point: There is no loop symbol in a flowchart. Loops are shown by drawing an arrow that points back to an earlier symbol, creating a circuit.

Comparing the two notations

Both notations show the same program logic. Understanding the key differences helps you choose the right one and answer exam questions correctly.

  • Structure diagrams show top-down decomposition — how a big problem is broken into sub-problems.
  • Flowcharts show flow of control — exactly which instruction runs next, using arrows.
  • Flowcharts have more symbols (especially the terminal and initialisation).
  • Flowcharts show loops through back-arrows; structure diagrams use the loop shape.
  • Both are valid at N5; exam questions may ask you to work with either one.
Notation Advantage Disadvantage
Structure diagram Clearly shows how a problem is broken into sub-steps Can be hard to follow the exact flow of execution
Flowchart Shows the flow of the program clearly Can become long and complex for larger programs

How loops and selections appear

Loop in a structure diagram: The stadium shape appears as a parent node. Its children hang below it and are the steps that repeat.

Loop in a flowchart: A decision diamond evaluates a condition. When true, arrows lead back up the diagram to repeat earlier steps. When false, the arrow exits downward and continues the program.

Selection in a structure diagram: The hexagon appears as a parent node. Its children represent the different branches (e.g., "if" branch and "else" branch).

Selection in a flowchart: The decision diamond has two exits — Yes/True and No/False — each leading to different process boxes, which rejoin below the selection.

Worked examples

All examples use the same scenario: a cinema ticket price calculator. The program asks for age and whether the customer has a student card, then sets the price (under 12: £5, student: £8, full price: £12).

Example 1 — Reading a structure diagram
Cinema Ticket Calculator Repeat for each customer age < 12? Display ticket price Get age Get student card status Set price to £5 has student card? Set price to £8 Set price to £12

Use the structure diagram above to trace through the design of the cinema ticket calculator. Read top-down, left-to-right.

1
Start at the root node — this is the overall problem, labelled "Cinema ticket calculator". It is a plain rectangle.
2
Follow the leftmost branch first. The first child is a loop shape (stadium), labelled "Repeat for each customer". Its two children are process rectangles: "Get age" and "Get student card status" — these execute in order.
3
Move right. The next child is a selection hexagon labelled "age < 12?". Its left branch is a process rectangle "Set price to £5". Its right branch is another selection hexagon "Has student card?" with branches "Set price to £8" and "Set price to £12".
4
The final child at root level is a process rectangle: "Display ticket price". It runs after the selection resolves.
5
Reading order rule: always finish all children of a node before moving to the next sibling. Never skip levels.
Example 2 — Reading a flowchart
START price = 0 Input age Input hasStudentCard age < 12? NO YES price = 5 hasStudentCard? YES NO price = 8 price = 12 Display price END

Use the flowchart above to trace the cinema ticket calculator. Every flowchart symbol has a specific role.

1
Every flowchart starts with a START terminal — an oval labelled "START".
2
The initialisation hexagon sets price = 0 before any input is collected. This ensures the variable exists before it is used.
3
Two input/output parallelograms collect the data: "Input age" and "Input hasStudentCard".
4
The first decision diamond tests age < 12. This creates two branches labelled Yes and No.
5
The second decision diamond (on the No branch) tests hasStudentCard. Both diamonds rejoin below before the output step.
6
An output parallelogram displays the price. All branches must converge before this symbol so it runs regardless of which branch was taken.
7
The END terminal closes the flowchart — also an oval, labelled "END".
Example 3 — Tracing through a flowchart

Use the flowchart from Example 2. Tracing means following the arrows using specific input values and recording which path is taken. The trace table below shows three scenarios.

Scenario age hasStudentCard Trace path Ticket price
Child visitor 9 False START → init → input age → input card → age < 12? YES → price = 5 → display → END £5
Adult student 20 True START → init → input age → input card → age < 12? NO → hasStudentCard? YES → price = 8 → display → END £8
Full price adult 35 False START → init → input age → input card → age < 12? NO → hasStudentCard? NO → price = 12 → display → END £12
1
Tracing means following the arrows through the flowchart using specific values for each variable.
2
At each decision diamond, evaluate the condition with the given data — write Yes or No to record which branch is taken.
3
Only one branch of each decision is taken per trace. Never follow both.
4
Tracing confirms your design is logically correct before you write code. If a trace gives a wrong answer, fix the design — not the code.
Now you try

Scenario: A program calculates a delivery charge. If an order total is £50 or more, delivery is free. If under £50, delivery costs £3.99.

Answer the following:

  1. What symbol would you use to show the decision "Is the order total ≥ 50?" in a structure diagram?
  2. In a flowchart, how would a loop be represented if the program repeated for multiple orders?
  3. Describe a flowchart for this program from START to END, naming each symbol used.
  1. A selection symbol (hexagon) — it represents a decision point where the program branches into different paths.
  2. By drawing an arrow from a later point back up to an earlier point, creating a circuit. There is no loop symbol in flowcharts — the loop shape belongs to structure diagrams only.
  3. START (terminal) → deliveryCharge = 0 (initialisation hexagon) → Input: orderTotal (input/output parallelogram) → orderTotal ≥ 50? (decision diamond) → Yes: deliveryCharge = 0 (process rectangle) / No: deliveryCharge = 3.99 (process rectangle) → Both branches rejoin → Display deliveryCharge (input/output parallelogram) → END (terminal).
Common mistakes
✕
Using the wrong symbol in a flowchart. A common error is drawing a rectangle for input or output instead of a parallelogram, or a rectangle for a decision instead of a diamond. Each symbol has a fixed meaning — use the correct one.
✕
Confusing the initialisation hexagon with the decision diamond. Both have a pointed shape, but they are different. The initialisation hexagon is horizontally elongated and used near the top to set a variable's starting value. The decision diamond has four equal pointed tips and always has two exits labelled Yes/No.
✕
Forgetting START and END terminals in flowcharts. Every flowchart must begin with a START oval and end with an END oval. Structure diagrams do not use terminals — they are flowchart-only.
✕
Drawing a loop symbol inside a flowchart. The stadium-shaped loop symbol belongs to structure diagrams only. Flowcharts represent loops by drawing a back-arrow from a later point to an earlier one — no special loop shape is needed.
✕
Not labelling decision branches. Every exit arrow from a decision diamond must be labelled Yes/No or True/False. Unlabelled branches will lose marks in an exam question.
Exam tip

Design questions appear every year and often carry 3–4 marks. Two types appear: reading (identify a symbol, trace a diagram) and creating (draw or complete a design).

For reading questions: "identify" means name the symbol or state the type. "State the type of loop" requires one word — e.g., conditional loop or fixed loop.

For creating questions: use correct shapes, label all decision branches Yes/No, include START and END for flowcharts, and read top-down/left-right for structure diagrams. Partial marks are available, so attempt every part even if unsure.

draw.io (diagrams.net) is a free, browser-based tool with built-in flowchart shapes. For the N5 assignment you may be asked to produce a design as evidence — practise using it now.

Past paper mapping: 2025 Q8(a)(b)(c) — reading and creating design notations; 2024 Q10(a)(b) — identifying notation type and reading a structure diagram; 2023 Q5 — flowchart reading; 2022 Q4(a)(b) — identifying and completing a structure diagram; 2019 Q16(a)(b)(c) — reading and creating flowcharts.

Task Set

Questions 1–5 are auto-checked. Questions 6–9 are self-marked — write your answer, then reveal the model answer to check your work.

For diagram questions (Q6, Q8, Q9): create your diagram in draw.io, then either (a) click Upload to select the saved PNG, or (b) in draw.io use Edit → Copy as Image (or right-click the diagram → Copy), then click Paste from clipboard. Your diagram will appear inline and be included when you export your answers.

1. What shape is used to represent a loop in a structure diagram? TYPE 1

2. Which flowchart symbol is used to show that a variable is being given its starting value? TYPE 1

3. In a flowchart, how is a loop shown? TYPE 1

4. A decision diamond labelled score > 50? has two exits. What should they be labelled? TYPE 1

5. Which of the following is NOT a symbol used in structure diagrams? TYPE 1

6. A program asks a user to enter 10 test scores and calculates the total. In a structure diagram, draw and label: (a) the root node  (b) a child node using a loop symbol  (c) the children below the loop. Use draw.io to create your diagram, then upload or paste your diagram below. TYPE 2

(a) Root rectangle: "Calculate total of 10 scores".
(b) Loop child (stadium shape): "Repeat 10 times".
(c) Two process rectangles below the loop: "Get score from user" and "Add score to total". These are the steps that repeat on each iteration.

7. For this flowchart sequence — START → [price = 0] → [Input age] → Is age < 16? → Yes: [price = 5.50] → [Display price] → END / No: [price = 9.00] — identify the symbol type for: (a) START, (b) price = 0, (c) Input age, (d) Is age < 16?, (e) price = 5.50. TYPE 2

(a) Terminal (oval).
(b) Initialisation (hexagon) — setting the variable's starting value.
(c) Input/Output (parallelogram) — receiving data from the user.
(d) Decision (diamond) — evaluates a condition with two exits: Yes and No.
(e) Process (rectangle) — performing a calculation or assignment.

8. A program asks a user to enter a password. If correct, display "Access granted"; if not, display "Access denied". Draw a complete flowchart for this program using draw.io. Your flowchart must use correct symbol shapes, label all decision branches Yes/No, and include START and END terminals. Upload or paste your diagram as evidence below. 📐 draw.io quick guide TYPE 3

START (terminal oval)
→ correctPassword = "letmein" (initialisation hexagon)
→ Input userPassword (input/output parallelogram)
→ userPassword = correctPassword? (decision diamond — two exits labelled Yes and No)
→ Yes → Display "Access granted" (input/output parallelogram) → END (terminal oval)
→ No → Display "Access denied" (input/output parallelogram) → END (terminal oval)

Note: both branches end at an END terminal. All decision exits must be labelled.

9. Using draw.io (diagrams.net), create a structure diagram OR flowchart for this program: "A program asks the user to enter a temperature in Celsius. If below 0, display 'Ice'. If 0–99, display 'Liquid'. If 100 or above, display 'Steam'." Export your diagram as a PNG and upload it below. 📐 draw.io quick guide TYPE 3

Self-mark checklist:
✔ Correct symbols used throughout (no wrong shapes).
✔ All three outcomes shown: Ice, Liquid, Steam.
✔ If flowchart: START and END terminals present; decision branches labelled Yes/No; arrows show clear direction of flow.
✔ If structure diagram: root node present; read top-down, left-to-right; selection hexagons used for the two decisions.
✔ Control flow is unambiguous — a reader could trace any input through the diagram without confusion.
Teacher notes — Shift+T to hide

Suggested timing: 60 minutes. Warm up 8 min; vocabulary 5 min; notes + symbol grids 12 min; worked examples 15 min; now you try 8 min; task set 12 min.

Key misconception to address: Many pupils think flowcharts have a loop symbol. Emphasise clearly: flowcharts use back-arrows for repetition — the stadium loop shape belongs to structure diagrams only. This distinction appears regularly in past papers.

Live demo suggestion: Put a simple scenario on the board (e.g., even/odd number checker). Have the class tell you which symbol to draw next as you build the flowchart live on the whiteboard. Then build the equivalent structure diagram and compare them side by side.

Extension question: Given the same program, ask pupils to convert between notations — structure diagram to flowchart and vice versa. This tests genuine understanding rather than symbol memorisation.

SQA command words covered: "identify" (name a symbol or construct), "state" (one-word answer, e.g. type of loop), "describe" (explain purpose of a symbol or section), "design/create" (draw a correct complete diagram).

Past paper mapping: 2025 Q8(a)(b)(c); 2024 Q10(a)(b); 2023 Q5; 2022 Q4(a)(b); 2019 Q16(a)(b)(c).

Assignment relevance: The SDD assignment typically requires a design (structure diagram or flowchart) as evidence for Task 1. Q9 is deliberate draw.io practice for this.