T01: Basic Flowchart Syntax

2.1 Introduction to Flowcharts in Mermaid

A flowchart represents a process using:

• Nodes (steps or states)

• Edges (connections between steps)

• Direction (layout orientation)

In Mermaid, flowcharts are defined using structured text. The syntax is minimal and declarative.

Every flowchart begins with:

flowchart DIRECTION

You may also see:

graph DIRECTION

Both are valid. For clarity and maintainability, flowchart is recommended.

---

2.2 Direction: Controlling Layout

Direction determines how the diagram is rendered.

Code	Meaning
TD	Top → Down
BT	Bottom → Top
LR	Left → Right
RL	Right → Left

Example: Top-to-Down Layout

Example: Left-to-Right Layout

Direction affects layout only — not logical structure.

---

2.3 Nodes: Defining Steps

A node is defined using:

ID[Label]

Example:

• A, B → internal identifiers

• [Login Page] → visible label

The identifier must be unique within the diagram.

---

2.4 Connecting Nodes

Connections are created using arrow syntax.

Basic Arrow

A --> B

Example:

Reverse Arrow

A <-- B

Undirected Link

A --- B

Example:

---

2.5 Chaining Connections

You can write multiple connections in one line:

This reduces redundancy and improves readability.

---

2.6 Adding Labels to Connections

Connections can carry decision labels.

Syntax:

A -->|Label| B

Example:

This is critical for representing decision branches.

---

2.7 Common Node Shapes (Basic Level)

Shape is controlled using bracket style.

Shape	Syntax
Rectangle	[Text]
Rounded	(Text)
Circle	((Text))
Diamond	{Text}
Subroutine	[[Text]]

Example:

At this stage, focus on understanding structure rather than visual styling.

---

2.8 Decision Flow Example

Practical example: Authentication workflow.

Key observations:

• {} creates a decision node.

• Labeled edges define branching logic.

• Flow can loop back.

---

2.9 Minimal Valid Flowchart

The smallest valid flowchart:

Mermaid automatically creates nodes for A and B.

However, using labeled nodes is recommended for clarity.

---

2.10 Commenting in Flowcharts

Use comments to document logic.

%% This is a comment

Example:

Comments are ignored during rendering.

---

2.11 Refactoring Example (Hands-On)

Start with a simple architecture:

Now extend it:

1. Add API layer.

2. Insert cache.

3. Add failure handling.

Refactored version:

Observe how small text edits produce structural evolution.

---

2.12 Common Beginner Errors

1. Missing direction keyword

2. Incorrect arrow syntax (-> instead of -->)

3. Reusing the same node ID

4. Forgetting brackets for labels

Incorrect:

A -> B

Correct:

A --> B

---

2.13 Practice Exercise

Create a checkout flow with:

• Product selection

• Add to cart

• Payment validation

• Success path

• Failure path with retry loop

Requirements:

• At least one decision node

• Labeled branches

• Logical direction (choose TD or LR)

---

2.14 Key Takeaways

Basic flowchart syntax in Mermaid relies on:

• flowchart declaration

• Direction keyword

• Node definitions

• Arrow-based connections

• Optional labels

• Shape variation

These primitives form the foundation for:

• Advanced layout

• Subgraphs

• Styling

• Large-scale system modeling

Master these fundamentals before moving to more complex flowchart constructs.