这堂关于流程图 (Flowchart) 的课程。这是 Mermaid 中最常用、最基础也是功能最丰富的图表类型。掌握了它，你就掌握了 Mermaid 的半壁江山。我们将一步一步地学习，每个知识点都会拆解成最小的单元来讲解。强烈建议您打开 Mermaid 官方的在线编辑器 mermaid.live，一边学习一边亲手尝试下面的每一个小步骤。

---

第二部分：常用图表绘制

第3章：流程图 (Flowchart) - 最常用的图表

3.1 流程图声明与方向 (graph TD/TB/BT/RL/LR)

1. 核心概念

在绘制任何流程图之前，你必须先告诉 Mermaid 两件事：1. 我要画的是一个流程图 (graph)；2. 我希望这个图的整体走向是哪个方向。

第一步：声明图表类型

你的代码块的第一行，必须是 graph 这个关键字。

代码段

graph

第二步：定义图表方向

紧跟在 graph 关键字后面，你需要指定一个方向代码。

• TD 或 TB：Top to Down / Top to Bottom（从上到下）。这是默认的方向，如果你不写方向代码，Mermaid 就会使用这个。

• LR：Left to Right（从左到右）。

• BT：Bottom to Top（从下到上）。

• RL：Right to Left（从右到左）。

第三步：看一个“从上到下”的例子 (TD)

代码段

graph TD
    A --> B

这会渲染出一个 A 在上，B 在下，箭头朝下的图。

第四步：看一个“从左到右”的例子 (LR)

代码段

graph LR
    A --> B

这会渲染出一个 A 在左，B 在右，箭头朝右的图。

---

3.2 节点形状详解

为了让流程图的表达更清晰，我们可以为不同的节点（步骤）设置不同的形状，每种形状通常都有其约定俗成的含义。

3.2.1 矩形 ([text])

• 含义：通常表示一个标准的流程步骤或操作。

• 语法：id[显示文本]

• 示例：

  代码段

  graph TD
      step1[计算用户积分]
  

3.2.2 圆角矩形 ((text))

• 含义：通常用于表示流程的开始或结束。

• 语法：id(显示文本)

• 示例：

  代码段

  graph TD
      start_node(开始)
      end_node(结束)
  

3.2.3 体育场形 (([text]))

• 含义：形状像一个体育场的跑道，通常用于表示外部实体或子程序的入口/出口。

• 语法：id([显示文本])

• 示例：

  代码段

  graph TD
      step1([调用外部API])
  

3.2.4 子程序形 ([[text]])

• 含义：双边框的矩形，明确表示这是一个预定义的子流程或模块化的操作。

• 语法：id[[显示文本]]

• 示例：

  代码段

  graph TD
      step1[[执行用户认证子流程]]
  

3.2.5 圆柱形 ([(text)])

• 含义：通常用于表示数据库或数据存储。

• 语法：id[(显示文本)]

• 示例：

  代码段

  graph TD
      db[(用户数据库)]
  

3.2.6 圆形 (((text)))

• 含义：通常用于表示流程中的连接点或一个小型的、非核心的步骤。

• 语法：id((显示文本))

• 示例：

  代码段

  graph TD
      connector((C))
  

3.2.7 菱形/判断 ({text})

• 含义：非常重要，专门用于表示流程中的判断、决策或分支。

• 语法：id{显示文本}

• 示例：

  代码段

  graph TD
      decision{用户是否登录?}
  

  菱形通常会有多个出口，比如“是”和“否”。

3.2.8 六边形 ({{text}})

• 含义：通常用于表示流程中的准备步骤或初始化操作。

• 语法：id{{显示文本}}

• 示例：

  代码段

  graph TD
      prep_step{{准备系统环境}}
  

---

3.3 边的样式详解

边（连接线）的样式可以传达不同的流程关系。

3.3.1 无箭头 (---) 与带箭头 (-->)

第一步：回顾带箭头的边

--> 是标准的有向连接，表示流程从一个节点走向下一个节点。

代码段

graph TD
    A --> B

第二步：使用无箭头的边

--- 表示两个节点之间有关联，但没有明确的先后顺序或方向。

代码段

graph TD
    A --- B

3.3.2 粗线 (==>) 与虚线 (-.->)

第一步：使用粗线强调

==> 用于表示一条主要的或关键的流程路径。

代码段

graph TD
    Start ==> MainProcess

第二步：使用虚线表示次要流程

-.-> 用于表示次要的、可选的或参考性的流程。

代码段

