读代码自动画 4 类图best-skills codegen-diagram 生成技术栈、系统架构与 E-R 图终极指南【免费下载链接】best-skills通用高质量 Skills 合集项目地址: https://gitcode.com/gh_mirrors/be/best-skillsbest-skills 是一个通用高质量 Agent Skills 合集其中的codegen-diagram技能特别实用只要说一句「根据当前项目画技术栈图」它就能读取项目代码自动生成技术栈图、系统架构图、数据结构图、E-R 图这 4 类图并输出可直接导入 Draw.io 编辑的.drawio文件帮你省下大量手绘图表的时间。什么是 codegen-diagramcodegen-diagram 是 best-skills 合集中的一个 Skill核心能力是「基于当前项目/代码仓库生成 Draw.io 图表」。它的入口定义在 skills/codegen-diagram/SKILL.md与 best-prompts 那种「手动复制粘贴的聊天框 Prompt」不同Skill 会由 Agent 根据description中的关键词与触发场景自动判断是否调用无需每次手动选择。快速了解4 类图分别什么时候用codegen-diagram 内部按「任务识别」路由到 4 个参考规范覆盖最常见的 4 种工程图表需求图表类型触发词示例适用场景规范文档技术栈图「技术栈」「组件选型」梳理前端/后端/基础设施用到了哪些技术reference/tech-stack.md系统架构图「系统架构」「分层结构」展示表现层→接口层→业务层→数据层调用关系reference/system-arch.md数据结构图「表结构图」「实体字段关系图」表头字段列表直观展示字段、类型、约束reference/data-structure.mdE-R 图「E-R 图」「数据库关系图」经典 Chen 记法矩形实体、菱形联系、椭圆属性reference/er-diagram.md数据结构图 vs E-R 图前者偏重物理表结构与字段详情后者偏重概念层实体关系建模。实际项目中两者可配合使用——先用数据结构图梳理字段再用 E-R 图做正式的概念建模。安装与使用3 步自动画架构图 ✍️第 1 步把 Skill 装进你的 Agent克隆 best-skills 仓库将skills/codegen-diagram文件夹复制到 IDE/Agent 的 skills 目录例如git clone https://gitcode.com/gh_mirrors/be/best-skillsCursor项目内.cursor/skills/Claude Code项目内.claude/skills/Codex项目内.codex/skills/第 2 步用自然语言描述需求在已打开目标项目的 Agent 中直接说关键是带上「根据当前项目」「根据代码」这类触发词「根据当前项目画技术栈结构图」「画我们系统的四层架构图」「根据数据库表结构画 E-R 图」第 3 步导入 Draw.io 继续编辑Agent 会输出 4 部分内容图表总览1–2 段文字→ 完整 mxGraph XML → 导入与使用说明 → 图题与论文引用建议。把 XML 保存为.drawio文件用 Draw.io 打开即可二次编辑。生成效果架构图长什么样codegen-diagram 生成的图表统一使用mxGraphModel Draw.io 内置形状只依赖内置图形确保可立即打开编辑并遵循统一规范主色#3366CC、副色#7FBFFF、强调色#FF9966、Helvetica 字体、标准箭头连接线学术风格黑白版式的架构/数据图也内置了固定配色。下图是合集图表体系自动生成的模型架构示例同样输出 Draw.io 格式打开即可编辑节点与连线系统架构图则采用「四层横向分层」风格自上而下表现层、接口层、业务逻辑层、数据持久层每层横条背景内放 2–4 个关键组件垂直箭头表示调用流程最底层用圆柱图标表示数据库——这种版式非常适合论文、设计文档和答辩 PPT。使用小贴士与常见问题 触发不生效检查句式是否包含「根据当前项目」「根据代码」「画我们系统的……」等关键词Agent 靠这些词匹配到 codegen-diagram。想要论文级图四类图都预留了「图 x-y」图题位置输出中附带的图题与引用建议可直接用于毕业论文和设计文档。风格不统一所有图表共用同一套色彩、字体与连接线规范见 SKILL.md 通用规范多张图放同一份文档里风格天然一致。不止画 4 类图best-skills 还有 drawio-diagram深度学习模型图、算法流程图、UML 时序/类图、风格迁移和 excalidraw-diagram手绘风图表可与 codegen-diagram 搭配使用。总结codegen-diagram 用一句话就能完成「读代码 → 自动画 4 类图 → 输出可编辑 Draw.io 文件」的完整链路对需要写设计文档、论文、答辩 PPT 的同学来说几乎是零成本出图。装进 Cursor、Claude Code 或 Codex 的 skills 目录下次再说「帮我画个系统架构图」试试吧。【免费下载链接】best-skills通用高质量 Skills 合集项目地址: https://gitcode.com/gh_mirrors/be/best-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考