# 30 秒画完一张产品架构图,Skill 开源给你
**作者**: 老王霸 AI Lab
**日期**: 2026-07-10T03:40:53.000Z
**来源**: [https://x.com/laowangbabababa/status/2075424995875107182](https://x.com/laowangbabababa/status/2075424995875107182)
---

要画一张 B 端产品架构图,30 个方块,50 根箭头。
PPT 拖了两小时方框还在打架。Visio 装一半放弃。最后随手在网上找张糊的截下来贴 PPT 里凑数。
今天老王把自建了大半年的画架构图 Skill 开源出来。装上之后跟 Claude 说一句话,30 秒拿到一张架构图,原型图,流程图。
下面是什么、能画啥、怎么装、怎么用,挨个说,最后再把安装地址给你。
# 这玩意儿干啥的
Skill 全名叫 drawio-generator。
它是给 Claude Code 装的一份画图说明书。装上之后跟 Claude 说画一张电商下单链路图,Claude 不会自己瞎拖方块,而是按 Skill 里写好的规则吐出一份 .drawio 文件。方块对齐,箭头不打架,颜色按意思自动分。
不用懂 XML,也不用懂 .drawio 文件长啥样。把 Claude 给你的那个文件用 drawio 软件打开,导出 PNG 就完事。
drawio 是个免费画图软件,专门画那种带方块和箭头的图,比如架构图、流程图、时序图。下载地址在文末。
# 接看效果
下面三张图全是 drawio-generator 跑出来的真实样品,每张大约 30 秒。应对工作的架构图足够使用,你也可以通过自然语言描述,让他生产各种形式的图。
如果箭头有交叉,你自己调整或者让ai重新生成避免这个情况。
用户登录流程

7 个节点,6 根箭头。蓝色方块是普通动作,黄色菱形是判断分支,绿色走通过,红色走失败。
电商下单核心链路

10 个节点,8 根箭头,三层结构。用户层和业务层用蓝色方块,数据层用绿色圆柱。圆柱是数据库的标准画法,看一眼就知道这块是存数据的。
AI Agent 三大组件

6 个节点,5 根箭头。中间深色方块是 Agent 的大脑,背后跑的是大模型本身。右边三个是 Agent 离不开的三件套,左边是输入,下方是最终回复。
三张图的共同点。方块都对齐,箭头横平竖直走直角,颜色按意思自动分好,中文字也不会糊成一团。
人手拖 PPT 大概 1 小时一张。这套 30 秒一张,效果还更稳。
# 一句话装好
不用懂 git,不用找目录,不用敲命令。
打开你常用的 AI 工具,Claude Code、CodeDesk、Cursor、Trae、DeepSeek 这种能操作本地文件的都行。把下面这段话原样发给它:
复制这段话发给 AI
> 帮我装上这个 Skill:https://github.com/pmlaowangba-lab/drawio-generator把仓库里的 SKILL.md 下载到我本地的 skills 目录,加载好之后告诉我装完了。
AI 自己会下载文件、放到正确位置、加载好。20 秒搞定,过程中你不用动手。
装完它会回你一句已装好。
打开图还需要 drawio 软件,去 github.com/jgraph/drawio-desktop/releases 下一个,或者直接用网页版 app.diagrams.net,两个都免费。
# 用一次只要 3 步
跟 AI 说一句话
打开你刚才装过 Skill 的那个 AI 工具,用大白话写要画啥。
> 用 drawio-generator 画一张电商下单链路图。分用户层、业务层、数据层三层。业务层包含购物车、订单、库存、支付四个模块,数据层是订单 DB、库存 DB、支付 DB。
不会写得这么细也没关系。直接说画一张用户登录流程图,AI 自己脑补一个标准版给你。
等 30 秒拿到 .drawio 文件
AI 想一下然后给你一个 .drawio 文件,告诉你它存到了哪里。
这一步不用看文件内容。打开看你会看到几百行像代码一样的东西,看了也没用,drawio 才看得懂。
用 drawio 打开,导出 PNG
双击那个 .drawio 文件,drawio 软件自动接管打开,整张图就出来了。
满意的话点菜单栏 File,选 Export As,选 PNG。挑 1024x768 或者 2 倍高清,保存到桌面。
不满意回去跟 AI 说一句,把数据层颜色改成蓝色、把支付模块挪到最右边、加一个会员中心节点。AI 改一次只要几秒钟,给你新版本。
熟练之后从开始到拿到能直接插进文章的 PNG,1 分钟以内。
# 能画哪些图
drawio-generator 适合画讲关系的图。架构图、流程图、时序图、E-R 图、状态机、组件图、思维导图,都能画。任何能用方块加箭头描述的东西它都能干。
最常用的几个场景。
公司新业务架构图,30 个组件以内 30 秒搞定。
产品 PRD 里的流程图,分支判断和异常路径都能画进去。
面试讲项目要 demo 的系统架构图,3 张图打底,5 分钟讲完。
学习笔记里的知识结构图,整理 100 页书的思维脉络。
公众号文章配图,省下找设计师的时间。
不适合用它画的,是插画、漫画、封面、海报这种需要审美的图。这类东西让 GPT-Image-2、Midjourney 这种画图模型来更对。
# 不满意一句话改
Skill 最爽的地方是改起来不要钱。
跟 AI 说话就行:
把背景色改成深色主题。
加一个会员中心模块,连到订单 DB。
把订单 DB 改成红色,突出风险。
把所有箭头加上中文说明。
拆成左右两个子图。
所有方块改成圆角矩形。
每改一次 5 到 10 秒,改到满意为止。
改 100 次的成本跟改 1 次一样。手画做不到这点。
# 拿去用
老王把 SKILL.md 完整放到 GitHub 公开仓库,MIT 协议,免费拿。
里面有 SKILL.md 主文件、README 安装说明、本文这三张样例的 .drawio 源文件。
clone 走、Fork、改成你自己的版本都行。觉得好用顺手点个 Star,老王后面继续开源更多 Skill。
画出了好玩的图发到评论区给大家看看。
更多好文章,可以围观公众号

## 相关链接
- [老王霸 AI Lab](https://x.com/laowangbabababa)
- [@laowangbabababa](https://x.com/laowangbabababa)
- [1.8K](https://x.com/laowangbabababa/status/2075424995875107182/analytics)
- [https://github.com/pmlaowangba-lab/drawio-generator](https://github.com/pmlaowangba-lab/drawio-generator)
- [github.com/jgraph/drawio-desktop/releases](https://github.com/jgraph/drawio-desktop/releases)
- [app.diagrams.net](https://app.diagrams.net/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [11:40 AM · Jul 10, 2026](https://x.com/laowangbabababa/status/2075424995875107182)
- [1,826 Views](https://x.com/laowangbabababa/status/2075424995875107182/analytics)
---
*导出时间: 2026/7/10 15:51:50*