Flowcharts: Subgraph Grouping

简介 / Introduction

Flowcharts describe business or system processes. When a diagram grows large, grouping related steps into subgraph blocks makes it easier to read and maintain. This post shows how to write subgraphs in both PlantUML and Mermaid, then compares the two approaches.

PlantUML 版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@startuml
skinparam backgroundColor #FEFEFE
skinparam participantBackgroundColor #F0F4FF
skinparam partitionBackgroundColor #E8F0FE
skinparam partitionFontColor #1A1A1A

start
partition "Breakfast" {
  :Prepare ingredients;
  :Cook;
  :Plate;
}
partition "Commute" {
  :Leave home;
  :Take the subway;
  :Arrive at office;
}
stop
@enduml

PlantUML uses the partition keyword to define functional blocks. Background colors and font styles are customizable via skinparam.

Mermaid 版

1
2
3
4
5
6
7
8
9
10
11
12

flowchart TD
    Start([Start]) --> Breakfast
    subgraph 早餐
        Breakfast[Prepare ingredients] --> Cook[Cook]
        Cook --> Plate[Plate]
    end
    Plate --> Commute
    subgraph 通勤
        Commute[Leave home] --> Metro[Take the subway]
        Metro --> Office[Arrive at office]
    end
    Office --> End([End])

Mermaid uses subgraph ID[Display Text] to define a block. The ID is referenced in connections, and all internal nodes and edges live between subgraph ... end.

对比 / Side-by-side

小结 / Wrap-up

PlantUML’s partition is more concise and works well for text-driven diagrams. Mermaid’s subgraph requires explicit IDs, making edge references more flexible for complex flows. Both effectively organize large flowcharts — choose based on your team’s toolchain.