AI帮你画流程图？是的，秒出图和代码！

嘿，各位技术大佬、文档达人、效率控们！

还在为画流程图抓狂吗？拖拽半天对不齐，修改一次愁半天？截图粘贴到文档，模糊不清还难管理？

现在，想象一下： 你只需用几句话描述你的流程，AI 就能自动帮你生成专业、美观的流程图代码！ 几秒钟，从想法到可视化！

看这个例子：我想描述一下经典的 TCP 三次握手过程…

(你的文字描述)
1. 客户端发 SYN -> 服务端…
2. 服务端回 SYN+ACK -> 客户端…
3. 客户端发 ACK -> 服务端…

然后，把这段描述丢给 AI，让它生成 Mermaid 代码…

sequenceDiagram
    participant Client
    participant Server

    Note over Client,Server: TCP 三次握手开始
    Client->>Server: SYN (SEQ=x)
    activate Server
    Note right of Client: 客户端进入 SYN_SEND 状态
    Server-->>Client: SYN+ACK (SEQ=y, ACK=x+1)
    deactivate Server
    activate Client
    Note left of Server: 服务端进入 SYN_RECV 状态
    Client->>Server: ACK (ACK=y+1)
    deactivate Client
    Note over Client,Server: 连接建立 (ESTABLISHED 状态)

最后，把这段代码放到支持的环境里（比如在线编辑器或 Markdown 工具），Boom！ 专业时序图立刻呈现：

是不是很神奇？这种 “让 AI 写代码画图” 的黑科技，背后就是我们今天要介绍的主角—— Mermaid！

本文你将收获：

AI 绘图实战： 如何指挥 AI，让它为你生成 Mermaid 图表代码？
揭秘背后魔法： 什么是 Mermaid？它为何如此强大？
掌握核心语法： 即使不用 AI，也能快速上手 Mermaid 流程图绘制。
Mermaid 资源与应用。

准备好迎接绘图效率的革命了吗？Let’s Go!

一、AI 绘图实战：让想法秒变图表

这可能是最令人兴奋的部分了！利用 AI (如 ChatGPT, Claude, Kimi 等) 生成 Mermaid 图表代码，过程简单到令人发指：

核心步骤：清晰描述 -> 指挥 AI -> 获取代码 -> 渲染成图

1. 准备清晰的流程描述

AI 不是读心者，你需要给它结构清晰、步骤明确的描述。无论是业务流程、技术架构还是算法步骤，尽量拆解清楚。

以 TCP 四次挥手为例：

第一次挥手：客户端发送 FIN -> 服务端，关闭客户端到服务端的数据。客户端进入 FIN-WAIT-1。
第二次挥手：服务端收到 FIN，发送 ACK -> 客户端。服务端进入 CLOSE-WAIT，客户端进入 FIN-WAIT-2。
第三次挥手：服务端发送 FIN -> 客户端，请求关闭连接。服务端进入 LAST-ACK。
第四次挥手：客户端发送 ACK -> 服务端。客户端进入 TIME-WAIT。服务端收到 ACK 后进入 CLOSE。客户端等待 2MSL 后也进入 CLOSE。

2. 向 AI 发出指令 (Prompt)

告诉 AI 你想要什么类型的图表（流程图 flowchart, 时序图 sequenceDiagram 等），并提供你的描述。

先在 CherryStudio 里面制作一个 Agent 填入下面的系统提示词:

完整版在知识星球，毕竟这是一个付费提示词，有人真金白银花钱了，我不能让所有人白嫖（摊手

然后你输入以下词提问:

请使用 Mermaid 的 sequenceDiagram 语法，为我生成 "TCP 四次挥手" 过程的时序图代码。流程描述如下：

[这里粘贴上面准备好的四次挥手描述...]

请确保代码能清晰展示参与者（客户端、服务端）、消息传递和关键状态变化。

3. 获取并验证 AI 生成的代码

AI 会快速生成一段 Mermaid 代码，就像这样：

