绘制流程图

字数统计: 4.3k   |   阅读时长≈ 16 分钟

绘制流程图笔记，用 mermaid 语法可以用代码生成流程图，完美。

流程图基础

内容主要参考网址1，详细见其网址。

一个简单的流程图，使用流程、判定、开始（结束）就够了。我看开始和结束很多时候都会省略（因为这两个内容往往只是写 “开始” / “结束”、“Start” / “End”，表示流程开始和结束，本身没有含义）。

流程元素不必说了，不过我感觉就是将其从直角矩形改为圆角矩形更好看一点（4个角改为弧形）。

判定元素的结构

判定元素可以作为 IF 判断，如下图（图来自网址1）

循环结构：若判定为是，继续执行主流程，若判定为否，重复执行上一步流程。直到判定为是，否则一直重复执行A，然后判定。

回形结构，是循环结构的变体（把“是”和“否”的流程对换），意思是一直执行A直到判定为否。

固定规范

元素有固定的表达，如何去布置这些元素也有一套规范。

  • 主流程用直线表达。如果结构是竖型就是一条直线，横型就是一条横线。不要歪七倒八。符合从左到右，从上到下的顺序。

  • 并行的操作关系要对齐（见上图判断结构）。

  • 单入单出。为避免混乱和歧义，同一个流程只有一个箭头进入，一个箭头出去。（只有判定框可以有多个箭头出去。）

  • 判定流程中，是/否的位置取决于哪方处于主流程上。

    通常“是/Y”位于直线上。

    但有时候“否/N”才表达主要流程。例如这张疫情隔离说明图。

  • 一个流程只有一个开始。可以有一个结束或者多个结束，或者省略结束。

  • 同一路径符（线条）只有一个箭头。且避免与其他路径交叉。

  • 字号图形大小一致。

Excel 绘制流程图

就是从“插入” - “性状” 里选择需要的元素，需要这里箭头只有上下左右的方向，不能倾斜（转方向，比如指向右下角）。所以要采用线条这里的箭头，在“性状格式” - “形状轮廓” - “粗细” 这里可以调节线条的粗细，调大一点这个值可以做到和下面的箭头差不多的效果。

弄完以后，选中整个流程图的元素，然后点击“性状格式“的组合，将其组合为一个元素。

将其保存为图片的教程见网页2，过程如下

感觉效果不太行

文字转流程图 - Mermaid 语法

Mermaid 语法是一种基于文本的、声明式的图表描述语言，它的设计目标是让用户像写 Markdown 一样，用简单直观的文本代码自动生成流程图、序列图、甘特图、类图等各种图表。你不需要拖拽图形或调整布局，只需专注于描述图表元素之间的逻辑关系，Mermaid 引擎就会自动渲染出专业美观的矢量图。

快速了解

🎯 核心特点

  • 纯文本：所有图表定义都写在纯文本文件中（如 .md 文件或 Mermaid Live 编辑器）。
  • 自动排版：无需手动对齐或连线，引擎根据代码自动计算布局。
  • 版本控制友好：文本格式便于 Git 跟踪差异、协作和代码审查。
  • 跨平台：GitHub、GitLab、Notion、Obsidian 等众多平台原生支持渲染 Mermaid 代码块。
  • 多种图表类型：支持流程图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、思维导图等数十种图表。

📝 教程

下面是一段生成流程图的 Mermaid 代码及其效果（文字描述）：

1
2
3
4
5
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[进入主页]
    B -->|否| D[跳转登录页]
    D --> A

盯着它看 30 秒，建立直觉：

  • graph TD= “我要画流程图，方向从上到下”
  • A[文字]= 一个方框，显示文字“开始”。
  • A --> B= 箭头
  • B{是否登录?}= 菱形判断框
  • |是|= 箭头上的标签

图的方向除了 TD ，还有下面的类型（这里 TB 和 TD 是一样的，均是从上到下）

写法 缩写全称 中文直觉 箭头主方向
TB Top → Bottom 上 → 下 ↓
TD Top → Down 上 → 下 ↓
BT Bottom → Top 下 → 上 ↑
LR Left → Right 左 → 右 →
RL Right → Left 右 → 左 ←

