使用说明

Draw.io图表生成器MCP服务器

一种模型上下文协议（MCP）服务器，以编程方式生成draw.io/diagrams.net XML文件。通过简单的API调用或自然语言描述创建流程图、UML图、网络图等等。

特性

自动文件保存：图表会自动保存到您的下载文件夹中
桌面应用程序集成：在draw.io桌面应用程序中自动打开图表（如果已安装）
Web查看器支持：生成用于在浏览器中打开图表的diagrams.net URL
多格式输出：提供文件路径、web URL、MCP资源和原始XML
直接XML生成：创建可以在draw.io/diagrams.net中立即打开的有效draw.io XML
无需浏览器：与基于浏览器扩展的解决方案不同，这直接生成文件
多种图表类型：支持流程图、UML、ER图、网络图等
结构化流程图创建：具有自动布局和样式的优化流程图生成器
增量建筑：以编程方式向现有图表添加形状和连接
灵活的造型：自定义颜色、形状、连接样式和布局
MCP资源：将生成的图表作为MCP资源公开，以便于访问

安装

通过npm（推荐）

# Install globally
npm install -g drawio-diagram-generator

# Or use with npx (no installation needed)
npx drawio-diagram-generator

来源

git clone <repository-url>
cd drawio-diagram-generator
npm install
npm run build

配置

克劳德桌面

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-diagram-generator"]
    }
  }
}

配置文件位置：

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

Cline（VS代码）

添加到临床中的MCP设置：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-diagram-generator"]
    }
  }
}

Zed编辑

添加到 ~/.config/zed/settings.json:

{
  "context_servers": {
    "drawio": {
      "command": {
        "path": "npx",
        "args": ["-y", "drawio-diagram-generator"]
      }
    }
  }
}

可用工具

1. `create_flowchart`

使用自动布局和样式创建完整的流程图。

参数：

title （字符串）：流程图标题
steps （array）：流程图步骤列表，每个步骤包含：
- id （string）：唯一标识符（例如，“start”、“process1”、“decision 1”）
- type （枚举）：“开始”、“结束”、“过程”、“决策”、“输入”或“输出”
- text （string）：元素的文本内容
- next （数组，可选）：下一步的ID（多个用于决策分支）
- decision_labels （数组，可选）：决策分支的标签（例如，[“是”、“否”]）
output_format （枚举，可选）：“未压缩”（默认）或“压缩”

例子：

{
  "title": "User Authentication Flow",
  "steps": [
    {
      "id": "start",
      "type": "start",
      "text": "Start",
      "next": ["check_login"]
    },
    {
      "id": "check_login",
      "type": "decision",
      "text": "Credentials Valid?",
      "next": ["grant_access", "deny_access"],
      "decision_labels": ["Yes", "No"]
    },
    {
      "id": "grant_access",
      "type": "process",
      "text": "Grant Access",
      "next": ["end"]
    },
    {
      "id": "deny_access",
      "type": "process",
      "text": "Show Error",
      "next": ["end"]
    },
    {
      "id": "end",
      "type": "end",
      "text": "End"
    }
  ]
}

2. `create_diagram`

根据文本描述创建基本图表结构。

参数：

title （字符串）：图表标题
description （string）：图表内容的详细描述
diagram_type （枚举）：“流程图”、“序列”、“类”、“er”、“网络”、“基础设施”或“自定义”
output_format （枚举，可选）：“未压缩”或“压缩”
page_width （数字，可选）：画布宽度（像素）（默认值：1100）
page_height （数字，可选）：画布高度（像素）（默认值：850）

3. `add_shape`

将形状添加到现有图表中。

参数：

xml （string）：现有图表XML
shape_type （枚举）：“矩形”、“圆形”、“椭圆形”、“菱形”、“六边形”、“圆柱体”、“云”、“演员”、“音符”或“泳道”
text （string）：文本内容
x （数字）：X坐标（左起像素）
y （数字）：Y坐标（从顶部开始的像素）
width （数字）：宽度（像素）
height （数字）：高度（像素）
fill_color （字符串，可选）：十六进制颜色（默认值：“#ffffff”）
stroke_color （字符串，可选）：十六进制颜色（默认值：“#000000”）

