AI导哈

Draw.io图表生成服务

一个通过对话直接创建和操作Draw.io图表的Model Context Protocol (MCP)服务器，支持多种形状、连接线和多行文本等功能。

  • by eason-pan-ep
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 eason-pan-ep/draw-io-mcp

使用说明

Draw.io MCP服务器

一个模型上下文协议（MCP）服务器，使Claude能够通过对话直接创建和操作Draw.io图。

特性

  • 创建新的Draw.io图表文件
  • 添加各种形状（矩形、椭圆形、菱形、圆柱体、六边形、云等）
  • 在形状之间添加连接器/箭头
  • 多行文本支持 -使用 \n 用于形状标签中的换行（非常适合类图）
  • 自定义颜色、位置和尺寸
  • 列出并阅读现有图表
  • 智能路径解析（支持相对、绝对和~路径）
  • 实现跨平台兼容性的自动路径转换

安装

  1. 克隆此存储库：
git clone <repository-url>
cd draw-io-mcp
  1. 安装依赖项：
npm install
  1. 构建项目：
npm run build

Claude桌面配置

要将此MCP服务器与Claude Desktop一起使用，请将以下配置添加到您的Claude Desktop配置文件中：

macOS

编辑： ~/Library/Application Support/Claude/claude_desktop_config.json

视窗

编辑： %APPDATA%\Claude\claude_desktop_config.json

添加以下配置：

{
  "mcpServers": {
    "draw-io": {
      "command": "node",
      "args": ["/absolute/path/to/draw-io-mcp/dist/index.js"]
    }
  }
}

替换 /absolute/path/to/draw-io-mcp 带有此项目目录的实际路径。

添加配置后，重新启动Claude Desktop。

Claude代码的配置

使用此MCP服务器 克劳德代码 （CLI），通过添加 claude mcp add 命令或直接编辑配置文件。

选项1:CLI（推荐）

claude mcp add draw-io node /absolute/path/to/draw-io-mcp/dist/index.js

替换 /absolute/path/to/draw-io-mcp 带有此项目目录的实际路径。

选项2：直接编辑配置文件

Claude Code将MCP配置存储在 ~/.claude/mcp.json （全球）或 .claude/mcp.json 项目内部（项目范围）。添加以下条目：

{
  "mcpServers": {
    "draw-io": {
      "command": "node",
      "args": ["/absolute/path/to/draw-io-mcp/dist/index.js"]
    }
  }
}

验证服务器是否正在运行

添加配置后，启动或重新启动Claude Code并运行：

claude mcp list

你应该看看 draw-io 列为已连接的服务器。您还可以运行：

claude mcp get draw-io

检查其状态及其暴露的工具。

作用域选项

Claude Code支持三种配置范围：

作用域 标志 配置位置 何时使用
本地（仅项目） --scope local .claude/mcp.json 在项目中 特定仓库的图表
用户（全局） --scope user ~/.claude/mcp.json 适用于您的所有项目
项目（共享） --scope project .mcp.json 在项目根目录中 通过git与队友共享

添加特定范围的示例：

claude mcp add --scope user draw-io node /absolute/path/to/draw-io-mcp/dist/index.js

使用示例

配置后，您可以要求Claude创建图表：

示例1：简单流程图

Create a flowchart at ./flowchart.drawio with:
1. A "Start" rectangle at (100, 50)
2. A "Process Data" rectangle at (100, 150)
3. A "Decision" rhombus at (100, 250)
4. Connect them with arrows

示例2：架构图

Create a system architecture diagram at ./architecture.drawio showing:
- A cloud shape for "Cloud Services"
- A cylinder for "Database"
- Rectangles for different services
- Connect them appropriately

示例3：多行文本类图

Create a class diagram for a Vehicle hierarchy with:
- A Vehicle class with attributes (brand, model) and methods (start, stop)
- A Car subclass with numDoors attribute
- A Motorcycle subclass with engineCC attribute
Use \n for line breaks to separate class name, attributes, and methods

这 \n 形状中的文本会创建适当的换行符，因此文本如下：

Vehicle\n---\n- brand: String\n+ start(): void

渲染为：

Vehicle
---
- brand: String
+ start(): void

可用工具

MCP服务器提供以下工具：

  1. create_diagram -创建新的Draw.io图表文件
  2. add_shape -添加形状（矩形、椭圆、菱形、圆柱体、六边形、云、阶梯、平行四边形、梯形、三角形）。支持多行文本 \n
  3. add_connector -在不同样式（直线、曲线、正交）的形状之间添加连接器
  4. read_diagram -读取图表的原始XML内容
  5. list_shapes -在图表中列出所有形状及其属性

路径处理

默认情况下，所有图表都保存到桌面 以便于找到它们。服务器智能地处理跨不同平台的文件路径：

默认行为

  • 简单文件名: diagram.drawio → 已保存到您的桌面
  • 相对路径: ./flowchart.drawio → 已保存到桌面（忽略子目录）
  • 克劳德建议的路径: /home/claude/test.drawio → 已保存到您的桌面

这使您的文件位置一目了然——它们始终处于打开状态 您计算机的桌面，不在任何远程机器上。

支持的路径格式

  • 桌面（默认）: diagram.drawio

    • 已保存到 ~/Desktop/diagram.drawio

  • 绝对路径: /Users/username/Documents/diagram.drawio

    • 按原样使用（经过安全验证）
    • 如果需要，可以保存到特定位置

  • 主目录子目录: ~/Documents/diagram.drawio

    • 扩展 ~ 并保存到指定位置
    • 可用于在特定文件夹中组织图表

自动路径转换

当Claude Desktop建议以下路径时 /home/claude/diagram.drawio，服务器会自动将它们翻译到您的桌面：

  • /home/claude/diagram.drawio → ~/Desktop/diagram.drawio
  • /home/claude/subfolder/test.drawio → ~/Desktop/test.drawio

这确保您始终知道文件的保存位置。

安全特性

服务器阻止在系统目录中创建文件(/usr, /bin, /etc等）来保护您的系统。

发展

构建

npm run build

观看模式

npm run watch

文件格式

Draw.io文件（.drawio）是基于XML的文件，可以用以下方式打开：

  • Draw.io网络应用程序(https://app.diagrams.net)
  • Draw.io桌面应用程序
  • 带有Draw.io扩展名的VS代码

许可证

麻省理工学院

相关 MCP