# @drawio/mcp 中文文档

规范地址：https://npmcn.com/package/%40drawio/mcp/

版本：1\.12\.0
npm 元数据更新时间：2026-11-10T13:48:02.127Z
中文译文更新时间：2026-11-12T19:24:37.369Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40drawio/mcp
原文对照：https://npmcn.com/package/%40drawio/mcp/?lang=original
项目主页：https://github.com/jgraph/drawio-mcp#readme
源码仓库：https://github.com/jgraph/drawio-mcp

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：868 kB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=18\.0\.0
- 运行依赖：2 个
- 首次发布：2026-02-03T14:52:52.542Z
- 最新版本发布：2026-11-10T13:48:01.669Z
- 近 30 天下载量：166240（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 43 个）

## 中文简介

LLMS 的官方 Draw.io MCP 服务器 - 在 Draw.io 编辑器中打开图表

## 安装

```sh
npm install @drawio/mcp
```

也可以使用：`pnpm add @drawio/mcp`、`yarn add @drawio/mcp`、`bun add @drawio/mcp`

## README

# Draw.io MCP 工具服务器

官员 [画.io](https://www.draw.io/) 直接在 Draw.io 编辑器中打开图表的 MCP 服务器 。 支持有灯盒和暗模式选项的XML,CSV和Mermaid.js等格式.

此软件包是 [绘图- mcp](https://github.com/jgraph/drawio-mcp) 数据库,其中还包括:

-   **[MCP App 服务器](https://github.com/jgraph/drawio-mcp/tree/main/mcp-app-server)** —— AI聊天界面中的Renders图入行. 主办地点 `https://mcp.draw.io/mcp` 不需要安装.
-   **[克劳德代码插件](https://github.com/jgraph/drawio-mcp/tree/main/plugins/claude-code)** — Claude 代码插件生成本地 `.drawio` 带有可选 PNG/SVG/PDF 导出的文件.
-   **[项目指令](https://github.com/jgraph/drawio-mcp/tree/main/project-instructions)** ——采用克洛德项目指示的零安装方式.

## 特征

-   **打开 XML 图表**: 装入本地绘图.io/mxGraph XML格式
-   **导入 CSV 数据**: 将表格数据转换为图表(org charts等)
-   **蓝德美人鱼.js**: 将美人鱼语法转换为可编辑图.io图
-   **自定义显示**: 灯盒模式, 暗模式, 以及更多

## 安装

### 使用 npx( 建议)

```bash
npx @drawio/mcp
```

### 全球安装

```bash
npm install -g @drawio/mcp
drawio-mcp
```

### 从源

```bash
git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp/mcp-tool-server
npm install
npm start
```

## 配置

### 克劳德桌面

添加到您的 Claude 桌面配置文件 :

**马科斯**数字 : `~/Library/Application Support/Claude/claude_desktop_config.json` **窗口**数字 : `%APPDATA%\Claude\claude_desktop_config.json`

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@drawio/mcp"]
    }
  }
}
```

### 克劳德代码

```bash
claude mcp add drawio -- npx -y @drawio/mcp
```

或手动进入 `.claude/settings.json`数字 :

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}
```

### VS 代码 (GitHub 副驾驶)

添加为 `.vscode/mcp.json` 在工作空间(或运行) **MCP: 打开用户配置** 全球配置 :

```json
{
  "servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}
```

然后单击 **开始** 在服务器条目上方, **信托** 当服务器被提示时, 切换为 **代理模式**,并确保在 **配置工具** (qq)在聊天输入中.

其他使用stdio(Windsurf等)的客户端使用与上作相同的配置形状.

> **提示 :** VS代码1.109,后来也支持 [MCP 应用程序](https://modelcontextprotocol.io/docs/extensions/apps) 扩展,所以主机 [MCP App 服务器](https://npmcn.com/package/%40drawio/mcp-app-server) 时间 `https://mcp.draw.io/mcp` 也在“副驾驶聊天”中工作,渲染图表 _内入_ 而不是打开浏览器标签。 要使用它,就替换 `command` 财务报告和审定财务报表 `args` 上方为 `"type": "http"` 财务报告和审定财务报表 `"url": "https://mcp.draw.io/mcp"`。如果您喜欢在完整的 Draw.io 编辑器中打开图表,则使用此 stdio 服务器.

### 光标

[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en/install-mcp?name=drawio&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBkcmF3aW8vbWNwIl19)

单击上面的按钮进行一击安装,或手动添加服务器到 `~/.cursor/mcp.json` (全球)或 `.cursor/mcp.json` 在您的项目中 :

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}
```

提示时启用服务器( 或下方) **光标设置 MCP**),然后请 Agent 创建一个图表——它在您浏览器中的平面.io编辑器中打开.

> **提示 :** 光标还支持 [MCP 应用程序](https://modelcontextprotocol.io/docs/extensions/apps) 扩展,所以主机 [MCP App 服务器](https://npmcn.com/package/%40drawio/mcp-app-server) 时间 `https://mcp.draw.io/mcp` 也在光标中工作, 渲染图 _内入_ 而不是打开浏览器标签。 如果您喜欢在全画图.io编辑器中打开图表, 请使用此 stdio 服务器 .

### 打开代码

将服务器添加到 `mcp` 键 `opencode.json` 在项目根中(或 `~/.config/opencode/opencode.json` 每个项目:

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "@drawio/mcp"],
      "enabled": true
    }
  }
}
```

工具在下次启动时可用; 请代理创建一个图表并在浏览器中的 Draw.io 编辑器中打开 .

> **提示 :** OpenCode 也装入该 `drawio` _技能_ (内部) `.drawio` 文件, PNG/ SVG/ PDF 导出) 没有任何插件包件 —— 见 [插件读取ME](https://npmcn.com/package/%40drawio/plugins/README.md#opencode-no-plugin-needed)。 。 。 .

### 其他MCP客户端

配置您的 MCP 客户端以通过 stdio 运行服务器 :

```bash
npx @drawio/mcp
```

### 自行托管的平地画.io

要在自动托管的 Draw.io 实例中打开图表,请设置 `DRAWIO_BASE_URL` 实例 URL 的环境变量( 默认 ): `https://app.diagrams.net/`:

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"],
      "env": {
        "DRAWIO_BASE_URL": "https://drawio.example.com/"
      }
    }
  }
}
```

### 在不打开浏览器的情况下返回链接

每个 `open_drawio_*` 调用打开默认浏览器中的图表并返回其 URL。 设定 `DRAWIO_BROWSER` 改为 `off` 只获取 URL。 用于无头代理、 CI 和 SSH 会话, 没有浏览器, 或会在错误的机器上打开 :

```json
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"],
      "env": {
        "DRAWIO_BROWSER": "off"
      }
    }
  }
}
```

## 工具

### `open_drawio_xml`

以 XML 内容打开 Draw.io 编辑器.

| 参数 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `content` | 字符串 | 对 | Draw.io XML 内容 |
| `lightbox` | 布尔 | 没有 | 仅读视图模式( 默认: 假) |
| `dark` | 字符串 | 没有 | "自动","真"或"假"(默认:"自动") |
| `postLayout` | 字符串 | 没有 | `"elk"` 打开前重铺出图表( ELK 分层流): 顶点被放置, 边缘被路由 |
| `direction` | 字符串 | 没有 | 流动方向 `postLayout`数字 : `"vertical"` (违约)或 `"horizontal"` |
| `routing` | 字符串 | 没有 | `"libavoid"` 在打开前将连接器绕起形状(隐形-避免正交路由),使位置保持不变 |

每个图首先被修复: 周围的文本被丢掉(一个被泄露的工具调用标记,一个代码栅栏), `<` 和流浪汉 `&` 在属性值中被逃脱,并重出原主的一层被写入——在测试中打破了3%的 LLM 所写图表的滑子。 模式错误地写入了XML字符串的布局或路由选项仍然被应用. 然后,每个图在经过的过程中都会正常化,图.io编辑器如何维护自己的模型:边缘会在其终端最近的共同祖先上存档(这样你就可以继续写) `parent="1"` 在每一个边缘和容器上仍能正确放出),没有几何图形的边缘会得到一个(它不会造成其他情况),一个容器会将一个孩子剪接起来,以便适合它。 同样的修理平面。 io 桌面 CLI 应用 `--normalize`。 。 。 .

`postLayout` 财务报告和审定财务报表 `routing` 是替代品: ELK 设置顶点 _财务报告和审定财务报表_ 路由边缘, libavoid 只修正您自己布局的连接符 。 两者在图被压缩到URL之前运行在服务器上;图本身仍然从未离开你的机器(它运行在URL碎片中). ELK 传出 `drawio-elk` 从 Draw.io CDN 从第一次使用中捆绑,并缓存到每个用户,因此更新后的第一版式支付一次性下载.

### `open_drawio_csv`

打开将 CSV 数据转换成图表的 Draw.io 编辑器.

| 参数 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `content` | 字符串 | 对 | CSV 内容 |
| `lightbox` | 布尔 | 没有 | 仅读视图模式( 默认: 假) |
| `dark` | 字符串 | 没有 | "自动","真"或"假"(默认:"自动") |

### `open_drawio_mermaid`

用美人鱼.js图打开平面编辑器.

| 参数 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `content` | 字符串 | 对 | 美人鱼.js 语法 |
| `lightbox` | 布尔 | 没有 | 仅读视图模式( 默认: 假) |
| `dark` | 字符串 | 没有 | "自动","真"或"假"(默认:"自动") |
| `postLayout` | 字符串 | 没有 | `"elk"` 切换人鱼 **流程图** 到分层的ELK布局(方向仍然遵循流程图代码). 忽略其他图表类型 |

`postLayout` 这里没有成本: 它选择了美人鱼源的布局( a) `config: { layout: elk }` frontmatter block)和 draw.io 在转换图时应用它——与自己写frontmatter 的结果相同.

### `get_drawio_reference`

返回完整的图表生成引用 : [`shared/mermaid-reference.md`](https://npmcn.com/package/%40drawio/shared/mermaid-reference.md),该模型在它的第一个美人鱼图之前读取,或 [`shared/xml-reference.md`](https://npmcn.com/package/%40drawio/shared/xml-reference.md),哪个 `open_drawio_xml` 仅需要分层、标记、元数据、表格、跨功能网格和暗模式颜色——其描述已带有被压缩的 [`shared/xml-essentials.md`](https://npmcn.com/package/%40drawio/shared/xml-essentials.md)。 。 。 .

| 参数 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `format` | 字符串 | 对 | `"xml"` 或者说 `"mermaid"` |

### `search_shapes`

搜索 Draw.io 形状库(~10,000个形状: AWS, Azure, GCP, Cisco, Kubernetes, P&ID, electric, BPMN,...) 并返回与随时使用样式字符串相匹配的形状 `open_drawio_xml`. 当内建的库没有很好的匹配时,结果会从 Draw.io 图标服务(品牌标志和通用概念图标,例如. `react`, (中文(简体) ), `slack`, (中文(简体) ), `shopping cart`) (中文(简体) ). 只用于需要行业特有,品牌,或相图图标的图表——标准流程图,UML,ERD,和Org图表不需要.

| 参数 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `query` | 字符串 | 对 | 以空格分隔的关键字(例如:. `aws lambda`, (中文(简体) ), `cisco router`(中文(简体) ) |
| `limit` | 编号 | 没有 | 最大结果( 默认: 10, 最大: 50) |

### `list_pages` 编号 : `get_page` 编号 : `set_page`

访问本地多页的页面级别 `.drawio` 文件,因此可以检查或编辑一页,而不装入整个文件。 页面通过零基索引、确切名称或id进行处理(按 `list_pages`) (中文(简体) ). 被压缩的页面被解压缩/再压缩透明. 路径必须结束于 `.drawio` 或者说 `.xml`。 。 。 .

| 工具 | 参数 | 结果 |
| --- | --- | --- |
| `list_pages` | `path` | `[{index, id, name, approxSizeBytes}]` 每页 |
| `get_page` | `path`, (中文(简体) ), `page` | 这页 `mxGraphModel` XML 数据 |
| `set_page` | `path`, (中文(简体) ), `page`, (中文(简体) ), `content` | 替换该页面的内容( 单 `<mxGraphModel>` 元素); 所有其他页面不受影响 |

#### Google 驱动器、 OneDrive、 Dropbox、 GitHub 或 GitLab 中的图表

这些工具只对本地文件有效 。 服务器无法读取您的云存储, 而一个 draw.io 链接总是打开一个新的, 无标题的图表, 从未打开您保存的文件 。 改变保存文件的链接会让发送链接的人重写您的图表 。 要让代理在云中更改一个图表,请通过打开的 Draw.io 标签:

1.  在图.io中,选择 **额外项目 > 编辑图表** (单位:千美元)**插入 > 高级 > 编辑图表** 在简单和最小主题中。 复制当前页面的 XML 并将其交给代理 .
2.  请代理以已更改的 XML 回复 .
3.  打开 **编辑图表** ,再次将 XML 替换为代理服务器,并单击 **应用**. draw.io 将更改保存到同一文件,在同一链接下,与其他编辑一样.

这一个一页都行 正在下载文件, 用 `set_page` 并再次上传它同样有效,但打开文件的 draw.io 标签可以保存在您的上传上.

## 示例提示

-   "使用 `open_drawio_mermaid` 创建显示 OAuth2 认证流程的序列图
-   "使用 `open_drawio_csv` 创建 Org 图表: CEO → CTO, CFO; CTO → 3 工程师"
-   "使用 `open_drawio_xml` 创建一个详细的 AWS 架构图, 包含 VPC, 子网, 和安全组 ”

> **提示 :** Claude Desktop可能有多种方法来创建图表. 确保它使用平分。 io MCP,明确提及工具名或添加系统指令: _"永远使用平面.io MCP工具来创建图表"_

## 如何运作

1.  MCP 服务器接收图表内容( XML, CSV, 或美人鱼)
2.  内容使用 pako 解压拉式压缩并编码为 Base64
3.  绘制.io URL , 并用其散列图生成: `#R` 用于 XML, `#create=` 用于美人鱼和 CSV,在浏览器中绘制.io 转换
4.  URL 返回到 LLM, LLM 可以向用户显示它
5.  打开 URL 负载 Draw.io 并打开可查看/编辑的图表

