drawio-skill：用自然语言画出专业架构图的 AI 技能，从安装到实战完整指南

画架构图这件事，一直让我很纠结。

用手动拖拽的方式在 draw.io 里摆一个微服务架构图，从拖节点、调连线、对齐布局到导出 PNG，至少半小时起步。需求一变，又得重来。用 Mermaid 写文本渲染，语法倒是简单，但样式单调、形状有限，导出还得折腾。用 PlantUML 倒是专业，但那语法写起来像在学一门新语言，调试一个连线位置能把你逼疯。

直到我遇到了 drawio-skill。一句话描述你要的图，它直接生成 .drawio 文件，自动布局、自动配色、自动导出 PNG。更离谱的是，它能直接读你的 SQL 文件生成 ER 图，读你的代码库生成模块依赖图，读你的 Terraform 配置生成基础设施架构图。

给你看看他的效果

我觉得质量很高
而且这种自动化的方式和现在很契合

draw.io 桌面版在 GitHub 上有 62,519 stars，是开源图表工具里的绝对霸主。而 drawio-skill 在此基础上叠加了 AI 能力——它不是一个独立的画图工具，而是让 draw.io 变得更好用的 38 个自动化脚本和一套完整工作流。

Key Takeaways

• drawio-skill 在 GitHub 上有 7,372 stars，包含 38 个自动化脚本，覆盖 ER 图、UML、序列图、C4、架构图等 11 种图表类型（GitHub, 2026）
• SQL DDL 直接转 ER 图、代码库自动可视化、Terraform/K8s/docker-compose 转架构图，省去 80% 以上的手动绘制时间
• 7 步工作流含视觉自检和最多 5 轮迭代反馈，确保输出质量

为什么需要 AI 画图工具？

① 手动画图的三个痛点

第一个痛点是慢。 一个包含 10 个微服务、3 个数据库、2 个消息队列的架构图，从空白画布到完成导出，手动操作至少需要 30-45 分钟。这还是在你对布局有清晰思路的情况下——如果边画边改，一个小时打不住。

第二个痛点是改不动。 需求变更时，手动图表的修改成本跟重画差不多。加一个服务节点，你得调整所有相关连线的位置，重新对齐整个布局。改三次之后，图表通常已经变得面目全非。

第三个痛点是不一致。 同一个团队里，不同人画的架构图风格完全不同——颜色不统一、形状不规范、布局方向不一致。放到文档里，像是从三个不同项目拼凑来的。

② 文本画图工具的局限

Mermaid 和 PlantUML 试图用「代码」的方式解决这些问题——把图表写成文本，版本控制友好，修改方便。但它们有自己的短板。

Mermaid 支持的图表类型有限，样式控制能力弱，复杂的自定义形状基本无能为力。PlantUML 语法复杂，学习曲线陡峭，调试一个连线位置经常要反复试错。而且两者都依赖在线渲染器或本地 Java 环境，导出高质量 PNG/SVG 的流程不够顺畅。

③ AI 画图的突破口

drawio-skill 走了一条不同的路：不发明新语法，不替代 draw.io，而是在 draw.io 之上叠加 AI 能力。 你用自然语言描述需求，它生成 .drawio XML 文件，再调用 draw.io 桌面版 CLI 导出 PNG/SVG/PDF。

这个设计有三个好处：第一，输出的 .drawio 文件可以在 draw.io 里直接编辑，不锁定在任何 AI 工具里；第二，利用 draw.io 已有的 10,000+ 官方形状库，AWS、Azure、GCP、Cisco、Kubernetes 图标全都有；第三，38 个自动化脚本覆盖了从「代码转图表」到「图表转 PPT」的完整链路。

传统手动画图：
  需求 → [拖拽/对齐/调连线] → .drawio → 导出 PNG
  耗时：30-60 分钟，改一次等于重画

Mermaid/PlantUML：
  需求 → [写文本语法] → 渲染 → 导出 PNG
  耗时：10-20 分钟，样式受限

drawio-skill：
  需求 → [自然语言描述] → .drawio XML → 自动布局 → 自检 → 导出 PNG
  耗时：1-3 分钟，可迭代，可编辑

drawio-skill 是什么？它解决了什么问题？

① 核心定位

