Which integrations are available for this server?

Enables AI agents to create, edit, manage, and export diagrams for Draw.io (Diagrams.net), including flowcharts, org charts, mind maps, and timelines, with tools for element management, styling, file operations, and advanced features like templates and auto-layout.

How do I use Draw.io MCP Server?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Draw.io MCP Server Create a flowchart for order processing" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

Draw.io MCP Server

by Geoffrey-Fang

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

Draw.io MCP Server

一个用于与Draw.io（Diagrams.net）进行交互的MCP（Model Context Protocol）服务器，使AI模型能够创建和管理各种类型的图表。

🚀 项目状态

✅ 已完成并可用 - 项目已实现核心功能，可以立即使用！

✅ MCP服务器核心功能完整实现
✅ 10个Draw.io工具已注册并可用
✅ 完整的测试框架和测试用例
✅ TypeScript类型安全支持
✅ 详细的文档和使用指南

Related MCP server: Engineering MCP Server

🛠️ 快速开始

环境要求

Node.js >= 18.0.0
npm >= 9.0.0

安装和运行

# 1. 克隆项目
git clone <repository-url>
cd drawio-mcp

# 2. 安装依赖
npm install

# 3. 构建项目
npm run build

# 4. 启动服务器
npm start

成功启动后，您将看到：

╔══════════════════════════════════════════════════════════════╗
║                Draw.io MCP Server v1.0.0                    ║
╠══════════════════════════════════════════════════════════════╣
║  ✅ MCP Server started successfully                          ║
║  ✅ 10 tools registered and ready                           ║
║  ✅ Ready to accept MCP protocol requests                    ║
╚══════════════════════════════════════════════════════════════╝

🔧 MCP客户端配置

Claude Desktop

将以下配置添加到Claude Desktop配置文件中：

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "node",
      "args": ["/path/to/drawio-mcp/dist/index.js"],
      "transportType": "stdio"
    }
  }
}

配置文件位置：

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

📋 可用工具

服务器提供以下26个MCP工具，涵盖图表创建、编辑、管理的完整功能：

🎨 图表创建工具 (5个)

create_diagram - 创建通用图表（流程图、UML图、网络图等）
create_flowchart - 创建流程图
create_org_chart - 创建组织架构图
create_mindmap - 创建思维导图
create_timeline - 创建时间线图表

✏️ 图表编辑工具 (5个)

add_element - 向图表添加元素
connect_elements - 连接两个图表元素
delete_element - 删除图表中的元素或连接
update_element - 更新现有元素的属性
copy_paste - 复制和粘贴图表元素

📁 文件管理工具 (4个)

save_diagram - 保存图表到文件
load_diagram - 从文件加载图表
batch_import - 批量导入图表文件
version_management - 图表版本管理

📤 导出工具 (1个)

export_diagram - 导出图表为PNG/SVG/PDF格式

🎭 样式和主题工具 (3个)

apply_theme - 应用预定义主题到图表
update_style - 更新图表、元素或连接的样式
manage_colors - 管理图表的颜色方案和调色板

🔍 查询工具 (4个)

get_diagram_info - 获取图表基本信息
list_diagrams - 列出所有图表文件
search_elements - 在图表中搜索元素
get_statistics - 获取图表统计信息

🚀 高级功能工具 (4个)

create_template - 创建或管理图表模板
batch_operations - 批量操作图表元素
layer_management - 管理图表的图层和分组
auto_layout - 自动布局图表元素

💡 使用示例

创建流程图

{
  "title": "用户登录流程",
  "steps": [
    {
      "id": "start",
      "text": "开始",
      "type": "start",
      "next": ["input"]
    },
    {
      "id": "input",
      "text": "输入用户名密码",
      "type": "process",
      "next": ["validate"]
    },
    {
      "id": "validate",
      "text": "验证凭据",
      "type": "decision",
      "next": ["success", "error"]
    },
    {
      "id": "success",
      "text": "登录成功",
      "type": "end"
    },
    {
      "id": "error",
      "text": "登录失败",
      "type": "end"
    }
  ],
  "layout": "vertical"
}

创建组织架构图

{
  "title": "公司组织架构",
  "root": {
    "id": "ceo",
    "name": "张三",
    "title": "CEO",
    "children": [
      {
        "id": "cto",
        "name": "李四",
        "title": "CTO",
        "department": "技术部"
      },
      {
        "id": "cfo",
        "name": "王五",
        "title": "CFO",
        "department": "财务部"
      }
    ]
  }
}

🏗️ 项目结构

