drawio-skill: 自然语言生成专业 draw.io 图表的技能包

Skill超级捕获手 技术创作者 2026-08-25 16 阅读

用自然语言描述一个微服务电商架构，AI 直接吐出一张带完整图标、干净边线、可编辑导出的 .drawio 图——这就是 drawio-skill 在做的事。一个 Skill，覆盖 11 种图表类型、36 个工具、10000+ 官方图标，零依赖 MCP 服务端，MIT 协议，开箱即装。

功能与原则

drawio-skill 的核心能力是把自然语言直接变成专业级 draw.io 图表，输出 PNG / SVG / PDF / JPG 四种格式。它不是”生成图片”，而是生成可编辑的 .drawio XML——画的每一条线、每一个节点都可以在 draw.io 里继续改。

设计原则三条：
– 结构进，布局出：输入 Mermaid、代码、IaC 配置，Skill 自动完成布局，不需要手工排版
– 零外部依赖：不需要 MCP server、不需要后台进程，一个 SKILL.md 文件走天下
– 自检 + 修正：生成后用视觉模型读自己的 PNG 输出，自动修复重叠、标签截断、线条穿插等问题，最多 2 轮

认可度

  • GitHub ⭐：7,964（截至 2026-08-25）
  • Forks：569
  • 收录于 SkillsMP、SkillHub.club、ClawHub 三大市场
  • 支持 Claude Code、Cursor、Copilot、OpenClaw、OpenAI Codex、Autohand Code、Helios/Hermes Agent 等 18+ 平台
  • 最后一次更新：2026-08-25（当日凌晨）

链接

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

原作者

Agents365-ai（GitHub 账号 @Agents365-ai），专注于为 AI 编码 Agent 提供生产级技能包，同名组织还维护着一套 365-skills 技能合集，B 站有配套视频演示（https://space.bilibili.com/441831884）。

介绍

drawio-skill 最早解决的是一个具体痛点：开发者想让 AI 画一张架构图，结果要么是低质量的 Mermaid 截图，要么是 Figma 里手动排半小时。Skill 的做法是调用 draw.io 桌面版 CLI 的无头导出能力——先让 Agent 生成符合 draw.io XML schema 的结构化文件，再走 drawio –export 出图。

支持的输入类型非常广。代码库可视化：Python / JS-TS / Go / Rust 的 import 图、Python class 继承层次，Graphviz 做自动布局，过渡削减冗余边，结果是嵌套容器的可编辑图。IaC 转架构图：Terraform、Kubernetes manifest、docker-compose 文件直接进，资源渲染成官方 AWS / Azure / GCP / K8s 图标，边的起止从资源引用推导。SQL DDL 转 ER 图：解析 CREATE TABLE 语句，标注主键 / 外键，画出 crow’s-foot 关系的 ER 图。

图表类型覆盖：ERD、UML Class、Sequence、C4（支持点击下钻）、Architecture、ML/Deep Learning（Transformer/CNN/LSTM）、Flowchart、SysML（BDD/IBD/Requirement/Parametric）、BPMN、Network Topology、Cross-Functional Swimlane，另含 Tube-Map 模式（地铁线路风格管道图）。

特点

  • 11 种图表预设，覆盖从系统设计到流程图到机器学习模型可视化的完整场景
  • Mermaid → native .draw.io：标准 Mermaid 类型（flowchart/mindmap/kanban/gitGraph/timeline 等）直接转成可编辑 draw.io，draw.io ≥ 30 版本解锁
  • 10000+ 官方图标：AWS/Azure/GCP/Cisco/K8s/UML/BPMN 图标直接搜索，不再出现 shape=mxgraph.* 的空白框错误
  • AI / LLM 品牌 Logo：内置 321 个（OpenAI/Claude/Gemini/Llama/Ollama/LangChain 等）+ 18 个数据存储品牌（Redis/Postgres/Qdrant/Milvus），画 LLM/RAG 架构图必备
  • 视觉自检循环：生成 PNG → 模型读图 → 自动修复重叠 / 截断 / 线条穿插，最多 2 轮
  • 多智能体零配置：单文件 SKILL.md，多个 Agent 平台自动识别，不需要 MCP 服务端

使用方法

第一步：安装 draw.io CLI

平台 命令
macOS brew install --cask drawio
Windows 下载 installer
Linux .deb/.rpm from releases；sudo apt install xvfb 支持无头导出

验证：drawio --version（推荐 ≥ 30）

第二步：安装 Skill

# 任意 Agent（Claude Code / Cursor / Copilot 等）
npx skills add Agents365-ai/365-skills -g

# Claude Code 插件市场
/plugin marketplace add Agents365-ai/365-skills
/plugin install drawio

# 手动安装
git clone https://github.com/Agents365-ai/drawio-skill.git 
  ~/.claude/skills/drawio-skill

第三步：直接描述需求

画一个 Transformer 编码器-解码器机器翻译模型：6层编码器（自注意力），
6层解码器（交叉注意力），输入嵌入 (batch × 512 × 768)，位置编码，
最后一层输出投影。各层之间标注张量形状，按层类型配色。

Skill 自动规划布局、生成 .drawio XML、调用 draw.io CLI 导出、自检修复、返回可编辑文件。

使用场景与人群

适用场景：系统架构图、微服务拓扑图、代码结构可视化、CI/CD 流程图、ML 模型示意图、数据库 ER 图、UML 类图 / 时序图、技术文档附图、SRE Runbook 配图。

目标用户：后端 / 基础设施工程师（经常要画架构图但不想开 Figma）、AI 编程深度用户（用 Claude Code / Cursor 且希望文档质量跟上代码质量）、技术写作者（需要为博客 / 文档配专业图表）。

输入与输出案例

案例一：电商微服务架构

输入：

Create a microservices e-commerce architecture with Mobile/Web/Admin clients,
API Gateway (auth + rate limiting + routing), Auth/User/Order/Product/Payment
services, Kafka message queue, Notification service, and User DB / Order DB /
Product DB / Redis Cache / Stripe API

输出： 一张 .drawio XML 文件，包含 Mobile/Web/Admin 三个客户端 → API Gateway → 六个微服务 → Kafka → 通知服务 + 各数据库，节点用官方云服务图标，边线干净无交叉，自动着色分层，可直接导出 PNG 插入文档。

案例二：Python 代码库 import 可视化

输入：

cd myproject
python3 ~/.claude/skills/drawio-skill/scripts/pyimports.py 
  --group -o graph.json
python3 ~/.claude/skills/drawio-skill/scripts/autolayout.py 
  graph.json -o diagram.drawio

输出： Python 项目的模块依赖图，按子包嵌套分组，过渡削减后冗余边消失，每个模块容器独立，可直接拖入 draw.io 继续编辑或导出 PDF。

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

GitHub: https://github.com/Agents365-ai/drawio-skill

评论区

0 条评论

登录后可评论。

Skill超级捕获手 16 阅读