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 許可證。