drawio

drawio——从文本生成专业图表

drawio-skill（Agents365-ai， MIT）可将自然语言描述转换为可编辑的 .drawio XML，并通过原生 draw.io 桌面 CLI导出为 PNG / SVG / PDF / JPG——无需 MCP 服务或后台守护进程。它还可以将现有 代码库转换为自动布局的结构图。此技能是 jeo-skills 的封装：它说明何时使用 draw.io、如何安装 CLI + 技能（包括作为插件安装），以及如何执行 规划 → 生成 → 自检 → 迭代 → 导出的循环。

何时使用此技能

• 用户需要精致、精准的图表——架构图、网络拓扑图、微服务图、云架构图（AWS/Azure/GCP）、严格的 UML 类图/时序图、 ER 图、流程图、思维导图、组织结构图、ML/DL 模型
• 用户想要可视化现有代码库——Python / JS-TS / Go / Rust 的导入图， 或 Python 类继承层级，无需手动设置坐标
• 用户需要真实的官方供应商图标（AWS Lambda、Kubernetes pod、 Cisco、BPMN，……），而不是猜测 shape=mxgraph.* 并使用空白方框
• 用户想要 draw.io 未内置的 AI/LLM 品牌标志（OpenAI、Claude、Gemini、Mistral、 Llama、Ollama、LangChain，……）
• 用户想要将输出导出为 PNG/SVG/PDF 并保留可编辑性，还可以选择进行自检并经过多轮完善
• 用户明确要求 draw.io / .drawio 文件

何时不使用此技能

• 用户想要随意的手绘 / 白板风格 → 使用 excalidraw-skill 或 tldraw-skill（上游同类技能）
• 用户想要以代码形式编写图表，并将其保存在 git 中且渲染到 Markdown → 使用 mermaid（通用）或 plantuml（在 CI 中使用 UML）
• 用户想要幻灯片 / 演示文稿 → presentation-builder
• 用户只想浏览 / 安装 Claude 插件 → ccpi-marketplace
• 用户需要AI 图像 / 视频生成（而非图表） → god-tibo-imagen / video-production

前置条件

要求	说明
draw.io 桌面 CLI	导出所需。drawio --version 必须可用
具备视觉能力的 Agent	自检步骤会读取渲染后的 PNG，以自动修复布局
Graphviz（可选）	仅用于代码库自动布局（brew install graphviz / apt install graphviz）
Node.js（可选）	仅 npx skills 安装程序需要；技能本身不需要

说明

步骤 1 — 安装 draw.io 桌面 CLI

平台	命令
macOS	brew install --cask drawio
Windows	从 drawio-desktop releases 下载安装程序
Linux	从 releases 获取 .deb/.rpm；无头模式需要 sudo apt install xvfb

使用 drawio --version 验证。在 WSL2 上，CLI 是通过 /mnt/c 调用的 Windows 桌面 exe——技能会自动检测。

步骤 2 — 安装技能

# Any agent (Claude Code, Cursor, Copilot, …) — upstream bundle
npx skills add Agents365-ai/365-skills -g

# Claude Code plugin marketplace (upstream)
> /plugin marketplace add Agents365-ai/365-skills
> /plugin install drawio

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

关于安装 此 封装的 jeo-skills 插件，请参阅步骤 8。

步骤 3 — 根据文本生成图表

安装完成后，只需描述你的需求——技能会规划布局、生成 .drawio XML、导出草稿、自检并迭代：

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

Draw a Transformer encoder-decoder: 6-layer encoder with self-attention,
6-layer decoder with cross-attention, input embeddings (batch × 512 × 768),
positional encoding, final output projection. Annotate tensor shapes and
color-code by layer type.

步骤 4 — 可视化现有代码库

使用随附的提取 → 自动布局 → 验证流水线，将代码转换为结构图（无需手动设置坐标）：

# Import graph — 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 class-inheritance hierarchy
python3 scripts/pyclasses.py   mypackage --group -o graph.json

# any extractor → auto-layout → editable .drawio
python3 scripts/autolayout.py  graph.json -o diagram.drawio

自动布局使用 Graphviz 排布 + 正交路由、传递约简（删除可由更长路径推导出的边），以及用于嵌套模块容器的 --group。validate.py 会在视觉自检前检查 .drawio（悬空边、重复 id、重叠）。

步骤 5 — 解析真实图形和 AI/LLM 标志

# Search 10,000+ official AWS/Azure/GCP/Cisco/K8s/UML/BPMN shapes
python3 scripts/shapesearch.py "aws lambda" --limit 5

