Writing a flowchart as text in Mermaid
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which line correctly starts a Mermaid flowchart that draws top-down?
2. Which line draws a rectangle for a step?
3. Which line draws a diamond for a yes/no question?
4. Which line joins shape A to shape B with an arrow?
5. Which line puts the label Yes on the arrow from B to C?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1flowchart TD | AB{Is score > 10?} B -->|Yes| C | |
| 2A --> B | BDraws an arrow from shape A to shape B | |
| 3A rectangle step is written as an id followed by the step text in square brackets | CA[Add 1 to count] | |
| 4A decision diamond is written as an id with the question in curly brackets, and its arrows are labelled with the answers | DStarts a Mermaid script and tells it to draw the flowchart from top to bottom | |
| 5flowchart TD A[Start] -> B[Step] | EThe arrow has only one dash. Mermaid needs --> with two dashes to join shapes. | |
| 6flowchart TD A[Start] --> B[Is it raining?} | FThe question uses a mismatched bracket. A diamond must start with { and end with }, not start with [. |
C
Definitions
flowchart TD
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
_________ TD
A[Start] --> B[Get number]
2.
flowchart __
A[Start] --> B[Add 1 to count]
3.
flowchart TD
A[Start] ___ B[Ask for a name]
4.
flowchart TD
A[Start] --> B{Is it raining?}
_ -->|Yes| C[Take umbrella]
5.
flowchart TD
A[Start] --> B{Count is 5?}
B -->|__| D[Add 1]
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
flowchart TD
B
A[Start] --> B[Get number]
C
B --> C{Is it even?]
D
C -->|Yes| D[Say 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]
Question 3
A
flowchart TD
B
A[Wake --> B[Eat]
C
B --> C[Brush teeth]
Question 4
A
flowchat TD
B
A[Start] --> B[Add 1]
C
B --> C[Stop]
Question 5
A
flowchart TD
B
A[Start] --> B{Raining?}
C
B -->|Yes C[Take umbrella]
D
B -->|No| D[Wear hat]
Answer Key
Writing a flowchart as text in Mermaid
Section A: Quick Questions
Q1
A — flowchart TD
Q2
B — A[Get a number]
Q3
A — B{Is it raining?}
Q4
B — A --> B
Q5
A — B -->|Yes| C
Section B: Match the Pairs
Q1
flowchart TD → Starts a Mermaid script and tells it to draw the flowchart from top to bottom
Q2
A --> B → Draws an arrow from shape A to shape B
Q3
A rectangle step is written as an id followed by the step text in square brackets → A[Add 1 to count]
Q4
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
Q5
flowchart TD
A[Start] -> B[Step] → The arrow has only one dash. Mermaid needs --> with two dashes to join shapes.
Q6
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 [.
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
flowchart TD
A[Start] --> B[Get number]Q2
flowchart TD
A[Start] --> B[Add 1 to count]Q3
flowchart TD
A[Start] --> B[Ask for a name]Q4
flowchart TD
A[Start] --> B{Is it raining?}
B -->|Yes| C[Take umbrella]Q5
flowchart TD
A[Start] --> B{Count is 5?}
B -->|No| D[Add 1]Section E: Spot the Error
Q1
C — A diamond must open with { and close with }. The line mixes { with ], so it should be B --> C{Is it even?}.
Q2
D — Mermaid arrows need two dashes and a greater-than sign. -> is wrong, so the line should be C -->|Yes| D[Win].
Q3
B — The rectangle A[Wake is missing its closing ]. It should be A[Wake] --> B[Eat].
Q4
A — The keyword is misspelt. A Mermaid flowchart script must start with flowchart TD.
Q5
C — The arrow label needs a | on both sides of the word. It should be B -->|Yes| C[Take umbrella].