图表生成服务

Draw.io MCP服务器

A. 模型上下文协议（MCP） 用于程序化图表生成的服务器 Draw.io （图表.net）。此服务器直接生成Draw.io XML，无需浏览器扩展或Draw.io实例。

演示视频

致谢

如果没有以下存储库及其作者，这个项目就不会以这种方式存在。非常感谢。

• 原始drawio mcp服务器 通过 拉迪斯拉夫（偶氮）: lgazo/drawio mcp服务器
• Azure图标源 (dwarfered): drawio的侏儒/蔚蓝建筑图标
• VS代码绘图扩展 通过 赫迪特: hediet/vcode绘图

特性

• 700多个Azure架构图标 --微软官方图标，内嵌SVG数据，分为约20类（计算、网络、存储、数据库、AI+ML、安全等）
• 基本形状 --矩形、椭圆、菱形、平行四边形和其他流程图图元
• 模糊搜索 --在整个图标库中按部分名称查找形状
• 批量操作 --在一次调用中创建和更新多个单元格，以获得更好的性能
• 层管理 --跨层创建、列出和组织单元格
• 风格预设 --内置Azure、流程图和常规颜色预设
• 多个传输 --stdio（默认）和可流式传输HTTP
• XML导出 --与Draw.io桌面和网络兼容的标准Draw.io XML格式

对于PNG/SVG/PDF转换，请使用jgraph的Draw.io skill-cli 工作流： https://github.com/jgraph/drawio-mcp/blob/main/skill-cli/README.md.

文档

• 交易模式设计： docs/transaction_mode_design.md

需求

• 德诺 v2.3或更高版本

快速开始

来源

deno run --allow-net --allow-read --allow-env src/index.ts

MCP客户端配置

配置您的MCP客户端（Claude Desktop、VS Code、Codex等）以使用服务器：

克劳德桌面版

编辑 claude_desktop_config.json:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "drawio": {
      "command": "deno",
      "args": ["run", "--allow-net", "--allow-read", "--allow-env", "/path/to/drawio-mcp-server/src/index.ts"]
    }
  }
}

VS Code

添加到您的VS代码设置或 .vscode/mcp.json:

{
  "mcpServers": {
    "drawio": {
      "command": "deno",
      "args": ["run", "--allow-net", "--allow-read", "--allow-env", "/path/to/drawio-mcp-server/src/index.ts"]
    }
  }
}

泽德

在助手设置中，添加上下文服务器：

{
  "drawio": {
    "command": "deno",
    "args": ["run", "--allow-net", "--allow-read", "--allow-env", "/path/to/drawio-mcp-server/src/index.ts"],
    "env": {}
  }
}

法典

编辑 ~/.codex/config.toml:

[mcp_servers.drawio]
command = "deno"
args = ["run", "--allow-net", "--allow-read", "--allow-env", "/path/to/drawio-mcp-server/src/index.ts"]

对于本地运行的HTTP传输：

[mcp_servers.drawio]
url = "http://localhost:8080/mcp"

奥特姆（奥利玛）

编辑 ~/.local/share/oterm/config.json:

{
  "mcpServers": {
    "drawio": {
      "command": "deno",
      "args": ["run", "--allow-net", "--allow-read", "--allow-env", "/path/to/drawio-mcp-server/src/index.ts"]
    }
  }
}

配置

运输选择

这 --transport 标志控制要启动的传输。默认值为 stdio.

环境变量

小贴士：您可以创建 .env 文件来自 .env.example 在本地配置环境变量：

复制

cp .env.example .env
# Edit .env and uncomment/set SAVE_DIAGRAMS=true or other variables

服务器自动加载 .env 启动时的文件。这 .env 文件被gitignored，不会被提交到存储库。

开发模式——自动保存图表

⚠️ 警告：仅适用于开发模式，不适用于生产环境

对于本地调试和开发，您可以启用将图表XML自动保存到本地 diagrams/ 文件夹。这对于在不手动复制XML输出的情况下检查生成的图表非常有用。

要启用：

export SAVE_DIAGRAMS=true
deno task start

或

SAVE_DIAGRAMS=true deno task start

启用时的行为：

• 每一个电话 export-diagram 或 finish-diagram 自动将XML保存到 ./diagrams/<timestamp>_<tool-name>.drawio
• 时间戳格式： YYYYMMDD_HHMMSS （例如。， 20260219_143052_export-diagram.drawio)
• 这 diagrams/ 如果文件夹不存在，则会自动创建
• 文件保存过程中的错误会被记录下来，但不会使工具操作失败

要禁用（默认）：

只需取消设置环境变量或将其设置为除以下值之外的任何值 true 或 1:

unset SAVE_DIAGRAMS

或

export SAVE_DIAGRAMS=false

安全说明：此功能是 默认情况下禁用 并且应该 从未在生产中启用 或集装箱化部署。它仅用于本地开发和调试。

HTTP传输

HTTP传输在以下位置公开了一个可流式传输的HTTP端点 /mcp （默认端口8080）。

deno task start:http
# or with a custom port:
deno run --allow-net --allow-read --allow-env src/index.ts --transport http --http-port 4000

HTTP的MCP客户端配置：