drawio-mcp/
├── config/                 # 配置文件
├── design/                 # 设计文档
├── docs/                   # 项目文档
│   ├── quick-start.md      # 快速开始指南
│   ├── testing-guide.md    # 测试指南
│   └── implementation-comparison.md # 实现差异分析
├── examples/               # 示例代码
├── src/                    # 源代码
│   ├── server/            # MCP服务器核心
│   ├── tools/             # MCP工具实现
│   ├── types/             # TypeScript类型定义
│   ├── utils/             # 工具函数
│   ├── integration/       # 集成测试
│   ├── performance/       # 性能测试
│   └── test-utils/        # 测试工具
├── package.json
└── README.md

🧪 开发和测试

开发模式

npm run dev

运行测试

# 运行所有测试
npm test

# 运行单元测试
npm run test:unit

# 运行集成测试
npm run test:integration

# 运行性能测试
npm run test:performance

# 生成覆盖率报告
npm run test:coverage

代码质量

# 代码检查
npm run lint

# 自动修复
npm run lint:fix

# 代码格式化
npm run format

📖 文档

快速开始指南 - 快速设置和使用
测试指南 - 测试框架和最佳实践
实现差异分析 - 与其他实现的对比

🔍 与 drawio-mcp-server 的差异

本项目 (drawio-mcp) 与 drawio-mcp-server 的主要差异：

特性	drawio-mcp-server	drawio-mcp
实现状态	完成，8个工具	完成，10个工具
架构设计	WebSocket桥接	标准MCP协议
工具数量	8个基础工具	10个全功能工具
测试覆盖	完整单元测试	完整测试套件
文档完善度	实用导向	设计导向
类型安全	基础类型	完整类型系统

详细对比请参考实现差异分析。

🤝 贡献

欢迎贡献代码！请遵循以下步骤：

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🆘 支持

如果您遇到问题或需要帮助：

查看快速开始指南
查看测试指南
搜索现有的 Issues
创建新的 Issue 描述您的问题

⭐ 如果这个项目对您有帮助，请给它一个星标！

Available Tools

26 tools

add_elementB

向图表添加元素

Inputs: element (required), diagram_id (required).

apply_themeB

应用预定义主题到图表

Inputs: theme (required), diagram_id (required).

auto_layoutC

自动布局图表元素

Inputs: algorithm (required), diagram_id (required), options, element_ids.

batch_importC

批量导入图表文件

Inputs: source_directory (required), filters, file_patterns, import_options, +1 more.

batch_operationsD

批量操作图表元素

Inputs: operation (required), diagram_id (required), options, elements, +1 more.

connect_elementsC

连接两个图表元素

Inputs: to_id (required), from_id (required), diagram_id (required), label, +1 more.

copy_pasteC

复制和粘贴图表元素

Inputs: action (required), diagram_id (required), element_ids, paste_options, +2 more.

create_diagramD

创建通用图表

Inputs: type (required), title (required), elements, connections.

create_flowchartD

创建流程图

Inputs: steps (required), title (required), layout.

create_mindmapD

创建思维导图

Inputs: title (required), branches (required), central_topic (required), style_theme, +1 more.

create_org_chartC

创建组织架构图

Inputs: root (required), title (required).

create_templateC

创建或管理图表模板

Inputs: action (required), diagram_id, template_id, apply_params, +1 more.

create_timelineB

创建时间线图表

Inputs: title (required), events (required), time_range, style_options, +3 more.

delete_elementB

删除图表中的元素或连接

Inputs: diagram_id (required), options, element_ids, connection_ids.

export_diagramB

导出图表为指定格式

Inputs: format (required), diagram_id (required), options.

get_diagram_infoC

获取图表基本信息

Inputs: diagram_id (required).

get_statisticsC

获取图表统计信息

Inputs: filters, metrics, grouping, diagram_id, +3 more.

layer_managementD

管理图表的图层和分组

Inputs: action (required), diagram_id (required), layer_id, layer_name, +3 more.

list_diagramsC

列出所有图表

Inputs: format, directory.

load_diagramB

从文件加载图表

Inputs: filename (required).

manage_colorsD

管理图表的颜色方案和调色板

Inputs: action (required), diagram_id (required), palette, color_mapping.

save_diagramC

保存图表到文件

Inputs: filename (required), diagram_id (required), format.

search_elementsC

在图表中搜索元素

Inputs: search_criteria (required), filters, diagram_id, sort_options, +1 more.

update_elementC

更新现有元素的属性

Inputs: updates (required), diagram_id (required), element_id (required), options.

