关键词

文档生成C4架构图代码分析软件架构mermaid.js

使用说明

项目简介

McpDoc 是一个基于 Model Context Protocol (MCP) 的服务器实现，专注于为现有代码库自动生成文档。它通过预定义的 MCP 提示 (Prompts) 和工具 (Tools)，结合文件系统操作，能够自动遍历代码目录，为每个包含源代码的目录生成 'README.McpDoc.md' 文件和 C4 组件图，并在代码库根目录汇总生成 C4 上下文图和容器图，从而提供多层次、结构化的代码文档。

主要功能点

  • 自动化 README 生成: 针对每个包含源代码的目录，自动生成 'README.McpDoc.md' 摘要文档，快速了解模块内容。
  • C4 架构图生成: 在每个包含源代码的目录生成 'C4Component.McpDoc.md' 组件图，直观展示模块内部结构。
  • 汇总 C4 图生成: 在代码库根目录汇总生成 'C4Context.McpDoc.md' 上下文图和 'C4Container.McpDoc.md' 容器图，提供系统全局概览。
  • Mermaid.js 支持: 生成的 C4 架构图使用 Mermaid.js 语法，方便渲染和嵌入 Markdown 文档。
  • Mermaid 图校验与预览: 提供工具校验 Mermaid 语法，并支持在浏览器中预览架构图，确保图表质量。

安装步骤

  1. 克隆仓库

    git clone https://github.com/jonverrier/McpDoc.git
cd McpDoc

  2. 安装依赖

    npm install

  3. 构建项目

    npm run build

  4. 安装文件系统 MCP 服务器

    • 你需要安装 Anthropic filesystem MCP server 作为 McpDoc 的依赖，以便 McpDoc 可以访问和操作文件系统。
    • 按照该仓库的 README 指示完成安装和构建。

服务器配置

为了让 MCP 客户端（如 Cursor 或 Claude）能够连接到 McpDoc 服务器和文件系统服务器，你需要配置 'mcpServers'。以下是示例配置，你需要根据你的实际代码根目录进行调整：

{
  "mcpServers": {
    "mcp-documenter": {
      "command": "node",
      "args": ["YourCodeRoot/McpDoc/dist/src/index.js"]
      // command: 启动 McpDoc 服务器的命令，这里使用 node
      // args: 启动命令的参数，指向 McpDoc 服务器的入口文件 index.js
      //       需要将 "YourCodeRoot" 替换为 McpDoc 仓库在你本地的绝对路径
    },
    "mcp-filesystem": {
      "command": "node",
      "args": ["YourCodeRoot/McpFS/dist/index.js", "YourCodeRoot"]
      // command: 启动文件系统服务器的命令，这里使用 node
      // args: 启动命令的参数，第一个参数指向文件系统服务器的入口文件 index.js，第二个参数是你的代码根目录
      //       需要将两个 "YourCodeRoot" 都替换为你的实际代码根目录的绝对路径，文件系统服务器将基于此目录提供文件访问能力
    }
  }
}

注意:

  • 'YourCodeRoot/McpDoc' 需要替换为 McpDoc 仓库在你本地的绝对路径。
  • 'YourCodeRoot/McpFS' 需要替换为 文件系统 MCP 服务器 仓库在你本地的绝对路径。
  • 最后的 'YourCodeRoot' 需要替换为你想要生成文档的代码仓库的根目录的绝对路径。

基本使用方法

  1. 启动 MCP 服务器: 确保 'mcp-documenter' 和 'mcp-filesystem' 服务器都已成功启动。

  2. 配置 MCP 客户端: 在你的 MCP 客户端（如 Cursor 或 Claude）中配置 'mcpServers'，使用上述提供的 JSON 配置，并替换正确的路径。

  3. 使用 MCP 提示:

    • 生成目录 README: 使用 'generate_readmes' 提示，并设置 'RootDirectory' 参数为你想要生成文档的代码仓库根目录的绝对路径。
    • 生成目录 C4 组件图: 使用 'generate_component_mermaid_C4_diagrams' 提示，并设置 'RootDirectory' 参数。
    • 生成汇总 C4 图: 使用 'generate_rollup_mermaid_C4_diagram' 提示，设置 'RootDirectory' 参数和 'C4Type' 参数 (例如 "C4Context", "C4Container")，指定要生成的汇总 C4 图类型。

  4. 查看文档: 文档生成后，可以在代码仓库的相应目录中找到 'README.McpDoc.md' 和 'C4Component.McpDoc.md' 文件，以及根目录下的汇总 C4 图文件。

示例提示 (在 MCP 客户端中使用):

  • 生成根目录下所有子目录的 README 文档:

    {
  "prompt": "generate_readmes",
  "arguments": {
    "RootDirectory": "/path/to/your/code/root"
  }
}

  • 生成根目录下所有子目录的 C4 组件图:

    {
  "prompt": "generate_component_mermaid_C4_diagrams",
  "arguments": {
    "RootDirectory": "/path/to/your/code/root"
  }
}

  • 生成根目录的 C4 上下文图:

    {
  "prompt": "generate_rollup_mermaid_C4_diagram",
  "arguments": {
    "RootDirectory": "/path/to/your/code/root",
    "C4Type": "C4Context"
  }
}

注意: '/path/to/your/code/root' 需要替换为你实际的代码仓库根目录的绝对路径。

信息

分类

开发者工具

访问项目