AI导哈

绘图工具MCP服务器

Draw.io MCP服务器是一个实现模型上下文协议（MCP）的服务，为AI代理系统提供强大的绘图功能，支持程序化创建、修改和分析图表。

  • by SujongJeong
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 SujongJeong/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. 安装 克劳德桌面

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

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

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

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浏览器扩展程序，或 使用其他方式
3. Ensure it is connected, the Extension icon should indicate green signal overlay

赞助

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

闪电发票：

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的客户端兼容

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

相关资源

故障排除

提示示例

贡献

建筑

发展

明星历史

相关 MCP