Drawio MCP

Draw.io MCP 服务器

一个模型上下文协议（MCP）服务器，提供用于使用mxgraph创建和管理draw.io图表的编程工具。通过一个简洁的API（该API与Claude Desktop及其他MCP兼容客户端兼容），生成架构图、流程图和其他可视化内容。

概述

这台服务器通过提供无状态工具来操作，使您能够逐步构建图表 .drawio.svg 文件。每个操作都指定了目标文件，这使得它与VSCode的draw.io扩展兼容，同时保持了图表状态与服务器操作之间的清晰分离。

关键特性

• 无状态API每个工具调用都指定了目标文件路径
• 与VSCode兼容生成 .drawio.svg 与VSCode draw.io扩展无缝兼容的文件
• 丰富的节点类型支持矩形、椭圆、圆柱体、云朵、角色等多种形状
• 连接管理创建带有各种样式选项的带标签连接
• 批量操作在单个MCP调用中创建、更新和链接多个节点，以高效构建图表
• 灵活定位对节点位置和尺寸的精确控制
• MCP 集成与Claude Desktop及其他MCP兼容应用程序协同工作
• TypeScript全面的类型安全性和 IntelliSense 支持

演示

Demo

安装

先决条件

• Node.js 18.0.0 或更高版本
• npm 或 yarn

配置

MCP客户端设置

将此配置添加到您的MCP客户端（例如，Claude Desktop、Cursor）：

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

文件路径

服务器支持绝对路径和相对路径：

• 绝对: /Users/username/project/diagrams/architecture.drawio.svg
• 相对的： ./diagrams/architecture.drawio.svg （当配置了当前工作目录时）

所有图表文件应使用 .drawio.svg 用于实现与VSCode的完美集成的扩展。

工具参考

批处理操作

所有主要工具均支持批量操作，使您能够在单次MCP调用中执行多个操作，从而提高效率：

• add_nodes同时创建多个节点
• edit_nodes同时更新多个节点/边
• link_nodes同时创建多个连接
• remove_nodes同时移除多个节点

这种方法减少了网络开销，并提供了原子操作——即所有更改要么全部成功，要么全部不应用。

______________________________________________________________________

新图表

创建一个新的空白图表文件。

参数：

• file_path （字符串，必填）：新图表文件的路径

示例：

{
  "file_path": "./diagrams/system-architecture.drawio.svg"
}

添加节点

在一个操作中向现有图表添加一个或多个节点。可选择在插入后运行自动布局。

参数：

• file_path （字符串，必需）：图表文件的路径
• layout （对象，可选）：自动布局配置

- algorithm （字符串，若（某条件）则为必填项） layout （已提供）：其中之一 hierarchical， circle， organic， compact-tree， radial-tree， partition， stack - options (对象，可选)：算法特定的选项 - 对于 hierarchical 仅： direction 属于 "top-down" | "left-right" （默认： "top-down")

• nodes （数组，必需）：要添加的节点对象数组，每个对象包含：

- id （字符串，必填）：节点的唯一标识符 - title (字符串，必填)：显示标签（支持换行） \n) - x （数字，必填）：X坐标位置 - y （数字，必填）：Y坐标位置 - kind （字符串，必填）：节点形状类型 - parent （字符串，可选）：父节点ID（默认：“root”） - width （数字，可选）：自定义宽度 - height （数字，可选）：自定义高度 - corner_radius （整数，可选）：以像素为单位的圆角半径（≥ 1）。仅适用于 RoundedRectangle默认值为12，当 kind 是 RoundedRectangle 并且 corner_radius 被省略了。draw.io/mxGraph 将有效视觉半径限制为最多不超过节点较短边的一半。

可用节点类型：

• Rectangle标准矩形节点
• Ellipse椭圆形节点
• Cylinder数据库/存储表示
• Cloud云服务表示（或云服务表述）
• Square具有固定宽高比的正方形
• Circle圆形节点
• Step工艺步骤形状
• ActorUML角色（火柴人）
• Text纯文本节点
• RoundedRectangle带有圆角的矩形（支持 corner_radius （以像素为单位）

示例（单节点）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "nodes": [
    {
      "id": "user-service",
      "title": "User Service\nAPI Layer",
      "kind": "Rectangle",
      "x": 100,
      "y": 150,
      "width": 120,
      "height": 80
    }
  ]
}

示例（多个节点）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "nodes": [
    {
      "id": "user-service",
      "title": "User Service",
      "kind": "Rectangle",
      "x": 100,
      "y": 150
    },
    {
      "id": "database",
      "title": "Primary DB",
      "kind": "Cylinder", 
      "x": 300,
      "y": 150
    },
    {
      "id": "cache",
      "title": "Redis Cache",
      "kind": "Cylinder",
      "x": 200,
      "y": 300
    }
  ]
}

示例（含布局）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "layout": {
    "algorithm": "hierarchical",
    "options": { "direction": "left-right" }
  },
  "nodes": [
    { "id": "api", "title": "API", "kind": "Rectangle", "x": 40, "y": 40 },
    { "id": "service", "title": "Service", "kind": "Rectangle", "x": 200, "y": 40 },
    { "id": "db", "title": "DB", "kind": "Cylinder", "x": 360, "y": 40 }
  ]
}