{
  "mcpServers": {
    "drawio": {
      "command": "deno",
      "args": [
        "run",
        "--allow-net",
        "--allow-read",
        "--allow-env",
        "/path/to/drawio-mcp-server/src/index.ts",
        "--transport",
        "http",
        "--http-port",
        "4000"
      ]
    }
  }
}

健康检查： curl http://localhost:8080/health

码头工人

Docker镜像使用 deno compile 生成一个自包含的本机二进制文件，然后在最小值上运行它 无发行版 基本映像（约20MB），没有shell、没有包管理器和非root用户。

从Docker Hub中提取

预构建图像可在 Docker Hub这是最快的入门方法，不需要克隆或构建。

1.拉取最新图像：

docker pull simonkurtzmsft/drawio-mcp-server:latest

2.启动容器：

docker run -d --name drawio-mcp-server -p 8080:8080 simonkurtzmsft/drawio-mcp-server:latest

这将在后台启动服务器，暴露端口8080上的HTTP传输。

3.验证服务器是否正在运行：

curl http://localhost:8080/health

你应该收到一个 OK 响应，确认服务器健康并准备接受连接。

4.将MCP客户端指向正在运行的容器。 例如，在VS Code中(.vscode/mcp.json):

{
  "mcpServers": {
    "drawio": {
      "url": "http://localhost:8080/mcp"
    }
  }
}

或者在克劳德桌面(claude_desktop_config.json):

{
  "mcpServers": {
    "drawio": {
      "url": "http://localhost:8080/mcp"
    }
  }
}

5.停止并移除容器：

docker stop drawio-mcp-server
docker rm drawio-mcp-server

在当地建设

要从源代码构建镜像，而不是从Docker Hub拉取镜像：

# Build
docker build -t drawio-mcp-server .

# Run (exposes HTTP on port 8080)
docker run -d --name drawio-mcp-server -p 8080:8080 drawio-mcp-server

Docker Compose

cp .env.example .env   # Configure REGISTRY and IMAGE_VERSION
docker compose up -d

这 .env 文件支持：

• REGISTRY --Docker注册表URL（例如。， docker.io/myusername)
• IMAGE_VERSION --图像标签的语义版本（例如。， 1.0.0)

备注：无发行版映像没有shell，因此容器内健康检查（wget、curl）不可用。使用外部健康检查（例如Kubernetes活性探测、负载均衡器健康检查）来监控 /health 终点。

工具

性能提示：所有单元格操作工具都接受数组——在一次调用中传递所有项，而不是重复调用工具。

无国籍合同：图表工具每次调用都是无状态的。通过完整的先前 diagram_xml 将每个图表相关的工具调用，并结转返回的 diagram_xml 从对下一个呼叫的响应中。

形状发现

图表修改

图表检查

层管理

页面管理

集团/集装箱管理

添加单元格示例

使用 add-cells 随着 temp_id 在单个调用中创建顶点和边的引用：

{
  "cells": [
    {
      "type": "vertex",
      "temp_id": "web",
      "x": 100,
      "y": 100,
      "width": 60,
      "height": 60,
      "text": "Web",
      "style": "aspect=fixed;html=1;image;image=img/lib/azure2/compute/Container_Instances.svg;"
    },
    {
      "type": "vertex",
      "temp_id": "api",
      "x": 220,
      "y": 100,
      "width": 60,
      "height": 60,
      "text": "API",
      "style": "aspect=fixed;html=1;image;image=img/lib/azure2/compute/Container_Instances.svg;"
    },
    { "type": "edge", "source_id": "web", "target_id": "api", "text": "HTTPS" }
  ]
}

Azure图标库

服务器包括 700多个官方Azure架构图标 从 drawio的侏儒/蔚蓝建筑图标，按类别组织：

图标使用 嵌入式base64 SVG数据 --无外部依赖，完全脱机工作，使用正确的Azure品牌和颜色。

库在第一次访问时延迟加载（单例模式）。搜索操作在初始加载后<5ms。

发展

设置

git clone https://github.com/simonkurtz-MSFT/drawio-mcp-server.git
cd drawio-mcp-server

无需安装步骤——Deno在第一次运行时解决了依赖关系。

常用命令

deno task update 刷新 deno.json 依赖性要求和 deno.lock 通过 deno outdated --update --latest，然后更新Docker构建器镜像 DENO_VERSION Deno GitHub最新稳定版本的论点。

MCP检查员

使用 MCP检查员 要调试服务器，请执行以下操作：

deno task inspect

在做出改变之后， 重启 检查员。在改变工具定义之后， 清除 和 列表 工具再次。

相关方法

备注：下面的比较都是 截至2026年2月。项目和代理技能都在不断发展——检查他们的存储库以了解最新状态。

这个项目是 lgazo/drawio mcp服务器 Ladislav Gazo。原版作为 桥接到实时Draw.io实例 通过WebSocket浏览器扩展进行交互式实时图表控制。这把叉子是 独立XML生成器 --它在内存中构建图表并输出Draw.io XML，而不需要浏览器或Draw.io实例。 thomast1906/github副驾驶代理技能 采取了另一种方法：a 复制品代理技能 构建原始Draw.io XML并将其发送到托管服务器 mcp.draw.io 服务，由提示说明和静态Azure图标目录指导。

这三种方法都是有效的——正确的选择取决于您是需要交互式视觉反馈（原始）、无头批处理生成（此分支）还是零安装代理技能。

许可证

麻省理工学院