绘图io-mcp

Name: 绘图io-mcp
Author: Sujimoshi

作者：Sujimoshi5 星标更新：2025-09-18

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

项目介绍

Draw.io MCP Server

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

概述

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

主要特性

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

示例

安装

先决条件

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（当 cwd 已配置）

所有图表文件应使用 .drawio.svg 扩展名以实现与 VSCode 的正确集成。

工具参考

批处理操作

所有主要工具都支持批处理操作，允许您在一个 MCP 调用中执行多个操作，以提高效率：

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

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

new_diagram

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

参数：

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

示例：

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

add_nodes

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

参数：

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。当 kind 是 RoundedRectangle 且未指定 corner_radius 时，默认值为 12。实际视觉半径由 draw.io/mxGraph 限制为节点较短边的一半。

可用节点类型：

Rectangle：标准矩形节点
Ellipse：椭圆形节点
Cylinder：数据库/存储表示
Cloud：云服务表示
Square：固定宽高比的正方形
Circle：圆形节点
Step：过程步骤形状
Actor：UML 角色（棒人）
Text：纯文本节点
RoundedRectangle：带圆角的矩形（支持以像素为单位的 corner_radius）

示例（单个节点）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "nodes": [
    {
      "id": "user-service",
      "title": "User Service\nAPI 层",
      "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": "主数据库",
      "kind": "Cylinder",
      "x": 300,
      "y": 150
    },
    {
      "id": "cache",
      "title": "Redis 缓存",
      "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": "服务", "kind": "Rectangle", "x": 200, "y": 40 },
    { "id": "db", "title": "数据库", "kind": "Cylinder", "x": 360, "y": 40 }
  ]
}

注意：布局在所有插入完成后运行一次，并考虑图表文件中的现有边。为了在稍后创建或修改边时获得最佳效果，建议使用专用的 layout_diagram 工具（待添加）。

link_nodes

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

参数：

file_path（字符串，必需）：图表文件的路径
edges（数组，必需）：要创建的边对象数组，每个包含：
- from（字符串，必需）：源节点 ID
- to（字符串，必需）：目标节点 ID
- title（字符串，可选）：连接标签
- dashed（布尔值，可选）：是否使用虚线样式
- reverse（布尔值，可选）：是否反转箭头方向

示例（单个连接）：

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

示例（多个连接）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "edges": [
    {
      "from": "user-service",
      "to": "database",
      "title": "查询"
    },
    {
      "from": "user-service",
      "to": "cache",
      "title": "缓存查找",
      "dashed": true
    },
    {
      "from": "database",
      "to": "cache",
      "title": "失效",
      "reverse": true
    }
  ]
}

edit_nodes

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

参数：

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": "更新后的用户服务",
      "x": 200,
      "y": 100
    }
  ]
}

示例（多个节点）：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "nodes": [
    {
      "id": "user-service",
      "title": "认证服务",
      "kind": "Rectangle",
      "x": 200,
      "y": 100
    },
    {
      "id": "database",
      "title": "更新后的数据库",
      "x": 400,
      "y": 200
    },
    {
      "id": "connection-1",
      "title": "安全连接"
    }
  ]
}

remove_nodes

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

参数：

file_path（字符串，必需）：图表文件的路径
ids（数组，必需）：要删除的节点 ID 数组

示例：

{
  "file_path": "./diagrams/system-architecture.drawio.svg",
  "ids": ["旧服务", "已弃用数据库"]
}

get_diagram_info

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

参数：

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

示例：

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

输出格式

图表保存为带有嵌入元数据的 .drawio.svg 文件：

SVG 格式：适合网页和打印的干净矢量图形
Draw.io 元数据：完整的图表数据嵌入 SVG 中，以便编辑
VSCode 兼容：可以直接在 VSCode 中使用 draw.io 扩展打开
自包含：无需外部依赖或额外文件

开发

项目结构

src/
├── Graph.ts              # 核心图数据结构
├── GraphFileManager.ts   # 文件 I/O 操作
├── Logger.ts            # 日志实用程序
├── index.ts             # MCP 服务器入口点
├── mcp/                 # MCP 工具实现
│   ├── McpServer.ts     # 服务器框架
│   ├── NewDiagramTool.ts
│   ├── AddNodeTool.ts   # 支持批处理操作（add_nodes）
│   ├── LinkNodesTools.ts # 支持批处理操作（link_nodes）
│   ├── EditNodeTool.ts  # 支持批处理操作（edit_nodes）
│   ├── RemoveNodesTool.ts # 支持批处理操作（remove_nodes）
│   └── GetDiagramInfoTool.ts
└── mxgraph/             # mxgraph 集成
    ├── index.ts
    └── jsdom.ts

从源码构建

# 安装依赖
npm install

# 运行 TypeScript 编译
npm run build

# 启动开发服务器
npm start

# 运行代码检查
npm run lint

支持

在 GitHub 上创建问题报告错误和功能请求
创建新问题之前检查现有问题
提供详细的复现步骤以报告错误