代码绘制流程图

使用 Mermaid 绘制流程图（实战指南）

一、背景

在日常开发和数据工程中，我们经常需要绘制流程图来描述：

数据处理流程
系统架构
任务调度逻辑
算法执行路径

传统工具（如 Visio、Draw.io）虽然可视化强，但存在：

不易维护（改图麻烦）
不易版本管理
无法与代码同步

因此推荐使用 Mermaid ------一种"用代码画图"的轻量级工具。

二、Mermaid 是什么？

Mermaid 是一种基于文本的图表描述语言，可以直接嵌入：

Markdown
GitHub / GitLab
Notion / 飞书
各类文档系统

👉 核心特点：

用代码描述图
自动渲染
易维护、可版本控制

三、基础语法

1. 定义流程图方向

说明：

flowchart：表示流程图
TD（Top Down）：从上到下

常见方向：

写法	含义
TD	上 → 下
LR	左 → 右
RL	右 → 左

2. 定义节点（Node）

渲染错误: Mermaid 渲染失败: No diagram type detected matching given configuration for text: A[开始] B(结束) C{是否成功}

说明：

写法	形状	用途
`[ ]`	矩形	普通流程
`( )`	圆角	开始/结束
`{ }`	菱形	条件判断

3. 定义连接关系（Edge）

复制代码

A --> B

表示：

👉 A 流向 B

4. 条件分支

复制代码

B -->|是| C
B -->|否| D

表示：

条件为"是" → C
条件为"否" → D

5. 分支汇合

复制代码

C --> E
D --> E

👉 多条路径汇合到同一节点

6. 注释

复制代码

%% 这是注释

👉 不会显示在图中

四、完整示例（数据过滤流程图）

下面是一个典型的数据处理流程（两层过滤 + md5去重）：
存量数据
增量数据
有
无
原始数据输入
数据类型判断
处理历史数据
处理新增数据
梳理对应关系
直接进入处理
是否存在md5映射
直接使用映射
全量表补齐
第一层过滤
基于raw表过滤
UUID / md5筛选
进入管线过滤
基于audio md5去重
计算md5
维护md5表
写入全量表
去重
验证
写入正式表
输出结果

五、绘制流程图的通用步骤

绘制一个流程图，本质上可以拆解为 4 步：

Step 1：梳理流程

先明确：

输入是什么
有哪些处理步骤
是否有分支
是否有汇合

Step 2：定义节点

text 复制代码

输入 → 处理 → 判断 → 输出

Step 3：连接流程

text 复制代码

A --> B --> C

Step 4：加入条件

text 复制代码

B -->|条件1| C
B -->|条件2| D

六、实战经验总结

✅ 1. 节点命名要清晰

❌ 不推荐：

text 复制代码

处理1、处理2

✅ 推荐：

text 复制代码

计算md5
写入全量表

✅ 2. 判断节点要用"问题形式"

❌：

text 复制代码

md5判断

✅：

text 复制代码

是否存在md5映射？

✅ 3. 控制复杂度

超过 15 个节点 → 建议拆分子流程
可以按模块划分：
- 数据层
- 计算层
- 存储层

✅ 4. 善用注释

复制代码

%% 第一层过滤

👉 让代码更易读

七、常见使用场景

Mermaid 非常适合：

数据工程流程图
ETL 流程
机器学习 pipeline
系统架构设计
面试/汇报文档

八、工具推荐

你可以在以下环境直接使用 Mermaid：

Markdown 编辑器
GitHub（原生支持）
飞书文档
Notion
在线编辑器（Mermaid Live）

九、总结

Mermaid 的核心价值在于：

👉 用代码描述流程图，实现"图即代码"

掌握以下 4 个语法即可应对 90% 场景：

text 复制代码

A[节点]
B{判断}
A --> B
A -->|条件| B

十、后续进阶

可以进一步学习：

子图（subgraph）
样式（颜色、边框）
时序图（sequenceDiagram）
架构图（C4 模型）

👉 一句话总结：

Mermaid = 用代码画图，让流程图变得可维护、可复用、可工程化

上述流程图代码

sh 复制代码

flowchart TD

