还在手搓架构图?大厂程序员 AI 一分钟搞定,老板直呼内行!

还在手搓架构图?大厂程序员 AI 一分钟搞定,老板直呼内行!

之前我介绍了可以通过画 UML 图的方式,详情参见:同事偷偷用 AI,1分钟画出精美 UML 图!老板看了直夸专业

很多朋友觉得很有帮助。

图片

但是又问 AI 能不能画漂亮专业的架构图呢?

答案显而易见,能!

这篇文章分享几种生成架构图方式,身边很多同事也都在采用类似的方式画架构图。


方法1:Gemini 3 Pro + DrawIO

图片

先安装 Drawio 桌面版,传送门:https://github.com/jgraph/drawio-desktop/releases

然后,生成 Drawio 格式文件。

方法非常简单,只需要在提示词中强调“使用drawio 格式,帮我...”即可。

请使用 drawio 格式,帮我生成一个 AI 客服系统的架构图 

注意:这里只是为了演示,所以提示词写得比较简单。实际使用时建议大家尽可能写得详细一些,这样生成的架构图才更符合预期。

image-20251213130105983

我们将这块代码复制到记事本,另存为 drawio格式。

图片

的话我们就可以用 drawio 软件打开了。

图片

然后如果有哪里不太满意的,可以让 AI 去调整,也可以在软件里面自行调整。


方法2:AI  Coding  IDE 直接出文件

有些同学可能还会说这太麻烦了,有没有更简单的方法。不用复制,直接生成直接用。

那么这里介绍一个直接在 AI  Coding 工具(如 Antigravity、Cursor、Qoder 等)里生成 drawio 文件的方式。

本文以 Qoder 为例,给大家演示执行过程。

图片

我们先安装 Drawio Preview 和  Draw.io Integation 插件,方便直接预览和编辑。

参考提示词:

请使用 drawio 格式,帮我生成一个 AI 客服系统的架构图,写到当前项目中 
图片

我们选择模型,这里我们选择「极致」,然后我们把提示词发送给他,他就会按照我们的要求,在当前的这个项目中生成对应的架构图。

如果需要调整,我们再手动调整就可以了。


方法3:Gemini 3 Pro + SVG 

咱们也可以让 Gemini 3 Pro 使用 SVG 格式画架构图。

参考提示词:

以SVG的方式,帮我生成一个专业的 AI 客服系统的架构图,分为不同层,注意不同元素之间的逻辑关系,白色背景,不同层用不同颜色,专业风格,中文 
图片

效果还是蛮不错的。至少没有 “drawio 味道”。

方法4:Gemini 3 Pro Image + SVG  重绘

有些同学觉得直接用 SVG 画图可能不够精美。

图片

那么,我们就可以使用  Gemini 3 Pro Image 进行画图。

参考提示词:

以图形的方式,帮我生成一个专业的 AI 客服系统的架构图,分为不同层,注意不同元素之间的逻辑关系,白色背景,不同层用不同颜色,专业风格,中文 
图片

那么有些同学可能会说,生成的图一是带水印,二是有些字想调一调,或者某些字存在错误,怎么办?

其实我们可以让 Gemini 使用 SVG 格式进行重绘。

图片

打开 Cavans

图片

那么我们就可以得到 SVG 格式的架构图了。

如果有需要调整,可以用自然语言让它去调整,这样调整的效果会更好一点。

image-20251213132510039

你也可以把它的代码拷贝下来,然后手动调整。传送门:https://www.svgviewer.dev/

有同学可能会说网上还有 MCP 可以生成,区别不大,关键看模型,不通过MCP 也完全可以直接生成出来预览或编辑。


欢迎关注我的公众号:悟鸣AI,后续会陆续分享比较有用的 AI 工具和比较好的 AI 经验,比较客观理性的 AI 观点等。

Read more

从零开始:在本地搭建一个带知识库的 AI 助手(Ollama + Open WebUI)

