AI导哈

图表编程生成服务

一个基于Node.js的MCP服务器，使AI/LLM代理能够以编程方式创建、修改和导出draw.io图表。

  • by Anuragkumarsah
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Anuragkumarsah/drawio-mcp-server

使用说明

Draw.io MCP服务器

一个Node.js MCP（模型上下文协议）服务器，使AI/LLM代理能够以编程方式创建、修改和导出draw.io图表。它通过WebSocket与配套的Chrome扩展程序通信，以实时操纵draw.io画布上的图表。

运作原理

LLM ──(MCP/stdio)──► MCP Server ──(WebSocket :3333)──► Chrome Extension ──► draw.io Canvas

服务器通过MCP协议公开4个工具。当LLM调用工具时，服务器通过WebSocket将命令发送到Chrome扩展程序，Chrome扩展程序在draw.io画布上执行该命令并返回结果（包括SVG屏幕截图）。

可用工具

工具 说明
render_subgraph 使用自动布局在画布上创建节点和边。可选地返回SVG屏幕截图。
export_diagram 将当前图表导出为SVG（base64图像或原始XML文本）。
modify_subgraph 在现有图表上逐步添加/删除/更新节点和边。
get_diagram_state 以结构化JSON格式从当前图中检索所有节点和边。

布局算法

这 render_subgraph 和 modify_subgraph 工具支持这些布局算法：

  • hierarchical --最适用于DAG、流程图、自上而下的图表（默认）
  • organic --一般图形的力导向布局
  • circle --将节点排列成圆形
  • tree --紧凑的树形布局
  • none --无自动布局（手动定位）

先决条件

  • Node.js v18或更高版本
  • npm v9或更高版本
  • 这 drawio mcp扩展 必须安装并连接Chrome扩展程序

设置和安装

1.安装依赖项

cd drawio-mcp-server
npm install

2.建设项目

npm run build

这将从以下位置编译TypeScript src/ JavaScript在 build/.

3.配置您的MCP客户端

将服务器添加到MCP客户端的配置中。以下是热门客户的示例：

反重力/VCode MCP配置

添加到您的 mcp_config.json:

{
  "mcpServers": {
    "drawio": {
      "command": "node",
      "args": ["path_to_your_project/build/index.js"]
    }
  }
}

克劳德桌面版

增添 claude_desktop_config.json:

{
  "mcpServers": {
    "drawio": {
      "command": "node",
      "args": ["/absolute/path/to/build/index.js"]
    }
  }
}

使用自定义端口

使用默认端口以外的端口 3333:

{
  "mcpServers": {
    "drawio": {
      "command": "node",
      "args": ["/path/to/build/index.js", "--port=4444"]
    }
  }
}

或者设置环境变量：

{
  "mcpServers": {
    "drawio": {
      "command": "node",
      "args": ["/path/to/build/index.js"],
      "env": {
        "DRAWIO_MCP_PORT": "4444"
      }
    }
  }
}

4.开始使用

  1. 确保Chrome扩展程序已安装并连接（请参阅扩展程序README）
  2. 打开 app.diagrams.net 在Chrome浏览器中
  3. 启动MCP客户端——服务器将自动启动
  4. 让你的人工智能创建图表！

发展

观看模式

npm run dev

重新推荐文件更改。

与MCP检查员一起检查

npm run inspect

打开MCP检查器，以交互方式调试工具调用。

直接运行

npm start

端口配置

WebSocket端口按以下顺序解析：

  1. CLI参数: --port=XXXX
  2. 环境变量: DRAWIO_MCP_PORT
  3. 默认: 3333

重要提示： Chrome扩展程序必须配置为使用相同的端口（默认值：3333）。

项目结构

src/
├── index.ts              # Entry point — MCP server + WebSocket setup
├── config.ts             # Port configuration
├── bus.ts                # EventEmitter-based message bus
├── types.ts              # TypeScript interfaces
├── schemas.ts            # Zod input validation schemas
├── tool-builder.ts       # Generic request/reply tool factory
└── tools/
    ├── render_subgraph.ts
    ├── export_diagram.ts
    ├── modify_subgraph.ts
    └── get_diagram_state.ts

故障排除

问题 解决方案
Timeout: no reply from draw.io extension within 30s 确保Chrome扩展程序已安装、连接，并且draw.io选项卡已打开
WebSocket连接被拒绝 检查服务器和扩展之间的端口是否匹配（默认值：3333）
生成错误 运行 npm install 确保所有依赖项都已安装
MCP客户端中未显示工具 配置更改后重新启动MCP客户端

相关 MCP