drawio-diagram
drawio-diagram creates standard Draw.io (.drawio) format diagrams for deep learning models, network architectures, and algorithm flows. It supports two modes: generating diagrams from scratch for model architectures and process flows, or applying a reference diagram's style to new content. All output is valid XML that opens directly in Draw.io for editing.
drawio-diagram generates standard Draw.io format diagrams for deep learning models, neural networks, and algorithm flows.
AI-generated summary based on this skill's SKILL.md
Install
xstongxue/best-skills/drawio-diagram · repository language: JavaScript
git clone https://github.com/xstongxue/best-skills
cp -r best-skills/skills/drawio-diagram ~/.claude/skills/drawio-diagramFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can drawio-diagram generate draw.io diagrams for neural networks?
Yes. drawio-diagram creates standard Draw.io (.drawio) format diagrams for deep learning models and neural network architectures. You can generate diagrams from scratch for various model types, and all output is valid XML that opens directly in Draw.io for editing and further customization.
What diagram types does drawio-diagram support?
drawio-diagram supports deep learning model architectures (CNNs, RNNs, Transformers), algorithm flowcharts, system architecture visualizations, data flow diagrams, and ML concept visualizations like attention mechanisms and receptive fields. It produces properly formatted .drawio XML files ready for direct editing.
How does drawio-diagram apply reference image style to new content?
drawio-diagram includes a style transfer mode where you provide a reference diagram and new content. The skill applies the reference diagram's visual styling—colors, fonts, layout patterns—to your new diagram content, maintaining consistent design while updating the structure.
What output format does drawio-diagram produce?
drawio-diagram produces valid .drawio XML files that open directly in Draw.io without conversion. The XML format is standard and editable, allowing you to import the generated diagrams into Draw.io and modify them further as needed.
Can drawio-diagram create flowcharts and system diagrams?
Yes. drawio-diagram creates algorithm flowcharts and system architecture visualizations alongside deep learning model diagrams. It handles process flows, data pipelines, and network topologies in the same Draw.io format, making it versatile for technical documentation.
Does drawio-diagram support transformer and CNN architecture visualization?
Yes. drawio-diagram can visualize transformer models, CNN architectures, RNNs, and other deep learning frameworks. It also supports specialized ML visualizations like attention mechanisms, receptive fields, and feature extraction flows—all in standard Draw.io format.
SKILL.md
rendered from the published skill — quoted content, verbatim
Draw.io 图表
本 Skill 指导 Agent 生成标准的 Draw.io 格式图表（.drawio 文件），支持两种模式：从零生成（模型架构、算法流程等）与风格迁移（参考图 + 内容 → 按参考图风格生成新图）。
Step 0：任务识别
| 条件 | 执行 |
|---|---|
| 用户提供参考图，且希望「按这张图的风格」画新图 | 执行 reference/style-migration.md |
| 其他情况（从零生成） | 执行 reference/generation.md |
使用时机
从零生成： - 用户需要为深度学习模型（如 Transformer、CNN、RNN 等）生成架构图 - 用户需要绘制算法流程图、数据流图、系统架构图 - 用户需要可视化特定概念（如感受野、注意力机制、特征提取过程等） - 用户提到「画个图」「生成架构图」「可视化模型结构」「绘制流程图」等需求
风格迁移： - 用户提供参考图，希望「按这个风格画」「照着这个排版/配色画」
通用规范（两种模式共用）
1. XML 格式严格性
- ✅ 所有标签必须正确闭合：
<mxCell>对应</mxCell>，绝不能写成</mCell> - ✅ 使用
vertex="1"标记节点，edge="1"标记连线 - ✅ 每个元素必须有唯一
id，从 0 开始递增 - ✅ 特殊字符必须转义：
&→&amp;，<→&lt;，>→&gt;
2. 标准文件结构
```xml <mxfile host="app.diagrams.net"> <diagram name="图表名称" id="图表id"> <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="宽度" pageHeight="高度" background="#F5F5DC"> <root>
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 12 files
skills/drawio-diagram/SKILL.md
skills/drawio-diagram/reference/edu-biology.md
skills/drawio-diagram/reference/edu-chemistry.md
skills/drawio-diagram/reference/edu-chinese.md
skills/drawio-diagram/reference/edu-geography.md
skills/drawio-diagram/reference/edu-history.md
skills/drawio-diagram/reference/edu-math.md
skills/drawio-diagram/reference/edu-physics.md
skills/drawio-diagram/reference/generation.md
skills/drawio-diagram/reference/style-migration.md
skills/drawio-diagram/reference/tech-diagram.md
skills/drawio-diagram/reference/uml-diagram.md