Mermaid+AI，告别“手搓”画流程图

背景

在软件职业生涯中，每个项目基本上都需要画一些的流程图、时序图、类图、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流程图实例：

scss 复制代码

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时序图语法实例：

rust 复制代码

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类图语法实例：

arduino 复制代码

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语法部分如下：

json 复制代码

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来绘制图形，或许可以进行一下尝试。希望这篇文章能够帮助到你。