30 秒画完一张原型架构图Skill
今天把自建了大半年的画图 Skill 开源出来。装上之后跟 Claude 说一句话，30 秒拿到一张架构图，原型图，流程图。
01 接看效果
下面三张图全是 drawio-generator 跑出来的真实样品，每张大约 30 秒。
用户登录流程
48%
52%
7 个节点，6 根箭头。蓝色方块是普通动作，黄色菱形是判断分支，绿色走通过，红色走失败。
电商下单核心链路
10 个节点，8 根箭头，三层结构。用户层和业务层用蓝色方块，数据层用绿色圆柱。圆柱是数据库的标准画法，看一眼就知道这块是存数据的。
AI Agent 三大组件
6 个节点，5 根箭头。中间深色方块是 Agent 的大脑，背后跑的是大模型本身。右边三个是 Agent 离不开的三件套，左边是输入，下方是最终回复。
三张图的共同点。方块都对齐，箭头横平竖直走直角，颜色按意思自动分好，中文字也不会糊成一团。
人手拖 PPT 大概 1 小时一张。这套 30 秒一张，效果还更稳。
03
一句话装好
不用懂 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，两个都免费。
04
用一次只要 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 分钟以内。
05
能画哪些图
drawio-generator 适合画讲关系的图。架构图、流程图、时序图、E-R 图、状态机、组件图、思维导图，都能画。任何能用方块加箭头描述的东西它都能干。
最常用的几个场景。
公司新业务架构图，30 个组件以内 30 秒搞定。
产品 PRD 里的流程图，分支判断和异常路径都能画进去。
面试讲项目要 demo 的系统架构图，3 张图打底，5 分钟讲完。
学习笔记里的知识结构图，整理 100 页书的思维脉络。
公众号文章配图，省下找设计师的时间。
不适合用它画的，是插画、漫画、封面、海报这种需要审美的图。这类东西让 GPT-Image-2、Midjourney 这种画图模型来更对。
06
不满意一句话改
Skill 最爽的地方是改起来不要钱。
跟 AI 说话就行：
把背景色改成深色主题。
加一个会员中心模块，连到订单 DB。
把订单 DB 改成红色，突出风险。
把所有箭头加上中文说明。
拆成左右两个子图。
所有方块改成圆角矩形。
每改一次 5 到 10 秒，改到满意为止。
改 100 次的成本跟改 1 次一样。手画做不到这点。