MCP代码架构图
一个模型上下文协议（MCP）服务器，用于分析Types/JavaScript代码依赖关系，并为AI代理生成架构图。
特性
- 多级依赖性分析 -分析文件、模块或组件级别的依赖关系
- 接口实施跟踪 （第3阶段）-轨道
class implements Interface关系 - React组件渲染 （第4阶段）-跟踪JSX组件渲染关系(`
`)
- 分层聚合 -将大型项目的复杂性降低50-100倍
- MCP协议支持 -与Claude Desktop和其他兼容MCP的AI代理直接集成
- 美人鱼图生成 -输出美观的、可复制粘贴的依赖关系图，对不同的边缘类型进行视觉区分
- 快速高效 -在几秒钟内处理1000多个文件的项目
- 零配置 -适用于任何Types/JavaScript项目
安装
全局安装（推荐）
npm install -g code-architecture-diagram-mcp本地安装
npm install code-architecture-diagram-mcp用法
使用克劳德桌面
添加到您的Claude Desktop MCP配置文件中：
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
视窗: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"code-arch": {
"command": "code-arch-mcp"
}
}
}重新启动Claude Desktop，然后使用 getDependencyGraph 工具：
Can you analyze the dependencies in my project at /path/to/my-project?对于大型项目，您可以请求模块级视图以获得更好的清晰度：
Can you analyze the dependencies at module level for /path/to/my-project?第3阶段：接口实施跟踪
跟踪接口实施关系：
Can you show me which classes implement which interfaces in /path/to/my-project?
Use edgeTypes: ['import', 'implement'] to show both imports and interface implementations.第四阶段：React组件渲染关系
跟踪UI组件组成和渲染层次：
Can you show me the React component rendering hierarchy in /path/to/my-project?
Use edgeTypes: ['render'] to show only component rendering relationships.
Can you show me both imports and component renders?
Use edgeTypes: ['import', 'render'] to visualize code dependencies and UI composition together.MCP工具参考
getDependencyGraph
分析TypeScript/JavaScript项目中不同层次结构级别的代码依赖关系。
参数：
projectPath（string，必填）：项目根目录的绝对路径level（字符串，可选）：分析级别-"file","module"，或"component"（默认值："file")format（字符串，可选）：输出格式-"json","mermaid"，或"both"（默认值："both")edgeTypes（数组，可选）：要包含的边类型-["import"],["implement"],["render"]，或任意组合（默认值：["import"])
退货：
{
"graph": {
"nodes": [...],
"edges": [...]
},
"mermaid": "graph LR\n ...",
"summary": {
"totalFiles": 42,
"totalNodes": 15,
"totalEdges": 23,
"totalModules": 5,
"totalImportEdges": 18,
"totalImplementEdges": 5,
"totalRenderEdges": 12
}
}分析级别：
file（默认）：文件级依赖关系图
- 最适合小型项目（\`)在美人鱼图中
implement（第3阶段）：接口实现关系
- class Service implements IAuth - 渲染为虚线(-.->|implements|)在美人鱼图中 - 帮助可视化依赖注入模式和插件系统
render（阶段4）：React组件渲染关系
- ` - 渲染为粗线(==>`)在美人鱼图中 - 可视化UI组件层次结构和布局依赖关系 - 仅适用于JSX/TSX文件
示例输出
文件级分析（默认）
对于一个简单的项目：
src/
a.ts → imports b.ts, c.ts
b.ts → imports c.ts
c.ts → utility functions该工具生成：
graph LR
file:a-cd7ede1b[src/a.ts]
file:b-971e66c8[src/b.ts]
file:c-8577b604[src/c.ts]
file:a-cd7ede1b --> file:b-971e66c8
file:a-cd7ede1b --> file:c-8577b604
file:b-971e66c8 --> file:c-8577b604模块级分析
对于更大的项目：
src/
auth/
login.ts → imports ../api/client.ts
register.ts → imports ../api/client.ts
api/
client.ts → imports ../utils/http.ts
utils/
http.ts模块级视图（缩小50倍）：
graph LR
module:src_auth[auth/]
module:src_api[api/]
module:src_utils[utils/]
module:src_auth --> module:src_api
module:src_api --> module:src_utils运作原理
- 解析：使用树形图来解析Types/JavaScript文件并提取导入语句
- 层次检测：从目录结构中自动检测模块和组件边界
- 图形构建：在文件、模块或组件级别构造依赖关系图
- 聚合：将文件级边合并到父级边，过滤模块内的依赖关系
- 可视化：生成Mermaid图语法，便于可视化
- MCP集成：通过AI代理的模型上下文协议公开功能
支持的导入样式
- ✅ 命名导入：
import { foo } from './bar' - ✅ 默认导入：
import foo from './bar' - ✅ 命名空间导入：
import * as foo from './bar' - ✅ 再出口：
export { foo } from './bar' - ✅ 仅输入类型：
import type { Foo } from './bar' - ✅ 动态导入：
import('./bar')（尽最大努力） - ✅
.js进口.ts文件（ESM兼容性）
局限性
- 仅导入边：不跟踪渲染、实现或使用关系（在第3-4阶段）
- 仅全球视野：不支持聚焦视图或邻居视图（将在第6阶段推出）
- 仅限Types/JavaScript：不支持Vue、Svelte等。（未来阶段）
演出
- 小型项目 （\1000个文件）：\<30秒
层次结构开销：与文件级相比，模块/组件级分析增加了\<10%的开销。
发展
构建
npm run build测试
npm test在本地运行MCP服务器
npm start服务器在stdio上运行，并通过MCP协议进行通信。
建筑
src/
core/
types.ts # Core data structures (Graph, Node, Edge)
parser/
typescript-parser.ts # Tree-sitter based AST parser
hierarchy-detector.ts # Module/component boundary detection
graph/
builder.ts # Dependency graph constructor with aggregation
visualization/
mermaid.ts # Mermaid diagram generator
mcp/
server.ts # MCP protocol server许可证
麻省理工学院
贡献
该项目采用分阶段开发的方法。 第2阶段（模块/组件层次结构） 现在已完成！
未来阶段将增加：
- 第三期：接口/类型依赖性跟踪
- 阶段4：React组件渲染关系
- 阶段5：基于Git差异的变更跟踪
- 第6阶段：聚焦视图和邻居视图模式
- 第7阶段：架构级抽象
问题和PR欢迎！