update_styleB

更新图表、元素或连接的样式

Inputs: style (required), target (required), diagram_id (required), target_id.

version_managementD

图表版本管理

Inputs: action (required), diagram_id, version_id, list_options, +4 more.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

Deploy Server

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

C2.4/5.0

Scored 2026-08-06 22:55 across 26 tools

Disambiguation4/5

Most tools have distinct purposes, targeting different resources and actions. However, a few style-related tools (apply_theme, manage_colors, update_style) may cause some confusion, though descriptions mitigate ambiguity.

Naming Consistency3/5

The naming convention is mostly snake_case with verb-first patterns (create, get, update, delete), but several tools use noun-phrase names like layer_management, version_management, batch_operations, auto_layout, and copy_paste, deviating from the consistent verb_noun style.

Tool Count2/5

With 26 tools, the count exceeds the 25-tool threshold for a heavy surface. While the domain is broad, the large number may make the tool set feel bloated and harder to navigate.

Completeness3/5

The tool set covers a wide range of diagram operations, including creation, element manipulation, styling, layout, import/export, and versioning. However, it lacks direct 'delete_diagram' and 'get_element' functions, leaving minor CRUD gaps for diagrams and elements.

Maintenance

ActivityInactive

ResponsivenessNo recent community issues

Resources

Related MCP Connectors

ExcaliClaw
com.excaliclaw
Create, edit and organize hand-drawn diagrams (flowcharts, ER, architecture) from any AI agent.
Software Architecture Design Tools
1
https://excaliclaw.com/mcp
flowzapA
io.github.flowzap-xyz
Create workflow, sequence, architecture, and mind map diagrams via AI assistants.
Software Architecture Developer Tools Workplace & Productivity
1315
https://flowzap.xyz/mcp
DrillSpark MCP Server
io.github.jackasser
Create and manage Mermaid.js flowcharts and diagrams with AI agents via MCP.
Software Architecture Developer Tools App Automation
2
https://drillspark.io/api/mcp/mcp
Diagram
la.diagram
Saves the diagrams your AI draws and gives you a link to share. Edits update the same link.
Software Architecture Data Visualization Cloud Storage
1
https://diagram.la/mcp

Related MCP Servers

Draw.io MCP Server
Software Architecture Developer Tools App Automation
lgazo
A
license
B
quality
A
maintenance
Enables AI agents to programmatically create, modify, and analyze Draw.io diagrams through the Model Context Protocol. Supports generating architectural diagrams, flowcharts, and visualizations with bidirectional communication between AI systems and Draw.io.
Updated 15 days ago (2026-11-01 09:04 UTC)
13
109 npm
1,498
MIT
Engineering MCP Server
Autonomous Agents AI & Machine Learning
puran-water
A
license
Not graded
quality
F
maintenance
Enables language-model agents to create, modify, analyze, and persist process-engineering diagrams (P\&IDs and flowsheets) in machine-readable formats via the Model Context Protocol.
Updated 8 days ago (2026-11-07 20:25 UTC)
5
MIT
MCP-GLSP
Design Tools Software Architecture
pulseengine
A
license
Not graded
quality
F
maintenance
Enables AI-driven graphical diagram creation and manipulation using natural language, with support for BPMN workflows, analysis, and manual editing via the Model Context Protocol.
Updated a year ago (2025-11-13 19:12 UTC)
1
MIT
drawio-desktop-mcp
ArdaUzun
A
license
Not graded
quality
D
maintenance
Enables AI agents to create and edit diagrams in the draw.io desktop app through the Model Context Protocol.
Updated 8 months ago (2026-03-24 20:27 UTC)
Apache 2.0

Appeared in Searches

A server for finding diagrams

Draw.io MCP Server

🚀 项目状态

🛠️ 快速开始

环境要求

安装和运行

🔧 MCP客户端配置

Claude Desktop

📋 可用工具

🎨 图表创建工具 (5个)

✏️ 图表编辑工具 (5个)

📁 文件管理工具 (4个)

📤 导出工具 (1个)

🎭 样式和主题工具 (3个)

🔍 查询工具 (4个)

🚀 高级功能工具 (4个)

💡 使用示例

创建流程图

创建组织架构图

🏗️ 项目结构

🧪 开发和测试

开发模式

运行测试

代码质量

📖 文档

🔍 与 drawio-mcp-server 的差异

🤝 贡献

📄 许可证

🆘 支持

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

Draw.io MCP Server

Engineering MCP Server

MCP-GLSP

drawio-desktop-mcp

Appeared in Searches