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

Hi我是松柏。最近学了一些使用 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 画图看下效果就知道了我们先规定需要作图的内容比如账号密码登录流程代码语言javascriptAI代码解释[浏览器] ↓ [输入账号密码点击登录] ↓ [前端加密可选] ↓ [后端 API 接收] ↓ [限流校验Sentinel] ↓ [请求 Redis 查询用户缓存 → 若未命中 → 查询数据库] ↓ [比对密码哈希比对] ↓ [校验用户状态是否禁用、是否冻结、是否实名认证] ↓ [登录成功 → 更新登录日志 → 生成 TokenJWT 或 Session] ↓ [Token 存储到 Redis 绑定设备/客户端信息] ↓ [返回 Token 给前端前端持久化LocalStorage / Cookie]告诉 AI 使用这四种方式分别画图结果如下PlantUMLMermaidFlowchartGraphviz个人感觉在这种场景下除了 PlantUML 画的时序图外其他图的表现力一般。而且 Graphviz 画的图里还有个黑块刚好我们用来演示如何二次编辑通过右侧的图示找到黑块在左侧定义的位置然后更改一个其他的颜色比如为了显眼我改成红色在这四种方式里我常用的是用** PlantUML做线性的流程通过时序图强调交互过程**Graphviz 画稍微复杂一点、非纯线性的流程比如这样的基本上把文字流程梳理清晰之后使用上面的方式通过 AI 画图都是分分钟的事情我们要做的只是核对 细节调整。具体样式的话见仁见智大家找到自己喜欢的风格即可。Obsidian CanvasObsidian 是一款免费的本地文档管理工具比如管理多篇 markdown 文档等等而且提供了 Canvas 功能适合用来展示多篇文档的联系或者做思维导图。比如我让帮我整理下往期写过的几篇文档生成的结果经过稍微调整后是这样的还有一些扩展玩法把文章本身直接作为子节点这样子节点里会直接展示文章的内容这个工具适合本地已经有内容需要统一展示的场景。做思维导图还有一种比较好用的方式就是 markdown xmind不过很早就有这种方式了本文章不再介绍。SVGSVG可缩放矢量图形Scalable Vector Graphics是一种用于描述二维图形的 XML 标记语言。简单来说SVG 文件里存储的是 XML 格式的文本也是一种文本绘图的方式。所以我们通过 AI 生成 XML 和二次编辑画出想要的图。这是我认为最适合画架构图的一种方式。不过这里要注意的地方比较多我按照以下流程给大家说明演示效果提供 prompt在 Cursor 中配置 prompt注意事项效果演示拿我之前写过的一篇 SpringSecurity Redis JWT 登录举例只需要把内容复制给 AI 然后让它画图不到1分钟即可立刻得到以下结果提供 prompt出图的效果比较依赖 prompt我一直使用的是这个代码语言javascriptAI代码解释# 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?fromScenespaceOverview⚙️在 Cursor 中配置 prompt打开 Cursor 设置添加项目级别的 Rule在 Cursor 中粘贴上述的 prompt并选中 Always也可以按照自己的习惯选择其他的⚠️注意事项在使用 AI 生成时最好给一张示例架构图然后让 AI 模仿其风格或者通过语言描述你希望的风格样式这样出的图才会比较理想。有一个小技巧可以使用截图工具先截图然后直接粘贴到 Cursor 输入框AI 即可读取图片内容。甚至还可以将某些地方用框圈起来让 AI 更有目的性的修改和完善。比如上述架构图的技术栈区域下方有点空我会通过 AI 这样调整这样 AI 就又加了一些内容如果对文案不满意我们可以通过编辑对应的文件手动调整这也是我用 AI 画图很重要的一个原则——必须要能够手动调整图片内容保证图片中文案的高质量。不过这篇文章的重点是画图方式图中的文案我就不调整了。draw.iodraw.io 大家应该不陌生它是一款强大的开源流程图绘制软件自由度极高。因为它支持 xml 格式文件的导入所以我们可以直接用 AI 生成对应的 xml 文本之后使用 draw.io 展示、调整大幅提高作图效率。接下来我们一起来看下效果。还是以最初的登录流程为例让 AI 绘制流程图将 AI 的输出内容复制一下粘贴到 draw.io这样这个图就基本画完了不满意的地方在 draw.io 里继续调整即可有一个小技巧我在使用的时候一般会声明不要把内容写到文件里然后使用代码块右上角的复制将图粘贴到 draw.io这是因为我在实测的时候发现从其他地方复制到 draw.io 里不会自动渲染成图只能用打开文件的方式。结语以上主要给大家分享了四种 AI 画技术图的方式如果有用的话欢迎关注一起交流进步如果有其他好用的画图方式也欢迎评论区交流下期再见拜拜。