关键词

架构图MermaidGitHub分析代码可视化AI图表生成

项目简介

Archy 是一个遵循 Model Context Protocol (MCP) 的服务器应用，专注于根据文本描述、GitHub 仓库信息以及代码生成各种类型的架构图和软件可视化图表，支持多种 Mermaid 语法。它作为一个后端服务，为兼容 MCP 的客户端（如大型语言模型或开发工具）提供强大的图表生成能力。

主要功能点

  • 灵活的图表生成: 支持从简单的文本描述或指定 GitHub 仓库的 URL 生成多种 Mermaid 图表，包括流程图、序列图、类图、状态图、实体关系图、用户旅程、甘特图、饼图、象限图、需求图、Git 图以及 C4 图等。
  • 智能的代码分析与可视化: 利用 AI 技术（通过 OpenRouter 集成）分析代码结构，自动生成类图等表示代码结构的图表。还能比较两个版本的代码，生成差异可视化图表。
  • 图表导出: 将生成的 Mermaid 图表导出为常见的图片格式（PNG, SVG, PDF），方便在文档或演示中使用。
  • 仓库演变追踪: 分析 Git 仓库的提交历史，可视化仓库随时间的演变过程，特别适合展示文件或项目的历史变更。

安装步骤

  1. 环境准备: 确保您的系统已安装 Node.js (推荐 v16 或更高版本) 和 npm (推荐 v7 或更高版本)。
  2. 克隆仓库: 打开终端，执行以下命令克隆 Archy 的 GitHub 仓库： 
    git clone https://github.com/phxdev1/archy-mcp.git
  3. 进入目录: 切换到克隆下来的项目目录： 
    cd archy-mcp
  4. 安装依赖: 安装项目所需的依赖库： 
    npm install
  5. 编译项目: 编译 TypeScript 源代码： 
    npm run build
    这会在项目根目录下生成一个 'build' 文件夹，其中包含服务器运行所需的可执行 JavaScript 文件 'index.js'。
  6. 运行自动安装脚本 (推荐): 执行以下命令运行自动安装脚本： 
    npm run install-mcp
    该脚本会引导您完成 MCP 服务器配置，并自动将 Archy 添加到您常用的 MCP 客户端（如 VS Code 或 Claude）的设置中。脚本会提示您是否需要配置 GitHub Token (用于访问私有仓库) 和 OpenRouter API Key (用于启用 AI 增强功能)。

服务器配置

MCP 服务器需要由兼容的 MCP 客户端负责启动和管理。安装完成后，您需要在您的 MCP 客户端的配置中添加 Archy 服务器的信息。通常，这涉及配置服务器的启动命令和参数。

以下是一个示例配置，展示了客户端如何配置 Archy MCP 服务器：

{
  "mcpServers": {
    "archy": {
      "command": "node", // 启动 Node.js 进程的命令
      "args": [
        "/path/to/your/archy-mcp/build/index.js" // 指向 Archy 服务器编译后的主文件路径
      ],
      "env": { // 可选的环境变量配置
        "GITHUB_TOKEN": "your-github-token", // 如果您需要访问私有 GitHub 仓库，请在此处或通过安装脚本配置您的 GitHub Token
        "OPENROUTER_API_KEY": "your-openrouter-api-key" // 如果您需要使用 AI 增强的图表生成功能，请在此处或通过安装脚本配置您的 OpenRouter API Key
      }
    }
  }
}

重要提示: 上述 '"/path/to/your/archy-mcp/build/index.js"' 需要替换为您实际克隆 Archy 仓库并编译后 'index.js' 文件的完整路径。如果您运行了 'npm run install-mcp' 脚本，该脚本会自动检测并填写正确的路径，以及提示您配置环境变量，通常无需手动编辑此 JSON 文件。

基本使用方法

一旦 Archy MCP 服务器在您的 MCP 客户端中成功配置并被客户端启动，您就可以通过调用服务器提供的工具来使用其图表生成功能。具体的调用方式取决于您的 MCP 客户端界面，但底层逻辑是向服务器发送 MCP JSON-RPC 请求来调用工具。

以下是一些常用的工具及其功能（您可以在 MCP 客户端中调用 'tools/list' 工具来获取完整的工具列表和详细信息）：

  • 'list_supported_diagram_types': 列出 Archy 支持生成的所有 Mermaid 图表类型及其简要说明。
  • 'generate_diagram_from_text': 根据提供的文本描述和指定的图表类型生成相应的 Mermaid 图表代码。
    • 参数示例: '{ "description": "用户注册和登录的流程图", "diagramType": "flowchart" }'
  • 'generate_diagram_from_github': 根据提供的 GitHub 仓库 URL 和指定的图表类型，分析仓库内容并生成相应的 Mermaid 图表代码。
    • 参数示例: '{ "repoUrl": "https://github.com/modelcontextprotocol/typescript-sdk", "diagramType": "classDiagram" }'
  • 'generate_diagram_from_code': (需要配置 OpenRouter Key) 分析提供的代码，并根据指定的图表类型生成可视化代码结构的 Mermaid 图表代码。
    • 参数示例: '{ "code": "class User { ... }", "diagramType": "classDiagram" }'
  • 'export_diagram_to_image': 将一段 Mermaid 图表代码导出为指定的图片格式 (PNG, SVG, 或 PDF)。
    • 参数示例: '{ "mermaidCode": "flowchart TD\nA-->B", "format": "png", "width": 1024 }'

通过您的 MCP 客户端的用户界面或命令行接口，选择并调用这些工具，即可利用 Archy 的强大能力生成您需要的图表。

信息

分类

开发者工具

访问项目