放到 Cursor 等 AI 工具中执行：

AI 会生成这样的代码：

然后你就可以把代码复制到 Mermaid 渲染工具中，比如写作工具语雀支持添加文本绘图组件：

然后就会出现一个绘图框，在左侧粘贴文本代码，右侧选择对应的绘图语言，就能看到效果了：

很多 Markdown 编辑器也天然支持 Mermaid 绘图的渲染，比如 Typora：

有很多支持 Mermaid 渲染的网站，还可以导出为 PNG 等格式的图片：

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

如果你对 AI 生成的效果不满意，只需手动修改文本即可，会自动重新渲染图片。

Mermaid 还支持多种图表类型，比如时序图：

AI 生成的效果如图：

Mermaid 还能画甘特图、饼图、Git 分支图等，这里再让 AI 生成一个架构图：

AI 生成的效果如图：

2、PlantUML - 专业的 UML 绘图工具

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

让我们用 AI + PlantUML 画一个经典的订单系统类图，给 AI 的提示词如下：

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

PlantUML 还特别适合画复杂的时序图和系统架构图。比如一个完整的登录时序图：

其他文本绘图工具

除了 Mermaid 和 PlantUML，还有 Flowchart 和 Graphviz 等文本绘图工具。为了帮大家更好地选择，我整理了这四种工具的对比：

我的建议是，日常使用选 Mermaid，因为它语法简单、平台支持好；如果要画专业的 UML 图，就选 PlantUML。如果想生成复杂的网络拓扑图，可以选择 Graphviz，支持更复杂的定制能力。

比如鱼皮给自己的野鱼网吧生成了一份网络拓扑图：

二、网页绘图

网页绘图是一种非常自由灵活的绘图方式。本质上是 “图片即网站” —— 通过生成包含可视化元素的网页代码，在浏览器中渲染出各种图片，而且可以实现静态图片无法做到的交互效果和动画展示。

1、原生网页绘图

利用网站开发的核心技术（HTML + CSS + JavaScript），我们可以生成各种类型的图表。这种方式虽然不是传统意义上的绘图，但效果可能会超出预期。还可以借助各种第三方可视化库（如 ECharts、D3.js 等）来增强效果。

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

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

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

同理，AI 还能快速生成产品原型图，特别适合快速验证想法。给 AI 的提示词如下：

查看 AI 生成的原型图效果，我着实替 UI 设计师朋友们也捏了一把汗。。。

2、SVG 矢量图绘制

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

SVG 文件本质上是 XML 格式的文本代码，可以直接嵌入网页或导入各种设计工具。

让我们用 SVG 绘制一个系统架构图，给 AI 的提示词如下：

AI 生成的 SVG 代码可以直接嵌入网页或导入设计工具，也可以保存为 SVG 文件直接双击在浏览器内打开。效果还不错吧~

使用 SVG 的另一个优点是可以精确控制每个元素的位置、大小和样式，甚至能添加动画效果，让图片更加生动。

3、Canvas 动态绘图

Canvas 是 HTML5 提供的一个画布元素，通过 JavaScript 可以在上面绘制各种图形。与 SVG 不同，Canvas 是基于像素的，而且性能优秀，适合创建需要精确控制元素细节、动画效果丰富的画面，很多游戏也是基于 Canvas 实现的。

让我们利用 AI + Canvas 绘制一个海报页面，给 AI 的提示词如下：

生成的效果如图，我感觉还不错，而且还顺便生成了下载海报图片的按钮：

再来绘制一个高大上的网络性能监控仪表板，给 AI 的提示词如下：

生成的效果很炫酷，非常适合拿来做技术演示（PPT）：

三、思维导图

AI 可以帮我们快速生成精美的思维导图，并且能够导出为专业思维导图软件支持的格式，便于我们在学习和工作中梳理知识。

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

可以通过 AI 直接生成 XMind 格式的思维导图代码，提示词如下：

导图内容包含以下要点：

1. 服务拆分原则

• 单一职责
• 服务自治
• 接口明确

1. 通信机制

• 同步通信（REST、gRPC）
• 异步通信（消息队列）

1. 服务治理

• 服务注册与发现
• 负载均衡
• 熔断降级

生成的效果还不错，还可以在软件中进一步美化思维导图的样式，图片太长了就给大家看一部分吧~

不过我更建议让 AI 生成 Markdown 格式的思维导图，因为 Markdown 格式更通用，方便在各种文档工具中使用。给 AI 提供下面这段提示词：

AI 会生成这样的 Markdown 格式：