drawio-skill 是一个运行在 Claude Code、Cursor、Copilot 等 AI Agent 中的 Skill（技能包）。它不是一个独立的应用，而是一套指令集和 38 个 Python 脚本，让 AI Agent 能够理解你的画图需求，自动生成专业的 .drawio 文件。

它的核心理念是：你负责描述意图，它负责生成图表。 不需要记语法，不需要拖拽，不需要手动调布局。

② 11 种图表类型预设

Skill 内置了 11 种图表类型的样式预设，每种预设定义了专属的形状、配色、连线风格和布局方向：

图表类型	典型用途	内置形状
ER 图	数据库建模	表格容器、PK/FK 标记、鸦爪连线
UML 类图	面向对象设计	三段式类框、继承/实现/组合/聚合箭头
序列图	接口交互流程	Lifeline、激活条、同步/异步/返回消息
C4 模型	系统架构分层	Person、System、Container、Component，支持下钻
架构图	微服务/部署拓扑	分层容器、服务/数据库/队列/网关形状
ML/DL 图	神经网络结构	层块按类型配色，张量形状标注
流程图	业务流程	椭圆起止、矩形步骤、菱形判断
SysML	系统工程	Block、Port、Constraint，60+ 形状
BPMN	业务流程建模	Pool/Lane、Task、Gateway、200+ BPMN 形状
网络拓扑	网络架构	Router、Switch、Firewall、Server、云图标
泳道图	跨职能流程	Pool/Lane 容器，按角色/部门分区

每种预设不是简单的颜色模板，而是包含完整的结构规范——ER 图的表格用 shape=table;childLayout=tableLayout，序列图的 Lifeline 用 shape=umlLifeline，C4 模型用官方的深蓝/中蓝/浅蓝三级配色。这些规范确保生成的图表符合行业标准，而不是「看着像但不规范」的示意图。

③ 38 个自动化脚本

这是 drawio-skill 最硬核的部分。38 个脚本按功能分为 7 大类：

作图与布局类：autolayout.py（Graphviz 自动布局）、seqlayout.py（序列图确定性布局）、c4.py（C4 多层模型）、tubemap.py（地铁风格流程图）

代码转图表类：pyimports.py、jsimports.py、goimports.py、rustimports.py（四种语言的模块依赖图）、pyclasses.py（Python 类继承图）

基础设施转图表类：tfimports.py（Terraform）、k8simports.py（Kubernetes）、composeimports.py（docker-compose）、sqlerd.py（SQL DDL → ER 图）、ciimports.py（CI 流水线）、openapiimports.py（OpenAPI → API 图）

实时基础设施类：tfstate.py（Terraform 实际部署状态）、dockerimports.py（运行中的容器）

对比与演进类：drawiodiff.py（图表差异对比）、timelapse.py（架构演进时间线）、heatmap.py（数据热力图）、buildup.py（逐步构建动画）、compress.py（高管摘要视图）、prdiff.py（PR 图表审查）

图表转其他格式类：drawiohtml.py（交互式 HTML 查看器）、explain.py（图表文字描述）、drawio2pptx.py（转 PPT）、svgflow.py（流动动画 SVG）、drawio2mermaid.py（转 Mermaid）、runbook.py（可点击运维手册）

工具类：shapesearch.py（10,000+ 形状搜索）、aiicons.py（321 个 AI/LLM 品牌图标）、validate.py（结构化检查）、repair_png.py（PNG 修复）、relabel.py（多语言标签替换）、restyle.py（样式重映射）、raster2drawio.py（图片转可编辑图表）、encode_drawio_url.py（浏览器回退方案）

这些脚本之间可以串联。比如你想可视化一个 Python 项目的架构：先用 pyimports.py 提取模块依赖关系生成 JSON，再用 autolayout.py 自动布局生成 .drawio，最后用 validate.py 检查结构完整性。整个流程一条命令搞定。

如何安装 drawio-skill？

① 第一步：安装 draw.io 桌面版

drawio-skill 依赖 draw.io 桌面版的 CLI 来导出 PNG/SVG/PDF。没有它，Skill 只能生成 .drawio 文件，无法自动导出图片。

# macOS（推荐 Homebrew 安装）
brew install --cask drawio
drawio --version

# Windows —— 下载安装包
# https://github.com/jgraph/drawio-desktop/releases
# 安装后 CLI 路径：C:\Program Files\draw.io\draw.io.exe