sequenceDiagram
    participant Client
    participant Server

    Note over Client,Server: TCP 四次挥手开始 (假设连接已建立)
    Client->>Server: FIN (SEQ=x)
    activate Server
    Note right of Client: 客户端进入 FIN-WAIT-1 状态
    Server-->>Client: ACK (ACK=x+1)
    deactivate Server
    activate Client
    Note left of Server: 服务端进入 CLOSE-WAIT 状态
    Note right of Client: 客户端收到 ACK 后进入 FIN-WAIT-2 状态
    Server->>Client: FIN (SEQ=y)
    deactivate Client
    activate Server
    Note left of Server: 服务端进入 LAST-ACK 状态
    Client-->>Server: ACK (ACK=y+1)
    deactivate Server
    Note right of Client: 客户端进入 TIME-WAIT 状态 (等待 2MSL)
    Note left of Server: 服务端收到 ACK 后进入 CLOSE 状态
    Note over Client: 2MSL 超时后，客户端关闭连接 (CLOSE)

4. 渲染图表并使用

将这段代码复制到任何支持 Mermaid 的地方：

在线编辑器: mermaid.live (强烈推荐，实时预览)
Markdown 编辑器: Typora, Obsidian, VS Code (需插件) 等
文档/知识库: Notion, GitBook, GitLab 等

然后，精美的图表就诞生了！

AI + Mermaid 的优势显而易见：

极速出图： 几秒钟就能把复杂流程可视化。
降低门槛： 不懂语法也能画图，只需清晰描述。
应对复杂性： 快速生成草稿，方便梳理和迭代。

当然，AI 可能不会一次完美，有时需要你根据 Mermaid 语法进行微调。那么，这个让 AI 生成图表的 “魔法语言” Mermaid 到底是什么呢？

二、揭秘背后魔法：什么是 Mermaid？

Mermaid 就是实现上述 AI 绘图魔法的 “代码语言”。

它是一个基于 JavaScript 的开源库，核心理念是 “代码生成图表” (Diagrams as Code)。

简单说，你用简单的文本代码来描述图表结构，Mermaid 负责将其渲染成图像。

比如，下面这段简单的 Mermaid 流程图代码：

graph LR
    A[需求分析] --> B(设计方案)
    B --> C{技术评审}
    C -->|通过| D[编码实现]
    C -->|不通过| B
    D --> E((测试上线))

会被渲染成：

为什么 Mermaid 如此受欢迎？

文本化，易维护: 图表就是代码，修改、复制、查找都极其方便，告别像素级拖拽。
版本控制友好: 纯文本完美契合 Git 等工具，轻松追踪图表每次修改。版本管理不再是噩梦。
跨平台与集成: 无缝嵌入 Markdown！被无数编辑器、文档工具、在线平台原生或通过插件支持。一次编写，处处渲染。
学习曲线平缓: 语法直观，类似 Markdown，尤其对开发者非常友好。
风格专业简洁: 默认样式美观，且支持通过 CSS 自定义外观。
支持图表类型丰富: 不止流程图、时序图，还支持类图、状态图、甘特图、饼图等等。

重要资源：

项目地址: github.com/mermaid-js/mermaid
官方文档: mermaid.js.org/intro/ (新官网，推荐) 或 mermaid-js.github.io/mermaid/ (旧官网)
在线实时编辑器: mermaid.live (学习和调试必备！)

了解了 Mermaid 的基本概念和优势后，即使你不想完全依赖 AI，或者需要精修 AI 生成的代码，掌握一些基础语法也是非常有用的。接下来，我们就深入学习最常用的流程图 (Flowchart) 语法。

三、掌握核心语法：Mermaid 流程图绘制指南

如果你想手动绘制流程图，或者想修改 AI 生成的代码，理解 Mermaid 流程图的基本语法至关重要。它主要由三部分构成：

声明图表类型和方向
定义节点 (形状和文字)
连接节点 (线条和箭头)

1. 声明图表类型与布局方向

使用 graph 关键字开始，后面跟方向指示符：

TB: Top to Bottom (从上到下，默认)
BT: Bottom to Top (从下到上)
LR: Left to Right (从左到右)
RL: Right to Left (从右到左)

示例 (从左到右):

graph LR
    Start --> Stop

效果:

2. 定义节点 (Nodes)

