dependency-graph

生成Mermaid依赖关系图,可视化模块间的导入关系。

代码质量 前端开发后端开发全栈开发 梳理代码结构阅读陌生代码分析项目结构 claudecursor通用 ★ 1.1k 更新于 2026-07-31

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:dependency-graph。
它的用途是:生成Mermaid依赖关系图,可视化模块间的导入关系。
完整的 Skill 内容见:https://321skill.com/skills/dependency-graph-x-4/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

‘请为 `src/components` 目录下的所有 React 组件生成依赖关系图。’,它会扫描该目录下的文件,分析组件间的导入关系,并输出一份清晰的 Mermaid 流程图代码。你可以将此代码粘贴到项目的架构文档中,让团队一目了然地看到组件间的依赖网络。

介绍

在开发复杂项目时,模块间的依赖关系常常错综复杂,难以直观理解。dependency-graph 这个技能可以自动分析代码中的 import 语句,生成清晰、标准的 Mermaid 流程图,帮助开发者快速理清模块间的调用和依赖路径。

使用时,你只需要指定目标目录或文件,AI 便会扫描其中的代码,识别出模块间的导入关系,并生成对应的 Mermaid 语法代码。你可以将此代码直接复制到支持 Mermaid 的 Markdown 编辑器或文档中,即可渲染出美观的依赖关系图。

该技能非常适合前端开发、后端开发和全栈开发人员,尤其是那些正在维护或接手大型、历史悠久的代码库,需要快速梳理架构的工程师。对于项目经理或技术负责人,它也能辅助进行代码审查和架构评估。

建议在项目关键迭代节点或重构前使用此技能,以获得最新的依赖视图。注意,它主要分析静态的 import/require 语句,对于动态导入或运行时依赖可能无法完全捕获,解读时需结合代码逻辑进行判断。

核心特点

专注于从代码中静态分析并生成标准的 Mermaid 依赖图,输出结果可直接嵌入文档或笔记工具进行可视化渲染,而不仅仅是列出文本依赖关系。

注意事项

不适合分析动态导入(如 `import()`)或通过字符串拼接生成的模块路径。

常见问题

支持哪些编程语言?

主要支持 JavaScript/TypeScript 等基于 import/require 语句的语言。

生成的图可以导出吗?

生成的是 Mermaid 语法文本,可复制到任何支持 Mermaid 的平台(如 GitHub Markdown、Obsidian、Notion)渲染成图。

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/dependency-graph-x-4/raw/index.md 读取 dependency-graph 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。