Drawio MCP Server Custom

Draw.io MCP服务器

让我们用最广泛使用的绘图工具Draw.io（Diagrams.net）做一些Vibe绘图。


引言

Draw.io MCP服务器是一个 模型上下文协议（MCP） 为AI代理系统带来强大绘图功能的实现。这种集成实现了：

• 无缝集成Draw.io：将MCP驱动的应用程序与Draw.io丰富的绘图功能连接起来
• 程序化图表控制：通过MCP命令创建、修改和管理图表内容
• 智能图分析：检索有关图表及其组件的详细信息，以供AI代理处理
• 代理系统开发：构建复杂的人工智能工作流程，结合可视化建模和图表自动化

作为符合MCP的工具，它遵循工具集成的标准协议，使其与任何MCP客户端兼容。这种实现对于创建需要以下功能的AI系统特别有价值：

• 生成架构图
• 可视化复杂的关系
• 注释技术文档
• 以编程方式创建流程图和流程图

该工具支持双向通信，允许控制Draw.io实例和提取图表信息，以便MCP生态系统中的AI代理进行进一步处理。

需求

要使用Draw.io MCP服务器，您需要：

核心组件

• Node.js （v20或更高版本）-MCP服务器的运行时环境
• Draw.io MCP浏览器扩展 -启用Draw.io和MCP服务器之间的通信

MCP生态系统

• MCP客户端 （例如。， MCP检查员)-用于测试和调试集成
• LLM与工具支持 -任何能够处理MCP工具调用的语言模型（例如GPT-4、Claude 3等）

可选开发

• pnpm -首选包管理器
• Chrome 开发者工具 -用于使用时的调试 --inspect 旗帜

注意：运行MCP服务器的系统必须可以访问Draw.io桌面应用程序或web版本。

安装

与Claude Desktop连接

1. 安装 克劳德桌面

1. 打开或创建配置文件：

- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json

1. 更新它以包含此服务器：

Using npm

{
   "mcpServers":{
      "drawio":{
         "command":"npx",
         "args":[
            "-y",
            "drawio-mcp-server"
         ]
      }
   }
}

Using pnpm

{
   "mcpServers":{
      "drawio":{
         "command":"pnpm",
         "args":[
            "dlx",
            "drawio-mcp-server"
         ]
      }
   }
}

1. 重新启动克劳德桌面

与Otem连接

如果您喜欢终端并且计划连接到自己的Ollama实例，这是一个替代的MCP客户端。

配置通常位于：~/.local/share/oterm/config.json

Using npm

{
	"mcpServers": {
		"drawio": {
			"command": "npx",
			"args": [
			  "-y",
        "drawio-mcp-server"
			]
		}
	}
}

Using pnpm

{
	"mcpServers": {
		"drawio": {
			"command": "pnpm",
			"args": [
			  "dlx",
        "drawio-mcp-server"
			]
		}
	}
}

联系Zed

1. 打开Zed Preview应用程序。
2. 单击助手(✨) 右下角的图标。
3. 单击“助手”右上角面板中的“设置”。
4. 在上下文服务器部分，单击+添加上下文服务器。
5. 使用以下配置：

Using npm

{
  /// The name of your MCP server
  "drawio": {
    "command": {
      /// The path to the executable
      "path": "npx",
      /// The arguments to pass to the executable
      "args": ["-y","drawio-mcp-server"],
      /// The environment variables to set for the executable
      "env": {}
    }
  }
}

Using pnpm

{
  /// The name of your MCP server
  "drawio": {
    "command": {
      /// The path to the executable
      "path": "pnpm",
      /// The arguments to pass to the executable
      "args": ["dlx","drawio-mcp-server"],
      /// The environment variables to set for the executable
      "env": {}
    }
  }
}

浏览器扩展设置

为了控制Draw.io图，您需要安装专用的浏览器扩展。

1. 打开 浏览器中的Draw.io
2. 从网上商店安装Draw.io MCP浏览器扩展程序，或 使用其他方式

1. Ensure it is connected, the Extension icon should indicate green signal overlay

赞助

如果你喜欢这个项目或觉得它有用，可以考虑支持它的持续发展。

闪电发票：

lightning invoice

