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 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。
Install Codegen Diagram
$ npx skills add xstongxue/best-skills --skill codegen-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xstongxue/best-skills codegen-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/codegen-diagram .claude/skills/codegen-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 "codegen-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/codegen-diagram into .claude/skills/codegen-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-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/codegen-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 codegen-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xstongxue/best-skills codegen-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/codegen-diagram .agents/skills/codegen-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 "codegen-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/codegen-diagram into .agents/skills/codegen-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-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 codegen-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xstongxue/best-skills codegen-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/codegen-diagram .cursor/skills/codegen-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 "codegen-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/codegen-diagram into .cursor/skills/codegen-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-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/codegen-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 codegen-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xstongxue/best-skills codegen-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/codegen-diagram .gemini/skills/codegen-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 "codegen-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/codegen-diagram into .gemini/skills/codegen-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-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 codegen-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 codegen-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/codegen-diagram .github/skills/codegen-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 "codegen-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/codegen-diagram into .github/skills/codegen-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-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 codegen-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 codegen-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/codegen-diagram .opencode/skills/codegen-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 "codegen-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/codegen-diagram into .opencode/skills/codegen-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-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
codegen-diagram- GitHub stars
- 3k
- Token cost
- ~291 tokens
- SKILL.md length
- 71 words
- Files
- 5
- Skills in repo
- 15
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。
- Works in 4 steps: 图表总览（1–2 段文字） → 完整 mxGraph XML（可保存为 .drawio） → 导入与使用说明 → …
- 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
Codegen Diagram is an agent skill from xstongxue/best-skills. 基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。
Its SKILL.md is about 290 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `reference/data-structure.md`, `reference/er-diagram.md` and `reference/system-arch.md`).
It sits in Development, covering Diagrams and Project scaffolding. It works with draw.io. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Diagrams
- Tasks that involve Project scaffolding
Example prompts
- “/codegen-diagram”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- 图表总览（1–2 段文字）
- 完整 mxGraph XML（可保存为 .drawio）
- 导入与使用说明
- 图题与论文引用建议
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.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Codegen Diagram loads about 291 tokens when it runs. Until then it costs about 39 tokens; SKILL.md has 71 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). 71 words, ~291 tokens.
Download SKILL.mdSave it as
.claude/skills/codegen-diagram/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- codegen-diagram
- description
- 基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。
代码生成·项目图表
本 Skill 指导 Agent 基于当前项目/代码仓库生成 Draw.io 格式图表，支持四种类型：技术栈图、系统架构图、数据结构图、E-R 图。
Step 0：任务识别
| 用户表述 / 关键词 | 执行 |
|---|---|
| 技术栈、整体技术栈、组件选型 | reference/tech-stack.md |
| 系统架构、分层结构、调用流程 | reference/system-arch.md |
| 数据结构图、表结构图、实体字段关系图 | reference/data-structure.md |
| E-R 图、实体关系图、数据库关系图 | reference/er-diagram.md |
使用时机
- 用户需要根据当前项目画技术栈图、系统架构图、数据结构图或 E-R 图
- 用户提到「根据当前项目」「根据代码」「画我们系统的……」
通用规范（四种图表共用）
Draw.io 基础
- 使用 mxGraphModel，画布背景
#FFFFFF - 仅使用 Draw.io 内置形状，确保可立即打开与编辑
- 节点标签简洁，符合技术文档表达习惯
色彩与字体
| 用途 | 颜色值 |
|---|---|
| 主色调 | #3366CC |
| 副色调 | #7FBFFF |
| 强调色 | #FF9966 |
| 深色背景字体 | #FFFFFF |
| 浅色背景字体 | #333333 |
| 画布背景 | #FFFFFF |
- 字体：Helvetica，字号 11–13
- 连接线：
endArrow=classicBlockThin或blockThin
输出要求
- 图表总览（1–2 段文字）
- 完整 mxGraph XML（可保存为 .drawio）
- 导入与使用说明
- 图题与论文引用建议
© 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 4 other files in skills/codegen-diagram of xstongxue/best-skills.
- SKILL.md
- reference/data-structure.md
- reference/er-diagram.md
- reference/system-arch.md
- reference/tech-stack.md
Open the folder on GitHubat commit 9aa4e55
Compare with similar skills
Codegen 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 |
|---|---|---|---|---|---|---|
| Codegen Diagram this skillxstongxue/best-skills | 3k | — | ~291 | Automated safety check: Pass | Apache-2.0 | |
| Diagram Designcathrynlavery/diagram-design | 45k | 1 repos | ~7.5k | 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.5k | — | ~5.4k | Automated safety check: Pass | MIT | |
| Scibox Diagramjihe520/sci-box | 248 | 1 repos | ~983 | Automated safety check: Notes | None | |
| Drawio Diagram BuilderWill-hxw/drawio-diagram-builder | 412 | — | ~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.
Drawio Azure
sparklabx/drawio-ai-kit
A skill your agent uses when the user asks for an Azure architecture diagram — VNet/networking, App Service, AKS, landing zone, multi-region, or any diagram built with Azure service icons.
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 目录。
Drawio Diagram
xstongxue/best-skills
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
Project Docs
xstongxue/best-skills
对任意代码项目生成一套面向新人的循序渐进文档集，输出到 docs/ 目录。含架构、设计思想、语言特性、代码导读、运行时模型、构建、对接、调试、设计规范共 9 篇，支持全部生成 / 只写几篇 / 更新已有文档。当用户提到"生成项目文档"、"新人文档"、"上手文档"、"架构文档"、"代码导读"、"项目理解"、"深入理解项目"、"onboarding…
Related
Works with
Categories
Questions about Codegen Diagram
What does Codegen Diagram do?
基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。. Codegen Diagram is an agent skill from xstongxue/best-skills.
When should I use Codegen Diagram?
Codegen Diagram fits situations like: tasks that involve Diagrams; tasks that involve Project scaffolding.
How do I install Codegen Diagram in Claude Code?
Run `npx skills add xstongxue/best-skills --skill codegen-diagram -a claude-code`. Or copy the skill folder (skills/codegen-diagram in xstongxue/best-skills) into .claude/skills/codegen-diagram in your project. Claude Code loads it when a task matches its description.
How do I install Codegen Diagram in Codex?
Run `npx skills add xstongxue/best-skills --skill codegen-diagram -a codex`. Or copy the skill folder (skills/codegen-diagram in xstongxue/best-skills) into .agents/skills/codegen-diagram in your project. Codex loads it when a task matches its description.
Can I use Codegen 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 codegen-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/codegen-diagram, .gemini/skills/codegen-diagram, .github/skills/codegen-diagram and .opencode/skills/codegen-diagram in your project.
What does Codegen Diagram need to run?
SKILL.md names no scripts, command-line tools or credentials: Codegen Diagram is instructions for the agent only.
Does Codegen Diagram access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Codegen 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 Codegen Diagram use?
Codegen 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 Codegen Diagram use?
About 291 tokens (SKILL.md is roughly 1.2k 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 Codegen Diagram?
Skills that share tags, products or a category with Codegen Diagram: Diagram Design (cathrynlavery/diagram-design, 45k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars), Draw.io Diagram Reconstruction (HKUSTDial/Supervisor-Skills, 8.5k stars) and Scibox Diagram (jihe520/sci-box, 248 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Codegen Diagram?
xstongxue (a GitHub user) maintains it in xstongxue/best-skills, which has 2,951 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.