Code Generation · Project Diagrams
This Skill guides the Agent to, based onthe current project/code repositorygenerate Draw.io format diagrams, supporting four types: technology stack diagram, system architecture diagram, data structure diagram, and E-R diagram.
Step 0: Task Identification
| User statement / keywords |
Execution |
| Technology stack, overall technology stack, component selection |
reference/tech-stack.md |
| System architecture, layered structure, call flow |
reference/system-arch.md |
| Data structure diagram, table structure diagram, entity field relationship diagram |
reference/data-structure.md |
| E-R diagram, entity relationship diagram, database relationship diagram |
reference/er-diagram.md |
When to use
- The user needs to draw a technology stack diagram, system architecture diagram, data structure diagram, or E-R diagram based on the current project
- The user mentions "based on the current project", "based on the code", "draw our system's..."
General specifications (shared by the four diagram types)
Draw.io basics
- Use mxGraphModel, canvas background
#FFFFFF
- Use only Draw.io built-in shapes to ensure it can be opened and edited immediately
- Node labels are concise and conform to technical documentation expression conventions
Colors and fonts
| Purpose |
Color value |
| Primary color |
#3366CC |
| Secondary color |
#7FBFFF |
| Accent color |
#FF9966 |
| Dark background font |
#FFFFFF |
| Light background font |
#333333 |
| Canvas background |
#FFFFFF |
- Font: Helvetica, font size 11–13
- Connector:
endArrow=classicBlockThin or blockThin
Output requirements
- Diagram overview (1–2 paragraphs)
- Complete mxGraph XML (can be saved as .drawio)
- Import and usage instructions
- Suggestions for figure captions and paper citations