这个 `open_drawio_xml` 说明中包含 XML 压缩规则 [`shared/xml-essentials.md`](https://npmcn.com/package/%40drawio/shared/xml-essentials.md) (~1.5k个字符. 完整的 XML 生成参考文献( 对接路由、 容器、 地层、 标记、 元数据、 暗模式等) [`shared/xml-reference.md`](https://npmcn.com/package/%40drawio/shared/xml-reference.md),用于所有图的单一真理来源。io MCP提示,和美人鱼参考 [`shared/mermaid-reference.md`](https://npmcn.com/package/%40drawio/shared/mermaid-reference.md) 以 `get_drawio_reference`。这让每个工具描述都简短:客户端喜欢VS代码副驾驶索引工具描述,而一个包含整个参考文献的描述对他们来说太长了. A 类 `prepack` 脚本将三个文件捆绑到 npm 软件包中, 使其在之后工作 `npm install`。 。 。 .

## 相关资源

-   [画.io](https://www.draw.io/) - 免费在线图表编辑器
-   [draw.io 桌面](https://github.com/jgraph/drawio-desktop) - 桌面应用程序
-   [gitHub 上的绘图- mcp](https://github.com/jgraph/drawio-mcp) - 拥有全部四种办法的完整储存库
-   [MCP 规格](https://modelcontextprotocol.io/)

## 常见问题

### @drawio/mcp 是什么？

LLMS 的官方 Draw\.io MCP 服务器 - 在 Draw\.io 编辑器中打开图表

### 如何安装 @drawio/mcp？

在项目目录运行 npm install @drawio/mcp，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 drawio-mcp，可以用 npx drawio-mcp 直接运行。

### @drawio/mcp 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/drawio\_\_mcp 是否存在。

### @drawio/mcp 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @drawio/mcp 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @drawio/mcp 可以商用吗？

@drawio/mcp 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @drawio/mcp 的下载量有多少？

根据 npm 官方下载统计，@drawio/mcp 在 2026/10/13 – 2026/11/11 这 30 天内被下载 166,240 次，日均约 5,541 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @drawio/mcp 还在维护吗？

最新版本 1\.12\.0 发布于 2026/11/10（3 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 43 个；首次发布于 2026/02/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。