Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
Install Drawio Diagram
$ npx skills add xstongxue/best-skills --skill drawio-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xstongxue/best-skills drawio-diagram --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/drawio-diagram .claude/skills/drawio-diagram && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "drawio-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagram into .claude/skills/drawio-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drawio-diagram", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagramType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add xstongxue/best-skills --skill drawio-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xstongxue/best-skills drawio-diagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/drawio-diagram .agents/skills/drawio-diagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "drawio-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagram into .agents/skills/drawio-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drawio-diagram", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xstongxue/best-skills --skill drawio-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xstongxue/best-skills drawio-diagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/drawio-diagram .cursor/skills/drawio-diagram && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "drawio-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagram into .cursor/skills/drawio-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drawio-diagram", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/xstongxue/best-skills.git --path skills/drawio-diagram--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add xstongxue/best-skills --skill drawio-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xstongxue/best-skills drawio-diagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/drawio-diagram .gemini/skills/drawio-diagram && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "drawio-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagram into .gemini/skills/drawio-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drawio-diagram", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install xstongxue/best-skills drawio-diagramInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add xstongxue/best-skills --skill drawio-diagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/drawio-diagram .github/skills/drawio-diagram && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "drawio-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagram into .github/skills/drawio-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drawio-diagram", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xstongxue/best-skills --skill drawio-diagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install xstongxue/best-skills drawio-diagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/drawio-diagram .opencode/skills/drawio-diagram && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "drawio-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/drawio-diagram into .opencode/skills/drawio-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drawio-diagram", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
drawio-diagram- GitHub stars
- 3k
- Token cost
- ~487 tokens
- SKILL.md length
- 74 words
- Files
- 12
- Skills in repo
- 15
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
- Tasks that involve Diagrams
- SKILL.md covers Step 0：任务识别, 使用时机, 通用规范（两种模式共用） and 参考资源
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Drawio Diagram is an agent skill from xstongxue/best-skills. 为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
Its SKILL.md is about 490 tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files (for example `reference/edu-biology.md`, `reference/edu-chemistry.md` and `reference/edu-chinese.md`).
It sits in Development, covering Diagrams. It works with draw.io. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Diagrams
Example prompts
- “/drawio-diagram”
What it can do on your machine
Read from SKILL.md and the folder at commit 9aa4e55. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are xml).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
drawio.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Drawio Diagram loads about 487 tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 74 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from xstongxue/best-skills at commit 9aa4e55, republished under its Apache-2.0 licence (© xstongxue). 74 words, ~487 tokens.
Download SKILL.mdSave it as
.claude/skills/drawio-diagram/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.- name
- drawio-diagram
- description
- 为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
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 开始递增 - ✅ 特殊字符必须转义：
&→&，<→<，>→>
2. 标准文件结构
<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>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- 所有图形元素从 id="2" 开始 -->
</root>
</mxGraphModel>
</diagram>
</mxfile>3. 常用样式
- 2D 节点：
rounded=1;whiteSpace=wrap;html=1;fillColor=#颜色;strokeColor=#333333;strokeWidth=1;fontSize=11 - 3D 节点（推荐用于神经网络层）：
shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;size=20;fillColor=#颜色;strokeColor=#333333;strokeWidth=1.5 - 连线：
edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#000000;strokeWidth=2;endArrow=classic - 虚线（残差）：
dashed=1
4. 输出要求
- 图表说明（2-3 行）
- 使用指南：Draw.io 打开、导出 PNG/SVG/PDF、图题与论文引用示例
参考资源
- Draw.io：https://app.diagrams.net/
- 官方文档：https://www.drawio.com/doc/
© xstongxue, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 11 other files in skills/drawio-diagram of xstongxue/best-skills.
- SKILL.md
- reference/edu-biology.md
- reference/edu-chemistry.md
- reference/edu-chinese.md
- reference/edu-geography.md
- reference/edu-history.md
- reference/edu-math.md
- reference/edu-physics.md
- reference/generation.md
- reference/style-migration.md
- reference/tech-diagram.md
- reference/uml-diagram.md
Open the folder on GitHubat commit 9aa4e55
Compare with similar skills
Drawio Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Drawio Diagram this skillxstongxue/best-skills | 3k | — | ~487 | Automated safety check: Pass | Apache-2.0 | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Draw.io Diagram ReconstructionHKUSTDial/Supervisor-Skills | 8.8k | — | ~5.4k | Automated safety check: Pass | MIT | |
| Scibox Diagramjihe520/sci-box | 249 | 1 repos | ~983 | Automated safety check: Notes | None | |
| Drawio Diagram BuilderWill-hxw/drawio-diagram-builder | 413 | — | ~5.9k | Automated safety check: Pass | MIT |
Similar skills
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
Draw.io Diagram Reconstruction
HKUSTDial/Supervisor-Skills
Rebuilds a reference diagram image as an editable, high-fidelity Draw.io file, mixing native elements, SVG icons and cropped PNGs, with a batch workflow for a folder of images.
Scibox Diagram
jihe520/sci-box
制作与修改可编辑的 draw.io / diagrams.net 示意图（.drawio XML），产出 .drawio + PNG/PDF。三条路径：套用内置模板（五带技术路线图、三栏研究框架图、三栏阶段流程图、横版任务流水线图）、从零手写…
Drawio Diagram Builder
Will-hxw/drawio-diagram-builder
Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams.
- Official
Draw.io Diagram Generator
github/awesome-copilot
Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.
More from xstongxue/best-skills
All 15 skills in this repoCreate Skill
xstongxue/best-skills
Guides users through creating effective Agent Skills for Cursor.
Office File Process
xstongxue/best-skills
处理 Office 文档的一站式 skill：Word(.doc/.docx/.dotx)、Excel(.xls/.xlsx/.xlsm/.csv)、PowerPoint(.ppt/.pptx/.potx) 的创建、读取、编辑、提取、转换、校验。触发：『读取 word 文档』『提取 excel 内容』『看 ppt 讲了什么』、.doc 老格式打不开、生成/编辑 Word…
Pptgen Drawio
xstongxue/best-skills
根据论文或汇报内容生成多页 Draw.io 格式 PPT，支持论文答辩与通用汇报两种模式，自动导出为 .pptx。当用户提到论文答辩 PPT、答辩幻灯片、通用 PPT、汇报 PPT、根据模板生成 PPT、drawio2pptx 时使用。
Wechat Article Writer
xstongxue/best-skills
公众号/自媒体全流程。根据用户表述自动匹配：撰写文章、封面图、正文插图、风格提取。支持多种写作风格。当用户提到写公众号、技术博客、公众号封面、正文插图、步骤图、演示图、流程示意、分析写作风格、克隆文风、模仿爆款、提取风格时使用。详见 reference 目录。
Project Docs
xstongxue/best-skills
对任意代码项目生成一套面向新人的循序渐进文档集，输出到 docs/ 目录。含架构、设计思想、语言特性、代码导读、运行时模型、构建、对接、调试、设计规范共 9 篇，支持全部生成 / 只写几篇 / 更新已有文档。当用户提到"生成项目文档"、"新人文档"、"上手文档"、"架构文档"、"代码导读"、"项目理解"、"深入理解项目"、"onboarding…
Skill Prompt Convert
xstongxue/best-skills
在 Skill（SKILL.md）与 Prompt（聊天框指令）两种格式之间相互转换。支持 Skill→Prompt 与 Prompt→Skill 双向转换，保持核心信息零丢失。当用户提到 Skill 转 Prompt、Prompt 转 Skill、格式互转、SKILL.md 转换时使用。
Related
Works with
Categories
Questions about Drawio Diagram
What does Drawio Diagram do?
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。. Drawio Diagram is an agent skill from xstongxue/best-skills.
When should I use Drawio Diagram?
Drawio Diagram fits situations like: tasks that involve Diagrams.
How do I install Drawio Diagram in Claude Code?
Run `npx skills add xstongxue/best-skills --skill drawio-diagram -a claude-code`. Or copy the skill folder (skills/drawio-diagram in xstongxue/best-skills) into .claude/skills/drawio-diagram in your project. Claude Code loads it when a task matches its description.
How do I install Drawio Diagram in Codex?
Run `npx skills add xstongxue/best-skills --skill drawio-diagram -a codex`. Or copy the skill folder (skills/drawio-diagram in xstongxue/best-skills) into .agents/skills/drawio-diagram in your project. Codex loads it when a task matches its description.
Can I use Drawio Diagram in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add xstongxue/best-skills --skill drawio-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/drawio-diagram, .gemini/skills/drawio-diagram, .github/skills/drawio-diagram and .opencode/skills/drawio-diagram in your project.
What does Drawio Diagram need to run?
SKILL.md names no scripts, command-line tools or credentials: Drawio Diagram is instructions for the agent only.
Does Drawio Diagram access the network?
SKILL.md names 1 domain. As links in the text: drawio.com. This is read from the text; nothing was executed.
Is Drawio Diagram safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Drawio Diagram use?
Drawio Diagram is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Drawio Diagram use?
About 487 tokens (SKILL.md is roughly 1.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Drawio Diagram?
Skills that share tags, products or a category with Drawio Diagram: Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars), Draw.io Diagram Reconstruction (HKUSTDial/Supervisor-Skills, 8.8k stars) and Scibox Diagram (jihe520/sci-box, 249 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Drawio Diagram?
xstongxue (a GitHub user) maintains it in xstongxue/best-skills, which has 2,966 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on September 13, 2026.
Source: xstongxue/best-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.