服务拆分原则

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

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

四、专业绘图工具

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

我用的比较多的绘图工具是免费开源的 draw.io，它的优点是 自由度极高，支持导入导出多种格式，拥有丰富的图形库和模板。当需要绘制复杂图片时，先让 AI 生成 draw.io 格式的 XML 代码，然后导入到 draw.io 中进行二次编辑，能够大幅提升作图效率。

举个例子，让 AI 为鱼皮在 编程导航 原创的十几套项目教程生成一个学习路线图：

以下是项目学习相关内容

然后直接复制 AI 生成的 XML 代码：

并粘贴到 draw.io 中，就得到了下面这张图，效果还挺不错的吧！

然后你可以将绘图导出为各种主流图片格式，甚至是 PDF 文档和 HTML 网页：

再来画一个复杂的架构图吧。让 AI 根据我的《亿级流量点赞系统项目教程》生成对应的架构图，提示词如下：

以下是项目教程相关内容

AI 生成的绘图如下：

是不是挺震撼的？如果人工来画这张图，半条命估计就下去了。

不过我们会发现，AI 有时候生成的图片元素会出现排版错乱、位置对不齐的情况。这时就需要人工进行调整了，有时要改的内容还挺多的，没点儿画图功底还真驾驭不了 AI。

所以虽然 AI + draw.io 这种画图方法看起来最强大，实际上还是建议大家根据作图的类型和复杂度，选择最合适的方法吧。

五、Emoji 绘图

还有一些适合整活儿的创意画图方法，比如利用 Emoji 表情来绘制简单的图。

举个例子，使用下面这段提示词：

AI 会生成类似这样的效果：

或者这样 👇，这是不是有点太抽象了？？？

还可以用 Emoji 画更复杂的图，比如微服务架构：

AI 会生成这样的效果，抽象，太抽象了！

同理，大家还可以尝试下字符画绘图，大胆发挥创意尽情探索、尽情压榨 AI 吧~

AI 绘图技巧

掌握了基本的绘图方法后，鱼皮再给大家开个小灶，分享一些高级技巧，帮你更快地画出更好的图。

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

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

举个例子，仿照我提供的系统架构图进行生成，这种场景适合使用 draw.io 工具。示例 Prompt 如下：

在 Cursor 中执行：

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

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

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

举个例子，先对生成的架构图进行标注，利用截图工具就可以完成了：

然后将标注过的图片和下列 Prompt 一起发送给 AI：

生成结果如图：

可以发现大多数问题都已经修复了，但缺点是 AI 会重新生成一遍图片，每次都要等一段时间。运气不好的话要浪费好多时间在和 AI 斗智斗勇上。。。

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

AI 生成的效果很大程度上取决于输入的提示词，所以要让 AI 画出更专业的图，配置一个好的系统提示词至关重要。在 Cursor 中，我们可以设置项目级别的 Rules 规则，让 AI 始终遵循你的绘图规范。

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

你是一名资深的系统架构师和技术图表设计专家，精通各种技术栈和绘图工具。

绘图原则

1. 所有文字必须使用简体中文
2. 保持图表简洁清晰，避免过度复杂
3. 使用标准的技术图标和符号
4. 配色专业，一般使用蓝、绿、橙等技术感色彩
5. 层次分明，主次关系清晰

技术规范

1. 架构图分层清晰：展示层、网关层、服务层、数据层
2. 使用虚线表示异步调用，实线表示同步调用
3. 标注关键技术栈和中间件
4. 添加必要的文字说明，但不要过多
5. 考虑高可用、负载均衡等架构要素

输出要求

1. 根据图表类型和复杂度选择 Mermaid、PlantUML 或 draw.io 语法
2. 如果是复杂架构，分模块逐步展示

配色方案

• 展示层：蓝色系 (#3498db)
• 业务层：绿色系 (#2ecc71)
• 数据层：橙色系 (#e67e22)
• 中间件：紫色系 (#9b59b6)
• 错误/警告：红色系 (#e74c3c)

进入 Cursor 的 Rules 设置界面，添加一个规则：

将这个预设配置到规则中，可以设置为每次对话都生效，也可以人工按需使用，我这里设置为人工按需使用：

在 AI 对话时指定 Cursor Rules，AI 就会按照规则来生成图片，确保输出的一致性和专业性：

生成效果如图，是不是有内味儿了~

技巧 4、组合生成

有时你也不知道哪种方法作图效果最好，干脆就同时生成多种不同的绘图代码，再从中挑选。

示例提示词如下：