形状类型参考：

矩形：标准箱形
圆形的：圆角框
椭圆：圆形和椭圆形
菱形：钻石形状（决定）
六边形：六面形状
圆柱体：数据库符号
云：云服务表示
男演员：UML角色图
笔记：注释注释
泳道：用于分组的容器

4. `add_connection`

用箭头或线连接两个形状。

参数：

xml （string）：现有图表XML
source_id （string）：源形状的ID
target_id （string）：目标形状的ID
label （字符串，可选）：连接标签文本
style （枚举，可选）：“直”、“正交”、“弯曲”、“虚线”或“点状”（默认值：“正交”）
arrow_end （布尔值，可选）：在末尾显示箭头（默认值：true）
arrow_start （布尔值，可选）：在开始处显示箭头（默认值：false）

用法示例

示例1：简单流程图

提示克劳德：

Create a flowchart for a simple login process with these steps:
1. Start
2. Check if credentials are valid (decision)
3. If yes, grant access
4. If no, show error message
5. End

克劳德将使用 create_flowchart 生成完整、样式正确的流程图的工具。

示例2：系统架构

提示克劳德：

Create a diagram showing a three-tier web architecture:
- Frontend (React)
- Backend API (Node.js)
- Database (PostgreSQL)
Show the connections between them.

克劳德将使用 create_diagram 随后 add_shape 和 add_connection 调用以构建架构图。

示例3：自定义网络图

提示克劳德：

Create a network diagram with:
- A cloud at the top labeled "Internet"
- A firewall below it
- Two web servers behind the firewall
- A database server
Connect them appropriately.

图表输出的工作原理

创建图表时，MCP服务器提供多种访问方式：

1.自动文件下载

每个图表都会自动保存到您的 下载文件夹 带有时间戳：

格式: diagram_title_timestamp.drawio
位置: ~/Downloads/ （Mac/Linux）或 %USERPROFILE%\Downloads\ （Windows）
示例: user_authentication_flow_1234567890.drawio

2.桌面应用程序集成

如果安装了draw.io桌面应用程序，图表将自动打开：

视窗：检测程序文件或LocalAppData中的安装
macOS：通过打开 /Applications/draw.io.app
Linux：检查 /usr/bin/drawio, /usr/local/bin/drawio, /opt/drawio/drawio

3.Web查看器URL

对于浏览器或工件支持（Claude Desktop），会生成一个web URL：

格式: https://app.diagrams.net/#R{encoded_xml}
用法：单击链接在浏览器中打开图表
利益：无需安装，可在任何地方工作

4.MCP资源

图表作为MCP资源公开：

URI格式: diagram:///diagram_name_timestamp
访问：通过MCP资源协议
益处：可供其他MCP客户端/工具参考

5.原始XML

完整的draw.io XML在响应中提供：

格式：有效的mxGraph XML
用法：复制/粘贴到任何draw.io兼容工具中
选项：未压缩（可读）或压缩（较小）

输出格式

服务器以两种格式生成draw.io XML：

未压缩的XML（默认）

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" ...>
  <diagram name="My Diagram" id="diagram-1">
    <mxGraphModel ...>
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- Your shapes and connections here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

压缩XML

对较小的文件大小使用deflate压缩（与draw.io的默认保存格式相同）。

最佳结果提示

具体：提供详细说明，包括：
- 组件名称和类型
- 关系和联系
- 所需布局（垂直、水平、分层）
迭代构建：对于复杂的图表：
- 从开始 create_diagram 或 create_flowchart
- 使用 add_shape 添加其他组件
- 使用 add_connection 将它们联系在一起
颜色编码：使用自定义颜色对组件进行分类：
- 蓝色（#dae8fc）表示前端组件
- 绿色（#d5e8d4）表示后端服务
- 黄色（#fff2cc）表示决策/警报
- 红色（#f8cecc）表示错误/问题
形状选择:
- 使用 圆柱体 对于数据库
- 使用云对于云服务
- 使用菱形用于决策点
- 使用 男演员 用户/角色

