Claude Code·插件系统概念图
一个用于理解Claude Code插件生态系统的交互式概念图游乐场——插件、技能、子代理、Slash命令、钩子、MCP服务器和市场。
🚀 现场演示
打开 index.html 直接在浏览器中--无构建步骤，无依赖关系。
或者在当地供应：
npx serve .
# or
python3 -m http.server 8080🗺️ 覆盖范围
| 概念 | 类型 | 描述 |
|---|---|---|
| 插件 | 容器 | 顶级可分配单元，捆绑所有组件 |
| 技能 | 自动调用 | 描述匹配自动加载Markdown上下文 |
| 子代理 | 编排器 | 通过显式调用 @agent-name 用于孤立的工作流 |
| 斜杠命令 | 触发 | 用户触发的可重复工作流快捷方式 |
| 钩子 | 生命周期 | 关键时刻的事件处理程序（PreToolUse、SessionStart等） |
| MCP服务器 | 协议 | 将Claude连接到外部工具/API的通用适配器 |
| 市场 | 分发 | Git仓库托管精心策划的插件，用于发现和安装 |
| CLAUDE.md | 内存 | 始终加载项目上下文和约定 |
🧭 如何使用
- 单击任何节点 → 打开一个包含关键事实、代码示例和相关概念的详细面板
- 拖拽 画布要平移， 滚动 缩放
- 传说 （左下）跳到任何概念
- 重置按钮（⌂） 返回默认视图
📁 项目结构
claude-code-concept-map/
├── index.html ← the entire app (single file, no dependencies)
└── README.md🔭 路线图
- \[\]场景流动画师（“PR审查”→ 哪些组件会着火，以什么顺序）
- \[\]决策树：“我想做X——技能、命令还是代理？”
- \[\]具有可点击、解释结构的文件树资源管理器
- \[\]真正的插件拆卸（pr审查，插件开发元插件）
- \[\]对所有事件类型进行钩子生命周期深度挖掘
- \[\]CLAUDE.md作用域层次结构（用户/项目/仓库）
📚 官方资源
许可证
麻省理工学院