用官方 drawio-mcp 让智能体画出可编辑的架构图：四条路线与 Mermaid/CSV 导入实操

# 托管端点（无需安装）：
https://mcp.draw.io/mcp

# 在 Claude.ai：连接器目录里直接一键添加 draw.io
# 在 Cursor（2.6+）：Agent 聊天里一键安装，
#   图直接内联渲染在对话中

# 两个工具：
#   create_diagram  把 XML 渲染成内联交互图
#   search_shapes   按关键词搜 10000+ 形状
#     （AWS / Azure / GCP / UML / BPMN /
#      Kubernetes / Cisco / 电气图 等图库）

这条路最适合「边聊边出图」：search_shapes 先找到正确形状（返回可直接粘进 XML 的 style 字符串），再调 create_diagram 渲染，这是官方建议的调用顺序——别让模型凭记忆编形状样式，先查再画，图才长得对。编辑时点图上的 Open in draw.io 按钮，新标签页打开完整编辑器继续精修。想数据不出门，官方仓库也支持用 Node.js 本地跑或部署自己的 Cloudflare Workers 实例。

# 快速启动（推荐）：
npx @drawio/mcp

# Claude Desktop 配置文件里加：
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@drawio/mcp"]
    }
  }
}
# Windows 配置文件在 %APPDATA%\Claude\ 下

# Claude Code 一条命令接入：
claude mcp add drawio -- npx -y @drawio/mcp

Tool Server 是最早期的官方形态，特点是支持三种输入格式：原生 XML、CSV、Mermaid。三个工具与输入一一对应：open_drawio_xml（原生 draw.io XML）、open_drawio_csv（表格转图，组织架构图神器）、open_drawio_mermaid（Mermaid 语法转可编辑 draw.io 图）。每个工具都带 lightbox（只读预览）与 dark（暗色模式）可选参数。工作原理：收到内容后用 pako 做 deflateRaw 压缩、Base64 编码，生成带 #create 哈希参数的 draw.io URL，浏览器打开即所见。

# Mermaid：时序图
# "Use open_drawio_mermaid to create a sequence
#  diagram showing OAuth2 authentication flow"

# CSV：组织架构图
# "Use open_drawio_csv to create an org chart:
#  CEO -> CTO, CFO; CTO -> 3 Engineers"

# XML：AWS 架构图
# "Use open_drawio_xml to create a detailed AWS
#  architecture diagram with VPC, subnets,
#  and security groups"

三条提示跑完，浏览器里各开一张可编辑的 draw.io 图，验收就过了。实际使用中 Mermaid 路线最适合「先把结构说清楚」：你用几行 Mermaid 描述流程，AI 补全细节并转成 draw.io 格式，之后的一切精修都在 draw.io 里做——AI 负责从零到八十分，你负责最后二十分，这是最省力的分工。

# Claude Code 里两条命令：
/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

# 默认行为：生成 .drawio 文件并在 draw.io 中打开
# 指定导出格式（png / svg / pdf）：
#   /drawio:drawio png
#   （导出走本地 draw.io Desktop 的 CLI）

# 浏览器链接模式（无需 Desktop）：
#   /drawio:drawio url
#   （Node.js zlib 压缩 XML 后生成
#    app.diagrams.net 直达链接）

插件路线的差异点在文件交付：默认产出 .drawio 源文件（可继续编辑的持久副本）；提格式就导出 .drawio.png / .svg / .pdf，且导出文件内嵌 XML、拿回 draw.io 仍可编辑。导出 PNG/SVG/PDF 依赖本机装有 draw.io Desktop（它用 Desktop 的 CLI 完成，which drawio 能找到才行）；没装 Desktop 也不报错废弃——官方行为是保留 .drawio 文件、什么都不上传。插件同样适用于 Codex CLI 与 GitHub Copilot CLI（官方仓库提供了镜像插件）。

# 官方两个可选布局后处理（相互独立、不可叠加）：
#   ELK auto-layout（postLayout: "elk"）
#     节点重新排成分层布局，边随布局重排
#     App Server 的 create_diagram 支持
#   libavoid routing（routing: "libavoid"）
#     保持节点位置，只让连接线正交绕开形状
#     App Server 与 Tool Server（v1.3.0+）支持
#
# 选型口诀：
#   全自动排版 -> ELK；手动摆好节点只整理连线 -> libavoid
#   Mermaid 图自带布局，两种都不需要

AI 出图走形往往不是内容错而是布局乱，这两个官方布局参数就是治它的：ELK 适合「让 AI 全权排版」，libavoid 适合「你摆好了关键节点的位置、只嫌连线穿插」。XML 侧再记两条官方规范：AI 生成推荐用简化格式（只写 mxGraphModel 元素，省去外层包装，draw.io 打开时自动补全）；不要生成压缩格式——deflate 加 Base64 的压缩表示虽然省 URL 空间，但不可读、不可校验、token 消耗反而更大，官方明确建议 AI 不要生成它。

# 官方数据驻留说明（各路线）：
#   托管 App Server（mcp.draw.io）
#     -> 图数据随 MCP 请求发到 draw.io 服务器
#   本地 Tool Server / Claude Code 插件
#     -> 图不出本机（导出也只走本地 Desktop CLI）
#   严格数据限制环境：
#     自托管 App Server（仓库支持部署到
#     Cloudflare Workers）或用本地路线

官方在数据驻留一节写得很硬核：仓库里不存在任何云端光栅化回退路径，convert.diagrams.net 不会被调用，本地依赖缺失时宁可保留文件也不偷偷上传。所以选型规则很简单：聊天内联预览选托管 App Server（介意数据出境就自托管）；本地工作流与文件交付选 Tool Server 或插件；只想快速试一下选 Project Instructions（往 Claude Project 里粘官方指令，用 Python 生成 draw.io 链接，零安装）。