lnbc1p5f8wvnpp5kk0qt60waplesw3sjxu7tcqwmdp6ysq570dc4ln52krd3u5nzq6sdp82pshjgr5dusyymrfde4jq4mpd3kx2apq24ek2uscqzpuxqr8pqsp5gvr72xcs883qt4hea6v3u7803stcwfnk5c9w0ykqr9a40qqwnpys9qxpqysgqfzlhm0cz5vqy7wqt7rwpmkacukrk59k89ltd5n642wzru2jn88tyd78gr4y3j6u64k2u4sd4qgavlsnccl986velrg3x0pe95sx7p4sqtatttp

闪电地址：

ladislav@blink.sv

特性

Draw.io MCP服务器为程序化图表交互提供了以下工具：

图表检查工具

• get-selected-cell

检索Draw.io中当前选定的单元格及其所有属性 *退货*：包含单元格属性（ID、几何图形、样式、值等）的JSON对象

• get-shape-categories

从图表库中检索可用的形状类别 *退货*：带有ID和名称的类别对象数组

• get-shapes-in-category

从图表库中检索指定类别中的所有形状 *参数*:

- category_id：从中检索形状的类别标识符 *退货*：形状对象及其属性和样式的数组

• get-shape-by-name

从所有可用形状中按名称检索特定形状 *参数*:

- shape_name：要检索的形状的名称 *退货*：形状对象，包括其类别和样式信息

• list-paged-model

检索当前Draw.io图中所有单元格（顶点和边）的分页视图。此工具仅提供对包含基本字段的完整模型数据的访问，并经过清理以消除循环依赖关系和过多数据。它允许基于多个条件和属性布尔逻辑进行过滤。可用于对图表结构进行程序化检查，而不会产生压倒性的响应大小。

图表修改工具

• add-rectangle

在活动的Draw.io页面上创建具有可自定义属性的新矩形形状：

- 职位(x, y 坐标） - 尺寸(width, height) - 文本内容 - 视觉风格（使用Draw.io风格语法填充颜色、笔划等）

• add-edge

在两个单元格（顶点）之间创建连接 *参数*:

- source_id：源单元格的ID - target_id：目标单元格的ID - text：边缘的可选文本标签 - style：边缘的可选样式属性

• delete-cell-by-id

从图表中删除指定的单元格 *参数*:

- cell_id：要删除的单元格的ID

• add-cell-of-shape

从图表库中添加特定形状类型的新单元格 *参数*:

- shape_name：要创建的形状的名称 - x, y：位置坐标（可选） - width, height：尺寸（可选） - text：可选文本内容 - style：可选的其他样式属性

• set-cell-shape

将库形状的样式应用于现有单元格 *参数*:

- cell_id：外观应更改的单元格的ID - shape_name：应应用其样式的库形状的名称

• set-cell-data

存储或更新单元格上的自定义属性 *参数*:

- cell_id：要更新的单元格的ID - key：要设置的属性名称 - value：属性值（内部存储为字符串）

• edit-cell

按ID就地更新现有顶点/形状单元 *参数*:

- cell_id：属性应更改的单元格的ID（必填） - text, x, y, width, height, style：单元格上要更新的可选字段；省略的属性保持原样

• edit-edge

按ID更新单元格之间的现有边缘连接 *参数*:

- cell_id：要更新的边缘单元格的ID（必需） - text：可选边缘标签文本 - source_id, target_id：新源/目标单元格的可选ID - style：可选替换样式字符串

通信协议

Draw.io MCP服务器使用混合通信方法：

• 服务器到浏览器扩展：服务器通过发送事件（SSE） GET /events 端点

- 提供从服务器到浏览器的实时事件流 - 服务器发起的更新的轻量级单向通信

• 浏览器扩展到服务器：通过HTTP POST POST /message 端点

- 处理客户端发起的请求和响应 - 用于结构化数据交换的JSON有效载荷

• MCP客户端到服务器：标准I/O（stdio）传输

- 使用MCP协议的stdio传输进行工具调用 - 确保与所有符合MCP的客户端兼容

这种架构提供了高效的双向通信，同时保持了协议的简单性和广泛的兼容性。

相关资源

故障排除

提示示例

贡献

建筑

发展

明星历史