AI导哈

图表生成服务

一个基于MCP协议的图表生成服务器，提供创建和管理draw.io图表的程序化工具，适用于架构图、流程图等可视化场景。

  • by Sujimoshi
  • TypeScript
  • 本地部署
  • 5 星标
  • 更新于
在 GitHub 查看 sujimoshi/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支持

演示

安装

先决条件

  • Node.js 18.0.0或更高版本
  • npm或纱线

配置

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 （string，必填）：新图表文件的路径

例子：

{
  "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 （array，必填）：要添加的节点对象数组，每个对象包含：
    • id （字符串，必填）：节点的唯一标识符
    • title （string，必填）：显示标签（支持换行符 \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：工艺步骤形状
  • Actor：UML角色（条形图）
  • 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 （array，必填）：要创建的边缘对象数组，每个对象包含：
    • from （字符串，必填）：源节点ID
    • to （字符串，必填）：目标节点ID
    • title （字符串，可选）：连接标签
    • dashed （boolean，可选）：是否使用虚线样式
    • 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
    }
  ]
}

edit_nodes

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

参数：

  • file_path （字符串，必填）：图表文件的路径
  • nodes （array，必填）：要更新的节点/边对象数组，每个对象包含：
    • 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"
    }
  ]
}

remove_nodes

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

参数：

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

例子：

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

get_digram_minfo

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

参数：

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

例子：

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

输出格式

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

  • SVG格式：适用于网络和印刷的干净矢量图形
  • Draw.io元数据：SVG中嵌入的完整图表数据用于编辑
  • VSCode兼容：使用draw.io扩展直接在VSCode中打开
  • 自足：不需要外部依赖关系或其他文件

发展

项目结构

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上为bug和功能请求创建问题
  • 在创建新问题之前检查现有问题
  • 为错误报告提供详细的复制步骤

相关 MCP