drawio-mcp

🎨 Draw.io MCP 服务

只需描述你的需求，就能让 AI 助手创建精美的 draw.io 图表。

一个可通过编程方式生成 draw.io / diagrams.net XML 文件的 MCP 服务。适用于 GitHub Copilot（Agent 模式）、Claude Desktop、Cursor 以及所有兼容 MCP 的客户端。

---

✨ 它能做什么？

功能	详情
🏗️ 图表类型	流程图、UML、ER、C4、BPMN、思维导图、架构图、网络图、Kubernetes 图等
🎨 样式	310 多种形状预设、44 种边样式、21 种配色主题
📐 自动布局	Sugiyama DAG、树形、水平、垂直、网格、流程图引擎
🔀 智能路由	避开障碍的正交边路由，并自动分配端口
✏️ 完整编辑	创建后可添加、移动、调整大小、删除任何元素，或重新设置其样式
📄 多页	为复杂图表创建多个页面和图层
📥 导入/导出	加载现有的 .drawio 文件，进行修改并保存
🧹 一键整理	润色命令可自动修复布局、重叠、边和标签

---

🚀 快速开始

前置条件

• Python 3.11+
• uv（推荐）或 pip

从 PyPI 安装

pip install drawio-mcp

也可以使用 uv：

uvx drawio-mcp

从源代码安装

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync
uv run drawio-mcp

---

🔌 配置 AI 客户端

VS Code（GitHub Copilot）

添加到 VS Code 设置或 .vscode/mcp.json：

