codegen-diagram
This skill guides your agent to create Draw.io-compatible diagrams directly from your project code, supporting tech stack, system architecture, data structure, and entity-relationship diagram types. Output is delivered as mxGraph XML (.drawio files) ready for immediate import and editing.
Codegen-diagram generates Draw.io diagrams from your project code in four types: tech stacks, system architecture, data structures, and ER diagrams.
AI-generated summary based on this skill's SKILL.md
Install
xstongxue/best-skills/codegen-diagram · repository language: JavaScript
git clone https://github.com/xstongxue/best-skills
cp -r best-skills/skills/codegen-diagram ~/.claude/skills/codegen-diagramFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can codegen-diagram generate draw.io diagrams from my code?
Yes, codegen-diagram creates Draw.io-compatible diagrams directly from your project code. The skill analyzes your codebase and generates mxGraph XML format files (.drawio) that you can immediately import into Draw.io for viewing and editing. This automation eliminates manual diagram creation.
What diagram types does codegen-diagram support?
codegen-diagram supports multiple diagram types: system architecture diagrams, tech stack visualizations, entity-relationship (ER) diagrams from database schemas, data structure diagrams, component diagrams, and layered architecture diagrams. Each type is generated directly from your project code or configuration.
How do I create system architecture diagrams based on my project?
codegen-diagram analyzes your project structure and automatically generates system architecture diagrams. The skill visualizes your tech stack, component relationships, and system layers, then exports the result as mxGraph XML format files ready for Draw.io import and further customization.
Can codegen-diagram auto-generate entity relationship diagrams?
Yes, codegen-diagram can auto-generate ER diagrams from your database schema. The skill extracts database relationships and entity definitions from your code, then creates visual ER diagrams in mxGraph XML format that preserve all relationship information for Draw.io editing.
What output format does codegen-diagram use?
codegen-diagram exports diagrams as mxGraph XML format files (.drawio files). This format is the native standard for Draw.io, allowing seamless import and editing. You can open generated files directly in Draw.io without conversion or compatibility issues.
Is codegen-diagram open source?
Yes, codegen-diagram is released under the Apache-2.0 license, making it open source and freely available for both commercial and personal use. You can review the source code, contribute improvements, and integrate it into your projects.
SKILL.md
rendered from the published skill — quoted content, verbatim
代码生成·项目图表
本 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）
- 导入与使用说明
- 图题与论文引用建议
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
skills/codegen-diagram/SKILL.md
skills/codegen-diagram/reference/data-structure.md
skills/codegen-diagram/reference/er-diagram.md
skills/codegen-diagram/reference/system-arch.md
skills/codegen-diagram/reference/tech-stack.md