graph TD
    A[执行主要任务] --> B[完成]
    A -.-> C[记录可选日志]

3.3.3 带文本的边

我们回顾并强化一下为边添加文本的语法，这在与菱形（判断）节点配合时尤其重要。

第一步：定义一个判断节点

代码段

graph TD
    A{用户余额是否充足?}

第二步：为判断的两个分支添加带文本的边

代码段

graph TD
    A{用户余额是否充足?} -- 是 --> B[扣款成功]
    A -- 否 --> C[提示余额不足]

这里的 -- 是 --> 和 -- 否 --> 让流程分支的含义一目了然。

3.3.4 链式连接与多节点连接 (A --> B & C --> D)

第一步：回顾链式连接

对于线性的流程，我们可以把连接写在同一行。

代码段

graph TD
    A --> B --> C

第二步：学习多节点连接

如果你想从一个节点，连接到多个不同的节点，可以使用 & 符号来简化代码。

传统写法:

代码段

graph TD
    A --> B
    A --> C

使用 & 的简洁写法:

代码段

graph TD
    A --> B & C

这两种写法渲染出来的图表是完全一样的。

---

3.4 子图 (Subgraphs)

当流程图变得复杂时，我们可以使用子图来将相关的节点进行分组和归类，让图表结构更清晰。

3.4.1 subgraph 关键字

第一步：学习子图的基本语法

代码段

graph TD
    subgraph "子图的标题"
        节点A
        节点B
    end

• subgraph 是开始的关键字。

• "子图的标题" 是显示在子图框顶部的文字，必须用引号包裹。

• end 是结束的关键字。

第二步：创建一个简单的子图

代码段

graph TD
    Start --> Phase1_A

    subgraph "第一阶段：用户验证"
        Phase1_A[输入用户名] --> Phase1_B[输入密码]
    end
    
    Phase1_B --> End

你会看到，“输入用户名”和“输入密码”两个节点被一个标题为“第一阶段：用户验证”的方框包围了起来。

3.4.2 嵌套子图

你可以在一个子图内部，再定义另一个子图。

代码段

graph TD
    subgraph "外部系统"
        subgraph "内部模块"
            A --> B
        end
    end

3.4.3 子图间的连接

连接子图内外的节点，或者不同子图之间的节点，非常简单：你只需要像平常一样，使用节点的ID进行连接即可。Mermaid会自动帮你画出跨越子图边界的连接线。

代码段

graph TD
    A[外部节点]

    subgraph "子图一"
        B --> C
    end

    subgraph "子图二"
        D --> E
    end

    # 连接外部节点与子图内节点
    A --> B

    # 连接两个不同子图内的节点
    C --> D

---

3.5 交互性

Mermaid图表可以不只是静态的图片，它还能增加一些交互功能。注意：这些功能是否生效，取决于你最终在哪里渲染和查看图表（例如，在官方在线编辑器中有效，但在导出的PNG图片中无效）。

3.5.1 为节点添加点击链接 (click nodeId "url")

第一步：学习 click 语法

click 节点ID "链接地址" "鼠标悬浮时的提示文字"

• "链接地址" 是点击后要跳转的URL。

• "鼠标悬浮时的提示文字" 是可选的。

第二步：创建一个可点击的节点

代码段

graph TD
    A[访问Mermaid官网]
    B[访问GitHub]

    click A "https://mermaid.js.org/" "跳转到 Mermaid 官方网站"
    click B "https://github.com"

在可交互的环境中渲染此图，点击节点A就会打开Mermaid官网。

3.5.2 为节点添加工具提示 ("tooltip")

工具提示（Tooltip）是当鼠标悬停在一个节点上时，弹出的一个说明性文字框。这对于在不使图表变得混乱的前提下，为某个步骤提供更详细的解释，非常有用。

第一步：使用 click 命令实现

在流程图中，添加工具提示的主要方式，就是通过我们刚刚学过的 click 命令的第三个参数。

第二步：创建一个只带提示的“假链接”

如果你只想让节点有提示，而不想让它能被点击跳转，可以把链接地址设置为一个无意义的符号，比如 #。

代码段

graph TD
    A[部署到生产环境]
    B[执行数据库迁移]

    click A "#" "这一步需要主管审批，会自动触发CI/CD流程"
    click B "#" "这是一个高危操作，执行前请务必备份数据库！"

现在，当你在渲染出的图上将鼠标悬停在节点A或B上时，就会看到我们定义的详细提示信息，但点击它不会有任何跳转。