drawio-skill 图表类型指南：ERD 到神经网络图的 11 种预设

【免费下载链接】drawio-skillAgent skill that turns natural language, code, Terraform/K8s, SQL, OpenAPI, AsyncAPI, Protobuf and GraphQL sources into editable, tested draw.io architecture diagrams: incremental sync, multi-view projection, drift diff, CI architecture tests, whiteboard derasterize, interactive HTML/PPTX/Mermaid exports.项目地址: https://gitcode.com/gh_mirrors/dr/drawio-skill

drawio-skill 是一个面向 AI Agent 的图表生成技能：你用一句话描述系统，或直接把 SQL、Terraform、代码丢给它，就能得到可编辑的 .drawio 文件，内置 11 种图表类型预设，产物可导出 PNG、SVG、PDF、JPG。

动笔前，用 3 个问题锁定图表类型

想画架构图，是不是还在一个个拖框？其实先回答三个问题，类型基本就定了：

1. 你在表达什么？表结构 → ERD；系统分层与组件 → 架构图；对象交互 → 序列图；代码里的类和接口 → UML 类图；神经网络结构 → ML/DL 模型图；做事的步骤 → 流程图。
2. 图的读者是谁？给评审看的正式图，选预设类型，布局和箭头都有行内约定；给自己梳理思路，Mermaid 转 .drawio 更快。
3. 数据来源是什么？有 SQL DDL、OpenAPI、.proto 文件就直接走导入脚本，不用手绘；没有数据源就用自然语言描述，技能会自己规划布局。

快速画出数据库模型：ERD 预设

适合场景：设计库表、和 DBA 评审字段与外键关系。

• 每张表是一个可折叠的表格容器，主键列加粗标记
• 外键关系画虚线，配 ER 符号箭头，一眼看清基数
• 布局从上到下，相关表垂直分组

💡 如果你有 DDL 文件，直接跑python3 scripts/sqlerd.py schema.sql解析CREATE TABLE，节点和连线自动生成，连手都不用画。

架构设计：泳道、分层与中枢模式

想给微服务系统画一张能上评审会的图，架构图预设把约定都替你做好了：

• 用泳道表示 Client / API / Service / Data 各层，每层一个色系，层数 ≥ 4 时自动切换为竖向布局
• 数据库用圆柱形、队列用黄色并放在中间做中枢、网关用橙色、外部系统用虚线边框
• 消息总线这类"星型"拓扑（Kafka 居中、各服务环绕）是架构图的经典形态，边标签写清楚事件类型即可

想要更正式的 C4 模型（系统上下文 → 容器 → 组件逐层下钻），直接跑c4.py生成多页图，父级元素点击可跳转下级页面；网络拓扑图则内置了路由器、防火墙、交换机等标准图标。

梳理流程与交互：流程图、序列图、泳道

业务规则怎么画最不容易被误解？答案写在颜色约定里：

• 开始/结束是绿色椭圆，处理是蓝色矩形，决策是黄色菱形，输入输出是橙色平行四边形，子流程是紫色双边框矩形
• 决策分支必须标 Yes/No，分支左右展开后再汇回主线
• 序列图不用手摆坐标，seqlayout.py会根据参与者和消息 JSON 算好全部生命线与激活框；同步、异步、返回消息靠实线/虚线/灰色区分
• 跨职能泳道（Swimlane）按角色分道，跨道的那条线就是交接点——这正是这类图最有价值的地方

可视化模型：神经网络图的分层配色

写论文、画模型结构图时，ML/DL 预设解决的是"一眼看懂每层在干什么"：

• 按层类型着色：输入输出绿色、卷积/池化蓝色、注意力/Transformer 紫色、RNN 系黄色、损失/激活红色
• 每层标注张量形状，如 (B, 64, 32, 32) 或 (B, T, D)，用换行做标签第二行
• 数据流从上到下，编码器/解码器用泳道分组，跳跃连接用虚线曲线箭头

同类场景里，UML 类图也有自己的箭头语言：继承和实现用空心三角（实现加虚线），组合是实心菱形，聚合是空心菱形，接口放在实现类上方。

说一句话，30 秒拿到 .drawio

上手只有两步：先安装 draw.io 桌面版 CLI（macOS 上brew install --cask drawio），再安装技能本体：

git clone https://gitcode.com/gh_mirrors/dr/drawio-skill

之后直接把 skill 装进你的 Agent（Claude Code、Cursor 等都支持），用大白话描述需求即可，比如"画一个三层 Transformer 编码器，标出每层的张量形状"。它会规划布局、写出 XML、导出图片并自检修复重叠和断线，你只需看结果提反馈。安装细节见 docs/INSTALL_CLI.md 和 docs/USAGE.md。

从库表设计到论文模型图，11 种预设覆盖了大多数日常画图需求；选对类型、说清数据，剩下的交给它。

【免费下载链接】drawio-skillAgent skill that turns natural language, code, Terraform/K8s, SQL, OpenAPI, AsyncAPI, Protobuf and GraphQL sources into editable, tested draw.io architecture diagrams: incremental sync, multi-view projection, drift diff, CI architecture tests, whiteboard derasterize, interactive HTML/PPTX/Mermaid exports.项目地址: https://gitcode.com/gh_mirrors/dr/drawio-skill