AI导哈

绘图生成服务器

一个通过程序化方式生成draw.io/diagrams.net XML文件的MCP服务器，支持多种AI客户端创建流程图、UML图、ER图等多种图表。

  • by yohasacura
  • Python
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 yohasacura/drawio-mcp

使用说明

🎨 Draw.io MCP服务器

让你的AI助手创建漂亮的draw.io图表——只需描述你想要什么。

一 主控程序 生成的服务器 draw.io / diagrams.net 以编程方式创建XML文件。使用 GitHub Copilot（代理模式）, 克劳德桌面, 光标，以及任何兼容MCP的客户端。

✨ 它能做什么？

能力 详细信息
🏗️ 图表类型 流程图、UML、ER、C4、BPMN、思维导图、架构、网络、Kubernetes等
🎨 样式 310+形状预设，44种边缘样式，21种颜色主题
📐 自动布局 杉山DAG、树、水平、垂直、网格、流程图引擎
🔀 智能路由 具有自动端口分配的障碍感知正交边缘路由
✏️ 完全编辑 创建后添加、移动、调整大小、删除、重新设置任何元素的样式
📄 多页 复杂图表的多个页面和图层
📥 导入/导出 加载现有 .drawio 文件、修改和回存
🧹 一键清理 自动修复布局、重叠、边和标签的波兰语命令

🚀 快速开始

先决条件

从PyPI安装

pip install drawio-mcp

或者使用紫外线：

uvx drawio-mcp

从源代码安装

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

🔌 使用您的AI客户端进行设置

VS代码（GitHub副本）

添加到您的VS代码设置或 .vscode/mcp.json:

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

然后使用 代理模式下的副驾驶 并要求它创建图表。

克劳德桌面

添加到您的 claude_desktop_config.json:

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

光标

添加到光标MCP设置中：

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

💬 示例提示

连接后，在您的AI聊天中尝试以下操作：

提示 你得到了什么
“为用户登录过程创建流程图” 带有决策节点和错误路径的登录流
“为电子商务系统创建C4上下文关系图” 包含参与者和外部系统的系统上下文
使用用户、订单和产品制作UML类图 带关系的类图
“为博客数据库创建ER图” 带表的实体关系图
“为初创公司构建组织结构图” 具有角色和层次结构的树形布局
“用API网关、Lambda、DynamoDB绘制AWS架构” 云架构图
“创建Kubernetes部署图” K8s图，带Pod、服务、入口
“使用服务器和防火墙构建网络拓扑” 带有设备图标的网络图

💡 提示： 总是以结尾 “…并将其保存为 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+ Vertex Presets (click to expand)

基本形状： 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_SYSTEM C4_CONTAINER C4_COMPONENT C4_PERSON C4_EXTERNAL C4_DATABASE C4_WEB_BROWSER

呃： 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、思科、实体模型/线框、信息图等

44 Edge Presets (click to expand)

概述： 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_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 Color Themes (click to expand)

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

Connection Ports (click to expand)

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

📝 贡献

看 贡献.md 有关错误报告、功能请求和拉取请求的指南。

📄 许可证

麻省理工学院 © 尤哈萨库拉

相关 MCP