硅基铁匠丙午年 · 独立刊物
← 返回全部文章
技术与 AI约 7 分钟

一句话生成专业架构图：drawio-skill 教程

drawio-skill 可以把自然语言变成可编辑的 .drawio 文件，并导出 PNG/SVG/PDF。适合画架构图、流程图、ER 图、UML、模型图和代码结构图。

画图这件事，想清楚系统只是第一步，真正耗时间的是反复拖框、对齐、改箭头、调文字。尤其是架构图、流程图、模型图，画完一版之后，经常还要为了汇报格式再改几轮。

drawio-skill 解决的是这个问题：用自然语言描述图表，让智能体生成可编辑的 .drawio 文件，再通过 draw.io 桌面版导出 PNG 、 SVG 、 PDF 或 JPG 。它生成的是可继续维护的图，后续还可以在 draw.io 里继续改。

项目地址: https://github.com/Agents365-ai/drawio-skill
参考链接: https://x.com/0xqiyan/status/2064948594428477498?s=52

它适合画什么图

这个 skill 主要适合需要“看起来专业、还能继续编辑”的图。

常见场景有六类：

  • 架构图：微服务、云架构、网络拓扑、部署结构；
  • 流程图：业务流程、工作流、决策树、状态机；
  • ER 图：数据表、主键外键、实体关系；
  • UML 图：类图、序列图、继承关系；
  • ML / 深度学习模型图：Transformer 、 CNN 、 LSTM 、 GRU；
  • 代码结构图：Python 、 JS/TS 、 Go 、 Rust 的导入关系，Python 类继承层级。

如果只是想随手画白板草图，Excalidraw 或 tldraw 更轻。要把图写进 Markdown 、进 Git 版本管理，Mermaid 或 PlantUML 更合适。 drawio-skill 的强项是可编辑、可导出、样式稳定、适合汇报。

安装前先装 draw.io CLI

它依赖 draw.io 桌面版的命令行导出能力。先安装 draw.io 桌面版。

macOS：

brew install --cask drawio

Windows：

从 draw.io desktop releases 页面下载安装包
https://github.com/jgraph/drawio-desktop/releases

Linux：


# 从 releases 下载 .deb 或 .rpm

# 无头导出场景可能还需要：
sudo apt install xvfb

安装后验证：

drawio --version

如果是在 WSL2 里用 Windows 桌面版，skill 会尝试从 /mnt/c 识别 Windows 的 draw.io 可执行文件。遇到导出失败时，先确认命令行能正常跑起来。

安装 drawio-skill

最省事的方式是通过技能包安装：

npx skills add Agents365-ai/365-skills -g

Claude Code 插件市场可以这样装：

/plugin marketplace add Agents365-ai/365-skills
/plugin install drawio

也可以手动克隆到 skills 目录：

git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill

其他智能体的常见目录：

Claude Code: ~/.claude/skills/
Opencode: ~/.config/opencode/skills/
OpenClaw: ~/.openclaw/skills/
Codex: ~/.agents/skills/

装好以后，不需要启动 MCP 服务，也不需要常驻后台进程。只要你的智能体支持 Agent Skills 规范，就可以直接调用。

第一个例子：一句话画微服务架构图

安装完成后，直接描述你要的图。

可以这样说：

画一个微服务电商架构图，包含 Mobile/Web/Admin 客户端，API Gateway（含认证、限流、路由），Auth/User/Order/Product/Payment 微服务，Kafka 消息队列，Notification 服务，以及 User DB、Order DB、Product DB、Redis Cache、Stripe API。

skill 会做几件事：

  1. 规划图表结构和布局；
  2. 生成 .drawio XML；
  3. 调用 draw.io CLI 导出 PNG；
  4. 自检是否有重叠、截断、连线穿过节点；
  5. 如果有问题，自动修一到两轮；
  6. 你继续用自然语言要求它改图。

比如可以继续说：

把 Kafka 放在服务层中央，所有事件流都连到 Kafka；把支付服务和 Stripe API 放到右侧；导出一份 SVG。

这种改法比手动拖框快很多，尤其适合先出一张能讨论的图。

代码库也能自动画结构图