建筑

服务器根据mxGraphModel格式生成有效的draw.io XML：

mx文件：带有元数据的根容器
图表：命名图表页面
mxGraphModel：图形结构定义
根：包含单元格（形状和连接）
mxCell：单个形状（顶点）或连接（边）

每个形状都有：

用于引用的唯一ID
几何形状（位置和大小）
样式字符串（外观）
值（文本内容）

连接引用源和目标形状ID。

与其他解决方案的比较

功能	此服务器	lgazo/drawio-mcp服务器	RandomStateLabs/drawio-mcp
需要浏览器扩展名	❌ 否	✅ 是	✅ 是的
直接XML生成	✅ 是	❌ 否	❌ 没有
脱机工作	✅ 是	❌ 否	❌ 没有
需要运行draw.io	❌ 否	✅ 是	✅ 是的
结构化流程图	✅ 是	⚠️ 部分	❌ 没有
增量建筑	✅ 是	✅ 是	⚠️ 有限
自动保存到下载	✅ 是	❌ 否	❌ 没有
桌面应用程序集成	✅ 是	⚠️ 必填	⚠️ 必填项
Web查看器URL	✅ 是	❌ 否	❌ 没有
MCP资源	✅ 是	❌ 否	❌ 没有

故障排除

“找不到模块”错误

npm install
npm run build

工具未出现在Claude Desktop中

验证配置文件位置
完全重新启动克劳德桌面
检查配置文件中的语法（有效的JSON）

图表未自动打开

如果桌面应用程序未自动打开：

检查安装情况：验证您的系统上是否安装了draw.io
- 下载地址：https://github.com/jgraph/drawio-desktop/releases
手动访问：使用响应中提供的web查看器URL
文件位置：检查下载文件夹中保存的 .drawio 文件
替代：复制原始XML并粘贴到https://app.diagrams.net

生成的XML无法打开

确保您已保存 .drawio 或 .xml 扩展
请先尝试未压缩的格式
验证XML结构
使用web查看器URL作为替代

保存文件时出现权限错误

检查下载文件夹是否存在并且可写
在Windows上： %USERPROFILE%\Downloads
在Mac/Linux上： ~/Downloads

发展

构建

npm run build

观看模式

npm run watch

本地测试

# Build the project
npm run build

# Test with MCP Inspector
npx @modelcontextprotocol/inspector node build/index.js

贡献

欢迎投稿！需要改进的领域：

[]用自然语言绘制AI解释图
[]其他图表类型（甘特图、组织结构图、思维导图）
[]从其他格式导入/导出
[]样式模板和主题
[]先进的布局算法
[]图表验证和优化

许可证

MIT许可证-有关详细信息，请参阅许可证文件

支持

对于问题、疑问或贡献，请在GitHub上打开问题。

使用说明

Draw.io图表生成器MCP服务器

特性

安装

通过npm（推荐）

来源

配置

克劳德桌面

Cline（VS代码）

Zed编辑

可用工具

1. create_flowchart

2. create_diagram

3. add_shape

4. add_connection

用法示例

示例1：简单流程图

示例2：系统架构

示例3：自定义网络图

图表输出的工作原理

1.自动文件下载

2.桌面应用程序集成

3.Web查看器URL

4.MCP资源

5.原始XML

输出格式

未压缩的XML（默认）

压缩XML

最佳结果提示

建筑

与其他解决方案的比较

故障排除

“找不到模块”错误

工具未出现在Claude Desktop中

图表未自动打开

生成的XML无法打开

保存文件时出现权限错误

发展

构建

观看模式

本地测试

贡献

许可证

相关项目

支持

相关 MCP

Excel表格处理MCP服务

图表生成MCP服务器

ECharts 图表生成 MCP 服务

图表生成服务

代码分析与可视化工具

Whimsical MCP 服务器

1. `create_flowchart`

2. `create_diagram`

3. `add_shape`

4. `add_connection`