如何在Mermaid流程图中添加分组或轮廓框

Mermaid 里实现带标题的分组框核心是使用 subgraph 关键字，它可以将指定的流程图步骤包裹在带标题的轮廓框内，完全满足你要分组的需求。

基础用法示例 #

下面是一个简单的双分组流程图示例，你可以直接复用这个结构：

flowchart LR
    subgraph 用户验证流程
        A[输入账号密码] --> B[验证身份]
        B --> C{验证通过?}
    end
    subgraph 业务处理流程
        C -->|是| D[加载用户数据]
        D --> E[展示主页]
        C -->|否| F[提示错误信息]
    end

自定义分组框样式（可选） #

如果需要调整分组框的颜色、边框等样式，可以配合 style 命令实现：

flowchart LR
    subgraph 用户验证流程
        A[输入账号密码] --> B[验证身份]
        B --> C{验证通过?}
    end
    subgraph 业务处理流程
        C -->|是| D[加载用户数据]
        D --> E[展示主页]
        C -->|否| F[提示错误信息]
    end
    style 用户验证流程 fill:#f5f0ff,stroke:#6366f1,stroke-width:2px
    style 业务处理流程 fill:#f0fdf4,stroke:#16a34a,stroke-width:2px

关键说明 #

• subgraph 后面紧跟的文本就是分组的标题，会显示在框的顶部
• 每个分组的所有步骤都要放在 subgraph 和对应的 end 之间
• 分组之间的节点可以正常建立连线，不受分组边界影响

内容的提问来源于stack exchange，提问作者KZiovas