AI导哈

代码架构图生成工具

一款分析TypeScript/JavaScript代码依赖关系并生成架构图的工具，支持多级依赖分析和Mermaid图生成。

  • by OpenNekoPaw
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 LittleSquirrel00/code-architecture-diagram-mcp

使用说明

MCP代码架构图

一个模型上下文协议（MCP）服务器，用于分析Types/JavaScript代码依赖关系，并为AI代理生成架构图。

特性

  • 多级依赖性分析 -分析文件、模块或组件级别的依赖关系
  • 接口实施跟踪 （第3阶段）-轨道 class implements Interface 关系
  • React组件渲染 （第4阶段）-跟踪JSX组件渲染关系(<Parent><Child /></Parent>)
  • 分层聚合 -将大型项目的复杂性降低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 （默认）：文件级依赖关系图

    • 最适合小型项目（<100个文件）
    • 将每个文件显示为节点
    • 最详细的视图

  • module：模块级聚合图

    • 最适合大中型项目（100-1000+个文件）
    • 按顶级目录（src/auth、src/api等）对文件进行分组
    • 将复杂性降低50-100倍
    • 仅显示跨模块依赖关系

  • component：组件级聚合图

    • 最适合基于组件的架构（React、Vue等）
    • 按组件目录（按钮/、页眉/等）对文件进行分组
    • 仅显示跨组件依赖关系

边缘类型：

  • import （默认）：代码导入依赖关系

    • import { foo } from './bar'
    • 渲染为实线(-->)在美人鱼图中

  • implement （第3阶段）：接口实现关系

    • class Service implements IAuth
    • 渲染为虚线(-.->|implements|)在美人鱼图中
    • 帮助可视化依赖注入模式和插件系统

  • render （阶段4）：React组件渲染关系

    • <Dashboard><Header /><Sidebar /></Dashboard>
    • 渲染为粗线(==>)在美人鱼图中
    • 可视化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

运作原理

  1. 解析：使用树形图来解析Types/JavaScript文件并提取导入语句
  2. 层次检测：从目录结构中自动检测模块和组件边界
  3. 图形构建：在文件、模块或组件级别构造依赖关系图
  4. 聚合：将文件级边合并到父级边，过滤模块内的依赖关系
  5. 可视化：生成Mermaid图语法，便于可视化
  6. 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等。（未来阶段）

演出

  • 小型项目 （<100个文件）：<1秒
  • 中型项目 （100-1000个文件）：<5秒
  • 大型项目 （>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欢迎！

相关 MCP