企业官网建设流程全解析

读代码自动画 4 类图：best-skills codegen-diagram 生成技术栈、系统架构与 E-R 图终极指南

【免费下载链接】best-skills通用高质量 Skills 合集🔥项目地址: https://gitcode.com/gh_mirrors/be/best-skills

best-skills 是一个通用高质量 Agent Skills 合集，其中的codegen-diagram技能特别实用：只要说一句「根据当前项目画技术栈图」，它就能读取项目代码，自动生成技术栈图、系统架构图、数据结构图、E-R 图这 4 类图，并输出可直接导入 Draw.io 编辑的.drawio文件，帮你省下大量手绘图表的时间。

什么是 codegen-diagram？🧩

codegen-diagram 是 best-skills 合集中的一个 Skill，核心能力是「基于当前项目/代码仓库生成 Draw.io 图表」。它的入口定义在 skills/codegen-diagram/SKILL.md，与 best-prompts 那种「手动复制粘贴的聊天框 Prompt」不同，Skill 会由 Agent 根据description中的关键词与触发场景自动判断是否调用，无需每次手动选择。

快速了解：4 类图分别什么时候用？🎯

codegen-diagram 内部按「任务识别」路由到 4 个参考规范，覆盖最常见的 4 种工程图表需求：

💡数据结构图 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-skills

• Cursor：项目内.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