一个超实用的工具组合：Mermaid + AI，帮你用写代码的方式轻松画图！

纪佰伦

395人浏览 · 2025-09-07 00:26:58

纪佰伦 · 2025-09-07 00:26:58 发布

Mermaid+AI调研使用指南

一个超实用的工具组合：Mermaid + AI，帮你用写代码的方式轻松画图！

画图再也不用吭哧吭哧拖框了！

🤔 一、为啥要用这玩意儿？

平时写文档最头疼的是什么？画图！
用 Draw.io/Visio 这种工具：

调整一个框，所有线都乱了…
改一次流程，重画半小时…
版本一更新，图又对不上了…

而 Mermaid 的思路是：既然大家都会写代码，为啥不用代码画图？
你用简单的文本语法描述流程图，它自动帮你生成图片，改内容就像改代码一样简单！

🚀 二、结合AI之后，就更离谱了

现在你甚至不用学语法，直接告诉AI你要什么图，它帮你生成Mermaid代码！

比如你这样问AI（ChatGPT/DeepSeek等都行）：

“帮我画一个用户登录的流程图，包括输入账号密码、验证、成功进入主页或失败提示错误”

AI 可能给你返回这样的代码：

flowchart TD
    A[用户输入账号密码] --> B{验证信息}
    B -->|成功| C[进入主页]
    B -->|失败| D[显示错误提示]
    C --> E[结束]
    D --> E

你把这段代码复制到支持 Mermaid 的地方（比如语雀/Typora/在线编辑器），立马就能看到渲染好的流程图！

🛠 三、怎么用？（极简版）

打开一个AI聊天窗口（如DeepSeek、ChatGPT）
告诉它你要什么图，越详细越好
复制它返回的 Mermaid 代码
粘贴到以下任意位置即可生成：
- 语雀文档
- Typora（Markdown编辑器）
- VS Code（装 Mermaid 插件）
- Mermaid 在线编辑器

5️⃣ **不满意？**直接对AI说：“这里颜色改一下”、“那个框去掉”，它立马给你改！

💡 四、我们什么时候可以用？

✅ 写技术文档画系统流程
✅ 做PPT前快速搭个草图
✅ 讨论方案时随手画个时序图
✅ 想画个甘特图但不想打开Excel…

🌟五、详细调研

Mermaid 是一款基于 JavaScript 的开源图表绘制工具，于 2014 年首次发布，其允许用户通过类似 Markdown 的文本语法创建和修改多种类型的图表（如流程图、甘特图、类图、状态图等），可以大幅提高工作效率。

Mermaid 的具体文档和范例都有专门的官方网站介绍https://mermaid.nodejs.cn/intro/

用户想要画图可以像写代码一样快速 「写」一个「流图」 出来，但现在AI遍地横行，书写能力强健，可以直接来利用ai，通过自己的prompt描述让ai帮你写Mermaid，之后通过Mermaid编辑器即可快速生成图表。

Mermaid 和 Markdown 一样，都是纯文本格式存储的语言。纯文本文件打破了很多软件封闭格式的限制，更加利于用户掌握自己的内容。也易于我们存储，解析，发送文件内容，而不是受制于特定应用的软件或网站平台。（占用空间小、不被软件限制等）

🔧使用对比

1）Mermaid

左边是我用AI写的简单Mermaid代码，可以简单看到备注了四个盒子【A、B、C、D】，以及四个颜色设定，之后通过编辑器就可以生成这个我想要的图表。（方便快捷）

图标嵌入其他文档只需复制相关Mermaid代码即可。

2）draw.io

“如果使用 draw.io 等工具也可以实现，但其操作是手动的、图形化的，流程复杂度增加时，绘制和维护的时间成本会近乎线性增长。而使用 AI + Mermaid 的方式，成本只是描述需求所需的文本量，效率优势巨大。”（追求精确完美还是要选择draw.io）

📝工程师简单使用prompt推荐

举例prompt模版，可以多次使用