# Linux —— 从 releases 下载 .deb/.rpm
# 无头服务器需要 xvfb：
sudo apt install xvfb
xvfb-run -a drawio --version

版本要求：推荐 ≥ 30。 版本 30 解锁了两个关键功能：Mermaid → .drawio 转换（28 种 Mermaid 图表类型直接转成原生可编辑的 .drawio），以及 ELK --layout 布局引擎。低于 30 的版本这两项都不可用。

安装完成后验证：

drawio --version
# 输出类似：draw.io version 31.1.8

Windows 用户注意：安装完成后，drawio 命令不在 PATH 里。后续所有命令需要写全路径："C:\Program Files\draw.io\draw.io.exe" -x -f png -o output.png input.drawio

② 第二步：安装 drawio-skill

三种安装方式，选一种即可：

# 方式 1：通过 skills 工具安装（推荐）
npx skills add Agents365-ai/365-skills -g

# 方式 2：Claude Code 插件市场
> /plugin marketplace add Agents365-ai/365-skills
> /plugin install drawio

# 方式 3：手动克隆到 skills 目录
git clone https://github.com/Agents365-ai/drawio-skill.git \
  ~/.claude/skills/drawio-skill

安装完成后没有额外依赖，没有后台服务。一个 SKILL.md 文件定义了完整的工作流，38 个 Python 脚本提供自动化能力。

③ 更新方式

# Claude Code 插件方式
> /plugin update drawio

# 手动安装方式
cd ~/.claude/skills/drawio-skill && git pull

7 步工作流是怎么跑的？

drawio-skill 的 SKILL.md 定义了一套严格的 7 步工作流。这不是建议，而是 Skill 执行时必须遵循的流程。每一步都有明确的输入、输出和质量检查。

Step 0：解析样式预设

Skill 首先检查你是否激活了自定义样式预设。样式预设是一个 JSON 文件，定义了你偏好的配色、形状、字体和连线风格。

# 用户预设位置
~/.drawio-skill/styles/<name>.json

# 内置预设
<skill-dir>/styles/built-in/default.json
<skill-dir>/styles/built-in/corporate.json
<skill-dir>/styles/built-in/dark.json
<skill-dir>/styles/built-in/handdrawn.json
<skill-dir>/styles/built-in/colorblind-safe.json

你可以在对话中说「用我的 corporate 风格」，Skill 会自动加载对应的预设文件。没有激活预设就使用内置的默认风格。

Step 1：检查依赖

Skill 自动检测 draw.io CLI 的位置和版本：

# 按优先级检测
drawio --version                    # macOS/Linux 首选
draw.io --version                   # 旧版备选
/Applications/draw.io.app/Contents/MacOS/draw.io --version  # macOS .app
"C:\Program Files\draw.io\draw.io.exe" --version            # Windows

检测到的二进制路径会被记住，后续所有导出命令都使用这个路径。同时记录版本号——≥ 30 才能用 Mermaid 转换和 ELK 布局。

Step 2：规划布局

识别图表中的形状、关系、布局方向（LR 从左到右 / TB 从上到下），按层级/分组组织。这一步由 AI Agent 自动完成，你只需要在 Step 1 中描述清楚需求。

如果需求不够具体，Skill 会问你 1-3 个聚焦问题：图表类型、输出格式、输出位置、范围/精度。

Step 3：生成 .drawio 文件

这是核心步骤。Skill 根据场景自动选择三种生成方式：

方式 A：Mermaid → CLI 转换（标准图表类型，CLI ≥ 30）

适合流程图、思维导图、甘特图、时间线等标准类型。Skill 生成 .mmd 文件，CLI 自动转成原生 .drawio，布局白送。

drawio -x -f xml -o diagram.drawio diagram.mmd

方式 B：手写 XML（自定义样式、厂商图标、泳道图）

需要精确控制形状、颜色、连线时，Skill 直接生成 .drawio XML。XML 遵循严格的规范——id 从 2 开始递增，所有边必须包含 <mxGeometry relative="1" as="geometry" /> 子元素，文本使用 html=1 启用 HTML 渲染。

方式 C：数据驱动生成器（代码库、SQL、IaC）

这是最强大的方式。38 个脚本中的提取器负责从源数据生成 graph JSON，autolayout.py 负责布局，validate.py 负责检查：

