关键词

Mermaid转Excalidraw流程图生成图表可视化AI绘图辅助

项目简介

这是一个实现了 Model Context Protocol (MCP) 标准的服务器应用，旨在将用户（或AI）提供的 Mermaid 文本图表定义转换成 Excalidraw 格式的图表数据和 PNG 图片。它通过 MCP 协议向兼容的 LLM 客户端（如 Claude Desktop、Cursor 等）暴露一个工具（Tool），客户端可以调用这个工具来生成图表，并在附带的本地网页应用中进行预览。

主要功能点

  • Mermaid 转 Excalidraw: 核心功能是将标准的 Mermaid 语法描述的图表（如流程图、时序图等）转换成 Excalidraw 兼容的元素数据。
  • 生成PNG图片: 在转换的同时，服务器会生成图表的 PNG 格式图片预览。
  • 提供在线预览: 启动一个本地的网页服务器，允许通过浏览器访问生成的 Excalidraw 图表，提供交互式查看体验。
  • MCP工具接口: 将图表转换功能封装为标准的 MCP 工具，LLM 客户端可以通过 JSON-RPC 调用此工具。
  • 返回丰富内容: 工具调用结果包含转换后的 Excalidraw 数据、生成的 PNG 图片（Base64编码）以及图表预览网页的本地URL。

安装步骤

  1. 确保环境: 需要安装 Node.js 和 npm（或 yarn/pnpm）。
  2. 克隆仓库: 从 GitHub 克隆 'al1y/excalidraw-mcp' 仓库到本地。 
    git clone https://github.com/al1y/excalidraw-mcp.git
cd excalidraw-mcp
  3. 安装依赖: 在仓库根目录运行以下命令安装项目依赖。 
    npm install
  4. 构建应用: 构建 Excalidraw 网页应用，这是服务器运行所需的前端部分。 
    npm run build
    构建成功后，会在项目根目录生成一个 'dist' 文件夹。

服务器配置

MCP 服务器通常需要配置到 MCP 客户端（如 Claude Desktop, Cursor, etc.）中，以便客户端知道如何启动并连接到该服务器。配置信息通常是一个 JSON 对象，描述了服务器的名称、启动命令和参数。

您需要在您的 MCP 客户端配置中添加类似如下的条目（具体的配置方式请参考您使用的客户端文档）：

// 示例 MCP 客户端配置片段
{
    "mcpServers": {
        "excalidraw": { // 自定义服务器名称，用于客户端识别
            "command": "node", // 启动服务器的可执行文件
            "args": [ // 传递给启动命令的参数
                "<repo_root>/build/index.js" // 服务器入口文件路径，将 '<repo_root>' 替换为仓库在您本地的实际路径
            ],
            // 其他可选配置，如 transport (默认为 stdio)
        }
    }
}

配置中的关键点：

  • 'command': 指定执行 'index.js' 文件的命令，这里是 'node'。
  • 'args': 包含一个数组，第一个元素是服务器脚本的路径。请务必将 '<repo_root>' 替换为您本地仓库的绝对或相对路径（取决于客户端配置支持）。执行 'npm run build' 会生成 'build/index.js' 文件。

基本使用方法

  1. 启动服务器: 根据您在 MCP 客户端中的配置启动 MCP 服务器。通常，启动客户端并启用该 MCP 服务器后，客户端会自动执行配置的 'command' 和 'args' 来启动服务器进程。
  2. 调用工具: 在支持 MCP 工具调用的 LLM 客户端界面中，您可以指令 AI 调用名为 'draw-diagram' 的工具，并提供一个包含 Mermaid 图表语法的字符串作为 'diagram' 参数。
    • 例如，您可以对 AI 说：“使用 'draw-diagram' 工具绘制以下流程图：\n
      mermaid\ngraph TD\n A[开始] --> B{判断};
      ”
  3. 接收结果: 服务器执行工具后，会返回一个包含图表图片和预览链接的结果。LLM 客户端会显示这些结果。您可以点击预览链接在浏览器中查看交互式的 Excalidraw 图表，或直接使用返回的图片。

注意事项

  • 服务器需要访问互联网以下载 Puppeteer 浏览器。
  • 服务器会启动一个本地 HTTP 服务器，请确保防火墙允许本地连接。
  • 确保 'npm run build' 命令成功执行，否则服务器脚本 'build/index.js' 不会存在。

信息

分类

AI与计算

访问项目