codegen-diagram
基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。
How do I install this agent skill?
npx skills add https://github.com/xstongxue/best-skills --skill codegen-diagramIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill is safe and provides utility for generating technical diagrams (Tech Stack, System Architecture, E-R, Data Structure) from project code. It identifies a potential indirect prompt injection surface because the agent must read and process external project files to extract metadata, though no malicious behavior was detected.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerpass
5 files scanned · No issues
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
代码生成·项目图表
本 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）
- 导入与使用说明
- 图题与论文引用建议
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/xstongxue/best-skills/codegen-diagram">View codegen-diagram on skillZs</a>