# 代码库 → 架构图
python3 scripts/pyimports.py ./src --group -o graph.json
python3 scripts/autolayout.py graph.json -o arch.drawio
python3 scripts/validate.py arch.drawio

# SQL → ER 图
python3 scripts/sqlerd.py schema.sql -o er.drawio

# Terraform → 基础设施图
python3 scripts/tfimports.py ./infra/ -o infra.drawio

对于大于 15 个节点的复杂图表，不要手动放置坐标——交给 autolayout.py 处理。Graphviz 的 dot 引擎负责节点布局和正交连线路由，传递约简负责简化密集的依赖关系图。

Step 4：导出预览 PNG

# 预览模式：不用 -e，限制宽度 2000px
drawio -x -f png --width 2000 -o diagram.png input.drawio

为什么不用 -e？ draw.io CLI 的 -e 参数会在 PNG 中嵌入图表 XML，但有一个已知 bug：IEND chunk 被截断 8 字节。这会导致视觉 API（包括 Claude）返回 400 错误。预览阶段不嵌入，最终导出时才嵌入。

为什么限制 2000px？ Claude 的视觉 API 拒绝超过 2576×2576 像素的图片。-s 2（2 倍缩放）在中等大小以上的图表上很容易超过这个限制，所以预览用 --width 2000 更安全。

Step 5：自检

这是 drawio-skill 最聪明的设计之一。Skill 用 AI Agent 的视觉能力读取导出的 PNG，自动检查 7 类问题：

检查项	问题描述	自动修复动作
形状重叠	两个或多个形状堆叠在一起	移开 ≥ 200px
标签截断	文字在形状边界处被裁剪	增大形状宽高
连线缺失	箭头没有视觉上连接到形状	检查 source/target id
形状出界	形状在负坐标或远离主体	移到正坐标区域
连线穿形状	箭头穿过无关的形状	添加 waypoints 绕行
连线堆叠	多条线在同一路径上重叠	分散连接点
标签重叠	边文字与其他标签/线/节点重叠	移动到附近空白区域

最多自动修复 2 轮。 如果 2 轮之后问题仍然存在，Skill 会把当前状态展示给你，让你手动决定。这个设计避免了无限修复循环。

Step 6：迭代反馈

自检通过后，Skill 展示导出的图片并征求你的反馈。你可以要求各种修改：

• 「把用户服务改成蓝色」→ 直接改 XML 里的 fillColor
• 「加一个 Redis 缓存节点」→ 追加 mxCell 元素
• 「连线从上到下」→ 重新生成整个布局

关键规则：

• 单元素修改：直接编辑现有 XML，保留之前的布局调优
• 布局级修改（如 LR↔TB）：完全重新生成
• 每次迭代覆盖同一个 diagram.png 文件，不创建 v1、v2、v3
• 安全阀：5 轮迭代后，建议你直接在 draw.io 桌面版里微调

Step 7：最终导出

用户确认后，导出所有请求的格式：

# PNG（带 -e 嵌入 XML，双扩展名表示可编辑）
drawio -x -f png -e -s 2 -o diagram.drawio.png input.drawio
python3 scripts/repair_png.py diagram.drawio.png  # 必须执行！

# SVG（-e 安全，SVG 本身就是文本）
drawio -x -f svg -e -o diagram.svg input.drawio

# PDF
drawio -x -f pdf -e -o diagram.pdf input.drawio

⚠️ 导出带 -e 的 PNG 后，必须运行 repair_png.py。这是 draw.io CLI 的已知 bug（issue #8）——IEND chunk 被截断 8 字节，导致视觉 API 报错 400。脚本的 endswith(IEND) 检查让它在 bug 修复后自动变成空操作，可以无条件运行。

哪些场景最适合用 drawio-skill？

① SQL DDL → ER 图

这是我用得最多的功能。把 CREATE TABLE 语句丢给它，直接生成带 PK/FK 标记的 ER 图，外键关系用鸦爪线连接。

python3 scripts/sqlerd.py schema.sql -o er-diagram.drawio

sqlerd.py 会解析每张表的列定义，识别主键和外键，自动生成表节点（带列名和类型标注）和外键连线。你不需要手动画表关系，也不需要手动调整布局——Graphviz 帮你搞定。

实际体验： 我拿一个包含 15 张表、23 个外键关系的电商数据库试了一下，从输入 SQL 到拿到 ER 图 PNG，总共不到 2 分钟。手动画的话，光对齐 15 张表的位置就得 20 分钟。