节点

这里的 A、B、C在 Mermaid 里不是什么神秘代号，就是"节点 ID"（node id）——你可以理解为给每个框起的"变量名"，用来在代码里引用它、连线它。

记住下面的表格，这是常用的节点形状。

写法 形状 含义
id1[文字] □ 矩形 普通处理步骤
id1(文字) ⬜ 圆角矩形 开始 / 结束
id1{文字} ◆ 菱形 判断 / 条件
id1((文字)) ○ 圆形 连接点 / 锚点
id1[/文字/] ▱ 平行四边形 输入 / 输出
id1([文字]) ⬜ 圆角矩形 也是开始/结束（另一种写法）

边(箭头和线)

基本语法如下，基本上用的是--> 。

线型 有箭头 无箭头 读法
实线 --> --- 普通依赖
虚线 -.-> -.- 辅助/参考关系
粗线 ==> === 强调主流程

为连接线添加文本标签，语法如下

语法 类型 示例
-- 文字 --> 实线箭头 + 文本 A – 是 --> B
-- 文字 --- 无箭头实线 + 文本 A – 否 — B
== 文字 ==> 粗线 + 文本 A == 确认 ==> B
-. 文字 .-> 虚线 + 文本 A -. 可选 .-> B

另一种写法是如下（不推荐，不如第一种可读性强）

1
2
flowchart LR
    A-->|文本|B

边的等级

流程图中的每个节点最终在呈现图中分配到一个等级，即垂直或横向水平（根据流程图的定向），基于与其链接的节点。默认情况下，链接可以跨越任意数量的等级，但您可以要求任何链接比其他链接更长，通过在链接定义中添加额外的破折号。

在下面的例子中，链接从节点 B 到节点 E 添加了两个额外的破折号，因此它跨度比常规链接多两个等级：

1
2
3
4
5
6
flowchart TD
    A[开始] --> B{是否是?}
    B -->|是| C[好的]
    C --> D[重新考虑]
    D --> B
    B ---->|否| E[结束]

当链接标签写在链接的中间时，额外的破折号必须添加在链接的右侧。以下示例等同于前一个示例：

1
2
3
4
5
6
flowchart TD
    A[开始] --> B{是否是?}
    B -- 是 --> C[好的]
    C --> D[重新考虑]
    D --> B
    B -- 否 ----> E[结束]

对于虚线或粗线链接，需要添加的字符是等号或点，如下表所示：

长度 1 2 3
正常 --- ---- -----
带箭头正常 --> ---> ---->
粗线 === ==== =====
带箭头的粗线 ==> ===> ====>
虚线 -.- -..- -...-
带箭头的虚线 -.-> -..-> -...->

子图

语法为，第一行 subgraph 后面是标题（如果有空格，要使用方括号包裹，如[子图标题]），会显示在子图上方中央位置。中间是图画的内容

1
2
3
subgraph title
    graph definition
end

示例为

1
2
3
4
5
6
7
8
9
10
11
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

子图的一个强大特性是可以拥有完全独立于主流程的内部布局方向。你可以通过在子图内部声明 direction 来覆盖外层的布局设定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

注意：如果子图的任何节点与外部链接，子图方向将被忽略。相反，子图将继承父图的方向：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ 这些子图是相同的，只是在于他们的链接：

    %% 链接到subgraph1: subgraph1的方向得以保持
    outside --> subgraph1
    %% 链接在subgraph2内：
    %% subgraph2继承了顶层图的方向（LR）
    outside ---> top2

子图嵌套：子图可以互相嵌套，形成多层级的结构，帮助表达更复杂的逻辑。这里就不示例，感觉一般用不到。

注释

可以在流程图中输入注释，解析器将忽略这些注释。注释需要单独占一行，并且必须以%%（双百分号）开头。注释内容从注释开始到下一个换行符之间的任何文本都将被视为注释，包括任何流程语法。

样式和类

略，用到再说

关于空格

