npm package: @joannazyx/drawio-mcp-server
Description: MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview
Author: DayuanJiang
Latest version: 0.1.17

# Srdcloud Draw.io MCP Server

研发云AI画图MCP服务器，使如Codefree Cli和Codefree插件能够生成和编辑draw.io图表，并支持**实时浏览器预览**。

**自包含** - 包含嵌入式HTTP服务器，无需外部依赖。

## Quick Start

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-drawio/mcp-server@latest"]
    }
  }
}
```

## 安装指南

### Claude Desktop

添加到您的Claude Desktop配置中（macOS上为`~/Library/Application Support/Claude/claude_desktop_config.json`）：

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-drawio/mcp-server@latest"]
    }
  }
}
```

### VS Code

添加到您的VS Code设置中（工作区或用户设置的`.vscode/mcp.json`）：

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-drawio/mcp-server@latest"]
    }
  }
}
```

### Cursor

添加到Cursor MCP配置中（`~/.cursor/mcp.json`）：

```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服务器：

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-drawio/mcp-server@latest"]
    }
  }
}
```

### Claude Code CLI

```bash
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的安全敏感环境：

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-drawio/mcp-server@latest"],
      "env": {
        "DRAWIO_BASE_URL": "https://drawio.your-company.com"
      }
    }
  }
}
```

您可以使用官方Docker镜像部署自己的draw.io实例：

```bash
docker run -d -p 8080:8080 jgraph/drawio
```

然后设置`DRAWIO_BASE_URL=http://localhost:8080`（或您的服务器URL）。

## 故障排除

### 端口已被占用

如果端口6002被占用，服务器将自动尝试下一个可用端口（最多到6020）。

或者设置自定义端口：
```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@srdcloud-drawio/mcp-server@latest"],
      "env": { "PORT": "6003" }
    }
  }
}
```

### "没有活动会话"

首先调用`drawio_start_session`打开浏览器窗口。

### 浏览器不更新

检查浏览器URL是否包含`?mcp=`查询参数。MCP会话ID将浏览器连接到服务器。

## 许可证

Apache-2.0