A[原始数据输入] --> B{数据类型判断}

B -->|存量数据| C[处理一期/二期数据]
B -->|增量数据| D[方言数据接入]

C --> E[梳理历史数据对应关系]
D --> F[直接构建增量处理流程]

E --> G{是否存在md5对应关系}
G -->|有| H[直接关联raw表md5 and audio_md5]
G -->|无| I[用全量raw表覆盖obj_md5表]

H --> J[进入第一层过滤]
I --> J
F --> J

%% 第一层过滤
J --> K[第一层过滤：raw表过滤]
K --> L[基于UUID and audio_md5筛选]

L --> M[进入第二层过滤]

%% 第二层过滤
M --> N[第二层过滤：管线侧过滤]
N --> O[基于audio_md5去重]

%% md5处理
O --> P[转桶计算audio_md5]
P --> Q[统一维护md5表]

%% 数据写入
Q --> R[写入全量表]
R --> S[UUID去重]
S --> T[新表验证]
T --> U[写入原始表]

%% 输出
U --> V[最终去重数据输出]

%% 特殊分支
I --> W[维护无对应关系数据表]
W --> N

很好，这一块我帮你写一份实用 + 分场景的安装与使用指南，你可以直接补到博客里（也适合你平时工作用）👇

🚀 Mermaid 怎么安装和使用（全场景指南）

一、先说结论（你其实可能不需要安装）

👉 Mermaid 很多情况下"无需安装"！

你可以直接在这些地方用：

GitHub / GitLab（原生支持）
飞书文档
Notion
Markdown 编辑器（Typora、Obsidian）

🧭 二、最简单用法（推荐）

✅ 方式1：在线使用（0安装）

直接用官方在线编辑器：

👉 Mermaid Live Editor

使用步骤：

打开网站
左边写代码
右边自动生成图

示例：
开始
处理
结束

复制代码

flowchart TD
A[开始] --> B[处理]
B --> C[结束]

🖥️ 三、本地使用（开发常用）

✅ 方式2：Markdown 中使用（最推荐）

1. Typora

👉 Typora

步骤：

打开设置
勾选：Enable Mermaid
写代码：

markdown 复制代码

```mermaid
flowchart TD
A --> B
```

👉 自动渲染

2. Obsidian

👉 Obsidian

👉 默认支持 Mermaid，直接写即可

⚙️ 四、前端项目中使用（工程化）

✅ 方式3：npm 安装

适合你做：

数据平台
可视化系统
前端项目

1. 安装

bash 复制代码

npm install mermaid

2. 使用（JS 初始化）

javascript 复制代码

import mermaid from 'mermaid';

mermaid.initialize({
  startOnLoad: true
});

3. HTML 写法

html 复制代码

<div class="mermaid">
flowchart TD
A --> B
</div>

👉 页面加载自动渲染

🧪 五、命令行使用（生成图片）

✅ 方式4：CLI 工具（生成 PNG / SVG）

安装：

bash 复制代码

npm install -g @mermaid-js/mermaid-cli

使用：

bash 复制代码

mmdc -i input.mmd -o output.png

👉 说明：

input.mmd：你的流程图代码
output.png：生成图片

🧱 六、不同场景推荐方案（重点）

场景	推荐方式
写博客	Markdown（Typora / Obsidian）
写文档	飞书 / Notion
画图临时用	Mermaid Live Editor
做系统开发	npm 引入
生成图片	CLI

⚠️ 七、常见问题

❓1：为什么不显示？

原因：

没启用 Mermaid
Markdown 工具不支持
语法写错

❓2：中文乱码？

解决：

使用 UTF-8
避免特殊符号

❓3：复杂图太乱？

建议：

拆子流程（subgraph）
改用 LR（横向）
分层设计

🧠 八、你当前场景建议（非常重要）

你现在是做：

👉 数据处理 / pipeline / SQL / 系统流程

我建议你：

⭐ 最优组合：

写方案 → Typora / 飞书
画图 → Mermaid
汇报 → 导出 PNG（CLI）

🎯 九、一句话总结

👉 Mermaid 不一定要安装，用 Markdown 就能直接画流程图；需要工程化再用 npm / CLI