🛠️2.1 Drawing Flowcharts

Flowchart Structure

1. Explain nodes and arrows.

2. Different arrow types: -->, -->|label|, -.->.

3. Looping and branching basics.

---

1. Explain Nodes and Arrows

At the heart of every Mermaid flowchart are nodes and arrows. Together, they form the basic structure of your diagram, helping you represent steps, decisions, and connections in a clear, visual way.

---

✅ What is a Node?

A node is a building block — a shape that represents an idea, step, task, or element in your process.

In Mermaid’s syntax, a node is defined by giving it:

• An ID (a unique name for that shape)

• Optionally, a label (the text shown inside the shape)

Basic example:

A

This creates a node with ID A and label A.

You can make labels clearer by adding brackets:

A[Start]
B[Process]
C[End]

Here:

• A is the ID, and Start is the label shown in the diagram.

• Square brackets [ ] mean the node is drawn as a rectangle, which is the default shape for steps.

---

✅ What is an Arrow?

An arrow connects two nodes and shows the direction of flow or relationship between them.

Mermaid arrows are written using special characters:

• --> : a standard arrow

• -.-> : a dotted arrow (used for optional paths or alternate flows)

• ==> : a thick arrow (less common but useful for emphasis)

Example:

A --> B

This means: there’s an arrow pointing from A to B.

You can also add labels on arrows to clarify conditions or messages:

A -- Yes --> B

or

A --|Yes|--> B

The label “Yes” appears along the arrow.

---

✅ Combining Nodes and Arrows

Nodes and arrows come together to build your entire flowchart. For example:

graph TD
  A[Start] --> B[Check]
  B --> C{Decision?}
  C -->|Yes| D[Proceed]
  C -->|No| E[Stop]

This creates:

• Three rectangular nodes (Start, Check, Proceed, Stop)

• One diamond node (Decision? — the { } syntax makes it a diamond for decisions)

• Arrows showing how each step connects, with “Yes” or “No” labels for the decision paths.

---

✅ Key Node Shapes

Mermaid has simple shape variations:

• [ ] → Rectangle (process step)

• { } → Diamond (decision point)

• ([ ]) → Circle

• (( )) → Rounded circle or pill shape

• > ] → Asymmetric shapes for advanced flows (less common for beginners)

---

✅ Putting It Together

Nodes define what is in your flowchart. Arrows define how those pieces connect and which way the process moves.

By mastering just these two elements, you can build clear flowcharts for almost any scenario — from simple to complex.

---

In short:

📌 Nodes = steps or elements 📌 Arrows = flow and direction

Master these basics, and you’ll be able to diagram any process with just a few lines of Mermaid code.

---

2. Different Arrow Types: -->, -->|label|, -.->

In Mermaid flowcharts, arrows show how nodes connect and how your process flows. Mermaid gives you a few different arrow styles to make your diagrams more meaningful and easier to read. Each arrow type has its own purpose — here’s how they work:

---

✅ Basic Arrow: -->

The standard arrow is written with two dashes and a greater-than sign:

A --> B

• This means “A points to B.”

• It draws a solid line with a normal arrowhead, showing a clear, direct connection.

• Use this for the main flow of your process or data.

Example:

graph LR
  Start --> Step1 --> Step2 --> End

---

✅ Arrow with Label: -->|label|-->

Sometimes you need to explain what happens along a connection — for example, a condition, message, or data. Mermaid makes this easy with arrow labels.

The syntax is:

A --|Yes|--> B

or

A -->|Approved| B

• Place your label text inside | | between the dashes and the arrow.

• This puts the label along the line in the rendered diagram.

• It’s especially useful for decision branches, like Yes/No or True/False.

Example:

graph TD
  Decision{Is it valid?}
  Decision --|Yes|--> Success[Proceed]
  Decision --|No|--> Error[Stop]

---

✅ Dotted Arrow: -.->

For alternative flows or optional paths, you can use a dotted arrow:

A -.-> B

• This draws a dashed line instead of a solid one.

• It’s handy for showing alternative options, fallbacks, or non-critical paths.

• You can still add a label:

  A -.->|Maybe| B

Example:

graph LR
  Main[Primary Path] --> Next
  Main -.->|Optional| Side[Alternative Path]

---

✅ When to Use Each

Arrow Type	Use For
-->	The main, direct flow
`-->	label
-.->	Optional or secondary connections

Combining these arrow types makes your diagram clearer and helps readers understand the flow at a glance.

---

In short:

📌 Solid arrow (-->) → Main steps 📌 Labeled arrow (-->|label|-->) → Decisions or conditions 📌 Dotted arrow (-.->) → Optional or alternative paths

Mastering these small details makes your Mermaid diagrams look professional and communicate your ideas clearly.

---

3. Looping and Branching Basics

Once you understand nodes and arrows, you’re ready to tackle two powerful concepts that make flowcharts truly useful: branching and looping. These help you show decisions, conditions, and repeated steps in a process — making your diagrams closer to real-world logic.

---

✅ Branching: Showing Decisions

Branching is when your flowchart splits into two or more possible paths, usually based on a condition like Yes/No or True/False. In Mermaid, you do this with decision nodes and labeled arrows.

A decision node is typically drawn as a diamond, which you write with curly braces { }:

graph TD
  A[Start] --> B{Is it valid?}
  B --|Yes|--> C[Proceed]
  B --|No|--> D[Stop]

• Here, B is the decision point: Is it valid?

• If the answer is Yes, the flow continues to C.

• If No, it moves to D.

👉 This simple branching makes it clear how your process handles choices.

---

✅ Looping: Representing Repeats

Loops show when a process repeats until a certain condition is met. Mermaid doesn’t have special loop syntax — you create a loop by connecting a node back to a previous one.

Example:

graph TD
  A[Start] --> B[Check Condition]
  B -->|Valid| C[Next Step]
  B -->|Invalid| A

• If the condition is Valid, the flow goes forward.

• If Invalid, it loops back to the Start.

• This creates a cycle, showing that the process repeats until the condition is satisfied.

Loops can be as simple or as complex as needed — you can loop back to any node.

---

✅ Combining Branches and Loops

In real diagrams, you’ll often combine branching and looping. For example:

graph TD
  Start --> Input[Enter Data]
  Input --> Check{Is Data Valid?}
  Check --|Yes|--> Process[Save Data]
  Check --|No|--> Input

• Here, the user enters data.

• If it’s valid, it proceeds to Save Data.

• If not, the flow loops back to Enter Data — a classic validation loop.

---

✅ Tips for Clean Loops and Branches

• Use clear labels (Yes, No, Retry) to make the logic obvious.

• Keep your flow simple — break complex processes into smaller parts if needed.

• Use consistent shapes: diamonds {} for decisions, rectangles [] for actions.

---

In short:

📌 Branching splits your flow into multiple possible paths. 📌 Looping connects steps back to earlier nodes to show repetition. Together, they help you map real-world processes clearly and logically with Mermaid.

---