炸裂！Draw.io 官方接入 Claude Code，自然语言直接生成流程图
PART 001 PART 002
✅ 系统架构图（微服务、分布式、云原生）
✅ 业务流程图、数据流程图
✅ UML 类图、时序图、用例图
✅ 网络拓扑图、机房部署图
✅ ER 数据库关系图
✅ 组织架构图、思维导图
生成新图：自然语言描述需求，直接出图
修改旧图：上传已有 .drawio 文件，指令 “调整布局、增加模块、修改连线”，AI 自动修改并保持原有样式。
PART 003
无需安装：直接使用官方托管服务 https://mcp.draw.io/mcp ，零本地配置
核心体验：在聊天界面中直接嵌入交互式图表预览，无需跳转
格式支持：仅支持 XML 格式图表，不直接支持 CSV/Mermaid
编辑方式：点击聊天中的「Open in draw.io」按钮，跳转编辑器修改
适配工具：Claude.ai、VS Code 及所有支持 MCP 协议的客户端
最佳场景：快速预览图表、轻量对话场景、不想安装任何本地工具的用户
准备支持 MCP 的客户端：确保你使用的 AI 工具（如 Claude.ai、VS Code 的 MCP 插件）支持 MCP 协议 添加托管服务端点：在客户端的 MCP 配置中，添加官方托管地址 https://mcp.draw.io/mcp 发起图表生成请求：在对话中向 AI 助手描述图表需求（如 “创建一个电商订单流程的流程图”） 查看与编辑：AI 生成的图表会直接嵌入聊天窗口，点击「Open in draw.io」即可跳转编辑器修改
需本地安装：通过 npm 包 @drawio/mcp 运行本地服务
核心体验：AI 生成图表后，直接在浏览器中打开 draw.io 编辑器，图表已自动加载
格式支持：支持 XML、CSV、Mermaid 三种格式，兼容性最强
编辑方式：直接在打开的 draw.io 编辑器中修改，无需额外操作
适配工具：Claude Desktop、所有支持 MCP 协议的本地客户端
最佳场景：本地桌面工作流、需要直接编辑图表、多格式支持的用户
前置依赖安装：确保本地已安装 Node.js 18+ 版本 安装工具服务器
npx@drawio/mcp
npm install -g@drawio/mcpdrawio-mcp
macOS/Library/Application Support/Claude/claudedesktopconfig.json
Windows： %APPDATA%\Claude\claudedesktopconfig.json
{ "mcpServers": { "drawio-mcp": { "command": "npx", "args": ["-y", "@drawio/mcp"] } }}
需本地配置：将 draw.io 官方提供的 Skill 文件放入 Claude Code 技能目录，搭配 draw.io 桌面版使用
核心体验：生成 .drawio 原生文件，支持导出 PNG/SVG/PDF 格式
格式支持：仅支持 XML 原生格式（ .drawio ），可导出其他格式
编辑方式：直接在 draw.io 桌面版中打开生成的文件修改
适配工具：Claude Code（终端 / IDE 版）
最佳场景：本地开发工作流、需要生成可导出文件、重度使用 Claude Code 的用户
前置准备
安装 Claude Code： `npm install -g @anthropic-ai/claude-code`
安装 draw.io 桌面版（https://app.diagrams.net/）
从 draw.io 官方仓库下载 Skill 文件： https://github.com/jgraph/drawio-mcp/tree/main/skill-cli
在你的项目目录中创建 `.claude/skills/` 文件夹
将下载的 `drawio` 文件夹放入 `.claude/skills/` 目录下，确保结构为：
your-project/└── .claude/ └── skills/ └── drawio/ └── SKILL.md
在项目目录中启动 Claude Code： `claude code`
向 Claude Code 发送指令（如 “使用 drawio 技能创建一个系统架构图，输出为 .drawio 文件并导出 SVG”）
Claude Code 会生成 .drawio 文件，你可以直接用 draw.io 桌面版打开编辑，也可使用指令导出为 PNG/SVG/PDF
零安装配置：无需任何本地工具，仅需在 Claude 项目中添加指令即可使用
核心体验：AI 通过 Python 代码生成 draw.io 可直接打开的链接，点击即可跳转编辑器
格式支持：支持 XML、CSV、Mermaid 三种格式
编辑方式：点击链接跳转 draw.io 网页编辑器修改
适配工具：Claude.ai（需使用 Projects 功能）
最佳场景：快速上手、无安装权限、临时生成图表的用户
创建 Claude 项目：登录 Claude.ai，新建一个 Project 添加项目指令：在项目设置中，将 draw.io 官方提供的指令模板粘贴到「Instructions」中（模板地址：https://github.com/jgraph/drawio-mcp/blob/main/project-instructions/instructions.md） 使用方式：在项目对话中向 Claude 描述图表需求，Claude 会生成一个 draw.io 链接，点击链接即可在浏览器中打开并编辑图表
PART 004
快速输出系统架构图、云原生部署图，告别手动拖放
评审时实时修改，指令 “增加熔断模块、调整服务依赖”，AI 自动更新
一键生成多版本架构图，对比不同方案优劣
写设计文档时，直接生成时序图、类图、流程图，无需额外工具
复盘问题时，生成数据流向图、调用链路图，快速定位瓶颈
学习新技术时，生成架构示意图，辅助理解核心逻辑
梳理业务流程时，一句话生成业务流程图、用户旅程图
需求评审时，实时调整流程分支，同步修改需求文档
输出 PRD 时，直接嵌入可编辑图表，降低沟通成本
论文配图：生成实验流程图、系统模型图、数据结构图
学习笔记：生成思维导图、知识架构图，辅助记忆理解
PART 005
✅ 原生格式 ：生成 .drawio 可编辑文件，而非图片
✅ 专业图库 ：内置 Draw.io 50+ 专业图库，样式更规范
✅ 免费开源 ：无额外付费，无功能阉割
✅ 本地隐私 ：数据本地存储，不上传第三方服务器 draw.io
PART 006
