architecture-diagram
自动生成Mermaid架构图展示组件关系
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：architecture-diagram。 它的用途是：自动生成Mermaid架构图展示组件关系 完整的 Skill 内容见：https://321skill.com/skills/architecture-diagram/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请探索当前项目根目录的代码结构，生成一个Mermaid架构图，展示各主要模块之间的依赖关系，用top-down方向。' 它会先派发代码探索Agent分析package.json、目录结构、导入语句等，然后输出类似'flowchart TD\n subgraph core[Core]\n ...'的Mermaid语法，并自动调用MCP渲染出图表。
介绍
这个Skill解决了开发者在理解和展示大型代码库模块关系时的痛点。在代码Review、新人入职或系统重构时，手动梳理架构图不仅耗时，而且容易过时，导致文档与实际代码脱节。它通过自动分析代码结构，快速生成Mermaid流程图，让架构一眼可见。
使用方式很简单，只需要在对话中提供要探索的代码范围（如项目根目录、特定模块），Skill会先调度一个代码探索Agent来扫描包、模块及其依赖关系，然后自动输出Mermaid语法。之后你可以通过Mermaid Chart MCP渲染出可视化图表，或直接嵌入到文档和PR中。整个流程无需手动编写任何节点和连线。
它非常适合需要频繁进行系统设计沟通的团队或个人。尤其是那些正在维护大型后端服务、微服务架构或多模块项目的后端开发、全栈开发和技术文档工程师。对于项目经理和架构师，在技术评审时也能快速把抽象架构具象化，降低沟通成本。
建议在生成架构图时优先使用top-down方向处理分层系统，或者left-right方向处理流水线系统。需要注意的是，它主要适用于高层组件关系，节点数量建议控制在15-20个以内，对于细粒度类图或序列图，请使用专门的Mermaid工具。
常见问题
如何改变架构图的排列方向？
在生成Mermaid语法时，指定top-down使用flowchart TD，left-right使用flowchart LR，系统会自动调整布局。
这个Skill能分析所有编程语言吗？
它依赖代码库探索Agent，能分析大多数主流语言（如Python、JavaScript、TypeScript、Java、Go等），但需要语言对应的模块解析支持。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/architecture-diagram/raw/index.md 读取 architecture-diagram 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/architecture-diagram/raw/index.md（查看排版版本）