注：布局在所有插入操作完成后运行一次，并考虑图表文件中已有的边。若要在后续创建或修改边时获得最佳效果，请使用专门的（工具/方法） layout_diagram 建议（添加）该工具。

链接节点

在单次操作中创建一个或多个现有节点之间的连接。

参数：

• file_path (字符串，必需)：图表文件的路径
• edges (数组，必需): 要创建的边对象数组，每个对象包含：

- from (字符串，必填)：源节点ID - to (字符串，必填)：目标节点ID - title (字符串，可选)：连接标签 - dashed (布尔值，可选)：是否使用虚线样式 - reverse （布尔值，可选）：是否反转箭头方向 - undirected (布尔值，可选)：创建无向边（无箭头）。覆盖（原有设置） reverse。

示例（单一连接）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "edges": [
    {
      "from": "user-service",
      "to": "database",
      "title": "queries",
      "dashed": true
    }
  ]
}

示例（多个连接）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "edges": [
    {
      "from": "user-service",
      "to": "database",
      "title": "queries"
    },
    {
      "from": "user-service", 
      "to": "cache",
      "title": "cache lookup",
      "dashed": true
    },
    {
      "from": "database",
      "to": "cache", 
      "title": "invalidate",
      "reverse": true
    }
  ]
}

示例（无向连接）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "edges": [
    {
      "from": "service-a",
      "to": "service-b",
      "title": "peering",
      "undirected": true
    }
  ]
}

关于无向行为的笔记：

• 当 undirected 如果为真，则边将被渲染为无箭头（两端均无箭头） reverse 参数被忽略； dashed 仍然受到尊敬。
• 无向边使用一种规范的ID格式 ${min(from,to)}-2-${max(from,to)} 当创建一条新边时。
• 如果两个节点之间已经存在边（无论方向如何或是否具有规范ID），则调用 link_nodes 再次更新时，将修改现有边的标签和样式，而不是创建重复的边。现有边的ID将保持不变（不重命名）。

编辑节点

在单次操作中修改一个或多个现有节点或边的属性。

参数：

• file_path (字符串，必需): 图表文件的路径
• nodes （数组，必需）：要更新的节点/边对象数组，每个对象包含：

- id (字符串，必填)：要更新的节点或边的ID - title （字符串，可选）：新的显示标签 - kind （字符串，可选）：新的形状类型（仅针对节点） - x （数字，可选）：新的X坐标（仅限节点） - y （数字，可选）：新的Y坐标（仅限节点） - width （数字，可选）：新的宽度（仅适用于节点） - height （数字，可选）：新高度（仅针对节点） - corner_radius (整数，可选)：以像素为单位的圆角半径（≥ 1）。当节点为……时适用 RoundedRectangle如果切换种类到 RoundedRectangle 如果省略，则应用默认值12。其他类型则忽略此设置。

示例（单节点）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "nodes": [
    {
      "id": "user-service",
      "title": "Updated User Service",
      "x": 200,
      "y": 100
    }
  ]
}

示例（多个节点）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "nodes": [
    {
      "id": "user-service",
      "title": "Auth Service",
      "kind": "Rectangle",
      "x": 200,
      "y": 100
    },
    {
      "id": "database",
      "title": "Updated Database",
      "x": 400,
      "y": 200
    },
    {
      "id": "connection-1",
      "title": "secure connection"
    }
  ]
}

移除节点

从图表中移除一个或多个节点。

参数：

• file_path (字符串，必填)：图表文件的路径
• ids (数组，必需): 要移除的节点ID数组

示例：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "ids": ["old-service", "deprecated-db"]
}

获取图表信息

检索图表信息，包括节点和连接。

参数：

• file_path (字符串，必需): 图表文件的路径

示例：

{
  "file_path": "./diagrams/system-architecture.drawio.svg"
}

输出格式

图表保存为 .drawio.svg 包含嵌入式元数据的文件：

• SVG 格式适合网页和印刷的清晰矢量图形
• Draw.io 元数据嵌入SVG中的完整图表数据，便于编辑
• 与VSCode兼容直接在VSCode中通过draw.io扩展打开
• 自给自足的无需外部依赖或额外文件

发展

项目结构

src/
├── Graph.ts              # Core graph data structure
├── GraphFileManager.ts   # File I/O operations  
├── Logger.ts            # Logging utilities
├── index.ts             # MCP server entry point
├── mcp/                 # MCP tool implementations
│   ├── McpServer.ts     # Server framework
│   ├── NewDiagramTool.ts
│   ├── AddNodeTool.ts   # Supports batch operations (add_nodes)
│   ├── LinkNodesTools.ts # Supports batch operations (link_nodes)
│   ├── EditNodeTool.ts  # Supports batch operations (edit_nodes)
│   ├── RemoveNodesTool.ts # Supports batch operations (remove_nodes)
│   └── GetDiagramInfoTool.ts
└── mxgraph/             # mxgraph integration
    ├── index.ts
    └── jsdom.ts

从源代码构建

# Install dependencies
npm install

# Run TypeScript compilation
npm run build

# Start development server
npm start

# Run linting
npm run lint

支持

• 在GitHub上创建一个关于错误和功能请求的问题
• 在创建新问题之前，请检查现有问题
• 为错误报告提供详细的复现步骤