2.2 Common Flowchart Elements

1. Subgraphs (groups).

2. Conditions and decision nodes.

3. Styling nodes with style or classDef.

---

1. Subgraphs (Groups)

When your flowchart grows beyond a few steps, it can become harder to read at a glance. That’s where subgraphs, also called groups, come in. A subgraph lets you visually group related nodes together, helping readers understand which steps belong to the same part of a process.

---

✅ What is a Subgraph?

A subgraph is a container that wraps multiple nodes inside a labeled box. It doesn’t change how nodes connect — it just groups them for clarity.

Use subgraphs when:

• You want to show phases in a process (e.g., Input, Processing, Output).

• You have modules or components that belong together.

• You need to separate responsibilities in a big flowchart.

---

✅ How to Write a Subgraph

Mermaid uses a simple subgraph keyword:

subgraph SubgraphName [Optional Label]
  Node1
  Node2
end

• subgraph starts the group.

• Everything indented under it is inside the subgraph.

• end closes the group.

• The square brackets [ ] add a visible label to the subgraph box.

---

✅ Example

Here’s a flowchart with two subgraphs:

```mermaid
graph TD
  A[Start] --> B[Validation]

  subgraph Backend [Backend Process]
    B --> C[Process Data]
    C --> D[Save to DB]
  end

  subgraph Frontend [Frontend Process]
    A --> E[User Form]
    E --> B
  end

  D --> F[Complete]
```

What this does:

• The Backend Process subgraph groups Validation, Process Data, and Save to DB.

• The Frontend Process subgraph shows User Form and how it links to Validation.

• This makes it clear which parts of the flow happen in the frontend vs. backend.

---

✅ Tips for Using Subgraphs

• Use clear, short labels so your groups don’t clutter the diagram.

• Keep related nodes together inside the group block.

• You can nest subgraphs inside bigger diagrams — but avoid going too deep. Too many levels can make things harder to read.

---

In short:

📌 Subgraphs are your tool for grouping related steps. They keep big diagrams tidy, organized, and easier to explain — especially when your flow has distinct parts that belong together.

---

Here’s a clear, complete draft for “Conditions and Decision Nodes” — perfect for Mermaid for Beginners *Chapter 2.2: Common Flowchart Elements:

---

2. Conditions and Decision Nodes

In any real process or system, there are moments where you need to make a choice: Is this valid?, Did the user approve?, Should we retry? In a flowchart, these choices are shown using conditions and decision nodes.

---

✅ What is a Decision Node?

A decision node represents a point where your process can branch based on a condition. Visually, decision nodes are usually shown as diamonds in flowcharts. In Mermaid, you create a diamond shape using curly braces { } around the label.

---

✅ How to Write a Decision Node

Here’s the basic syntax:

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

How this works:

• B{Is it valid?} defines a decision node with the question Is it valid?.

• The curly braces { } tell Mermaid to draw this as a diamond.

• From the decision node, the flow branches using labeled arrows: Yes goes to Proceed, No goes to Stop.

---

✅ Adding Conditions with Labels

The condition itself is shown as a label on the arrow:

B --|Yes|--> C
B --|No|--> D

• --|Yes|--> means: If Yes, go here.

• This makes your diagram easy to read — viewers immediately see how the process splits.

---

✅ Multiple Conditions

Decision nodes don’t have to be limited to two outcomes. You can branch into multiple paths if needed:

graph TD
  A[Start] --> B{Select Option}
  B --|Option 1|--> C[Path 1]
  B --|Option 2|--> D[Path 2]
  B --|Option 3|--> E[Path 3]

---

✅ Combining with Loops

Decision nodes often connect naturally to loops. For example, you can send an invalid option back to an earlier step:

graph TD
  A[Start] --> B{Is input valid?}
  B --|Yes|--> C[Continue]
  B --|No|--> A

• If the input is valid, move forward.

• If not, loop back to Start for a retry.

---

✅ Tips for Clear Decisions

• Keep your condition question short and clear — like Approved? or Retry?

• Always label the outgoing arrows so readers see what each path means.

• Use { } only for decision nodes — it keeps the diagram consistent and easy to read.

---

In short:

📌 Decision nodes help your flowchart show choices and conditions. 📌 Use { } for diamonds and labeled arrows for clear branches. This makes your diagrams easy to follow and closer to how real processes work.

---

3. Styling Nodes with style or classDef

When you create flowcharts with Mermaid, your diagrams will look clear and clean by default — but sometimes you’ll want to highlight important steps, group similar nodes, or make certain parts stand out visually. That’s where Mermaid’s styling options come in: the style and classDef keywords.

---

✅ Why Style Nodes?

Styling nodes helps you:

• Highlight critical steps (like errors or approvals).

• Show related nodes with the same color or border.

• Make diagrams more readable and professional.

Mermaid offers two main ways to customize nodes:

1. Inline style — style a single node directly.

2. Reusable classDef — define a style once and apply it to multiple nodes.

---

✅ Using style for a Single Node

The style keyword lets you apply CSS-like styles to one node at a time. Syntax:

style NodeID fill:#color,stroke:#color,stroke-width:value,color:#textcolor

Example:

```mermaid
graph TD
  A[Start] --> B[Process] --> C[End]
  style B fill:#f9f,stroke:#333,stroke-width:2px,color:#000
```

What this does:

• Fills node B with a light purple (#f9f).

• Gives it a dark border (#333).

• Sets the border width to 2px.

• Changes the text color inside to black (#000).

This is perfect when you just need to emphasize one specific step.

---

✅ Using classDef for Reusable Styles

When you want many nodes to share the same look, classDef is better. It works in two parts:

• classDef defines the style once.

• class applies it to one or more nodes.

Example:

```mermaid
graph TD
  A[Start] --> B[Process] --> C[End]
  classDef important fill:#f96,stroke:#333,stroke-width:2px,color:#000
  class B,C important
```

What this does:

• classDef important creates a style called important with an orange fill, dark border, and black text.

• class B,C important applies the important style to nodes B and C.

If you have many steps that need the same highlight, classDef saves time and keeps your diagram consistent.

---

✅ Common Styling Options

Here are a few CSS-like properties you can use:

Property	What it does
fill	Changes the node’s background color
stroke	Changes the border color
stroke-width	Sets how thick the border is
color	Changes the text color inside the node
stroke-dasharray	Makes borders dashed instead of solid

---

✅ Tips for Styling

• Keep your colors accessible: use good contrast for readability.

• Don’t overdo styling — a few colors are usually enough.

• Combine styling with subgraphs or labels to make complex diagrams easy to follow.

---

In short:

📌 Use style for quick, one-off highlights. 📌 Use classDef for clean, reusable styles across multiple nodes. This keeps your Mermaid diagrams clear, professional, and easy to update.

---