draw-flow-mcp-server

Next AI Draw.io MCP 服务

MCP（Model Context Protocol）服务，可让 Claude Desktop 和 Cursor 等 AI Agent 生成和编辑 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 创建图表：

   “创建一个展示用户身份验证的流程图，包含登录、MFA 和会话管理”

3. 图表会实时显示在浏览器中！

功能

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

可用工具

工具	描述
start_session	打开浏览器并实时预览图表
create_new_diagram	从 XML 创建新图表（需要 xml 参数）
edit_diagram	通过基于 ID 的操作编辑图表（更新／添加／删除单元格）
get_diagram	获取当前图表 XML
export_diagram	将图表保存为 .drawio 文件

工作原理

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

1. MCP 服务通过 stdio 接收来自 Claude 的工具调用
2. 内置 HTTP 服务提供 draw.io 界面并处理状态
3. 浏览器通过轮询显示实时图表更新

配置

变量	默认值	描述
PORT	6002	内置 HTTP 服务的端口
DRAWIO_BASE_URL	https://embed.diagrams.net	draw.io 嵌入界面的基础 URL。设置此项可在私有部署中使用可自托管的 draw.io 实例。

私有部署（可自托管的 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