② 代码库自动可视化

给它一个 Python/JS/Go/Rust 项目，它自动分析 import 关系，生成模块依赖图：

# Python 项目
python3 scripts/pyimports.py ./myproject --group -o graph.json
python3 scripts/autolayout.py graph.json -o arch.drawio

# JavaScript/TypeScript 项目
python3 scripts/jsimports.py ./src --group -o graph.json

# Go 项目
python3 scripts/goimports.py ./module --group -o graph.json

# Rust 项目
python3 scripts/rustimports.py ./crate --group -o graph.json

--group 参数会按子包/子模块分组，用容器框起来。Graphviz 负责布局，传递约简负责简化密集的依赖关系——如果 A 导入 B，B 导入 C，那么 A→C 的连线会被自动去掉，只保留直接依赖。

对于 Python 项目，还有一个额外的福利： pyclasses.py 可以提取类继承关系，生成 UML 风格的类图。

python3 scripts/pyclasses.py mypackage --group -o class-diagram.drawio

③ 基础设施即代码 → 架构图

Terraform、Kubernetes、docker-compose 配置文件，直接转成架构图。每个资源自动渲染为官方 AWS/Azure/GCP 图标：

# Terraform → 架构图（官方云厂商图标）
python3 scripts/tfimports.py ./terraform/ -o infra.drawio

# Kubernetes → 架构图（官方 K8s 图标）
python3 scripts/k8simports.py ./k8s/ -o k8s-arch.drawio

# docker-compose → 架构图（服务框 + Volume 圆柱）
python3 scripts/composeimports.py docker-compose.yml -o compose.drawio

更厉害的是，它还能画实际运行状态的架构图，而不仅仅是声明式配置：

# Terraform 实际部署状态
terraform show -json | python3 scripts/tfstate.py - -o deployed.drawio

# Docker 运行中的容器
docker inspect $(docker ps -q) | python3 scripts/dockerimports.py - -o running.drawio

# Kubernetes 实际集群状态
kubectl get all,ing,cm,secret,pvc -o json | python3 scripts/k8simports.py - -o cluster.drawio

这在运维场景下特别有用——你可以快速看到「实际跑了什么」vs「配置声明了什么」之间的差异。

④ 时序图：JSON 描述，确定性布局

手动画时序图最痛苦的是对齐 Lifeline 和箭头。seqlayout.py 用 JSON 描述参与者和消息，所有几何坐标自动计算：

{
  "participants": ["User", "Gateway", "Auth", "DB"],
  "messages": [
    {"from": "User", "to": "Gateway", "label": "POST /login"},
    {"from": "Gateway", "to": "Auth", "label": "verify credentials"},
    {"from": "Auth", "to": "DB", "label": "SELECT user"},
    {"from": "DB", "to": "Auth", "label": "user data"},
    {"from": "Auth", "to": "Gateway", "label": "JWT token"},
    {"from": "Gateway", "to": "User", "label": "200 OK"}
  ]
}

python3 scripts/seqlayout.py seq.json -o sequence.drawio

不需要手摆坐标，不需要调整箭头位置。Lifeline 间距、激活条高度、箭头路由全部由脚本计算。输出的 .drawio 文件可以直接在 draw.io 里编辑，添加 alt/loop 等片段框。

⑤ C4 模型：一键生成多层架构

C4 模型是描述系统架构的行业标准——从高层的 System Context 到中层的 Container 再到底层的 Component，三层逐级下钻。

{
  "system": "电商平台",
  "external": ["支付宝", "短信服务"],
  "containers": [
    {"name": "Web 前端", "tech": "Vue 3", "desc": "用户界面"},
    {"name": "API 服务", "tech": "Spring Boot", "desc": "业务逻辑"},
    {"name": "数据库", "tech": "MySQL", "desc": "数据持久化"}
  ],
  "components": [
    {"container": "API 服务", "name": "用户模块", "desc": "注册登录"},
    {"container": "API 服务", "name": "订单模块", "desc": "下单支付"}
  ]
}

python3 scripts/c4.py c4.json -o c4-model.drawio

c4.py 会生成多页 .drawio 文件——第一页是 System Context，第二页是 Container，第三页是 Component。父元素带有 data:page/id 链接，点击直接跳转到子页面。官方 C4 形状配色（深蓝/中蓝/浅蓝/灰色）自动应用。

