← ACARA Digital Technologies Years 7–8

Writing a flowchart as text in Mermaid

Starts a Mermaid script that draws a flowchart top-down. Shapes are an id plus text, like A[Step] or B{Question?}, joined by --> arrows.

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

Understanding Writing a flowchart as text in Mermaid in ACARA Digital Technologies Years 7–8

What it does: Square brackets after the id make a rectangle, which is used for a step or action. Curly brackets make a diamond for a question, and -->|Yes| puts a label on the arrow that leaves it. A Mermaid script always begins with flowchart TD. TD means top-down, so the shapes are drawn from top to bottom. The arrow --> joins two shapes and shows which way the flow goes. Two dashes alone draw a line with no arrowhead. Put the label between two vertical bars straight after the arrow, like -->|Yes|. Without the bars, Yes would be read as another shape.

Common mistakes: A diamond must open with { and close with }. The line mixes { with ], so it should be B --> C{Is it even?}. Mermaid arrows need two dashes and a greater-than sign. -> is wrong, so the line should be C -->|Yes| D[Win].

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 Writing a flowchart as text in Mermaid 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

Which line correctly starts a Mermaid flowchart that draws top-down?

flowchart TDflowchart DOWN START

Matches

flowchart TD A[Start] -> B[Step]

↓

The arrow has only one dash. Mermaid needs --> with two dashes to join shapes.

Applying

Meanings

Term

flowchart TD

Meaning

Starts a Mermaid script that draws a flowchart top-down. Shapes are an id plus text, like A[Step] or B{Question?}, joined by --> arrows.

Practice

flowchart TD

Testing

Gaps

Check Answer

Spots

2A[Start] --> B[Get number]

3B --> C{Is it even?]

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

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. Which line correctly starts a Mermaid flowchart that draws top-down?

A. flowchart TD ✓

B. flowchart DOWN START

A Mermaid script always begins with flowchart TD. TD means top-down, so the shapes are drawn from top to bottom.

2. Which line draws a rectangle for a step?

A. A{Get a number}

B. A[Get a number] ✓

Square brackets [ ] make a rectangle for a step. Curly brackets { } make a diamond for a question.

3. Which line draws a diamond for a yes/no question?

A. B{Is it raining?} ✓

B. B[Is it raining?]

Curly brackets { } make a diamond, which is the flowchart shape for a decision. Square brackets would give a plain step rectangle.

4. Which line joins shape A to shape B with an arrow?

A. A -- B

B. A --> B ✓

The arrow --> joins two shapes and shows which way the flow goes. Two dashes alone draw a line with no arrowhead.

5. Which line puts the label Yes on the arrow from B to C?

A. B -->|Yes| C ✓

B. B --> Yes C

Put the label between two vertical bars straight after the arrow, like -->|Yes|. Without the bars, Yes would be read as another shape.

Match the Pairs

flowchart TD → Starts a Mermaid script and tells it to draw the flowchart from top to bottom

A --> B → Draws an arrow from shape A to shape B

A rectangle step is written as an id followed by the step text in square brackets → A[Add 1 to count]

A decision diamond is written as an id with the question in curly brackets, and its arrows are labelled with the answers → B{Is score > 10?} B -->|Yes| C

flowchart TD A[Start] -> B[Step] → The arrow has only one dash. Mermaid needs --> with two dashes to join shapes.

flowchart TD A[Start] --> B[Is it raining?} → The question uses a mismatched bracket. A diamond must start with { and end with }, not start with [.

Key Term

flowchart TD

Starts a Mermaid script that draws a flowchart top-down. Shapes are an id plus text, like A[Step] or B{Question?}, joined by --> arrows.

Fill in the Blanks

1. flowchart TD A[Start] --> B[Get number]

Hint: Type the keyword that begins every Mermaid flowchart script.

2. flowchart TD A[Start] --> B[Add 1 to count]

Hint: Type the two-letter code that makes the chart run top-down.

3. flowchart TD A[Start] --> B[Ask for a name]

Hint: Type the arrow symbol that joins one shape to the next.

4. flowchart TD A[Start] --> B{Is it raining?} B -->|Yes| C[Take umbrella]

Hint: Type the id of the diamond so the labelled arrow starts at the question.

5. flowchart TD A[Start] --> B{Count is 5?} B -->|No| D[Add 1]

Hint: Type the label for the path taken when the answer to the question is not true.

Spot the Error

Question 1

A flowchart TD

B A[Start] --> B[Get number]

C B --> C{Is it even?]

D C -->|Yes| D[Say even]

Line C — A diamond must open with { and close with }. The line mixes { with ], so it should be B --> C{Is it even?}.

Question 2

A flowchart TD

B A[Start] --> B[Roll dice]

C B --> C{Is it a six?}

D C ->|Yes| D[Win]

E C -->|No| E[Roll again]

Line D — Mermaid arrows need two dashes and a greater-than sign. -> is wrong, so the line should be C -->|Yes| D[Win].

Question 3

A flowchart TD

B A[Wake --> B[Eat]

C B --> C[Brush teeth]

Line B — The rectangle A[Wake is missing its closing ]. It should be A[Wake] --> B[Eat].

Question 4

A flowchat TD

B A[Start] --> B[Add 1]

C B --> C[Stop]

Line A — The keyword is misspelt. A Mermaid flowchart script must start with flowchart TD.

Question 5

A flowchart TD

B A[Start] --> B{Raining?}

C B -->|Yes C[Take umbrella]

D B -->|No| D[Wear hat]

Line C — The arrow label needs a | on both sides of the word. It should be B -->|Yes| C[Take umbrella].

Student with a class code? Join your class →