程序员必备技能——AI画技术图

摘要：通过这篇文章我将把所有的作图技巧分享给大家，每种作图方式都有不同的适用场景，不过我个人使用最多的是 AI + draw.io 的方式，废话不多说，点赞关注，我们直接发车！

最近学了一些使用 AI 大幅提升画技术流程图、架构图、各种图的技巧，像这样：

这些图全是用 AI 不到 3 分钟画的，而且最重要的一点是，这些都基于文本绘图，也就是说，所有的图都可以手动二次编辑、调整，保证图的高质量。

通过这篇文章我将把所有的作图技巧分享给大家，每种作图方式都有不同的适用场景，不过我个人使用最多的是 AI + draw.io 的方式，废话不多说，点赞关注，我们直接发车！

既然是 AI 画图，那我们先确定用的工具、哪家的 AI 。我简单对比过 ChatGPT、DeepSeek、Claude、Grok 等等模型，最后选择的是通过 Cursor 使用 claude-3.7-sonnet 的 Thinking 模式，可以白嫖且效果相对最佳。

因为我平时用语雀比较多，所以先来说下语雀中原生支持的几种文本作图方式：PlantUML、Mermaid、Flowchart、Graphviz。

通过左上角的绿色加号下滑可以找到：

不过我本人更喜欢输入/文本唤起：

选中之后就会出现一个输入框，在框的右侧可以选择画图的语言：

他们之间的区别如下：

特性PlantUMLMermaidFlowchartGraphviz图形类型✅✅✅✅✅✅✅✅✅上手难度中低非常低高可定制性高中低极高Markdown 集成一般原生支持可接入支持社区与生态强快速发展一般稳定老牌适合场景架构设计项目文档简单流程高定制图

只看文字有点抽象，我们用 AI 画图看下效果就知道了，我们先规定需要作图的内容，比如账号密码登录流程：

[浏览器] ↓[输入账号密码，点击登录] ↓[前端加密（可选）] ↓[后端 API 接收] ↓[限流校验（Sentinel）] ↓[请求 Redis 查询用户缓存 → 若未命中 → 查询数据库] ↓[比对密码（哈希比对）] ↓[校验用户状态（是否禁用、是否冻结、是否实名认证）] ↓[登录成功 → 更新登录日志 → 生成 Token（JWT 或 Session）] ↓[Token 存储到 Redis + 绑定设备/客户端信息] ↓[返回 Token 给前端，前端持久化（LocalStorage / Cookie）]

告诉 AI 使用这四种方式分别画图：

结果如下，PlantUML：

Mermaid：

Flowchart：

Graphviz：

个人感觉，在这种场景下除了 PlantUML 画的时序图外，其他图的表现力一般。

而且 Graphviz 画的图里还有个黑块，刚好我们用来演示如何二次编辑：

通过右侧的图示，找到黑块在左侧定义的位置，然后更改一个其他的颜色，比如为了显眼我改成红色：

在这四种方式里，我常用的是用** PlantUML 做线性的流程，通过时序图强调交互过程**；Graphviz 画稍微复杂一点、非纯线性的流程，比如这样的：

基本上把文字流程梳理清晰之后，使用上面的方式通过 AI 画图都是分分钟的事情，我们要做的只是核对 + 细节调整。具体样式的话见仁见智，大家找到自己喜欢的风格即可。

Obsidian 是一款免费的本地文档管理工具，比如管理多篇 markdown 文档等等，而且提供了 Canvas 功能，适合用来展示多篇文档的联系，或者做思维导图。

比如我让帮我整理下往期写过的几篇文档：

生成的结果经过稍微调整后是这样的：

还有一些扩展玩法，把文章本身直接作为子节点，这样子节点里会直接展示文章的内容：

这个工具适合本地已经有内容，需要统一展示的场景。

做思维导图还有一种比较好用的方式就是 markdown + xmind，不过很早就有这种方式了，本文章不再介绍。

SVG，可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维图形的 XML 标记语言。简单来说，SVG 文件里存储的是 xml 格式的文本，也是一种文本绘图的方式。所以我们通过 AI 生成 XML 和二次编辑画出想要的图。

这是我认为最适合画架构图的一种方式。

不过这里要注意的地方比较多，我按照以下流程给大家说明：

演示效果提供 prompt在 Cursor 中配置 prompt注意事项

拿我之前写过的一篇 SpringSecurity + Redis + JWT 登录举例，只需要把内容复制给 AI ，然后让它画图：

不到1分钟即可立刻得到以下结果：

出图的效果比较依赖 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海报。待处理内容：

打开 Cursor 设置：