进阶玩法有哪些？

① 热力图：给架构图上色

用 CSV/JSON 数据给已有图表上色——成本、延迟、流量、错误率，一眼看出瓶颈：

api-gateway,450
user-service,120
order-service,890
payment-service,2300

python3 scripts/heatmap.py arch.drawio -m latency.csv --palette heat -o arch-heatmap.drawio

heatmap.py 按节点 id 或标签匹配数据，沿渐变色重新着色。支持 --palette heat|cool|warm，可选 --size 缩放节点大小，自动生成图例。

② Metro Map：地铁风格的流程图

把流水线画成伦敦地铁风格——彩色线路、八向（水平/垂直/45°）路由、白色换乘圈：

{
  "lines": [
    {"name": "Author", "color": "#E63946", "stations": ["需求", "大纲", "初稿"]},
    {"name": "Review", "color": "#457B9D", "stations": ["初稿", "评审", "定稿"]},
    {"name": "Publish", "color": "#2A9D8F", "stations": ["定稿", "发布", "推广"]}
  ],
  "interchanges": ["初稿", "定稿"]
}

python3 scripts/tubemap.py metro.json -o metro.drawio

这个功能特别适合展示 CI/CD 流水线、内容发布流程、产品开发路线图等有明确阶段的流程。

③ PR Diff Bot：自动审查图表变更

在 CI 里自动对比 .drawio 文件的变更，生成差异报告：

python3 scripts/prdiff.py main..HEAD -o report.md

prdiff.py 会渲染 base 和 head 版本的 PNG，生成差异图（新增=绿色，删除=红色，修改=橙色），输出 Markdown 报告。项目还附带了一个 GitHub Action（.github/actions/drawio-diff/），可以直接贴到 PR 评论里。

④ 样式预设：从已有图表学习你的风格

你可以从一个已有的 .drawio 文件或图片「学习」你的视觉风格，保存后随时复用：

用我的 corporate 风格画一个微服务架构图

Skill 会从 ~/.drawio-skill/styles/corporate.json 加载你的预设，应用到新图表上。预设包含：调色板、形状关键词、连线风格、字体、附加效果（如手绘风 sketch=1、暗色主题）。

内置的 5 个预设覆盖了常见场景：default（默认蓝白）、corporate（企业灰蓝）、handdrawn（手绘风格）、colorblind-safe（色盲友好，使用 Okabe-Ito 调色板）、dark（暗色主题）。

⑤ 图表转其他格式

drawio-skill 不仅能生成图表，还能把 .drawio 转换成各种格式：

# 转交互式 HTML 查看器（可缩放、搜索、页面切换）
python3 scripts/drawiohtml.py diagram.drawio -o viewer.html

# 转 PPT（每页一个 slide，C4 多页模型直接变成演示文稿）
python3 scripts/drawio2pptx.py diagram.drawio -o deck.pptx

# 转流动动画 SVG（连线像蚂蚁行军一样流动）
python3 scripts/svgflow.py diagram.drawio -o flow.svg

# 转 Mermaid 文本（适合放到 Markdown 里用 GitHub 渲染）
python3 scripts/drawio2mermaid.py diagram.drawio

# 转可点击运维手册（决策树变成交互式 triage 应用）
python3 scripts/runbook.py flow.drawio -o runbook.html

# 生成文字描述（适合写文档或 PR 说明）
python3 scripts/explain.py diagram.drawio

⑥ 架构演进时间线

想看一个项目的架构是怎么一步步演变的？timelapse.py 可以回溯 git 历史，在每个采样点运行提取器，生成一个可播放的 HTML 时间线：

python3 scripts/timelapse.py ./src --importer pyimports -o timeline.html

这个功能在项目交接、架构评审、技术复盘时特别有价值。

跟其他工具比，drawio-skill 有什么优势？

① vs Mermaid

Mermaid 的优势是轻量——写几行文本就能渲染一个流程图，GitHub 原生支持。但它的劣势也很明显：样式控制能力弱（颜色、形状、布局方向都受限），支持的图表类型有限（没有 ER 图的标准表示、没有 C4 模型、没有 BPMN），复杂图表的自动布局经常把节点排得很乱。

