---
id: xstongxue/best-skills/codegen-diagram
version: "56858bcd"
license: Apache-2.0
install: manual
updated: 2026-07-19
---

# 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.

Publisher: xstongxue · Stars: 2407 · Updated: 2026-07-19

Install (manual): `git clone https://github.com/xstongxue/best-skills`

## SKILL.md

# 代码生成·项目图表

本 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. 图表总览（1–2 段文字）
2. 完整 mxGraph XML（可保存为 .drawio）
3. 导入与使用说明
4. 图题与论文引用建议

[View on SkillFed](https://skillfed.io/xstongxue/best-skills/codegen-diagram) · [View on GitHub](https://github.com/xstongxue/best-skills)