Draw.io MCP 工具服务器

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

此软件包是 绘图- mcp 数据库,其中还包括:

• MCP App 服务器 —— AI聊天界面中的Renders图入行. 主办地点 https://mcp.draw.io/mcp 不需要安装.
• 克劳德代码插件 — Claude 代码插件生成本地 .drawio 带有可选 PNG/SVG/PDF 导出的文件.
• 项目指令 ——采用克洛德项目指示的零安装方式.

特征

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

安装

使用 npx( 建议)

npx @drawio/mcp

全球安装

npm install -g @drawio/mcp
drawio-mcp

从源

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

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

克劳德代码

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

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

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

VS 代码 (GitHub 副驾驶)

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

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

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

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

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

光标

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

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

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

提示 : 光标还支持 MCP 应用程序 扩展,所以主机 MCP App 服务器 时间 https://mcp.draw.io/mcp 也在光标中工作, 渲染图 内入 而不是打开浏览器标签。 如果您喜欢在全画图.io编辑器中打开图表, 请使用此 stdio 服务器 .

打开代码

将服务器添加到 mcp 键 opencode.json 在项目根中(或 ~/.config/opencode/opencode.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。 。 。 .

其他MCP客户端

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

npx @drawio/mcp

自行托管的平地画.io

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

{
  "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 会话, 没有浏览器, 或会在错误的机器上打开 :

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

工具

open_drawio_xml

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

每个图首先被修复: 周围的文本被丢掉(一个被泄露的工具调用标记,一个代码栅栏), < 和流浪汉 & 在属性值中被逃脱,并重出原主的一层被写入——在测试中打破了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 编辑器.

open_drawio_mermaid

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

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

get_drawio_reference

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

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图表不需要.

list_pages 编号 : get_page 编号 : set_page

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

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

相关资源

• 画.io - 免费在线图表编辑器
• draw.io 桌面 - 桌面应用程序
• gitHub 上的绘图- mcp - 拥有全部四种办法的完整储存库
• MCP 规格