drawio-mcp-服务器

Name: drawio-mcp-服务器
Author: lgazo

作者：lgazo341 星标更新：2025-11-12

安装使用来源：spider==github.com

项目介绍

Draw.io MCP 服务器

让我们使用最广泛使用的绘图工具 Draw.io (Diagrams.net) 来进行一些图表绘制。

简介

Draw.io MCP 服务器是一个模型上下文协议 (MCP) 的实现，它为人工智能代理系统带来了强大的绘图能力。这种集成使以下功能成为可能：

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

作为符合 MCP 标准的工具，它遵循工具集成的标准协议，使其兼容任何 MCP 客户端。此实现特别适用于需要创建 AI 系统的情况，例如：

生成架构图
可视化复杂关系
注释技术文档
程序化地创建流程图和过程图

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

要求

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

核心组件

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

MCP 生态系统

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

开发可选

pnpm - 推荐的包管理器
Chrome 开发者工具 - 使用 --inspect 标志进行调试时

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

安装

连接到 Claude Desktop

安装 Claude Desktop
打开或创建配置文件：
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
更新以包括此服务器：

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

</details> <details> <summary>使用 <code>pnpm</code></summary>

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

</details>

重启 Claude Desktop

连接到 oterm

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

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

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

</details> <details> <summary>使用 <code>pnpm</code></summary>

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

</details>

连接到 Zed

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

{
  /// 您的 MCP 服务器名称
  "drawio": {
    "command": {
      /// 可执行文件的路径
      "path": "npx",
      /// 传递给可执行文件的参数
      "args": ["-y","drawio-mcp-server"],
      /// 为可执行文件设置的环境变量
      "env": {}
    }
  }
}

</details> <details> <summary>使用 <code>pnpm</code></summary>

{
  /// 您的 MCP 服务器名称
  "drawio": {
    "command": {
      /// 可执行文件的路径
      "path": "pnpm",
      /// 传递给可执行文件的参数
      "args": ["dlx","drawio-mcp-server"],
      /// 为可执行文件设置的环境变量
      "env": {}
    }
  }
}

</details>

浏览器扩展设置

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

在浏览器中打开 Draw.io
从网络商店安装 Draw.io MCP 浏览器扩展或使用其他方法

<p> <a href="https://chrome.google.com/webstore/detail/drawio-mcp-extension/okdbbjbbccdhhfaefmcmekalmmdjjide"> <picture> <source srcset="https://i.imgur.com/XBIE9pk.png" media="(prefers-color-scheme: dark)" /> <img height="58" src="https://i.imgur.com/oGxig2F.png" alt="Chrome Web Store" /></picture ></a> <a href="https://addons.mozilla.org/en-US/firefox/addon/drawio-mcp-extension/"> <picture> <source srcset="https://i.imgur.com/ZluoP7T.png" media="(prefers-color-scheme: dark)" /> <img height="58" src="https://i.imgur.com/4PobQqE.png" alt="Firefox add-ons" /></picture ></a> </p> 3. 确保已连接，扩展图标应显示绿色信号覆盖 <img alt="扩展已连接" src="https://gips3.baidu.com/it/u=3369408072,809193503&fm=3081&app=3081&f=PNG?w=32&h=32" />

赞助

如果您喜欢这个项目或发现它有用，请考虑支持其持续开发。

闪电发票：

闪电发票

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

星星历史

drawio-mcp-服务器

项目介绍

Draw.io MCP 服务器

简介

要求

核心组件

MCP 生态系统

开发可选

安装

连接到 Claude Desktop

连接到 oterm

连接到 Zed

浏览器扩展设置

赞助

特性

图表检查工具

图表修改工具

相关资源

星星历史