使用说明

项目简介

UIFlowchartCreator 是一个基于 Model Context Protocol (MCP) 的服务器，旨在通过分析 React、Angular 等前端代码仓库，自动生成用户界面 (UI) 流程图。它能够识别代码库中的组件、页面和布局，并可视化它们之间的关系，帮助开发者和设计者更好地理解和沟通应用的用户界面结构。

主要功能点

UI 流程图生成: 分析前端代码仓库（本地或 GitHub），自动提取组件信息并生成 Mermaid 格式的 UI 流程图。
资源管理: 提供 'ui-flow' 资源，允许客户端通过 MCP 协议访问和获取生成的 UI 流程图数据。
工具调用: 提供 'generate_ui_flow' 工具，客户端可以调用此工具触发 UI 流程图的生成过程，并指定代码仓库的路径和文件类型等参数。
支持本地和 GitHub 仓库: 可以分析本地文件系统中的代码仓库，也可以直接分析 GitHub 上的公开仓库。
可配置的文件扩展名: 允许用户自定义需要分析的文件扩展名，以适应不同的前端框架和项目结构。
Mermaid 格式输出: 生成的流程图以 Markdown 格式输出，并嵌入 Mermaid 代码块，方便在各种文档和平台中展示。

安装步骤

确保你的环境中已安装 Node.js 和 npm。

打开终端，执行以下命令安装 'uiflowchartcreator'：

npm install uiflowchartcreator

服务器配置

要将 UIFlowchartCreator 作为 MCP 服务器集成到 MCP 客户端中，需要在客户端的 MCP 服务器配置中添加以下信息。以下是一个 JSON 格式的配置示例，你需要根据实际情况调整 'command' 和 'args' 中的路径：

{
  "mcpServers": {
    "uiflowchartcreator": {
      "command": "node",
      "args": ["/path/to/uiflowchartcreator/build/index.js"],
      // args 字段是传递给启动命令的参数，这里指向 UIFlowchartCreator 服务器的入口文件 index.js。
      // 请将 "/path/to/uiflowchartcreator/build/index.js" 替换为实际的 UIFlowchartCreator 安装路径。
      "env": {}
      // env 字段可以设置环境变量，如果 UIFlowchartCreator 需要特定的环境变量（例如 GitHub Token），可以在这里配置。
    }
  }
}

注意: '/path/to/uiflowchartcreator/build/index.js' 需要替换为 'uiflowchartcreator' 实际安装目录下的 'build/index.js' 文件的绝对路径。你可以在安装 'uiflowchartcreator' 的全局 npm 包路径下找到它。

基本使用方法

启动 MCP 客户端: 确保你的 MCP 客户端已配置并成功启动。
调用 'generate_ui_flow' 工具: 通过 MCP 客户端向 UIFlowchartCreator 服务器发送 'CallToolRequest' 请求，调用 'generate_ui_flow' 工具。你需要提供以下参数：
- 'repoPath': 代码仓库的路径。如果是 GitHub 仓库，可以为空字符串 '""'。如果是本地仓库，则为本地文件系统的路径。
- 'isLocal': 布尔值，指示是否为本地仓库。 'true' 表示本地仓库， 'false' 表示 GitHub 仓库。
- 'owner' (可选，当 'isLocal' 为 'false' 时必填): GitHub 仓库的 owner (用户名或组织名)。
- 'repo' (可选，当 'isLocal' 为 'false' 时必填): GitHub 仓库的名称。
- 'fileExtensions' (可选): 要分析的文件扩展名数组，默认为 '["js", "jsx", "ts", "tsx"]'。
请求示例 (JSON-RPC 格式):
```
{
  "jsonrpc": "2.0",
  "method": "CallTool",
  "params": {
    "name": "generate_ui_flow",
    "arguments": {
      "repoPath": "",
      "isLocal": false,
      "owner": "facebook",
      "repo": "react",
      "fileExtensions": ["js", "jsx"]
    }
  },
  "id": "123"
}
```
这个请求会指示 UIFlowchartCreator 分析 Facebook 的 React GitHub 仓库，并生成 UI 流程图。

访问 'ui-flow' 资源: 通过 MCP 客户端发送 'ReadResourceRequest' 请求，访问 'ui-flow' 资源，获取生成的 UI 流程图 JSON 数据。你需要提供资源 URI，格式为 'ui-flow://{owner}/{repo}'。

请求示例 (JSON-RPC 格式):

{
  "jsonrpc": "2.0",
  "method": "ReadResource",
  "params": {
    "uri": "ui-flow://facebook/react"
  },
  "id": "456"
}

这个请求会获取之前分析的 Facebook React 仓库的 UI 流程图数据。

查看流程图: UIFlowchartCreator 会将生成的 Mermaid 流程图 Markdown 文件 ('userflo.md') 保存在本地仓库根目录或当前工作目录下 (取决于分析的是本地仓库还是 GitHub 仓库)。你也可以从 'CallTool' 请求的响应中获取流程图的文本内容，或从 'ReadResource' 请求的响应中获取 JSON 数据，并在支持 Mermaid 的工具或平台中渲染查看。

注意事项

GitHub Token: 分析 GitHub 仓库需要设置 'GITHUB_TOKEN' 环境变量。请确保你已获取 GitHub Personal Access Token 并将其设置为环境变量。
错误处理: 如果分析过程中出现错误，UIFlowchartCreator 会返回 MCP 错误响应，客户端需要处理这些错误。
性能: 分析大型代码仓库可能需要一些时间，请耐心等待。

通过以上步骤，你可以使用 UIFlowchartCreator MCP 服务器生成和访问 UI 流程图，从而更好地理解和可视化前端应用的结构。

关键词