使用说明

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版本。

配置

WebSocket端口

默认情况下，服务器在端口3333上监听来自浏览器扩展的WebSocket连接。您可以使用自定义此端口 --extension-port 或 -p 旗帜。

默认行为 （端口3333）：

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

自定义端口 （例如端口8080）：

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

备注：使用自定义端口时，请确保浏览器扩展配置为连接到同一端口。

HTTP传输端口

服务器可以在端口3000上公开可流式传输的HTTP MCP。使用以下命令更改此设置 --http-port 标志：

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

运输选择

默认情况下，只有stdio传输启动。限制或合并运输 --transport 标志：

--transport stdio –仅启动stdio（CLI友好）
--transport http –仅启动HTTP传输（用于远程客户端）
--transport stdio,http –启动两个传输

运行可流式传输的HTTP

当您需要通过网络（例如从远程代理运行时）访问MCP服务器时，请使用可流式HTTP传输。Draw.io浏览器扩展仍然是必需的，您必须选择加入HTTP传输。

启用HTTP启动服务器（可选地与stdio一起启动）：

npx -y ruleeng-mcp-server --transport http --http-port 3000
npx -y drawio-mcp-server --transport http --http-port 3000
# or both: npx -y drawio-mcp-server --transport stdio,http --http-port 4000

验证运行状况终结点：

curl http://localhost:3000/health
# { "status": "ok" }

将您的MCP客户端指向 /mcp 端点(http://localhost:3000/mcp 默认情况下）。CORS已为所有来源启用，因此您也可以从基于浏览器的客户端调用它。

安装

与Claude Desktop连接

安装克劳德桌面版
打开或创建配置文件：
- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
- 窗户： %APPDATA%\Claude\claude_desktop_config.json
更新它以包含此服务器：

Using npm

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

Using pnpm

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

要使用自定义扩展端口（例如8080），请添加 "--extension-port", "8080" 对于args数组：

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

重新启动克劳德桌面

与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"
			]
		}
	}
}

要使用自定义扩展端口（例如8080），请添加 "--extension-port", "8080" 对于args数组：

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

联系Zed

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

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": {}
    }
  }
}

要使用自定义扩展端口（例如8080），请添加 "--extension-port", "8080" 对于args数组：

{
  /// 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","--extension-port","8080"],
      /// The environment variables to set for the executable
      "env": {}
    }
  }
}

与Codex建立联系

编辑通常位于~/.codex/config.toml中的配置

Using npm

[mcp_servers.drawio]
command = "npx"
args = [
    "-y",
    "drawio-mcp-server"
]

Using pnpm

[mcp_servers.drawio]
command = "pnpm"
args = [
    "dlx",
    "drawio-mcp-server"
]

要使用自定义扩展端口（例如8080），请添加 "--extension-port", "8080" 对于args数组：

Using npm

[mcp_servers.drawio]
command = "npx"
args = [
    "-y",
    "drawio-mcp-server",
    "--extension-port",
    "8080"
]

要使用Streamable HTTP传输连接到本地运行的MCP：

[mcp_servers.drawio]
url = "http://localhost:3000/mcp"

浏览器扩展设置

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

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

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

重要：如果将MCP服务器配置为使用自定义端口（不是3333），则必须将浏览器扩展配置为使用相同的端口。有关端口配置说明，请参阅扩展文档。

赞助

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

闪电发票：

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：可选替换样式字符串

绘图工具MCP服务器

使用说明

Draw.io MCP服务器

介绍

需求

核心组件

MCP生态系统

可选开发

配置

WebSocket端口

HTTP传输端口

运输选择

运行可流式传输的HTTP

安装

与Claude Desktop连接

与Otem连接

联系Zed

与Codex建立联系

浏览器扩展设置

赞助

特性

图表检查工具

图表修改工具

相关资源

明星历史

使用说明

Draw.io MCP服务器

介绍

需求

核心组件

MCP生态系统

可选开发

配置

WebSocket端口

HTTP传输端口

运输选择

运行可流式传输的HTTP

安装

与Claude Desktop连接

与Otem连接

联系Zed

与Codex建立联系

浏览器扩展设置

赞助

特性

图表检查工具

图表修改工具

相关资源

明星历史

相关 MCP

小红书MCP服务

Figma MCP集成工具

MCP 协议测试服务器

Flomo笔记服务

Unity编辑器AI集成插件

科学研究的开源MCP服务器