代码绘制流程图

使用 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：定义节点

输入 → 处理 → 判断 → 输出

---

Step 3：连接流程

A --> B --> C

---

Step 4：加入条件

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

---

六、实战经验总结

✅ 1. 节点命名要清晰

❌ 不推荐：

处理1、处理2

✅ 推荐：

计算md5
写入全量表

---

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

❌：

md5判断

✅：

是否存在md5映射？

---

✅ 3. 控制复杂度

• 超过 15 个节点 → 建议拆分子流程

• 可以按模块划分：

  • 数据层
  • 计算层
  • 存储层

---

✅ 4. 善用注释

%% 第一层过滤

👉 让代码更易读

---

七、常见使用场景

Mermaid 非常适合：

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

---

八、工具推荐

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

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

---

九、总结

Mermaid 的核心价值在于：

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

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

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

---

十、后续进阶

可以进一步学习：

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

---

👉 一句话总结：

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

---

上述流程图代码

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

使用步骤：

1. 打开网站
2. 左边写代码
3. 右边自动生成图

示例：
开始
处理
结束

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

---

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

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

1. Typora

👉 Typora

步骤：

1. 打开设置
2. 勾选：Enable Mermaid
3. 写代码：

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

👉 自动渲染

---

2. Obsidian

👉 Obsidian

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

---

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

✅ 方式3：npm 安装

适合你做：

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

---

1. 安装

npm install mermaid

---

2. 使用（JS 初始化）

import mermaid from 'mermaid';

mermaid.initialize({
  startOnLoad: true
});

---

3. HTML 写法

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

👉 页面加载自动渲染

---

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

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

安装：

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

---

使用：

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

---