Ruleeng MCP Server

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传输。

1. 启用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

1. 验证运行状况终结点：

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

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

安装

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

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

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

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

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

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

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

要使用自定义扩展端口（例如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图，您需要安装专用的浏览器扩展。

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

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

相关资源

故障排除

提示示例

贡献

建筑

发展

明星历史