如何正确使用Mermaid流程图子图语法？

Question

**问题描述：** 在使用Mermaid绘制流程图时，如何正确应用子图（subgraph）语法来组织和嵌套多个流程节点？实际应用中常遇到子图无法正确显示、节点归属错误或语法报错等问题。请结合具体代码示例，说明Mermaid中子图的正确语法结构、节点嵌套规则以及常见错误的排查方法。

Answer 1

一、Mermaid子图（subgraph）语法基础

Mermaid 是一种基于文本的图表绘制工具，支持流程图、时序图、甘特图等多种图形类型。在流程图中，使用 subgraph 可以将多个节点组织到一个逻辑块中，提升图表的可读性和结构清晰度。

子图语法的基本结构如下：

graph TD
    subgraph 子图名称
        节点A --> 节点B
    end

例如，下面是一个简单的流程图，包含两个子图：

graph TD
    subgraph 用户流程
        A[注册] --> B[登录]
    end
    subgraph 管理流程
        C[审核] --> D[发布]
    end
    B --> C

二、子图嵌套与层级结构

Mermaid 支持子图的嵌套使用，允许在一个子图内部再定义另一个子图，从而构建更复杂的结构。

示例代码如下：

graph TD
    subgraph 主流程
        A[开始] --> B[处理]
        subgraph 子流程
            B --> C[子步骤1]
            C --> D[子步骤2]
        end
        B --> E[结束]
    end

该示例中，子流程被嵌套在主流程子图中，节点C和D属于子流程，B同时连接主流程和子流程。这种结构适用于展示模块化或分层的业务流程。

三、常见错误与排查方法

在使用子图时，常见的错误包括：

• 子图未正确闭合（缺少 end）
• 节点未正确缩进，导致归属错误
• 子图名称使用非法字符或未加引号
• 子图内部节点连接错误

以下是一个错误示例及其修复方法：

错误代码	问题描述	修复代码
graph TD subgraph 流程1 A --> B C --> D	子图未闭合，C节点未归属任何子图	graph TD subgraph 流程1 A --> B end C --> D

四、子图样式与视觉优化

Mermaid 允许对子图应用样式，以增强可视化效果。可以通过 classDef 定义样式类，并通过 class 指令应用。

示例：

graph TD
    classDef blue fill:#92c9ff,stroke:#333;
    subgraph 用户流程
        A[注册] --> B[登录]
    end
    class 用户流程 blue

该代码为“用户流程”子图添加了蓝色背景样式，有助于区分不同的逻辑模块。

Mermaid还支持使用CSS样式进行更高级的定制，适用于需要专业图表展示的场景。