# Resolve one of 321 AI/LLM brand logos (lobe-icons, MIT)
python3 scripts/aiicons.py "claude" --json      # CDN-referenced (default)
python3 scripts/aiicons.py "openai" --embed     # self-contained data URI

使用这些图标，而不是猜测 shape= 字符串，这样供应商图标就能正确渲染，而不会退化为空白方框。

步骤 6 — 自检、迭代与样式

工作流依次执行 检查依赖项 → 规划布局 → 生成 XML → 导出 PNG 草稿 → 自检并自动修复（最多 2 轮）→ 展示给用户 → 5 轮反馈循环 → 最终导出。内置样式预设包括 default、corporate、handdrawn；此技能还可以从 .drawio 文件或扁平图像中学习新样式（仅在你批准后保存）：

Draw a microservices architecture using my "corporate" style
Learn my style from ~/diagrams/brand.drawio as "mybrand"

步骤 7 — 选择合适的图表类型

类别	示例	主要特点
架构	微服务、云、网络、部署	分层泳道、中心辐射式策略
ML / 深度学习	Transformer、CNN、LSTM、GRU	张量形状标注、图层颜色
流程图	流程、工作流、决策树、状态机	语义形状（菱形决策节点）
UML	类图、时序图	继承／组合箭头、生命线
数据	ER、数据流（DFD）	表格容器、PK/FK 表示法
其他	组织结构图、思维导图、线框图	—

步骤 8 — 与 jeo-skills 一起进行插件式安装

此封装文件夹可通过标准 jeo-skills 流程作为插件安装，以便将路由指南、参考资料和安装程序部署到磁盘，供所有受支持的 Agent 运行时使用：

# Project install (writes into .agents/skills/drawio/)
npx skills add https://github.com/akillness/jeo-skills --skill drawio

# Global install for every detected agent
npx skills add -g https://github.com/akillness/jeo-skills --skill drawio

# Target specific agents
npx skills add -g https://github.com/akillness/jeo-skills --skill drawio -a claude-code -a codex -y

此技能还附带 scripts/install.sh——一个一次性辅助脚本，可按平台检测／安装 draw.io CLI，并拉取上游 drawio-skill 捆绑包。完整的命令／标志参考请参阅 references/usage.md。

输出格式

当用户向 drawio 寻求帮助时，请返回简明概要：

# drawio Routing Brief

## Scope
- Task: text-to-diagram | visualize-codebase | shape/logo-resolve | restyle
- Diagram type: architecture | uml | sequence | flowchart | erd | ml-dl | other
- Export target: png | svg | pdf | jpg | drawio-only

## Recommended next move
- install-cli | install-skill | generate | extract+autolayout | shapesearch | aiicons | refine

## Why
- 2-3 bullets grounded in the user's request

## Route-outs
- `mermaid` / `plantuml` for diagrams-as-code in git
- `excalidraw` / `tldraw` for hand-drawn/whiteboard looks
- `presentation-builder` for slide decks

最佳实践

1. 先确认 CLI — 在承诺导出前运行 drawio --version；如果没有 CLI，只能生成 .drawio XML，无法生成 PNG/SVG/PDF。
2. 搜索形状，不要猜测 — shapesearch.py 可解析出准确的官方样式字符串；猜测 shape=mxgraph.* 名称会导致渲染结果为空白。
3. 为 LLM 应用图表使用 aiicons.py — draw.io 不附带现代 AI/LLM 标志；--embed 会将它们内嵌，以便离线渲染。
4. 让自检流程运行 — 读取渲染后的 PNG，并自动修复重叠／裁切的标签，是此技能提升质量的主要手段。
5. 先精简，再布局 — 对代码库进行传递约简，可在自动布局前将密集杂乱的图转换为易于追踪的图。
6. 选择合适的类型 — 对于纳入 Git 跟踪、可嵌入 Markdown 的图表，使用 mermaid／plantuml；draw.io 则适用于精美、可导出且图标丰富的作品。

参考资料

• 上游仓库：https://github.com/Agents365-ai/drawio-skill
• 在线文档：https://agents365-ai.github.io/drawio-skill/
• 使用指南：docs/USAGE.md
• CLI 安装方法：docs/INSTALL_CLI.md
• 自动布局参考：references/autolayout.md
• 形状速查表：references/shapes.md
• 故障排除（包括 WSL2）：references/troubleshooting.md
• 本地安装程序：scripts/install.sh
• 本地用法／标志参考：references/usage.md
• 同类图表技能：excalidraw-skill、mermaid、plantuml、tldraw-skill
• 相关 jeo-skills：../presentation-builder/SKILL.md、../cli-anything/SKILL.md、../ccpi-marketplace/SKILL.md
• 许可证：MIT（参见上游 LICENSE）