Srdcloud Draw.io MCP Server

研发云AI画图MCP服务器，使如Codefree Cli和Codefree插件能够生成和编辑draw.io图表，并支持实时浏览器预览。

自包含 - 包含嵌入式HTTP服务器，无需外部依赖。

Quick Start

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

安装指南

Claude Desktop

添加到您的Claude Desktop配置中（macOS上为~/Library/Application Support/Claude/claude_desktop_config.json）：

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

VS Code

添加到您的VS Code设置中（工作区或用户设置的.vscode/mcp.json）：

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

Cursor

添加到Cursor MCP配置中（~/.cursor/mcp.json）：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-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": ["@srdcloud-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @srdcloud-drawio/mcp-server@latest

其他MCP客户端

使用标准的MCP配置：

• 命令: npx
• 参数: ["@srdcloud-drawio/mcp-server@latest"]

使用方法

1. 更新配置后重启您的MCP客户端
2. 让AI创建图表：

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

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

功能特性

• 实时预览: 图表在AI创建时实时出现在浏览器中并更新
• 版本历史: 恢复之前的图表版本，带有可视化缩略图 - 点击时钟按钮（右下角）浏览和恢复早期状态
• 自然语言: 用纯文本描述图表 - 流程图、架构图等
• 编辑支持: 使用自然语言指令修改现有图表
• 导出: 将图表保存为.drawio文件
• 自包含: 嵌入式服务器，可离线工作（除了draw.io UI默认从embed.diagrams.net加载，可通过DRAWIO_BASE_URL配置）

可用工具

| 工具 | 描述 | |------|-------------| | drawio_start_session | 打开浏览器进行实时图表预览 | | drawio_create_new_diagram | 从XML创建新图表（需要xml参数） | | drawio_edit_diagram | 通过基于ID的操作编辑图表（更新/添加/删除单元格） | | drawio_get_diagram | 获取当前图表XML | | drawio_export_diagram | 将图表保存到.drawio文件 |

工作原理

┌─────────────────┐     stdio      ┌─────────────────┐
│  Codefree Cli   │ <───────────> │   MCP Server    │
│    (AI Agent)   │               │  (本软件包)     │
└─────────────────┘               └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │ 嵌入式HTTP      │
                                 │ 服务器 (:6002)  │
                                 └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │  用户浏览器     │
                                 │ (draw.io嵌入)   │
                                 └─────────────────┘

1. MCP服务器通过stdio接收来自Claude的工具调用
2. 嵌入式HTTP服务器提供draw.io UI并处理状态
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": ["@srdcloud-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": ["@srdcloud-drawio/mcp-server@latest"],
      "env": { "PORT": "6003" }
    }
  }
}

"没有活动会话"

首先调用drawio_start_session打开浏览器窗口。

浏览器不更新

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

许可证

Apache-2.0