背景
在软件职业生涯中，每个项目基本上都需要画一些的流程图、时序图、类图、E-R图、甘特图等，这些都是软件工程必备基础技能。在之前，很享受那种基于图形化组件进行拖拽、绘制的感觉，有一种很强的掌控感。
最近在研究AI相关的技术时，发现有一位作者在文章中使用了基于Mermaid语法来实现上述流程图的绘制。不禁在想，这种基于特定文本语法，如果加上AI，那效率真的简直无敌。与AI聊几句天，把逻辑说清楚，一张流程图就出来了。
于是，尝试了一些Case，真的挺好用的。这篇文章就带大家了解一下基于Mermaid语法来绘制流程图的几个实践实例，以及通过AI的加持，能够做些什么。
Mermaid语法简介
在开始之前，我们先来简单了解一下Mermaid的基础知识，关于具体语法本篇文章不会过多拓展，大家在读完这篇文章之后找相应的文章即可。
Mermaid是一种轻量级的图表和流程图绘制工具，常见于Markdown、开发文档、Notion、GitHub等支持Mermaid的平台。笔者尝试的案例是基于Typora来绘制的，大家在尝试时可选择支持该语法的平台或工具即可。
Mermaid支持常见的流程图、时序图、饼图、甘特图、类图、E-R图等数十种专业图标，而且采用统一的语法，一次编写能够在各个支持该语法的平台上呈现。
Mermaid的优势
相对于直接在画板（比如Visio、draw.io、墨刀等）手工绘制时序图，Mermain有许多优势，这些优势再加上AI的加持，更加被放大了。
第一，文本驱动，便于版本管理。
不同于画板上画流程图，Mermaid基于文本脚本描述，这就方便像代码一样进行版本控制，方便Git管理和团队协作。如果是图片表示，不仅难以变更，变更的差异也难以跟踪对比。
第二，高效修改与迭代
在画板上画图，一旦中间有一部分调整，后续内容可能都需要进行手动改变，费时费力。基于Mermaid就不同了，修改一处文本即可批量调整图结构和内容，非常适合需求频繁变化。
第三，自动布局，统一风格
Mermaid会自动布局，保证图表美观一致，不用手动调整节点对齐、间距等。而手工绘图容易因操作失误导致混乱、不工整。
第四，可嵌入Markdown/文档
可直接嵌入Markdown文档、Wiki、开发手册、GitHub、Notion等，方便与其他文档协同展示。而手工图常需导出图片再插入文档，且难以保持实时更新。
第五，代码可复用，便于自动生成
支持用脚本或工具自动生成时序图文本，比如从接口定义、日志等动态生成。这一特性在加上AI生成，就更厉害了。而手工图几乎无法自动生成和复用，只能重新绘制。
第六，轻量、无依赖、易分享
Mermaid 的时序图只是小段文本，易于跨平台拷贝和分享。而手工图很可能是大图片或特定工具格式，不易兼容、不易快速扩散。
Mermaid示例
下面看几个类型的流程图，基于Mermaid绘制的语法以及效果。
流程图
这里展示一个相对复杂的流程图，具体语法可参考具体的文档或把内容发送给AI让AI来进行解释。
Mermaid流程图实例：
graph TB;
subgraph 分情况
A(开始)-->B{判断}
end
B--第一种情况-->C[第一种方案]
B--第二种情况-->D[第二种方案]
B--第三种情况-->F{第三种方案}
subgraph 分种类
F-.第1个.->J((测试圆形))
F-.第2个.->H>右向旗帜形]
end
H---I(测试完毕)
C--票数100---I(测试完毕)
D---I(测试完毕)
J---I(测试完毕)
基于Typora（本文均为此工具）绘制的效果如下：
时序图
这里的时序图来自网络上一篇文章中介绍OpenClaw相关流程的，借用一下。
Mermaid时序图语法实例：
sequenceDiagram
participant U as User
participant G as Gateway/Agent Runtime
participant M as LLM
participant T as Tools/Sandbox
U->>G: message
G->>G: discover+load metadata (name/description)
G->>G: match & activate (load SKILL.md)
G->>M: prompt (skills index + skill body)
M-->>G: tool_call(args)
G->>T: execute tool / script
T-->>G: tool_result(stdout/stderr/data)
G->>M: tool_result (call_id关联)
M-->>G: final answer (integrated)
G-->>U: response
绘制图形效果：
类图
在开发的过程中，最常见的当属类图了。基于Mermaid实现类图的绘制有点像写代码一样。
Mermaid类图语法实例：
classDiagram
class Account {
+String name
+int followers
+publish()
}
class ArticleAccount {
+String platform
}
class VideoAccount {
+int videoCount
}
Account <|-- ArticleAccount
Account <|-- VideoAccount
类图绘制效果：
关于其他类型的专业图形的绘制就不再注意举例的，通过上面几个一些简单例子，已经能够感受到一些Mermaid语法的魅力了。
AI与Mermaid的结合案例
由于Mermaid语法本质上是基于文本绘制图形，而大语言模型（LLM）最擅长的就是文字处理，很显然，两者可以进行结合，创造出以前根本无法实现的使用方法。
这里先举几个临时想到的使用案例，算是抛砖引玉了。
案例一：通过描述业务逻辑生成流程图
这是最直接能想到的，当我知道一个产品或流程的业务逻辑时，我用文字描述给AI，AI直接给出基于Mermaid语法的图来。
绘制饼图的提示词（Prompt）示例（基于ChatGPT）：
有一组关于动物的数据，其中狗386只，猫567只，兔子700只，猪365只，老虎15只。请基于Mermaid语法绘制出关于这些动物的饼状图。
ChatGPT回复了一些描述性内容，重点看Mermaid语法部分如下：
pie
title 动物数量分布
"狗" : 386
"猫" : 567
"兔子" : 700
"猪" : 365
"老虎" : 15
绘制成图像如下：
这只是一个简单的实例，原本可能需要不少时间来逐个绘制的过程，只用跟AI沟通一句，再把Mermaid内容贴到编辑器中，一个饼状图便出现了。
其他场景（流程图、类图等）或复杂的例子，大家可以自行尝试。
案例二：代码时序图反向生成
这个案例是利用现有的代码，再加上Github Copilot发向生成时序图。
在IDE中，打开Copilot的聊天（Chat）窗口，选中指定的代码文件或方法，简单提示词示例如下：
梳理getWorkFlow方法的上下关联调用，生成基于Mermaid语法的方法调用时序图。
然后，Copilot就会基于当前项目结构去查询分析该方法的调用逻辑生成基于Mermaid的时序图。
最后，Copilot会生成一段基于Mermaid语法的内容，当然在这个过程中你可以继续与它对话，来精简或调整时序图。这里就不贴Mermaid的文本内容了，直接看一下绘制出来的图的效果。
如果接手别人的代码，想快速梳理一下整个调用链路，这是一个不错的方式。当然，这里只是以这个实例来介绍此项能力，具体的场景化拓展，想必每个人都可以因地制宜的进行发挥。
小结
在流程图绘制的过程中，可能有些小伙伴更倾向于基于图形化界面绘制，有的小伙伴更倾向于基于类似Mermaid语法进行绘制。
在AI没有爆发之前，各自安好，各自有一定的优劣。但当AI出现之后，对于基于Mermaid这种文本语法特性的绘制形成了极大的加持，如果你还没有使用过，或者没想过利用AI来绘制图形，或许可以进行一下尝试。希望这篇文章能够帮助到你。