drawio-skill 支持 Mermaid 转换（CLI ≥ 30），但不止于此。对于需要精确控制的场景——厂商图标、泳道图、自定义配色——它直接生成 .drawio XML，利用 draw.io 的 10,000+ 形状库和完整的样式系统。

② vs PlantUML

PlantUML 在 UML 领域确实专业，但它的语法学习曲线陡峭，调试一个连线位置经常要反复试错。而且 PlantUML 依赖本地 Java 环境或在线渲染器，导出高质量 PNG/SVG 的流程不够顺畅。

drawio-skill 的序列图功能（seqlayout.py）用 JSON 描述参与者和消息，所有几何坐标自动计算，不需要学新语法。输出的 .drawio 文件可以直接在 draw.io 里编辑，添加 PlantUML 难以实现的自定义样式。

③ vs 手动 draw.io

手动 draw.io 的优势是完全控制——你可以精确调整每个元素的位置和样式。但代价是时间成本高、修改困难、团队风格不一致。

drawio-skill 的定位不是替代手动 draw.io，而是在「描述清楚需求」和「拿到可用图表」之间建立一条快速通道。生成的 .drawio 文件完全可以在 draw.io 里继续编辑——它只是一个更好的起点。

④ 一张表看清差异

维度	Mermaid	PlantUML	手动 draw.io	drawio-skill
学习成本	低	高	中	无（自然语言）
图表类型	有限	UML 为主	全部	11 种预设
样式控制	弱	中	强	强（继承 draw.io）
自动布局	有限	有限	无	Graphviz + ELK
代码/SQL/IaC 导入	无	无	无	38 个脚本
输出可编辑性	文本	文本	原生	原生 .drawio
导出格式	SVG/PNG	SVG/PNG	PNG/SVG/PDF	PNG/SVG/PDF/JPG
10,000+ 形状库	无	无	有	有 + 321 AI 图标

FAQ

drawio-skill 支持哪些 AI Agent？

支持所有兼容 Agent Skills 规范的 Agent：Claude Code、Cursor、Copilot、OpenClaw、Codex、Autohand Code、Hermes 等。核心是一个 SKILL.md 文件，不需要 MCP 服务器或后台 daemon。

需要什么前置条件？

必须安装 draw.io 桌面版（推荐 ≥ 30）。可选安装 Graphviz（用于 autolayout.py 自动布局）和 Python 3（用于 38 个自动化脚本）。没有 Graphviz 时，可以用 CLI 的 --layout 参数替代（仅限 CLI ≥ 30）。

能导出哪些格式？

PNG、SVG、PDF、JPG。PNG 和 SVG 支持 -e 参数嵌入图表 XML，导出的文件可以在 draw.io 里直接打开编辑。使用双扩展名（如 diagram.drawio.png）表示嵌入了 XML。

复杂图表的自动布局效果怎么样？

对于 15 个节点以下的图表，Graphviz 的 dot 引擎布局效果很好。对于更大更复杂的图表，可能需要手动调整——autolayout.py 的 --tune 参数会自动选择更可读的方向（LR 或 TB），但极端密集的依赖关系图仍然可能需要人工干预。

能不能从图片反向生成可编辑的 .drawio？

可以。raster2drawio.py 配合 AI Agent 的视觉能力，可以从白板照片、旧版 PNG、Visio 截图中提取节点和连线，生成可编辑的 .drawio 文件。缺失坐标的节点会回退到 autolayout.py 自动布局。

总结

drawio-skill 解决了一个真实的问题：把「描述」变成「图表」的效率太低了。

它不是让你放弃 draw.io，而是让 draw.io 变得更好用——你负责描述意图，它负责生成图表。38 个自动化脚本覆盖了从「代码转图表」到「图表转 PPT」的完整链路，11 种图表类型预设确保生成的图表符合行业标准。

如果你经常需要画架构图、ER 图、流程图、时序图、C4 模型，drawio-skill 值得一试。安装两步搞定，用起来就是一句话的事。生成的 .drawio 文件完全可编辑，不锁定在任何 AI 工具里。

---

项目地址：https://github.com/Agents365-ai/drawio-skill

相关阅读：

• Skill 测试入门：从使用场景出发，搞清楚怎么验证你的 AI 技能
• Taste Skill：88KB 提示词如何让 AI 写的 UI 不再像流水线罐头
• 两个开源项目带你系统学习 AI Agent