AI导哈

插件系统概念图

一个交互式的概念图工具，用于理解Claude Code插件生态系统，包括插件、技能、子代理、斜杠命令、钩子、MCP服务器和市场。

  • by P60tdi
  • HTML
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 P60tdi/claude-code-concept-map

使用说明

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作用域层次结构（用户/项目/仓库）

📚 官方资源

许可证

麻省理工学院

相关 MCP