节点代表流程中的步骤、判断、开始/结束等。

基本语法: id[描述文字] 或 id(描述文字) 等。

id 是节点的唯一标识，用于连接。
括号及其内部文字定义了节点的形状和显示内容。

常用节点形状一览：

形状	语法	示例代码 (graph LR)
矩形 (默认)	`id[文字]`	`n1[矩形步骤]`
圆角矩形	`id(文字)`	`n2(圆角步骤)`
体育场 (大圆角)	`id([文字])`	`n3([体育场步骤])`
圆形	`id((文字))`	`n4((圆形状态))`
菱形 (判断)	`id{文字}`	`n5{是否满足条件?}`
圆柱 (数据)	`id[(文字)]`	`n6[(用户数据库)]`
平行四边形(I/O)	`id[/文字/]` 或 `id[\文字\]`	`n7[/输入数据/]` `n8[\输出结果\]`
梯形	`id[/文字\]` 或 `id[\文字/]`	`n9[/梯形A\]` `n10[\梯形B/]`

记忆技巧: 核心是 [] (方), () (圆), {} (尖/菱)。组合使用，外层定型，内层修饰。

特殊字符处理: 节点文字若含 ()[]{} 等特殊符号，或需用 HTML 实体，请用双引号 "" 包裹文字。

graph LR
    node_special["处理(特殊情况) & 显示 #quot;引号"]

效果：

graph LR
    node_special["处理(特殊情况) & 显示 #quot;引号"]

3. 连接节点 (Links/Edges)

用线条和箭头连接节点，表达流程方向和关系。

基本语法: 节点A --> 节点B

连接线样式要素：

线型: -- (实线), -.- (虚线), == (加粗实线)
箭头: > (有箭头), - (无箭头，用在末尾)
文字: -->|文字| (推荐) 或 --文字--> (旧式)

常用连接线组合：

| 样式 | 语法 | 示例代码 (graph LR) | | --------------- | ------ | ------------------- | -------------- | ------- | ---- | ------------------ | | 实线箭头 (常用) | --> | A --> B | | 实线无箭头 | --- | A --- B | | 虚线箭头 | -.-> | A -.-> B | | 虚线无箭头 | -.- | A -.- B | | 加粗实线箭头 | ==> | A ==> B | | 实线箭头带文字 | --> | 文字 | 或--文字--> | A --> | 成功 | B C --失败--> D | | 虚线箭头带文字 | -.-> | 文字 | 或-.文字.-> | A -.-> | 异常 | B C -.超时.-> D |

记忆技巧: 记住基础部件 --, -.-, ==, >, |文字|，然后自由组合。

4. 进阶技巧简介

链式连接: A --> B --> C
多节点连接: A --> B & C (A到B, A到C); A & B --> C (A到C, B到C)

子图 (Subgraph): 用 subgraph 标题 ... end 将一组节点框起来，表示模块。

graph TB
    Start --> Mod1
    subgraph 核心处理模块
        direction LR
        Input --> Process1
        Process1 --> Output
    end
    Mod1 --> Input
    Output --> End

注释: %% 开头，独占一行。

熟练掌握这些，你就能自如地绘制和修改流程图了。多去 Mermaid Live Editor 练习是关键！

四、总结：拥抱 AI + Mermaid 的绘图新时代

Mermaid 通过 “代码绘图” 颠覆了传统的可视化方式，带来了文本化、易维护、易集成、标准化的巨大优势。

而 AI 的融入，更是将这种高效提升到了新的维度。我们现在可以：

快速构思: 用自然语言描述流程。
AI 生成: 让 AI 将描述转化为 Mermaid 代码。
即时渲染: 在支持的环境中立刻看到图表。
(可选) 手动优化: 利用 Mermaid 语法知识进行微调。

这个 “AI 生成 + Mermaid 微调” 的工作流，兼顾了效率与灵活性，无论是快速原型设计、技术文档编写、逻辑梳理，都能大幅提升你的工作效率。

告别繁琐的拖拽，是时候拥抱 Mermaid + AI 带来的绘图新体验了！现在就去试试，用你的想法指挥 AI，创造出清晰、专业的图表吧！