Drawio Mcp

io.github.yohasacura由 GitHub 帳號 yohasacura 發布v1.0.2更新於 Oct 24, 2026

MCP server for creating and editing draw.io / diagrams.net XML files programmatically.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

本機 MCP 伺服器,讓助理建立、編輯、設定樣式並自動排版 draw.io / diagrams.net 圖表,並存成 .drawio XML 檔案。

可以做什麼
  • 建立、載入、匯入、儲存與列出圖表檔案,支援多頁面與圖層
  • 新增、更新與刪除頂點、連線、群組、標題與圖例
  • 套用形狀、連線與配色主題預設,並列出可用預設
  • 自動排版與整理:Sugiyama、樹狀、格線、流程圖、對齊、連線走線、重疊修正與一鍵美化
  • 唯讀檢查圖表:儲存格、重疊、連接埠與基本資訊
適用情境
適合讓助理把描述轉成可編輯的圖表檔案,例如流程圖、UML、ER、C4、BPMN、心智圖、雲端架構或網路拓撲;也適合載入既有 .drawio 檔案、修改後再存回。
執行需求
以 stdio 方式在本機執行 PyPI 套件 drawio-mcp,需要 Python 3.11+ 以及 uv(建議)或 pip。未宣告帳號、API 金鑰或環境變數。僅支援桌面版 MCP 用戶端。
安裝前請注意
會在本機寫入並覆寫圖表檔案,包括把修改存回已載入的 .drawio 檔案,請只指向願意更動的路徑。未宣告任何憑證或網路存取。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Drawio Mcp,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

🎨 Draw.io MCP Server

[CI] [PyPI] [Python] [License: MIT]

Let your AI assistant create beautiful draw.io diagrams — just describe what you want.

An MCP server that generates draw.io / diagrams.net XML files programmatically. Works with GitHub Copilot (agent mode), Claude Desktop, Cursor, and any MCP-compatible client.


✨ What Can It Do?

CapabilityDetails
🏗️ Diagram typesFlowcharts, UML, ER, C4, BPMN, mindmaps, architecture, network, Kubernetes, and more
🎨 Styling310+ shape presets, 44 edge styles, 21 color themes
📐 Auto-layoutSugiyama DAG, tree, horizontal, vertical, grid, flowchart engines
🔀 Smart routingObstacle-aware orthogonal edge routing with automatic port distribution
✏️ Full editingAdd, move, resize, delete, restyle any element after creation
📄 Multi-pageMultiple pages and layers for complex diagrams
📥 Import/ExportLoad existing .drawio files, modify, and save back
🧹 One-click cleanupPolish command that auto-fixes layout, overlaps, edges, and labels

🚀 Quick Start

Prerequisites

  • Python 3.11+
  • uv (recommended) or pip

Install from PyPI

bash
pip install drawio-mcp

Or with uv:

bash
uvx drawio-mcp

Install from source

bash
git clone https://github.com/yohasacura/drawio-mcp.gitcd drawio-mcpuv syncuv run drawio-mcp

🔌 Setup with Your AI Client

VS Code (GitHub Copilot)

Add to your VS Code settings or .vscode/mcp.json:

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

Then use Copilot in Agent mode and ask it to create diagrams.

Claude Desktop

Add to your claude_desktop_config.json:

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

Cursor

Add to your Cursor MCP settings:

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

💬 Example Prompts

Once connected, try these in your AI chat:

PromptWhat you get
"Create a flowchart for a user login process"Login flow with decision nodes and error paths
"Create a C4 context diagram for an e-commerce system"System context with actors and external systems
"Make a UML class diagram with User, Order, and Product"Class diagram with relationships
"Create an ER diagram for a blog database"Entity-relationship diagram with tables
"Build an org chart for a startup"Tree layout with roles and hierarchy
"Draw an AWS architecture with API Gateway, Lambda, DynamoDB"Cloud architecture diagram
"Create a Kubernetes deployment diagram"K8s diagram with pods, services, ingress
"Make a network topology with servers and firewalls"Network diagram with device icons

💡 Tip: Always end with "...and save it as filename.drawio" to get a file you can open in draw.io.


🛠️ Tool Reference

The server exposes 5 tools, each with an action parameter:

diagram — Lifecycle

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

draw — Content

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

style — Appearance

build · apply_theme · list_vertex_presets · list_edge_presets · list_themes

layout — Positioning

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

inspect — Read-only

cells · overlaps · ports · info


🎨 Style Reference

310+ Vertex Presets (click to expand)

Basic shapes: RECTANGLE ROUNDED_RECTANGLE ELLIPSE CIRCLE DIAMOND TRIANGLE HEXAGON CYLINDER CLOUD PARALLELOGRAM ACTOR PROCESS DOCUMENT DATA_STORE NOTE CARD CALLOUT TEXT CUBE STAR FOLDER and more

Themed boxes: BLUE_BOX GREEN_BOX ORANGE_BOX RED_BOX YELLOW_BOX PURPLE_BOX GRAY_BOX DARK_BOX TEAL_BOX WHITE_BOX

Flowchart: FLOWCHART_PROCESS FLOWCHART_DECISION FLOWCHART_TERMINATOR FLOWCHART_DATA FLOWCHART_DOCUMENT FLOWCHART_DATABASE FLOWCHART_START FLOWCHART_END and 25+ more

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 and more

BPMN: BPMN_TASK BPMN_START_EVENT BPMN_END_EVENT BPMN_GATEWAY BPMN_POOL BPMN_LANE and more

Architecture: ARCH_SERVICE ARCH_DATABASE ARCH_QUEUE ARCH_CLOUD ARCH_API ARCH_GATEWAY ARCH_CONTAINER ARCH_FIREWALL ARCH_SERVER ARCH_LOAD_BALANCER and 20+ more

Network: NETWORK_SERVER NETWORK_ROUTER NETWORK_SWITCH NETWORK_FIREWALL NETWORK_CLOUD NETWORK_STORAGE and 40+ more

Cloud/K8s: AWS_CLOUD AWS_LAMBDA AWS_S3 AWS_EC2 AWS_RDS AWS_SQS K8S_POD K8S_SERVICE K8S_DEPLOYMENT K8S_INGRESS and more

Containers: SWIMLANE GROUP GROUP_TRANSPARENT GROUP_DASHED

Plus: State machine, Sequence diagram, Mindmap, DFD, SysML, ArchiMate, Cisco, Mockup/Wireframe, Infographic, and more

44 Edge Presets (click to expand)

General: DEFAULT ORTHOGONAL STRAIGHT CURVED ENTITY_RELATION DASHED DOTTED BIDIRECTIONAL NO_ARROW

Styled: ROUNDED ROUNDED_DASHED THICK THICK_ROUNDED

Colored: 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

Flow: 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


🧑‍💻 Development

bash
git clone https://github.com/yohasacura/drawio-mcp.gitcd drawio-mcpuv sync
# Run testsuv run pytest tests/ -v
# Run the server locallyuv run drawio-mcp

Project Structure

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

See CONTRIBUTING.md for guidelines on bug reports, feature requests, and pull requests.

📄 License

MIT © yohasacura

來源:README.md,提交 036573d

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包,因此其工具未知。

版本歷史

1
  1. v1.0.2最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手;SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分