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
Decision gist · record as of 2026-07-19
Codegen-diagram generates Draw.io diagrams from your project code in four types: tech stacks, system architecture, data structures, and ER diagrams. 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.
Use it when
- codegen-diagram supports multiple diagram types: system architecture diagrams, tech stack visualizations.
- codegen-diagram analyzes your project structure and automatically generates system architecture diagrams.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
xstongxue/best-skills/codegen-diagram · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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）
- 导入与使用说明
- 图题与论文引用建议
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate Draw.io diagrams automatically from project code and architecture”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill transforms text descriptions and structured information into ready-to-edit Excalidraw diagrams. It handles system architectures, process flows, data structures, and freeform sketches, outputting standard Excalidraw JSON files that open directly in browsers, Obsidian, VSCode, and other compatible environments.
WeChat Article Writer handles end-to-end social media content creation by matching user requests to specialized workflows: article drafting, cover generation, illustration design, and style extraction. Choose from nine writing styles—viral, checklist-based, resource roundups, personal reviews, contrarian takes, identity narratives, emotional storytelling, or deep essays—and the skill automatically applies the corresponding tone and structure. Generate publication-ready layouts with optional diagram exports, then upload directly to WeChat drafts or publish via API.
Codegen-doc guides your agent to produce structured documentation directly from project code and repositories. It supports four document types—thesis chapters, project overviews, key technical issues, and resume project descriptions—automatically triggering when you mention these formats.
Paper-write guides you through the complete thesis journey with outline review tailored to science or humanities disciplines, structural templates for introductions, abstracts, experiments, literature reviews, and case analyses, plus reference formatting, polishing, condensing, expanding, AI-detection removal, and bilingual translation. Extract structured content for defense presentations.
This skill produces polished Markdown documents for weekly reports, work summaries, project recaps, and introductions. It handles two workflows: when you provide a draft, it refines structure, language, and completeness while preserving all tables, data, and images; when starting fresh, it searches for context and applies templates. Output follows quality standards emphasizing concrete results, quantified metrics, and actionable next steps over generic statements.
project-docs creates a structured 9-part documentation suite tailored for new team members joining a codebase. It explores your project's structure, frameworks, and dependencies, then produces guides covering architecture, design philosophy, language fundamentals, code walkthroughs, runtime behavior, build systems, integration patterns, debugging strategies, and design conventions—all written for readers new to the project.
More skills pptgen-drawio (Apache-2.0) · drawio-diagram (Apache-2.0) · patent-write (Apache-2.0) · skill-prompt-convert (Apache-2.0) · dev-workflow (Apache-2.0)