流程图：Subgraph 拆图

简介 / Introduction

流程图（Flowchart）常用于表达业务流程。当步骤较多时，用 Subgraph 将相关节点归为一组，能让图表层次更清晰、阅读体验更好。本文演示 PlantUML 和 Mermaid 两种引擎的 subgraph 写法，并做简要对比。

PlantUML 版

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

start
partition "早餐" {
  :准备食材;
  :烹饪;
  :装盘;
}
partition "通勤" {
  :出门;
  :乘坐地铁;
  :到达公司;
}
stop
@enduml

PlantUML 中 partition 关键字用于划分功能区块，背景色、字体颜色均可通过 skinparam 自定义。

Mermaid 版

flowchart TD
    Start([开始]) --> Breakfast
    subgraph 早餐
        Breakfast[准备食材] --> Cook[烹饪]
        Cook --> Plate[装盘]
    end
    Plate --> Commute
    subgraph 通勤
        Commute[出门] --> Metro[乘坐地铁]
        Metro --> Office[到达公司]
    end
    Office --> End([结束])

Mermaid 使用 subgraph ID[显示文本] 语法定义区块，ID 用于在连接线中引用，区块内的节点和连接都写在 subgraph ... end 之间。

对比 / Side-by-side

特性	PlantUML `partition`	Mermaid `subgraph`
关键字	`partition "标题"`	`subgraph ID[标题]`
区块 ID	无需 ID	必须有唯一 ID
背景色	`skinparam partitionBackgroundColor`	`style subgraph fill` 等
节点引用	直接写节点名	通过 ID 引用
连接线	直接写节点名	`节点ID --> 节点ID`

小结 / Wrap-up

PlantUML 的 partition 更简洁，适合纯文本驱动的场景；Mermaid 的 subgraph 显式声明 ID，连接线更灵活，适合需要引用区块内节点的复杂流程。两者都能有效组织大型流程图，建议根据团队工具链选择。