放到 Cursor 等 AI 工具中执行，AI 会生成 Mermaid 代码。然后你可以把代码复制到支持 Mermaid 的工具中查看效果，比如语雀、Typora、或者在线的 Mermaid 渲染网站。

!Mermaid 流程图

很多 AI 聊天助手内置了 Mermaid 渲染工具，能直接看到效果并下载：

!AI 内置渲染

Mermaid 还支持多种图表类型，比如时序图、甘特图、饼图、Git 分支图、架构图等。

PlantUML - 专业的 UML 绘图工具

PlantUML 是另一个强大的文本绘图工具，特别擅长绘制 UML 图、时序图和系统架构图。它的语法相对 Mermaid 更加专业和规范，生成的图表也更加精美。

让我们用 AI + PlantUML 画一个经典的订单系统类图：

AI 会生成专业的 PlantUML 代码，同样放到语雀的文本绘图、或者 PlantUML 渲染网站 中，都可以看到效果。

!PlantUML 类图

如何选择？

我的建议是，日常使用选 Mermaid，因为它语法简单、平台支持好；如果要画专业的 UML 图，就选 PlantUML。

二、网页绘图

网页绘图是一种非常自由灵活的绘图方式。本质上是 "图片即网站" —— 通过生成包含可视化元素的网页代码，在浏览器中渲染出各种图片。

原生网页绘图

利用网站开发的核心技术（HTML + CSS + JavaScript），我们可以生成各种类型的图表。还可以借助各种第三方可视化库（如 ECharts、D3.js 等）来增强效果。

举个例子，当需要展示数据时，AI 可以利用 Apache ECharts 等可视化库生成专业的数据大屏：

AI 会生成完整的网站，包含各种图表，还是挺炫酷的吧~

!数据大屏

你可以直接按需截图，得到图片；还可以通过 Codepen 等网站运行工具将生成的网站快速分享给其他人。

SVG 矢量图绘制

SVG 是可缩放的矢量图形，可以无限缩放而不失真，非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等。

让我们用 SVG 绘制一个系统架构图：

AI 生成的 SVG 代码可以直接保存为 SVG 文件在浏览器内打开。

!SVG 架构图

三、专业绘图工具 - Draw.io

如果将 AI 与专业绘图工具结合，可以实现 1+1 > 2 的效果。

我用的比较多的绘图工具是免费开源的 draw.io，它的优点是自由度极高，支持导入导出多种格式，拥有丰富的图形库和模板。

还有个大火的开源项目 next-ai-draw-io，可以直接通过 AI 对话来生成和编辑 draw.io 图片，短短几天就涨了 6k star！

!AI Draw.io

这个项目支持在线体验，你可以完全从 0 开始画图，比如画一个流程图，演示 RAG 的工作原理。AI 会自动生成 Draw.io 绘图代码，很快精美的流程图就搞定了！

⭐️ 建议观看视频演示：https://bilibili.com/video/BV18NmnB4EeM

!RAG 流程图

然后你可以利用 Draw.io 自身强大的绘图能力手动修改任意元素、或者是改变风格样式。也可以通过 AI 对话让它帮你修改，比如改成动画连接线，逼格一下子就上来了。

!动画连接线

生成各种技术图

还有程序员工作涉及的架构图：

!微服务架构图

UML 类图：

!UML 类图

ER 图：

!ER 图

时序图：

!时序图

这些通通不在话下，帮你节省大把的时间和毛发~

使用技巧

还有一些使用小技巧，比如配合免费的图标库，让整个绘图元素更丰富：

!AWS 架构图

可以使用原生 SVG 动画标签，给整个绘图增加缩放和路径动画：

!动画效果

还可以自己上传一个草图，比如我用文本模型生成的 Mermaid 流程图，让 AI 帮我替换为更美观的样式风格：

效果还不错吧！

!优化后的图

最后导出为各种图片或文档格式，美滋滋~

!导出格式

本地部署

注意，官方提供的演示网站可能限量和不稳定，像我连续用了几次就被拒绝了。

所以我建议下载开源代码到本地，按照官方文档的说法 配置自己的大模型 来运行；或者用 Docker 一键启动，想怎么用就怎么用。

!Docker 部署

四、思维导图

AI 可以帮我们快速生成精美的思维导图，并且能够导出为专业思维导图软件支持的格式。

我用的比较多的思维导图软件是 XMind，支持丰富的样式和主题。

我更建议让 AI 生成 Markdown 格式的思维导图，因为 Markdown 格式更通用，方便在各种文档工具中使用：

AI 会生成这样的 Markdown 格式：

服务拆分原则

• 单一职责
• 每个服务只负责一个业务功能
• 高内聚低耦合
• 服务自治
• 独立部署
• 独立技术选型

将这个 Markdown 文件直接导入 XMind，就能生成结构清晰的思维导图啦！

!思维导图

五、AI 绘图技巧

技巧 1、提供示例图让 AI 模仿

当你看到一个很棒的图，想要绘制同款时，可以直接截图给 AI，让它帮你生成类似的图。

举个例子，仿照我提供的系统架构图进行生成：

生成结果如图，是不是很像？

!仿照生成

技巧 2、截图标注，精准修改

如果你对 AI 生成的图的有些地方不满意，你可以截图并在需要修改的地方画红圈标注，然后告诉 AI 如何修改。

!标注修改

技巧 3、配置专业的系统预设

AI 生成的效果很大程度上取决于输入的提示词，所以要让 AI 画出更专业的图，配置一个好的系统提示词至关重要。

在 Cursor 中，我们可以设置项目级别的 Rules 规则，让 AI 始终遵循你的绘图规范。

给大家一个专业的架构图绘制预设，仅供参考：

你是一名资深的系统架构师和技术图表设计专家。

绘图原则

1. 所有文字必须使用简体中文
2. 保持图表简洁清晰，避免过度复杂
3. 使用标准的技术图标和符号
4. 配色专业，层次分明

配色方案

• 展示层：蓝色系 (#3498db)
• 业务层：绿色系 (#2ecc71)
• 数据层：橙色系 (#e67e22)