你是一名资深的软件架构师，请根据我提供的接口描述，自动解析并为其生成专业、详细的Mermaid流程图。

**我的接口描述**：
接口描述：获取打款银行
名称：获取打款银行
方法：GET
路由：/api/getTransferBank

**你的任务**：
1.  **需求解析**：基于我的描述，自动推导并补充完整的“接口背景信息”，包括但不限于：
    *   可能的HTTP方法（如POST、GET）和路由（如`/api/v1/login`）。
    *   核心请求参数和成功响应内容。
    *   常见的错误状态码（如400, 401, 403, 404, 500等）及其触发原因。
2.  **图表生成**：使用Mermaid的 `flowchart TD` 语法绘制流程图。图表必须包含：
    *   **客户端请求** -> **服务端参数校验** -> **核心业务逻辑（如数据库操作）** -> **多重条件判断** -> **成功与多种错误响应**的完整闭环。
    *   所有节点使用**中文**，条件判断使用 `{}`，箭头使用 `-->|文字|` 说明。
    *   使用 `style` 对成功（绿色）和错误/异常（红色）路径进行高亮，使图表更直观。
3.  **输出要求**：首先给出清晰的Mermaid代码块，然后简要说明你推导出的接口逻辑和关键节点。

请开始你的分析并生成代码
注意: 需要你自主进行检查此mermaid，如果生成的代码有报错信息需要你重新生成

1、复制上述prompt到ai工具，添加相关描述修改后让ai生成mermaid
在这里插入图片描述

2、复制mermaid到在线编辑器进行生产，右上角可以导出分享等功能

如果使用本地编辑器（如typora）可以直接贴代码自动生成图片。

3、如果觉得哪里流程有问题或样式不对，可以直接对AI直接说哪里有问题，需重新生成。

4、以上prompt只是一个例子，其mermaid的功能还有很多，可以多探索一下。

📋编辑器下载安装

Mermaid语言风格也和Markdown格式很相似，有兴趣可以安装一个Typora文档工具，支持.md格式和Mermaid图片生成。

🎯 六、总结一下

核心特点与优势

📝 文本驱动，像写代码一样画图：用简单的语法描述图表，改图就像改代码一样方便，还容易做版本管理！
🔄 多类型支持：流程图、甘特图、类图、时序图……常用图形它基本都能搞定！
⚡ 实时渲染：在语雀、Typora、VS Code（装插件）里写的时候，立马就能看到效果！
🔗 强兼容性：Markdown、网页、Jupyter Notebook 都能轻松嵌入，分享无障碍！
🆓 开源免费：随便用，不花钱，开发者狂喜！
🚀 简单易上手：语法类似 Markdown，学起来没啥压力！
📤 纯文本存储，易于协作：不用传来传去一堆文件，直接发段代码大家都能看到最新版！
🤖 超级AI友好：直接让AI帮你生成代码，效率翻倍，键盘起飞！

Mermaid+AI vs. 传统画图工具？

方式	优点	缺点
Mermaid + AI	✅ 快！易改！纯文本易分享 ✅ 适合迭代、草稿、讨论 ✅ 版本友好，协作方便	❌ 复杂布局支持不够 ❌ 没那么“好看”
Draw.io	✅ 灵活，好看，细节可控	❌ 手动拖框累死人 ❌ 改起来麻烦，效率低
PPT / Visio	✅ 极其精致，汇报专用	❌ 耗时，更新麻烦 ❌ 不方便协作和版本管理

💡 一句话总结：初稿、讨论、频繁改动的图 → 用 Mermaid+AI；最终交付、超高精度要求的图 → 用 Draw.io/Visio。

引用链接：

https://zhuanlan.zhihu.com/p/627356428

https://sspai.com/post/63055

https://mp.weixin.qq.com/s?__biz=MjM5NzA1MTcyMA==&mid=2651192398&idx=2&sn=fe41cc29b9adee619d834c8805a93867&poc_token=HM9EvGijJ2hLBi5-T62uOsdxFrSA3CD_FV0lW3UN