Draw Flow MCP Server

🚀 Next AI Draw.io MCP 服务器

Next AI Draw.io MCP 服务器是一个基于 MCP（模型上下文协议）的服务器，它能让像 Claude Desktop 和 Cursor 这样的 AI 代理生成和编辑 draw.io 图表，并提供实时浏览器预览功能。该服务器是独立运行的，内置了 HTTP 服务器，无需外部依赖。

🚀 快速开始

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

📦 安装指南

Claude Desktop

将以下配置添加到你的 Claude Desktop 配置文件中（在 macOS 上为 ~/Library/Application Support/Claude/claude_desktop_config.json）：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

VS Code

将以下配置添加到你的 VS Code 设置中（工作区或用户设置的 .vscode/mcp.json）：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Cursor

将以下配置添加到 Cursor MCP 配置文件（~/.cursor/mcp.json）中：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Cline（VS Code 扩展）

1. 点击 Cline 顶部菜单栏中的 MCP Servers 图标。
2. 选择 Configure 选项卡。
3. 点击 Configure MCP Servers 编辑 cline_mcp_settings.json 文件。
4. 添加 drawio 服务器配置：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

其他 MCP 客户端

使用标准的 MCP 配置：

• 命令：npx
• 参数：["@next-ai-drawio/mcp-server@latest"]

💻 使用示例

基础用法

1. 更新配置后重启你的 MCP 客户端。
2. 让 AI 创建一个图表，例如：

   "创建一个展示用户认证流程的流程图，包含登录、多因素认证和会话管理"

3. 图表将实时显示在你的浏览器中！

✨ 主要特性

• 实时预览：当 AI 创建图表时，图表会在浏览器中实时显示和更新。
• 版本历史：可以通过可视化缩略图恢复之前的图表版本，点击右下角的时钟按钮即可浏览和恢复早期状态。
• 自然语言支持：可以用纯文本描述图表，如流程图、架构图等。
• 编辑支持：可以使用自然语言指令修改现有的图表。
• 导出功能：可以将图表保存为 .drawio 文件。
• 独立运行：内置服务器，可离线工作（默认情况下 draw.io UI 从 embed.diagrams.net 加载，可通过 DRAWIO_BASE_URL 进行配置）。

📚 详细文档

可用工具

工作原理

┌─────────────────┐     stdio      ┌─────────────────┐
│  Claude Desktop │ <───────────> │   MCP Server    │
│    (AI Agent)   │               │  (this package) │
└─────────────────┘               └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │ Embedded HTTP   │
                                 │ Server (:6002)  │
                                 └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │  User's Browser │
                                 │ (draw.io embed) │
                                 └─────────────────┘

1. MCP 服务器通过标准输入输出从 Claude 接收工具调用。
2. 嵌入式 HTTP 服务器提供 draw.io UI 并处理状态。
3. 浏览器通过轮询显示实时图表更新。

配置

私有部署（自托管 draw.io）

对于需要私有部署 draw.io 的安全敏感环境：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": { 
        "DRAWIO_BASE_URL": "https://drawio.your-company.com"
      }
    }
  }
}

你可以使用官方 Docker 镜像部署自己的 draw.io 实例：

docker run -d -p 8080:8080 jgraph/drawio

然后将 DRAWIO_BASE_URL 设置为 http://localhost:8080（或你的服务器 URL）。

故障排除

端口已被占用

如果端口 6002 已被占用，服务器将自动尝试下一个可用端口（最高到 6020）。 或者设置自定义端口：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": { "PORT": "6003" }
    }
  }
}

"No active session"

先调用 start_session 打开浏览器窗口。

浏览器未更新

检查浏览器 URL 是否包含 ?mcp= 查询参数。MCP 会话 ID 用于将浏览器连接到服务器。

📄 许可证

本项目采用 Apache-2.0 许可证。