drawio-skill 不只支持“凭描述画图”，还带了几个代码结构提取脚本，可以把现有项目变成图。

Python 、 JS/TS 、 Go 、 Rust 的导入关系可以这样提取：

python3 scripts/pyimports.py   myproject --group -o graph.json
python3 scripts/jsimports.py   ./src     --group -o graph.json
python3 scripts/goimports.py   ./module  --group -o graph.json
python3 scripts/rustimports.py ./crate   --group -o graph.json

Python 类继承层级：

python3 scripts/pyclasses.py mypackage --group -o graph.json

然后用自动布局脚本生成 draw.io 文件：

python3 scripts/autolayout.py graph.json -o diagram.drawio

大图建议安装 Graphviz：

brew install graphviz

# 或
sudo apt install graphviz

它会自动布点、做正交连线、给子包分框，还会做传递约简。密集的依赖图会更容易读。

官方图标和 AI Logo 怎么用

画云架构图时，最烦的是图标。手写 draw.io 的 shape=mxgraph.* 很容易写错，最后导出一堆空白框。

drawio-skill 带了 10,000 多个官方 draw.io 形状索引，可以直接搜索真实 style：

python3 scripts/shapesearch.py "aws lambda" --limit 5

它会返回 Lambda 对应的官方形状样式，适合 AWS 、 Azure 、 GCP 、 Cisco 、 Kubernetes 、 UML 、 BPMN 、 ER 等图标。

AI 应用架构图还有一个常见问题：draw.io 没有现代 AI / LLM 品牌图标。这个项目提供了 aiicons.py，可以解析 OpenAI 、 Claude 、 Gemini 、 Mistral 、 Llama 、 Ollama 、 LangChain 、 HuggingFace 等 321 个图标。

python3 scripts/aiicons.py "claude" --json
python3 scripts/aiicons.py "openai" --embed

默认使用 CDN 图标。需要离线、自包含文件时，用 --embed。

实用提示词模板

画图时，提示词越像需求说明，效果越稳。可以用这个结构：

请画一张【图表类型】，主题是【系统/业务/模型】。

需要包含这些模块：
- 模块 A：职责是……
- 模块 B：职责是……
- 模块 C：职责是……

模块之间的关系：
- A 调用 B
- B 写入数据库
- C 通过消息队列通知 D

布局要求：
- 从左到右展示数据流
- 客户端放最左，外部服务放最右
- 数据库放底部
- 关键链路用粗线

导出格式：PNG 和 SVG。

如果是 ML 模型图，可以把层数、张量形状、输入输出写清楚：

画一个用于机器翻译的 Transformer 编码器-解码器图：6 层编码器，6 层解码器，输入嵌入 batch × 512 × 768，位置编码，交叉注意力，输出投影。按层类型配色，并标注张量形状。

如果是代码结构图，可以直接给项目路径：

可视化这个 Python 项目的模块导入关系，按子包分组，导出为 PNG 和可编辑的 drawio 文件。

什么时候别用它

drawio-skill 很适合正式图，但并非所有图都该用它。

如果图要放进 README，且希望用纯文本维护，优先 Mermaid 。
如果是白板讨论、草图、产品脑暴，优先 Excalidraw 或 tldraw 。
如果是严格 UML，并且已经有 PlantUML 工作流，继续用 PlantUML 也没问题。

drawio-skill 的位置更像“专业制图助手”：先用自然语言出一版结构清楚的图，再保留 .drawio 文件供后续编辑。

一个可复制的工作流

实际使用可以按这个流程来：

  1. 先写一句完整需求，让它生成第一版；
  2. 看 PNG 预览，检查模块是否缺失；
  3. 用自然语言要求调整布局、颜色、箭头；
  4. 定稿后导出 PNG / SVG / PDF；
  5. 保留 .drawio 源文件，方便以后继续改。

如果是团队协作，建议把 .drawio 和导出的 PNG 一起放进项目文档。 PNG 用来阅读，.drawio 用来维护。

对经常要解释系统、写方案、做汇报的人来说，这个 skill 很实用。它不替你想清楚架构，但能把“想清楚以后还要画半天”的部分省掉。

来源：https://github.com/Agents365-ai/drawio-skill