节点和链接之间允许单个空格。但是，节点与其文本之间以及链接与其文本之间不得存在空格。图表边缘的新声明如下所示，该声明也与旧的图表边缘声明有效。

这里区分了三种情况：

✅ 允许的情况：节点和链接之间可以有1个空格

  • 节点 指的是像 A、B 这样的标识符。
  • 链接 指的是箭头符号如 -->、---、==> 等。
  • 例子：
    A --> B （A 和 --> 之间有一个空格，--> 和 B 之间也有一个空格）
    这是有效的，也是目前最常见的写法。

注意：“允许单个空格”通常意味着可以没有空格，也可以有一个空格，但不能有多个连续空格（虽然多个空格一般也会被忽略，但官方建议只用0或1个）。

❌ 不允许的情况：节点与其文本之间不得有空格

这里“文本”指的是写在 [ ] 或 ( ) 等括号内的节点显示标签。

  • 正确写法：A[这是一个节点] —— A 和 [ 之间没有空格。
  • 错误写法：A [这是一个节点] —— 插入空格会导致解析错误，Mermaid 会把 A 和后面的部分当作两个东西。

但是有一个特例，就是链接与其文本：以 --文本--> 这种写法为例，-- 和 文本 之间是必须有一个空格的，所以这里“不得存在空格”似乎矛盾。实际上 Mermaid 语法有两种添加文本的方式：

  1. -- 文本 -->（文本前后各有一个空格）
  2. -->|文本|（竖线内无空格）

📝 实际代码

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
flowchart TD
    %% --- 左侧分支：表型数据处理 ---
    subgraph Phenotype_Process [表型数据预处理]
        direction TB
        P1[表型数据] --> P2[剔除缺失值]
        P2 --> P3[描述性统计<br/>正态性检验]
    end

    %% --- 右侧分支：基因型数据处理 ---
    subgraph Genotype_Process [基因型数据预处理]
        direction TB
        G1[基因型数据] --> G2[质控]
        G2 --> G3[填充]
        
        %% 这里分叉：填充之后同时指向两个方向
        G3 --> G4[群体结构分析]
        G3 --> G5[亲缘关系矩阵]
    end

    %% --- 底部汇合与输出 ---
    %% 注意：这里用 P3 和 G4 作为汇聚点
    P3 --> GWAS
    G4 --> GWAS
    
    GWAS[全基因组关联分析] --> LOC[候选基因定位]

    %% --- 样式设置 (可选，为了让图更好看) ---
    classDef default fill:#4285F4,stroke:#333,stroke-width:2px,color:#fff;
    classDef subgraphStyle fill:#E8F0FE,stroke:#4285F4,stroke-dasharray: 5 5;
    
    class P1,P2,P3,G1,G2,G3,G4,G5,GWAS,LOC default;
    class Phenotype_Process,Genotype_Process subgraphStyle;

显示效果如下

代码解析如下：

  • 文本框内<br/> （写成<br> 更符合 HTML 规范 ）实现了节点内的文本换行。
    • 这种 HTML 语法能生效的关键在于Mermaid 有没有把这个节点文本当 HTML 解析，还是当纯文本。
    • 因此，要让 <br/> 生效，你需要将配置 securityLevel 设置为 loose（宽松），明确告诉 Mermaid：“请允许我使用 HTML 标签来增强图表效果”。大多数现代浏览器 / mermaid.live 网址都是这个设置
  • 注意，这里是子图的节点与外部链接，因此这里子图方向将被忽略。

样式设置解析如下

1
2
3
4
5
6
%% --- 样式设置 (可选，为了让图更好看) ---
classDef default fill:#4285F4,stroke:#333,stroke-width:2px,color:#fff;
classDef subgraphStyle fill:#E8F0FE,stroke:#4285F4,stroke-dasharray: 5 5;

class P1,P2,P3,G1,G2,G3,G4,G5,GWAS,LOC default;
class Phenotype_Process,Genotype_Process subgraphStyle;

语法说明

语法 含义
classDef 名字 样式 定义一个"样式模板"（像CSS类）
fill:/ stroke:/ color: 填充色 / 边框色 / 文字色
stroke-dasharray: 5 5 虚线边框（让子图框变成点划线）
class A,B,C 名字 把样式模板应用到一批节点

内容说明

  • classDef default：定义名为 default 的样式类。
    • 蓝色填充（#4285F4），深灰边框 2px，文字白色。
  • classDef subgraphStyle：定义子图容器样式。
    • 浅蓝填充（#E8F0FE），蓝色实线边框，虚线风格（stroke-dasharray: 5 5，，让边框线变成"画5单位、空5单位"循环的标准等距虚线，这里的单位应该默认是像素）。
  • class 节点列表 default：将列出的所有节点（P1…LOC）应用 default 样式。
  • class 子图ID subgraphStyle：将两个子图的容器（边框和背景）应用虚线浅蓝样式。

📚 学习资源

总之，Mermaid 语法就是用一种接近自然语言的简单规则来描述图表，让非设计师也能快速生成清晰、可维护的图表。如果你写过 Markdown 或 Python 的缩进式代码，上手 Mermaid 会非常快。

Mermaid官网介绍

官方网址是英文，我还是在中文网站（网址3）先看中文吧。

图表类型

这里是给出了所有的图表类型。我目前除了流程图，其他都用不到。

流程图 - Flowchart

1
2
3
4
5
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

序列图 - Sequence diagram

描述谁先说话、谁回应、消息按什么顺序飞：

1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

流程图-基本语法

感觉太乱了，放个网址在这里。其实上面的教程我基本上写完了，这里只是放下网址方便后面有需要再查找。

中文：https://docs.min2k.com/zh/mermaid/syntax/flowchart.html

英文：https://mermaid.js.org/syntax/flowchart.html

网页使用Mermaid语法

它的原理很简单：核心就是一个JavaScript库，你只需在HTML中引入这个库，并把你写好的Mermaid代码放进 <pre class="mermaid"> 这样的标签里，图表在页面加载时就会被自动渲染出来。

1. 引入Mermaid

在HTML文件的<body>标签末尾附近，添加以下<script>代码块：

1
2
3
4
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

2. 放置图表代码

在你希望图表出现的位置，用带有class="mermaid"的<pre>或<div>标签包裹你的Mermaid代码即可：

1
2
3
4
5
6
<pre class="mermaid">
    graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
</pre>

<pre> 是 HTML 中的一个标签，全称是 Preformatted Text（预格式化文本）。它的核心作用是保留你在代码中写入的所有空格、制表符和换行，并以等宽字体显示内容。通常是用来显示代码或预排文字。

⚙️ 额外配置

mermaid.initialize({ startOnLoad: true })这行代码是初始化图表的。你还可以在里面进行自定义，比如使用以下配置来开启一个更严格但也更安全（允许节点内的HTML标签）的渲染模式：

1
2
3
4
5
6
7
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ 
        startOnLoad: true, 
        securityLevel: 'loose' 
    });
</script>
  • startOnLoad: true ： 含义：页面加载完成后自动开始渲染所有带有 class="mermaid" 的元素（这是默认值，可以不用写）。如果设为 false，则需要自己调用 mermaid.run() 或 mermaid.contentLoaded() 来触发渲染。
  • securityLevel: 'loose' ： 控制Mermaid的安全策略，决定图表中的文本是否可以包含HTML标签。
    • 'strict'（默认）：禁用图表文本内的HTML标签（如 <br>、<b>），防止XSS攻击。
    • 'loose'：允许使用HTML标签和更丰富的文本格式（比如换行、加粗、字体颜色等）。
    • 'sandbox'：最严格的安全级别，将所有内容放到沙盒中处理，基本禁用HTML渲染。

最小完整示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
  <body>
    <pre class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
    </pre>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    </script>
  </body>
</html>

参考文献

  1. https://zhuanlan.zhihu.com/p/115821818
  2. https://blog.csdn.net/qq_36761831/article/details/83387377
  3. https://docs.min2k.com/zh/mermaid/intro/
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2019-2026 Vincere Zhou
  • 访问人数: | 浏览次数:

请我喝杯茶吧~

支付宝
微信