drawio-skill

技能简介

drawio-skill 是一款将自然语言和真实系统源码转换为可维护 .drawio 架构图的 AI Agent 技能。它超越简单的图表生成，支持增量同步（保留手动布局）、多视角投影、架构契约测试、依赖查询、故障传播模拟，以及无依赖的离线可交互 HTML 导览。兼容 Claude Code、Cursor、Copilot、OpenClaw、Codex 等所有支持 Agent Skills 格式的 AI 编码工具。

核心能力

1. 架构数字孪生：将语义、来源和几何分离，从单一模型投影执行视图、系统视图、部署视图、数据流视图和安全视图
2. 增量同步：diagramctl sync 仅更新变化的节点和关系，同时保留手动调整的坐标、样式和标注
3. Diagram-as-Test：通过 YAML/JSON 规则直接验证数据库连接、循环依赖、孤儿节点、生产可观测性等架构契约
4. 架构查询与审查：查询组件/负责人/边界/路径，识别关键节点和高耦合区域，输出 Markdown/JSON 审查报告
5. What-if + Story 模式：模拟故障传播并注释可视化，发布离线的键盘无障碍 HTML 导览（含文本替代方案和语言切换）
6. 内置 MCP Server：diagramctl_mcp.py 暴露 9 个工具（build/sync/views/architecture_test/review/query/whatif/story/doctor），支持 Claude Desktop、Cursor、VS Code、Codex 等
7. 11 种图类型预设：ERD、UML Class、Sequence、C4、Architecture、ML/深度学习、Flowchart、SysML、BPMN、网络拓扑、跨职能泳道图
8. IaC → 架构图：将 Terraform 配置、Kubernetes Manifest 或 docker-compose 文件转换为带有官方云图标（AWS/Azure/GCP/K8s）的架构图
9. 代码库可视化：提取并自动布局 Python/JS-TS/Go/Rust 项目的导入图或类继承层次结构
10. 321 个 AI/LLM 品牌徽标：内置 OpenAI、Claude、Gemini、Mistral、Llama、Ollama、LangChain 等 Logo，解决 draw.io 空白图标问题

安装配置

第一步：安装 draw.io 桌面 CLI

验证：drawio --version，建议使用 ≥30 版本以解锁 Mermaid 转换和 ELK 布局功能。

第二步：安装技能

# 任意 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

第三步：重启 Agent

安装完成后重启 AI 编码 Agent，即可通过自然语言描述生成专业架构图。

使用步骤

1. 描述需求：用自然语言描述想要的图表结构，例如："绘制一个微服务电商架构，包含移动端/Web/管理端、API Gateway（认证+限流+路由）、Auth/User/Order/Product/Payment 服务、Kafka 消息队列、Notification 服务及各数据库"
2. 技能规划布局：Skill 自动规划布局，生成 .draw.io XML 并导出为选定格式
3. 自检迭代：技能读取输出的 PNG 并自动修复重叠、截断标签、堆叠边等问题（最多 2 轮）
4. 细化调整：根据需要用自然语言提出细化要求，如"调整配色方案为深色模式"或"添加 AWS 官方图标"
5. CI 集成（可选）：通过官方 drawio-architecture-test GitHub Action 在每个 PR 上自动执行架构契约检查

适用场景

1. 架构文档自动生成：将代码库结构或 IaC 配置实时转换为最新的架构图文档
2. 微服务系统设计：快速绘制包含数十个服务的复杂微服务拓扑图
3. ML/深度学习模型可视化：绘制 Transformer、CNN、LSTM 等模型架构，自动标注张量形状
4. 技术文档插图：为 README、API 文档、技术博客等自动生成精准的架构或流程图
5. 团队架构审查：通过 What-if 模拟和 Story 导览，在 PR 中可视化呈现架构变更影响
6. 基础设施审计：将 Terraform/Kubernetes 配置转换为云架构图，验证资源部署是否符合规范

适用人群

后端工程师、架构师、ML/AI 研究者、技术写作者，以及需要频繁将代码或基础设施可视化的开发团队。

工作原理

技能将自然语言描述解析为语义图谱，通过提取器（imports、classes、IaC 等）转换为统一中间表示（IR），再由 Graphviz 自动计算节点布局并路由边缘，最终导出为 draw.io XML 格式。MCP Server 在上层 Agent 与本地 drawio CLI 之间充当桥梁，核心语义流程仅依赖 Python 标准库和 draw.io 可执行文件，全程离线可用。

官方链接

• GitHub：https://github.com/Agents365-ai/drawio-skill
• 在线文档：https://agents365-ai.github.io/drawio-skill/
• SkillsMP：https://skillsmp.com/skills/agents365-ai-drawio-skill-skills-drawio-skill-skill-md