Mermaid 流程图：从基础语法到实战示例

flowchart TD
    %% 1. 全局样式定义
    classDef startEnd fill:#fff,stroke:#333,stroke-width:2px;
    classDef task fill:#e3f2fd,stroke:#1565c0,stroke-width:1px,rx:5,ry:5;
    classDef gateway fill:#fff3e0,stroke:#ef6c00,stroke-width:2px;
    classDef note fill:#f9f9f9,stroke:#666,stroke-width:1px,stroke-dasharray:5 5;

    %% 2. 开始节点
    Start((开始流程)):::startEnd --> S1

    %% 3. 步骤1：子图与任务
    subgraph S1 [1a. 主标题]
        direction LR
        Step1[步骤1概述]:::task
        Note1["详解步骤:<br/>- 内容1<br/>- 内容2"]:::note
        Step1 -.-> Note1
    end
    
    %% 4. 条件分支
    S1 --> GW1{分支是否符合?}:::gateway
    GW1 -- 是 --> End1((结束流程))
    GW1 -- 否 --> S2[进入下一步骤]

核心语法点讲解

子图（Subgraph）与布局方向

    subgraph S1 [1a. 主标题]
        direction LR
        ...
    end

• subgraph ID [标题]：定义子图，ID 用于外部连接，标题 显示在子图边框上。
• direction LR：设置子图内部的布局方向为从左到右（Left to Right）。如果不设置，默认是从上到下（TB）。这在并排显示“任务”和“备注”时非常有用。

样式定义与引用 (classDef)

classDef task fill:#e3f2fd,stroke:#1565c0,rx:5,ry:5;

• classDef 类名 样式属性：定义一个样式类。这里设置了背景色（fill）、边框色（stroke）以及圆角（rx, ry）。
• :::类名：在节点后使用 ::: 应用样式，例如 Step1[...]:::task。
• 注意：classDef 控制的是颜色、边框、圆角、虚线等外观样式，节点形状由节点定义语法决定（如 (( )) 为圆形、[ ] 为圆角矩形、{ } 为菱形），不能通过 classDef 的 shape 属性修改。

节点与形状定义

在 Mermaid 中，节点的形状由括号决定，节点 ID 和显示文本之间用空格隔开：

• Start ((开始流程))：双括号 () 表示圆形，常用于开始 / 结束节点。
• End ((流程结束))：双括号 () 表示圆形，结束节点，流程出口。
• Step1[步骤1概述]：方括号 [] 表示圆角矩形，常用于普通任务节点。
• Note1[“详解步骤”]：方括号 []，注释备注节点，用于补充说明、参数、注意事项，不代表业务执行步骤
• GW1{分支是否符合?}：花括号 {} 表示菱形，常用于条件判断（网关）。

更多常用节点形状速查：

• Step([文本])：体育场形（Stadium），两端为半圆。
• Sub([[文本]])：子程序形（Subroutine），两侧带竖线。
• DB[(数据库)]：圆柱形（Database），用于数据库节点。
• Circle((文本))：圆形，与双括号等价。
• Hex{{六边形}}：六边形，常用于步骤节点。
• Flag1>文本]：旗帜形 / 不对称矩形，常用于标识流程结束或输出。
• InOut[/输入输出/]：平行四边形，常用于输入 / 输出节点。
• Trap[/梯形\] 或 Trap[\梯形/]：梯形，上底或下底较长。

连线与流向

• -->：实线箭头，表示默认的流转方向。
• -.->：虚线箭头，在流程图中常用来连接“任务”和“备注/说明”，表示非主流程的补充信息。
• -- 文本 -->：在连线上添加说明文本，常用于条件分支（如 GW1 -- 是 --> End1）。

更多连线类型速查：

• ---：实线无箭头，表示普通连接或并列关系。
• -- 文本 ---：实线无箭头，并在线上显示说明文本。
• ==>：粗线箭头，常用于强调关键路径或重要流转。
• == 文本 ==>：粗线箭头并在线上显示说明文本。
• -. 文本 .->：虚线箭头并在线上显示说明文本。
• --x：以 x 结尾的箭头，可表示流程中断或终止。
• --o：以圆点结尾的连线，可表示关联关系。

进阶技巧与最佳实践

巧用 HTML 标签实现多行文本

• Mermaid 的节点文本默认是单行的。如果需要换行，可以使用
  标签。

节点 ID 的命名规范

• 虽然 Mermaid 较新版本支持中文作为节点 ID，但在复杂的流程图中，强烈建议使用英文或拼音作为 ID，将中文作为显示文本，如Step1，若存在渲染问题，可改成Step1a或全英文

“主流程+侧边备注”的排版设计

• 本笔记使用了 direction LR 让它们在子图内左右并排，并用虚线 -.-> 连接。这种“主流程在左，补充说明在右”的排版方式，能让复杂的业务表单字段说明变得非常清晰，完全不会干扰主流程的阅读视线

善用注释保留历史版本

• 在 Mermaid 中，使用 %% 可以进行单行注释，但本身无多行注释的方法。在迭代业务流程时，保留这些注释代码方便后续随时恢复或参考，是个非常好的习惯。

上一页vuepress框架学习笔记

下一页python上位机开发