从零开始:在本地搭建一个带知识库的 AI 助手(Ollama + Open WebUI)

一文讲清楚:要选哪些工具、需要什么环境、整体架构长什么样,以及一步步实现到能用的程度。 一、为什么要在本地搭一个 AI 助手? 过去一年,大模型从“新奇玩意儿”迅速变成“日常生产力工具”。但如果你只用网页版 ChatGPT / 文心一言 / 通义千问,会碰到几个很现实的问题: * 数据隐私:公司内部文档、个人笔记、聊天记录,你敢全部塞到线上吗? * 网络依赖:在飞机上、高铁里,或者公司内网严格管控时,在线 AI 直接“失联”。 * 额度与费用:免费额度有限,稍微重度一点就要付费,而且你也不知道自己的数据会不会被拿去训练。 本地部署一套 “AI + 知识库” 的好处就非常直观: 1. 数据完全不出本地,满足隐私合规要求。 2. 断网也能用,随时随地调取你的“第二大脑”。 3. 可定制:可以给团队搭一个“

前端如何写出优秀的 AI Agent Skills

前端如何写出优秀的 AI Agent Skills

背景 用 Cursor 写代码的时候,明明团队有自己的组件规范,但 AI 生成出来的代码风格完全对不上号,每次都要手动改半天——这不是 AI 不够聪明,而是你没"教"过它。 从 Cursor、Claude Code 到 GitHub Copilot,AI 编码工具正在从"对话助手"进化成能「自主执行任务」的 Agent。在这个趋势下,「Agent Skills」 悄然成为标配——简单说,它就是你写给 AI 的"操作手册",教会它一项技能,它就能在合适的场景自动调用。 这篇文章,我会讲清楚 Skills 是什么、

前端开发中支持跨域的HTML标签和属性(附:前端常见缓存机制跨域性和实际跨域需求总结)

前端开发中支持跨域的HTML标签和属性(附:前端常见缓存机制跨域性和实际跨域需求总结)

本文总结了前端开发中支持跨域的HTML标签和属性。主要包括:支持跨域请求的标签(img、script、link等)及相关CORS属性;跨域通信方式(postMessage、iframe等);CORS属性详解及安全注意事项;常见跨域场景示例(图片加载、表单提交等); 前端常见缓存机制在跨域中的限制总结。 前端常见的跨域需求总结。 文章强调应根据需求选择合适的跨域方案,优先使用CORS等标准化方式,同时注意安全风险控制和浏览器兼容性问题,为开发者提供了全面的跨域解决方案参考。 关联阅读推荐 前端常见缓存方式总结 和 Service Worker 缓存详解 使用 fetch 进行跨域请求 前端开发中可以跨域的HTML标签和属性总结 一、支持跨域请求的HTML标签 标签跨域能力跨域相关属性使用场景CORS要求安全限制<img>✅ 支持跨域加载图片crossorigin加载第三方图片、头像、验证码等设置crossorigin时需CORS无法读取图片内容(除非配置CORS且画布同源)<script>✅ 支持跨域加载JScrossoriginCDN加载JS库、JSONP、模

【Agent从入门到实践】47 与前端系统集成:通过API对接,实现前端交互

【Agent从入门到实践】47 与前端系统集成:通过API对接,实现前端交互

文章目录 * 一、为啥前后端API对接这么重要?看完秒懂! * 二、先搞懂基础:API对接到底是咋回事? * 1. 核心概念:请求与响应 * 2. 2026年主流技术组合 * 三、手把手实操:Python后端写API,Vue3前端调用 * 1. 第一步:搭建Python后端,写出可用的API * (1)安装依赖 * (2)写后端代码(main.py) * (3)配置密钥(.env文件) * (4)启动后端并测试 * 2. 第二步:搭建Vue3前端,调用后端API * (1)创建前端文件(index.html) * 3. 测试效果 * 四、2026年最新技巧:让API对接更稳、更快、更安全 * 1. 状态管理用Pinia,数据不乱跑 * 2.