{
  "servers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

然后使用Agent 模式下的 Copilot，让它创建图表。

Claude Desktop

添加到 claude_desktop_config.json：

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

Cursor

添加到 Cursor MCP 设置：

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

---

💬 示例提示词

连接后，可以在 AI 聊天中尝试以下提示词：

提示词	生成内容
“为用户登录流程创建流程图”	包含决策节点和错误路径的登录流程
“为电子商务系统创建 C4 上下文图”	包含参与者和外部系统的系统上下文图
“创建包含 User、Order 和 Product 的 UML 类图”	带有关系的类图
“为博客数据库创建 ER 图”	包含表的实体关系图
“为初创公司创建组织结构图”	按角色和层级排列的树形布局
“绘制包含 API Gateway、Lambda 和 DynamoDB 的 AWS 架构图”	云架构图
“创建 Kubernetes 部署图”	包含 Pod、服务和 Ingress 的 K8s 图
“绘制包含服务器和防火墙的网络拓扑图”	带有设备图标的网络图

💡 提示： 结尾加上 “……并将其保存为 filename.drawio”，即可获得可在 draw.io 中打开的文件。

---

🛠️ 工具参考

该服务提供 5 个工具，每个工具都包含一个 action 参数：

diagram — 生命周期

create · save · load · import_xml · list · get_xml · add_page · add_layer

draw — 内容

add_vertices · add_edges · add_group · update_cells · delete_cells · add_title · add_legend · build_dag · build_full

style — 外观

build · apply_theme · list_vertex_presets · list_edge_presets · list_themes

layout — 定位

sugiyama · tree · horizontal · vertical · grid · flowchart · smart_connect · align · distribute · polish · relayout · compact · reroute_edges · resolve_overlaps · fix_labels · optimize_connections · resize_container

inspect — 只读

cells · overlaps · ports · info

---

🎨 样式参考

310+ 种顶点预设（点击展开）

基本形状： RECTANGLE ROUNDED_RECTANGLE ELLIPSE CIRCLE DIAMOND TRIANGLE HEXAGON CYLINDER CLOUD PARALLELOGRAM ACTOR PROCESS DOCUMENT DATA_STORE NOTE CARD CALLOUT TEXT CUBE STAR FOLDER 等

主题框： BLUE_BOX GREEN_BOX ORANGE_BOX RED_BOX YELLOW_BOX PURPLE_BOX GRAY_BOX DARK_BOX TEAL_BOX WHITE_BOX

流程图： FLOWCHART_PROCESS FLOWCHART_DECISION FLOWCHART_TERMINATOR FLOWCHART_DATA FLOWCHART_DOCUMENT FLOWCHART_DATABASE FLOWCHART_START FLOWCHART_END 等 25 种以上

UML： UML_CLASS UML_INTERFACE UML_ACTOR UML_COMPONENT UML_PACKAGE UML_NODE UML_LIFELINE UML_FRAME

C4： C4_SYSTEM C4_CONTAINER C4_COMPONENT C4_PERSON C4_EXTERNAL C4_DATABASE C4_WEB_BROWSER

ER： ER_ENTITY ER_WEAK_ENTITY ER_ATTRIBUTE ER_KEY_ATTRIBUTE ER_RELATIONSHIP 等

BPMN： BPMN_TASK BPMN_START_EVENT BPMN_END_EVENT BPMN_GATEWAY BPMN_POOL BPMN_LANE 等

架构： ARCH_SERVICE ARCH_DATABASE ARCH_QUEUE ARCH_CLOUD ARCH_API ARCH_GATEWAY ARCH_CONTAINER ARCH_FIREWALL ARCH_SERVER ARCH_LOAD_BALANCER 等 20 种以上

网络： NETWORK_SERVER NETWORK_ROUTER NETWORK_SWITCH NETWORK_FIREWALL NETWORK_CLOUD NETWORK_STORAGE 等 40 种以上

云/K8s： AWS_CLOUD AWS_LAMBDA AWS_S3 AWS_EC2 AWS_RDS AWS_SQS K8S_POD K8S_SERVICE K8S_DEPLOYMENT K8S_INGRESS 等

容器： SWIMLANE GROUP GROUP_TRANSPARENT GROUP_DASHED

此外： 状态机、时序图、思维导图、DFD、SysML、ArchiMate、Cisco、样机/线框图、信息图等

44 种边预设（点击展开）

通用： DEFAULT ORTHOGONAL STRAIGHT CURVED ENTITY_RELATION DASHED DOTTED BIDIRECTIONAL NO_ARROW

样式： ROUNDED ROUNDED_DASHED THICK THICK_ROUNDED

彩色： COLORED_BLUE COLORED_GREEN COLORED_RED COLORED_ORANGE COLORED_PURPLE COLORED_YELLOW COLORED_GRAY

UML： UML_ASSOCIATION UML_INHERITANCE UML_IMPLEMENTATION UML_DEPENDENCY UML_AGGREGATION UML_COMPOSITION

ER： ER_ONE_TO_ONE ER_ONE_TO_MANY ER_MANY_TO_MANY ER_ZERO_TO_ONE ER_ZERO_TO_MANY

流程： DATA_FLOW CONTROL_FLOW ASYNC SYNC BPMN_FLOW BPMN_MESSAGE_FLOW

21 种配色主题（点击展开）

BLUE GREEN YELLOW ORANGE RED PURPLE GRAY PINK TURQUOISE TEAL DARK_BLUE DARK_GREEN DARK_RED DARK_ORANGE DARK_PURPLE DARK WHITE C4_BLUE C4_LIGHT_BLUE C4_SKY C4_GRAY

连接端口（点击展开）

TOP BOTTOM LEFT RIGHT TOP_LEFT TOP_RIGHT BOTTOM_LEFT BOTTOM_RIGHT TOP_LEFT_THIRD TOP_RIGHT_THIRD BOTTOM_LEFT_THIRD BOTTOM_RIGHT_THIRD LEFT_TOP_THIRD LEFT_BOTTOM_THIRD RIGHT_TOP_THIRD RIGHT_BOTTOM_THIRD

---

🧑‍💻 开发

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync

# Run tests
uv run pytest tests/ -v

# Run the server locally
uv run drawio-mcp

项目结构

src/drawio_mcp/
├── server.py           # MCP server — 5 tools with 40+ actions
├── models.py           # Core XML model (DrawioFile, Diagram, MxCell)
├── styles.py           # Style builder, presets, and themes
├── layout.py           # Layout helpers (tree, grid, port distribution)
├── layout_engine.py    # Advanced layout (Sugiyama, edge routing, polish)
└── validation.py       # Input validation

---

📝 参与贡献

有关缺陷报告、功能请求和拉取请求的指南，请参阅 CONTRIBUTING.md。

📄 许可证

MIT © yohasacura