前言
最近整理了一套用 AI 快速绘制技术流程图、架构图、各种技术图的方法，效果类似下面这些示例（均可二次编辑）：
这些图基本都能在 3 分钟内生成，更关键的是它们大都基于文本绘图：图是“代码”，天然支持手动二次编辑、微调布局和文案，从而保证最终质量。
本文会按不同场景拆开讲，覆盖我最常用的一套组合：AI + draw.io，以及 PlantUML / Mermaid / Graphviz / SVG / Obsidian Canvas 等。
作图：先选模型与工具
既然是 AI 画图，第一步是确定“用哪家 AI + 在哪里用”。我对比过 ChatGPT、DeepSeek、Claude、Grok 等，最后选择在 Cursor 里使用 claude-3.7-sonnet 的 Thinking 模式：成本低（可白嫖）、效果稳定，适合连续迭代修改。（关于 AIGC 相关讨论也可以在 人工智能 板块延展阅读。）
文本作图语言：PlantUML / Mermaid / Flowchart / Graphviz
如果你平时使用语雀（或类似支持文本渲染的编辑器），通常会原生支持多种文本作图方式，比如：PlantUML、Mermaid、Flowchart、Graphviz。
通过左上角绿色加号下滑可以找到：
我更习惯用输入 /文本 唤起：
选中之后会出现输入框，在右侧可以选择作图语言：
它们的差异可以先粗略这么理解：
| 特性 |
PlantUML |
Mermaid |
Flowchart |
Graphviz |
| 图形类型 |
✅✅✅ |
✅✅ |
✅ |
✅✅✅ |
| 上手难度 |
中 |
低 |
非常低 |
高 |
| 可定制性 |
高 |
中 |
低 |
极高 |
| Markdown 集成 |
一般 |
原生支持 |
可接入 |
支持 |
| 社区与生态 |
强 |
快速发展 |
一般 |
稳定老牌 |
| 适合场景 |
架构设计 |
项目文档 |
简单流程 |
高定制图 |
用同一段业务流程对比四种出图效果
只看文字对比会有点抽象，我们用同一个“账号密码登录流程”来驱动 AI 分别输出四种语言的图形，效果一眼就清楚。
先把要画的流程写成“文本步骤”（这一步非常关键：你写得越清晰，AI 越容易画对）：
[浏览器]
↓
[输入账号密码，点击登录]
↓
[前端加密（可选）]
↓
[后端 API 接收]
↓
[限流校验（Sentinel）]
↓
[请求 Redis 查询用户缓存 → 若未命中 → 查询数据库]
↓
[比对密码（哈希比对）]
↓
[校验用户状态（是否禁用、是否冻结、是否实名认证）]
↓
[登录成功 → 更新登录日志 → 生成 Token（JWT 或 Session）]
↓
[Token 存储到 Redis + 绑定设备/客户端信息]
↓
[返回 Token 给前端，前端持久化（LocalStorage / Cookie）]
然后告诉 AI：用 PlantUML / Mermaid / Flowchart / Graphviz 各画一张：
输出示例（原文截图如下）：
从这个例子里，我的体感是：除 PlantUML 的时序/交互表达更占优势外，其余几种在这种“线性登录流程”场景下表现力一般。
文本绘图的核心优势：可以“定位并二次修改”
上面 Graphviz 的图里有一个黑块，正好用来演示如何二次编辑：
做法是：根据右侧渲染结果，回到左侧文本定义里定位对应节点，然后修改颜色等属性。比如把黑色改成红色突出显示：
我常用的选择建议
- PlantUML：做更线性的流程，并用时序图强调交互过程
- Graphviz：做稍复杂、非纯线性的流程，比如这种：
当你把文字流程梳理清楚之后，用以上方式让 AI 出图通常就是“分分钟”的事。你需要做的更多是核对 + 细节调整：节点是否漏了？箭头方向是否对？文案是否准确？
Obsidian Canvas：适合“本地多文档关联展示”
Obsidian 是免费的本地文档管理工具，常用于管理多篇 Markdown 文档；它的 Canvas 功能很适合展示多篇文档之间的关系，或做思维导图/知识网络。
比如让 AI 帮忙把往期写过的几篇文档整理成 Canvas 结构：
生成结果稍微调整后大致如下：
还有一种扩展玩法：把文章本身直接作为子节点，子节点内直接展示文章内容：
这个工具更适合“本地已经有内容，需要统一展示与串联”的场景。
做思维导图还有一种比较好用的方式是 markdown + xmind，这类方式出现很久了，本文不再展开。
SVG：最适合画“可控的架构图”
SVG（Scalable Vector Graphics）是可缩放矢量图形，本质是一种用 XML 描述二维图形的标记语言。换句话说：SVG 文件就是“文本”，天然适合 AI 生成 + 人工二次编辑。
我认为这是非常适合画架构图的一种方式。
下面按流程讲清楚：
- 效果演示
- 提供 prompt
- 在 Cursor 中配置 prompt
- 注意事项
效果演示
以 “SpringSecurity + Redis + JWT 登录” 这类内容为例：只要把内容复制给 AI，让它输出架构 SVG 图即可。
不到 1 分钟就能得到类似下面的结果：
提供 prompt
出图效果很吃 prompt，我长期使用的是下面这一份（原样粘贴即可）：
# SVG海报设计专家Prompt
你是一名专业的图形设计师和SVG开发专家，对视觉美学和技术实现有极高造诣。
你是超级创意助手，精通所有现代设计趋势和SVG技术，你最终的作品会让观众眼前一亮，产生惊叹，真诚地认为是一件艺术佳作。
我会给你一个主题、一段文本或一张参考图片，请分析它们，并将其转化为令人惊艳的SVG格式海报：
## 内容要求
- 所有海报文字必须为简体中文
- 保持原始主题的核心信息，但以更具视觉冲击力的方式呈现
- 可搜索补充其他视觉元素或设计灵感，目的为增强海报的表现力
## 设计风格
- 根据主题选择合适的设计风格，可以是极简主义、新潮、复古或未来主义等
- 使用强烈的视觉层次结构，确保信息高效传达
- 配色方案应富有表现力且和谐，符合主题情感
- 字体选择考究，混合使用不超过三种字体，确保可读性与美感并存
- 充分利用SVG的矢量特性，呈现精致细节和锐利边缘
## 技术规范
- 使用纯SVG格式，确保无损缩放和最佳兼容性
- 代码整洁，结构清晰，包含适当注释
- 优化SVG代码，删除不必要的元素和属性
- 实现适当的动画效果（如果需要），使用SVG原生动画能力
- SVG总元素数量不应超过100个，确保渲染效率
- 避免使用实验性或低兼容性的SVG特性
## 兼容性要求
- 设计必须在Chrome、Firefox、Safari等主流浏览器中正确显示
- 确保所有关键内容在标准viewBox范围内完全可见
- 验证SVG在移除所有高级效果（动画、滤镜）后仍能清晰传达核心信息
- 避免依赖特定浏览器或平台的专有特性
- 设置合理的文本大小，确保在多种缩放比例下均保持可读性
## 尺寸与比例
- 默认尺寸为标准海报尺寸（如A3: 297mm × 420mm或自定义尺寸）
- 设置适当的viewBox以确保正确显示，通常设为"0 0 800 1120"或类似比例
- 确保所有文本和关键视觉元素在不同尺寸下保持清晰可读
- 核心内容应位于视图中心区域，避免边缘布局
- 测试设计在300x300至1200x1200像素范围内的显示效果
## 图形与视觉元素
- 创建原创矢量图形，展现主题的本质
- 使用渐变、图案和滤镜等SVG高级特性增强视觉效果，但每个SVG限制在3种滤镜以内
- 精心设计的构图，确保视觉平衡和动态张力
- 适当使用负空间，避免过度拥挤的设计
- 装饰元素不应干扰或掩盖主要信息
## 视觉层次与排版
- 建立清晰的视觉导向，引导观众视线
- 文字排版精致，考虑中文字体的特性和美感
- 标题、副标题和正文之间有明确区分
- 使用大小、粗细、颜色和位置创建层次感
- 确保所有文字内容在视觉设计中的优先级高于装饰元素
## 性能优化
- 确保SVG文件大小适中，避免不必要的复杂路径
- 正确使用SVG元素（如path、rect、circle等）
- 优化路径数据，删除冗余点和曲线
- 合并可合并的路径和形状，减少总元素数
- 简化复杂的形状，使用基本元素组合而非复杂路径
- 避免过大的阴影和模糊效果，它们在某些环境中可能导致性能问题
## 测试与验证
- 在完成设计后，移除所有动画和高级滤镜，确认内容仍然完整可见
- 检查元素是否使用了正确的z-index，避免意外覆盖
- 验证在不同视窗大小下所有内容都能正确显示
- 确保设计采用分层方法：底层(背景)、内容层和装饰层清晰分离
- 提供简化版设计思路，去除所有可能影响稳定性的高级功能
## 输出要求
- 提供完整可用的SVG代码，可直接在浏览器中打开或嵌入网页
- 确保代码有效且符合SVG标准，无错误警告
- 附带简短说明，解释设计理念和关键视觉元素
- 不偷懒不省略，全面展现你的设计思维和SVG专业知识
- 使用COT（思维链）方法：先分析主题，然后构思设计方案，最后生成SVG代码
请根据提供的主题或内容，创建一个独特、引人注目且技术精湛的SVG海报。
待处理内容：
来源： https://xiangyangqiaomu.feishu.cn/wiki/Rb9Mw25hni1SPXktJcGc2RBynyb?fromScene=spaceOverview
在 Cursor 中配置 prompt
打开 Cursor 设置：
添加项目级别的 Rule：
在 Cursor 中粘贴上述 prompt，并选中 Always（或按习惯选择其他选项）：
注意事项
- 让 AI 生成 SVG 时，最好提供一张示例架构图，让它模仿风格；或者用文字描述你想要的风格（极简/赛博/扁平/手绘等）。不然同一份内容，不同批次的视觉差异可能会很大。
- 有个实用技巧：用截图工具截一张图，直接粘贴到 Cursor 输入框，AI 可以读图。你甚至可以把某些区域用框圈出来，让它有针对性地修改与补全。
例如：架构图里技术栈区域下方有点空，可以这样让 AI 补齐：
调整后效果：
AI 会补一些内容。如果你对图里的文案不满意，也可以直接编辑对应文件手动调整——这也是我用 AI 画图的一个硬原则：必须可手动编辑，否则很难把“图中文字质量”打磨到可交付水准。
draw.io：AI 生成 XML，导入后再精修
draw.io 是一款强大的开源流程图绘制软件，自由度很高。因为它支持导入 XML 格式文件，所以可以让 AI 直接生成 draw.io 的 XML 文本，然后导入 draw.io 进行展示与调整，大幅提升作图效率。
还是用最初的登录流程做例子，让 AI 绘制流程图：
将 AI 的输出内容复制出来：
粘贴到 draw.io：
这样图就基本完成了。接下来哪里不满意，直接在 draw.io 里拖拽/改样式/对齐即可。
一个使用小技巧：我实测时通常会声明“不要把内容写到文件里”，然后用代码块右上角的复制把 XML 粘到 draw.io。因为从其他地方复制到 draw.io，可能不会自动渲染成图，往往需要用“打开文件”的方式才能生效。
结语
本文分享了 4 类常见的 AI 技术图绘制路径：
- 文本作图语言（PlantUML / Mermaid / Flowchart / Graphviz）：适合流程与交互表达
- Obsidian Canvas：适合本地多文档关联与知识网络
- SVG：适合可控、可精修的架构图
- draw.io：适合 AI 生成 XML 后导入精修的工程化流程图
你更偏向哪一种？如果你正在沉淀文档与图例，也可以到 云栈社区 里继续交流与查找更多同类实践。
发表于 昨天 18:07
|
查看: 8|
回复: 0
