Drawio 中文官网

炸裂！Draw.io 官方接入 Claude Code，自然语言直接生成流程图

Tue, 28 Apr 2026 13:25:31 +0800

如果你是程序员、架构师、产品经理，或者经常和流程图、架构图打交道，那今天这个消息绝对要关注： Draw.io（diagrams.net）官方正式接入 Claude Code，推出专属 MCP 服务，实现自然语言一键生成专业可编辑图表。

作为全球最受欢迎的免费开源绘图工具，Draw.io 这次和 Claude Code 的强强联合，直接把 “画图这件事” 的效率拉到天花板。不需要手动拖放、不用调整样式、不用纠结布局，一句话就能生成可用的架构图、流程图、时序图，还能直接二次编辑。

PART 001

Draw.io × Claude Code

Draw.io（diagrams.net）：免费、开源、跨平台的绘图工具，Visio 最强平替，覆盖流程图、UML、网络拓扑、ER 图、架构图等 50+ 专业图库，数据本地存储，隐私拉满 draw.io 。

Claude Code：Anthropic 推出的 AI 编程助手，擅长代码生成、架构设计、自然语言理解，在技术文档、系统设计、复杂逻辑拆解上表现突出。

在这次合作之前，Draw.io 已支持接入 ChatGPT、Gemini 等大模型，但 Claude Code 是首个获得官方 MCP 服务器支持的 AI 助手，意味着深度整合、原生兼容、无第三方插件依赖 draw.io 。

PART 002

核心能力：一句话生成，全流程可编辑

1. 自然语言生成全类型图表

支持生成几乎所有技术场景图表：

✅ 系统架构图（微服务、分布式、云原生）

✅ 业务流程图、数据流程图

✅ UML 类图、时序图、用例图

✅ 网络拓扑图、机房部署图

✅ ER 数据库关系图

✅ 组织架构图、思维导图

示例指令：

“画一个电商微服务架构图，包含 API 网关、用户服务、订单服务、支付服务、Redis 缓存、MySQL 数据库”

“生成用户登录注册流程图，包含验证码、短信验证、密码找回分支”

2. 原生 .drawio 格式，直接编辑

Claude Code 生成的不是普通图片，而是 Draw.io 原生 XML 格式的 .drawio 文件，生成后可直接在 Draw.io 网页版 / 桌面版打开，所有元素（形状、线条、文字、布局）均可自由修改，无需重新生成。

3. 无需额外服务器，一键部署

官方 MCP 服务器轻量化设计，无需独立部署、无需额外配置，通过 npm 或 npx 一键安装，支持全局注册或项目局部配置，1 分钟完成部署。

4. 双向联动：AI 修改 + 手动微调

支持两种核心操作：

生成新图：自然语言描述需求，直接出图

修改旧图：上传已有 .drawio 文件，指令 “调整布局、增加模块、修改连线”，AI 自动修改并保持原有样式。

PART 003

接入方式

方法一：MCP App Server（托管式应用服务器）

核心特点

无需安装：直接使用官方托管服务 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」即可跳转编辑器修改

方法二：MCP Tool Server（本地工具服务器）

核心特点

需本地安装：通过 npm 包 @drawio/mcp 运行本地服务

核心体验：AI 生成图表后，直接在浏览器中打开 draw.io 编辑器，图表已自动加载

格式支持：支持 XML、CSV、Mermaid 三种格式，兼容性最强

编辑方式：直接在打开的 draw.io 编辑器中修改，无需额外操作

适配工具：Claude Desktop、所有支持 MCP 协议的本地客户端

最佳场景：本地桌面工作流、需要直接编辑图表、多格式支持的用户

详细步骤

前置依赖安装：确保本地已安装 Node.js 18+ 版本
安装工具服务器

推荐方式（npx 临时运行）：

npx@drawio/mcp

全局安装方式：

npm install -g@drawio/mcpdrawio-mcp

3. 配置 MCP 客户端

macOS/Library/Application Support/Claude/claudedesktopconfig.json

Windows： %APPDATA%\Claude\claudedesktopconfig.json

以 Claude Desktop 为例：

找到配置文件，添加服务器配置：

{  "mcpServers": {    "drawio-mcp": {      "command": "npx",      "args": ["-y", "@drawio/mcp"]    }  }}

保存文件并重启 Claude Desktop

4. 使用方式：向 AI 助手描述图表需求，AI 会调用工具服务器，自动在浏览器中打开 draw.io 编辑器并加载生成的图表

方法三：Skill + CLI（Claude Code 技能文件）

核心特点

需本地配置：将 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/）

2. 安装 Skill 文件

从 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

3. 配置与使用

在项目目录中启动 Claude Code： `claude code`

向 Claude Code 发送指令（如 “使用 drawio 技能创建一个系统架构图，输出为 .drawio 文件并导出 SVG”）

Claude Code 会生成 .drawio 文件，你可以直接用 draw.io 桌面版打开编辑，也可使用指令导出为 PNG/SVG/PDF

方法四：Project Instructions（Claude 项目指令）

核心特点

零安装配置：无需任何本地工具，仅需在 Claude 项目中添加指令即可使用

核心体验：AI 通过 Python 代码生成 draw.io 可直接打开的链接，点击即可跳转编辑器

格式支持：支持 XML、CSV、Mermaid 三种格式

编辑方式：点击链接跳转 draw.io 网页编辑器修改

适配工具：Claude.ai（需使用 Projects 功能）

最佳场景：快速上手、无安装权限、临时生成图表的用户

详细步骤

方法	是否需要安装	编辑便捷度	格式支持	适配工具	推荐场景
MCP App Server	❌ 无需	需跳转	XML 仅	Claude.ai、VS Code	快速预览、轻量对话
MCP Tool Server	✅ npm 安装	直接编辑	全部 3 种	Claude Desktop、所有 MCP 客户端	本地桌面工作流、多格式需求
Skill + CLI	✅ 配置技能文件 + 桌面版	直接编辑	XML + 导出	Claude Code	本地开发、文件导出需求
Project Instructions	❌ 无需	点击链接跳转	全部 3 种	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 自动更新

一键生成多版本架构图，对比不同方案优劣

2. 程序员 / 开发工程师

写设计文档时，直接生成时序图、类图、流程图，无需额外工具

复盘问题时，生成数据流向图、调用链路图，快速定位瓶颈

学习新技术时，生成架构示意图，辅助理解核心逻辑

3. 产品经理 / 业务分析师

梳理业务流程时，一句话生成业务流程图、用户旅程图

需求评审时，实时调整流程分支，同步修改需求文档

输出 PRD 时，直接嵌入可编辑图表，降低沟通成本

4. 学生 / 科研人员

论文配图：生成实验流程图、系统模型图、数据结构图

学习笔记：生成思维导图、知识架构图，辅助记忆理解

PART 005

对比优势：比传统方式强在哪？

Draw.io × Claude Code vs 传统手动绘图

对比维度	传统手动绘图	Draw.io × Claude Code
耗时	30-60 分钟 / 张	10-30 秒 / 张
上手门槛	需熟悉工具操作、布局逻辑	零门槛，会说话就能用
编辑灵活性	全手动调整，易出错	AI 生成 + 手动微调，双向灵活
复用性	需重复绘制相似图表	指令复用，一键生成多版本
协作效率	需导出图片、发送、修改、同步	直接共享 .drawio 文件，实时协作

Draw.io × Claude Code vs 其他 AI 绘图工具

✅ 原生格式：生成 .drawio 可编辑文件，而非图片

✅ 专业图库：内置 Draw.io 50+ 专业图库，样式更规范

✅ 免费开源：无额外付费，无功能阉割

✅ 本地隐私：数据本地存储，不上传第三方服务器 draw.io

PART 006

总结：AI 绘图时代，效率直接拉满

Draw.io 官方接入 Claude Code，不是简单的功能叠加，而是绘图工具的一次效率革命。

对个人而言，告别繁琐的手动拖放，一句话生成专业图表，节省 80% 绘图时间；对团队而言，统一绘图工具、规范图表样式、提升协作效率，让架构设计、业务梳理、文档输出更高效。

目前该功能已正式上线，支持所有主流平台（Windows/macOS/Linux/ 网页版），赶紧安装体验，感受自然语言绘图的魅力！

项目地址：https://github.com/jgraph/drawio-mcp

目前已有3.2K+ Star，是 draw.io 官方团队维护的，更新比较积极，有兴趣可以去看看。

在线Web版Drawio-desktop 桌面最新版 29.7.9

Tue, 28 Apr 2026 10:44:40 +0800

中文drawio 类似 visio，它是一款开源的在线图表绘制工具，可以绘制各种类型的图表，如流程图、组织结构图、网络拓扑图等。
它适合应用在企业、学校、科研机构等，用于项目管理、技术文档、教学演示、业务流程梳理等场景。

优势

价格：开源免费
无需安装：基于浏览器运行，在线直接打开
零门槛上手：中文drawio 非常适合推荐给新手使用，它支持拖拽、自动布局等功能，能够快速完成绘图
超市级模板库：架构图、UML、泳道图，拖进来就能直接改

入门教程

首先，访问中文Drawio 的官方网站 https://www.drawio.com.cn/

打开后，你将看到以下界面，由于我们是第一次使用，因此请选择【创建新绘图】选项。

在【创建新绘图】界面中，
你可以看到对话框的左侧是一个丰富的分类列表，而右侧展示了该分类下的业务模板。
在本例中，我们选择了【基本】分类下的第2个业务模板【类图】，确认无误后，点击【创建】按钮即可完成模板创建。
注：在本地模式下，会弹出一个文件选择框让你选择保存到哪个文件中。

接下来，您会在主界面看到一个已创建好的【类图】。
该类图包含了一些常见的类图图形元素，以及相应的文本标注和连接线。

在开始修改【类图】之前，我们先来熟悉一下中文drawio 的主界面及其功能。
主界面的左侧是图形元素列表，里面提供了丰富的图形元素供我们选择。
我们可以通过单击或拖拽的方式，将所需的图形元素添加到画布上。

主界面右侧区域为属性面板，其功能会根据选中目标而变化：
当选中某个目标时，该面板会显示为选定目标的属性面板，用于调整该目标的相关属性。
当未选中任何目标时，该面板则会显示为画布的属性面板，其中包含了网格、背景、宽高、缩放等画布相关设置选项。

接下来我们回到左侧的【图形元素】列表，尝试为【类图】添加新的图形元素。
在本例中，我们选择新增一个正方形到类图中。
将它直接拖到画布中，如下图所示：

双击该正方形的中心点，即可输入自定义文本
在本列中，我们输入了：boss

编辑文本完成后，按下 Esc 键或点击画布的空白区域，即可退出文本编辑模式。
此时，中文drawio 会重新选中该图形，右侧面板也会切换为图形的属性面板。
在属性面板中，您可以对图形的外观样式（如颜色、边框等）和文本样式（如字体、字号等）进行修改。
在本例中，我们将图形的样式修改为绿色。

在样式调整完成后，我们接下来将把这个图形与类图连接起来。
如下图所示，图形周围有四个方向的箭头。点击任意方向上的箭头，
中文drawio 会自动识别该方向上的最近图形，并自动为其建立一条连接线。

最后你可以根据需求，拖动图形或连接线的位置，中文drwaio 会自动修正，如下示例。

以上就是本次中文drawio 的使用教程，
它轻松实现了创建了一个类图的工作，并对其进行新增，编辑，修改样式等操作。

Mac版Drawio-desktop 桌面最新版 29.7.9

Tue, 28 Apr 2026 10:44:40 +0800

优势

价格：开源免费
无需安装：基于浏览器运行，在线直接打开
零门槛上手：中文drawio 非常适合推荐给新手使用，它支持拖拽、自动布局等功能，能够快速完成绘图
超市级模板库：架构图、UML、泳道图，拖进来就能直接改

入门教程

首先，访问中文Drawio 的官方网站 https://www.drawio.com.cn/

打开后，你将看到以下界面，由于我们是第一次使用，因此请选择【创建新绘图】选项。

接下来，您会在主界面看到一个已创建好的【类图】。
该类图包含了一些常见的类图图形元素，以及相应的文本标注和连接线。

双击该正方形的中心点，即可输入自定义文本
在本列中，我们输入了：boss

最后你可以根据需求，拖动图形或连接线的位置，中文drwaio 会自动修正，如下示例。

以上就是本次中文drawio 的使用教程，
它轻松实现了创建了一个类图的工作，并对其进行新增，编辑，修改样式等操作。

Windows 版Drawio-desktop 桌面最新版 29.7.9

Tue, 28 Apr 2026 10:44:40 +0800

优势

价格：开源免费
无需安装：基于浏览器运行，在线直接打开
零门槛上手：中文drawio 非常适合推荐给新手使用，它支持拖拽、自动布局等功能，能够快速完成绘图
超市级模板库：架构图、UML、泳道图，拖进来就能直接改

入门教程

首先，访问中文Drawio 的官方网站 https://www.drawio.com.cn/

打开后，你将看到以下界面，由于我们是第一次使用，因此请选择【创建新绘图】选项。

接下来，您会在主界面看到一个已创建好的【类图】。
该类图包含了一些常见的类图图形元素，以及相应的文本标注和连接线。

双击该正方形的中心点，即可输入自定义文本
在本列中，我们输入了：boss

最后你可以根据需求，拖动图形或连接线的位置，中文drwaio 会自动修正，如下示例。

以上就是本次中文drawio 的使用教程，
它轻松实现了创建了一个类图的工作，并对其进行新增，编辑，修改样式等操作。

我关掉 draw.io 的那一刻，突然觉得画图这件事，AI 真该接手了

Mon, 27 Apr 2026 13:32:04 +0800

我关掉 draw.io 的那一刻，突然觉得画图这件事，AI 真该接手了

昨晚十一点，我打开 draw.io，开始拖第一个矩形。

拖到一半，产品经理发来消息："那个架构图能不能改一下，把认证服务单独拆出来？"

我看着那个还没画完的图，默默关掉了 draw.io。

可能你也懂这种感觉。不是不会画，是画图这件事本身就挺反人类的。你明明脑子里逻辑清晰，但非得被拖拽、对齐、调颜色、挪位置这些事情打断，等你把所有节点摆好，思路早不知道飞哪儿去了。

从手动拖拽到 AI 生成的转变，有那么难吗？

然后今天早上，我刷到了 GitHub trending。

draw.io 官方发了一个开源项目，叫 drawio-mcp。3200 多个 Star，官方团队自己维护的，不是第三方野路子。

我当时的反应是——卧槽，draw.io 终于想通了？

画图的痛，画过的人都懂

先说一句，draw.io 这个工具本身没什么问题。免费开源，功能齐全，据说是 99% 的财富 500 强公司都在用。不用登录，不用付费，导出不加水印，文件格式是开放的 XML，放十年都能打开。

说它是绘图工具里的瑞士军刀，不为过。

但这个工具再好，也解决不了一个根本问题——画图这件事，本质上是个体力活。

你想画一个时序图，得先拖出几个对象，然后一条一条连线，每条线还得标注调用关系。画完发现布局不对，又得调整位置。产品经理说逻辑要改，你可能整个图都得重新排版。

我之前帮一个创业公司做技术文档，光是一个业务流程图就改了七个版本。每改一次都得重新调整节点位置、连线走向、标注文字。前后花了三个多小时，真正花在"想清楚业务逻辑"上的时间可能不到二十分钟。

这种经历，我估计屏幕前的你也不陌生。

画图占用的不只是时间，还有注意力。你本来在思考业务逻辑，结果被拖拽、对齐、调色这些操作打断，思路就断了。等你好不容易把图画完，刚才想到的那个绝妙的设计思路可能早就忘了一半。

所以当我知道 draw.io 官方出了个 AI 工具的时候，我第一反应是——这东西早就该有了。

MCP 协议：让 AI 从"参谋"变成"助理"

drawio-mcp 这个项目，核心靠的是 MCP 协议。

MCP 全称 Model Context Protocol，是 Anthropic 推出的一套标准，定义了 AI 模型怎么调用外部工具。翻译成人话就是，给 AI 接了一套接口，让它能操作真实的工具。

这句话听起来好像没什么，但它的含义非常深。

以前的 AI 能干什么？生成文字。生成图片。生成代码。它给你一个结果，你自己去用。AI 是个"参谋"，不是"执行者"。

MCP 协议出现之后，AI 开始能调用工具了。它可以帮你发邮件、管理日历、操作数据库、现在还能帮你画图。AI 从"给你建议"变成了"帮你做事"。

这是一个质的飞跃。

你想啊，以前你让 AI 帮你画个图，它给你描述一下："你可以在 draw.io 里创建一个矩形，然后拖一条线连过去，标注上 API Gateway……"

你听完还是得自己动手。

现在不一样了。现在你跟 AI 说"画个微服务架构图"，它直接给你生成 draw.io 的 XML 文件，打开就能编辑。图准不准、布局好不好，AI 一次性搞定，你只需要微调细节。

这就不是参谋了，这是给你配了一个不用发工资的助理。

drawio-mcp 就是在这个框架下诞生的。它让 Claude 这类 AI 能直接调用 draw.io 的能力，生成可编辑的图表文件。整个流程变成了——你说话，AI 画图，你改细节。

省掉的那一步"自己动手拖拽"，听起来不多，但体验过就知道，完全是两种东西。

四种玩法，我推荐第三种

drawio-mcp 提供了四种接入方式，各有各的适用场景。我测试了一圈，发现这个项目在兼容性上是真的下了功夫的。

方式一：聊天窗口直接渲染

这种方式用的是 MCP Apps 协议，图表能直接显示在聊天界面里，不用跳转网址。官方提供了一个托管地址，配置到 Claude.ai 的远程 MCP 服务器里就行，不需要安装任何东西。

它提供两个核心工具：create_diagram，传入 draw.io XML，直接渲染成图表，支持缩放、平移、图层切换，还有一个"在 draw.io 中打开"的按钮，方便你后续继续编辑。search_shapes，搜索 draw.io 内置的 10000+ 个形状，覆盖 AWS、Azure、GCP、Kubernetes、UML、BPMN 等各类图形库。

用起来很简单，你直接在 Claude 里说："帮我画个用户注册流程图，包括邮箱验证和手机验证两个分支。"然后图就出来了。

说实话我当时试的时候还有点不敢相信——就这么一句话，图就出来了？结果还真是。

方式二：浏览器打开编辑器

这是最早发布的版本，已经发布到了 npm，一行命令就能启动：

npx @drawio/mcp

生成图表后，会在浏览器里自动打开 draw.io 编辑器。支持 XML、CSV、Mermaid.js 三种格式，还有灯箱模式和深色模式。

比如你在 Claude Desktop 里说："画个微服务架构图，包括 API Gateway、三个服务、Redis 缓存和 MySQL 数据库。"Claude 生成完之后，浏览器直接弹出 draw.io 编辑器，你可以在里面直接调整细节。

这种适合用 Claude Desktop 或者其他本地 MCP 客户端的人。

方式三：Claude Code Skill（我推荐这个）

如果你日常在写代码，顺便要画个图，这种方式是最顺滑的。它不需要单独运行 MCP 服务器，只需要复制一个技能文件到本地就行。

全局安装：

mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md

装好之后，在 Claude Code 里直接用 /drawio 命令就能画图：

/drawio create a flowchart for user login
/drawio sequence diagram for API auth
/drawio png class diagram for the models in src/

Claude Code 会生成 draw.io 的原生 XML，写到 .drawio 文件里，然后自动打开。不依赖任何外部服务，也没有网络请求，纯本地运行。

我自己用的是这种方式。原因很简单——我日常就是在 Claude Code 里写代码的，现在画图不需要切换工具，直接一个命令搞定，效率提升非常明显。

改图也很方便。你说"/drawio add phone verification branch"，AI 直接更新文件，再打开的时候图就变了。产品经理让你改七版，每版五分钟搞定，剩下的时间你可以喝杯咖啡。

方式四：零安装的 Project Instructions

如果你是临时需要，不想折腾安装，也有办法。只要把一段预设说明粘贴到 Claude.ai 的项目指令里，Claude 就会按照规范生成 draw.io 的 URL，直接能用。

适合临时使用、不想折腾安装的场景。

一个细节，让 AI 生成的图真正能用

我测试了好几种 AI 画图工具，发现一个问题——AI 画出来的图，图标经常是不对的。

比如你说"AWS Lambda"，AI 可能给你画个普通方块，配色也不对。你说"Kubernetes Pod"，它可能给你画个圆形。你说"S3 存储桶"，出来的可能就是个文件夹图标。

这种图，你敢给客户看吗？给你老板看？

drawio-mcp 解决这个问题的方案挺聪明的。它内置了 search_shapes 工具，可以搜索 draw.io 官方的 10400+ 个图形，包括 AWS、Azure、GCP、Kubernetes、UML、BPMN、网络拓扑、电气图等等。

AI 生成图表的时候，如果你提到这些专业图标，它会先调用 search_shapes 找到对应的图标样式，然后生成带正确图标的 XML。你拿到的图，图标是对的，不需要自己再去改。

举个例子，你说"画个 AWS 架构图，包括 Lambda、API Gateway、DynamoDB 和 S3"。AI 会先搜索这些服务的官方图标，然后用正确的图标生成架构图。

不会出现 Lambda 被画成普通方块、S3 被画成文件夹这种情况。

这个设计让 AI 生成的图从"能用"变成了"能看"。专业度这块，拿出来汇报不丢人。

导出的文件，还能继续编辑

还有一个细节我觉得值得单独说一下——drawio-mcp 导出的 PNG、SVG、PDF 文件里，都内嵌了原始的 XML 数据。

也就是说，哪怕你导出的是一张图片，把这个图片拖回 draw.io，依然可以继续编辑所有元素。线条、节点、文字、布局，完整保留。

这个设计太重要了。

以前用其他 AI 画图工具，导出是什么就是什么，想要修改？对不起，重新生成。drawio-mcp 相当于给你留了个后悔药。AI 生成之后你觉得某个地方不太对，改就是了，不需要重新让 AI 跑一遍。

你还可以先让 AI 生成一个基础版本，然后自己在 draw.io 里微调。AI 负责 80% 的框架工作，你负责 20% 的精细调整。

这个分工比例，才是最高效的。

这件事背后的意义，比工具本身更大

说了这么多功能层面的东西，我想聊点更深的东西。

drawio-mcp 这件事，不只是一个 AI 画图工具的诞生。它代表了一个更大的趋势——AI 正在从"对话界面"迁移到"操作界面"。

什么叫对话界面？就是你现在跟 AI 交互的主要方式——你说话，它回答。你问，它答。你让它写文章，它给你一篇文章。你让它写代码，它给你一段代码。结果都是"文本"，你拿着文本自己去用。

什么叫操作界面？就是你告诉 AI 一个目标，AI 直接帮你做完一件事。画图、发邮件、管日历、调工具——AI 直接操作真实世界里的工具，把结果放到你手里，你只需要审核和微调。

MCP 协议就是干这个的。它定义了 AI 怎么调用工具的接口标准。有了这套标准，任何工具都可以被 AI 操作，不只是 draw.io，不只是 Claude，未来会有越来越多的工具接入 MCP，形成一个 AI 操作工具的生态系统。

这个趋势用一个类比可能会更清晰。

早期的计算机，需要专业人士用命令行操作。后来图形界面（GUI）出现，普通人也能用电脑了。计算机的受众从"专业人士"扩展到了"所有人"。

AI 现在的阶段，有点像早期的命令行——普通人不知道怎么跟 AI 高效交互，得学习 Prompt 技巧、得理解 AI 的能力边界、得自己把 AI 的输出落地到具体场景。

MCP 协议的出现，相当于 AI 领域的"图形界面时刻"。你不需要学习怎么跟 AI 说话，你只需要说"帮我画个图"，AI 直接帮你做了。门槛大幅降低，受众大幅扩展。

drawio-mcp 可能只是这个大趋势里的一个小例子。但小例子往往最能说明问题。

说真的，这几年我用过不少 AI 工具。有些确实能提效，有些就是噱头。drawio-mcp 这个东西，我觉得是那种真正能进日常流水线的。

不是什么颠覆性的大变革，就是把"拖拽画图"这个琐碎的体力活接走了。你原来得花半小时搞的事情，现在五分钟搞定，剩下的时间去想真正重要的事。

这就够了。

有时候，最好的技术进步不是让你"哇"一声，而是让你用着用着就回不去了，根本不想再碰以前那套落后的方式。

drawio-mcp，就是这种。

项目地址： https://github.com/jgraph/drawio-mcp

好了，聊到这儿。

你有没有发现过自己每天在用、但不知道背后是什么的工具？

Draw.io 24.7.8免费安装包下载及安装教程，一款开源流程图工具，强烈推荐！

Mon, 27 Apr 2026 13:29:38 +0800

软件安装方法如下图：

告别手动拖拽！AI 一键生成架构图！官方开源项目彻底解放双手

Sun, 26 Apr 2026 13:34:02 +0800

对于开发者、架构师、产品同学来说，绘图几乎是日常工作里最耗时又最刚需的一环。业务流程图要反复对齐节点，系统架构图要挨个拖组件、连关系，时序图、ER 图、UML 图更是细节拉满。很多人明明思路已经很清晰，却要花大量时间在拖拽、对齐、排版、改样式上，效率大打折扣。

draw.io一直是行业里公认的免费、开源、无水印、兼容性极强的绘图工具，企业覆盖率极高 —— 据称 99% 的财富 500 强公司都在使用，在 Atlassian 插件市场更是安装量排名第一。它秉持 “隐私优先” 原则，支持将数据存储在任意位置，官方无法访问用户数据，同时兼容 Google Workplace、Sharepoint、Git、Dropbox 等多种办公工具，还支持桌面端离线使用，甚至可通过插件嵌入 Notion，这些优势让它成为无数开发者的绘图首选。但它再好用，也没能解决一个根本问题：绘图依然要手动一点点拼。

最近，[draw.io]官方直接放出大招 —— 开源项目drawio-mcp正式上线，完美补齐这一短板，让 Claude 系列 AI 可以直接生成可编辑的 [draw.io]图表。不用手动布局，一句话生成 XML，打开就能改，目前该项目在 GitHub 上已收获大量关注，成为开发者效率工具的新热门。

draw.io

[draw.io]（现名 [diagrams.net](https://diagrams.net)）由 JGraph 开发，是一款完全开源免费的绘图工具。无需登录、无需付费、无导出水印，支持网页版与全平台客户端，Windows/macOS/Linux 都能流畅使用，甚至有 VS Code 专属版本，满足不同开发者的使用习惯。

在企业场景中，它的渗透率极高，几乎覆盖绝大多数技术团队。文件基于开放 XML 格式，可以直接用编辑器查看、版本管理，非常适合研发流程里的文档协作；支持流程图、架构图、网络拓扑、UML、BPMN、ER 图、云厂商图标等几乎所有研发常用图表，是真正意义上的全能型工具。更重要的是，它的兼容性极强，2005 年创建的图表文件至今仍能正常加载使用，还支持多人实时协作，共享光标同步编辑，这些特性让它在众多绘图工具中脱颖而出。

但它的短板也很明显：绘图过程依然高度依赖手动操作，复杂图表非常耗时。而 drawio-mcp 的出现，就是为了补上这最后一块短板，让绘图效率实现质的提升。

drawio-mcp

drawio-mcp 是 [draw.io]官方推出的MCP 服务端，采用 Apache 2.0 开源协议，可放心用于商业和个人项目，无需担心版权问题。

要理解它的价值，首先要明确 MCP 的含义：MCP 全称 Model Context Protocol，由 Anthropic 定义，用于让 AI 模型安全调用外部工具。简单来说，它相当于给 AI 开了一个 “操作 [draw.io](draw.io)” 的权限，搭建起 AI 与 [draw.io]之间的 “桥梁”，让 AI 能直接生成符合 [draw.io]规范的内容。

drawio-mcp 的核心能力的具体体现为：

让 Claude AI 直接生成标准 [draw.io]XML 结构，无需手动编写

自动在浏览器打开编辑器，或在聊天界面内渲染图表，无需手动跳转

支持搜索官方图形库，保证图标规范不走样，提升图表专业性

导出图片、矢量图、PDF 并内嵌源文件，后续可随时二次编辑

值得一提的是，它不是第三方魔改，而是官方原生实现，仓库内包含 mcp-app-server、mcp-tool-server、shape-search 等多个核心模块，分工明确、持续更新，格式稳定且兼容未来迭代，这也是它能快速获得社区认可的关键原因。

四种接入方式

drawio-mcp 考虑到不同开发者的使用场景，提供了四种完全不同的使用路径，大家可根据自身需求灵活选择，具体差异如下表所示，一目了然：

方式 1：MCP App Server（聊天内直接渲染）

这种方式的核心优势是无需跳转，图表可直接在聊天窗口内渲染，官方提供了现成的托管地址：

https://mcp.draw.io/mcp

不过经实际测试，该托管地址目前存在解析失败问题，具体报错信息为：“网页解析失败，可能是不支持的网页类型，请检查网页或稍后重试”。大家若遇到无法正常访问的情况，可优先尝试其他接入方式；若后续访问恢复，将其配置到 [Claude.ai](Claude.ai) 的远程 MCP 服务即可使用，无需额外安装。此外，该服务器也可通过 Node.js 本地运行，或部署到 Cloudflare Workers，灵活适配不同使用需求。

该方式包含两个核心工具，可满足基础绘图需求：

`create_diagram`：接收 XML 并在聊天内交互式渲染，支持缩放、平移、图层切换，还配备 “Open in [draw.io](draw.io)” 按钮，便于后续进一步编辑优化。

`search_shapes`：检索 10400 + 种图形，覆盖 AWS、Azure、GCP、Kubernetes、UML、BPMN 等各类图形库，返回可直接用于 XML 的样式字符串，确保图表元素规范。

这里有一个小注意点：inline 图表渲染依赖 MCP Apps 扩展，若所使用的宿主工具不支持该扩展，AI 会直接输出 XML 文本，将其复制进 [draw.io]即可正常使用，不影响核心功能。

方式 2：MCP Tool Server（浏览器打开编辑器）

这是 drawio-mcp 最早发布的 MCP 服务器版本，目前已正式发布到 npm 平台，包名为 `@drawio/mcp`，支持 Mermaid 和 ELK 格式预览，功能还在持续优化中。它的使用非常便捷，一行命令即可启动：

npx @drawio/mcp

启动成功后，AI 生成图表后会自动跳转到浏览器 [draw.io]编辑器，支持 XML、CSV、Mermaid.js 三种格式，同时提供灯箱模式和深色模式，适配不同开发者的使用习惯。若需本地开发调试，可进入 mcp-tool-server 目录，执行 `npm install` 和 `npm start` 命令启动本地服务即可。

方式 3：Claude Code Skill（本地开发首选）

对于日常写代码顺便画图的开发者来说，这种方式无疑是首选 —— 无网络依赖、纯本地运行，且新增了边缘路由后处理器，并已集成到所有服务器中，能进一步优化图表生成效果。

它的安装方式分为两种，可根据自身需求选择：

# 全局安装 mkdir -p ~/.claude/skills/drawio cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md # 仅当前项目 mkdir -p .claude/skills/drawio cp drawio/SKILL.md .claude/skills/drawio/SKILL.md

安装完成后，使用起来非常简单，示例如下：

/drawio create a flowchart for user login /drawio sequence diagram for API auth /drawio png class diagram for the models in src/

执行命令后，会自动生成 `.drawio` 文件并打开，全程本地执行，安全又高效。默认生成原生 .drawio 文件，若在命令中指定格式（如 png、svg），则会通过 [draw.io]桌面 CLI 的 `--embed-diagram` 参数导出对应格式文件。

方式 4：Project Instructions（零安装即用）

如果只是临时需要生成图表，不想花费时间配置安装，这种方式就是最优选择。它无需安装任何软件或配置环境，只要使用的是 [Claude.ai](Claude.ai) 的项目功能，将一段预设说明粘贴到项目指令中，告知 Claude 如何生成 [draw.io]的 URL 即可。该方式采用 “单一信息源” 的 XML 生成提示，能确保图表格式规范，真正做到 “粘贴即用”，极大节省临时绘图的时间成本。

多格式导出

Claude Code Skill 支持直接指定导出格式，并且所有格式都内嵌原始 XML，这是它的核心优势之一，也是很多开发者青睐它的原因。

具体导出示例如下：

/drawio png flowchart for user login /drawio svg ER diagram for e-commerce /drawio pdf architecture overview

目前支持的导出类型及特点如下：

`.drawio`：原生源文件，可直接在 [draw.io]中编辑，保留所有原始结构。

`.drawio.png`：图片格式，内嵌 XML，后续将图片拖回 [draw.io]仍可继续编辑。

`.drawio.svg`：矢量图格式，内嵌 XML，放大不失真，且支持二次编辑。

`.drawio.pdf`：PDF 格式，可直接打印，同时内嵌 XML，支持二次编辑。

最大亮点在于：哪怕你导出的是图片或 PDF，再次拖回 [draw.io]依然可以完整编辑，不会丢失任何结构，极大提升了图表的复用性，避免了重复绘图的麻烦。

超万种内置图形

绘图时，图标选择不规范、不精准，往往会影响图表的专业性，而 drawio-mcp 内置图形库超过10400+（据 GitHub 仓库最新更新），能完美解决这一问题，覆盖研发场景各类需求：

AWS / Azure / GCP 三大主流云厂商图标，满足云架构绘图需求。

Kubernetes 全套资源图标，适配容器编排相关图表绘制。

UML、BPMN、网络拓扑、电气图、思科网络图、P&ID 等行业标准图形，覆盖各类研发绘图场景。

这些图形的搜索索引采用离线预构建方式，从 [draw.io]客户端源码（app.min.js）中提取后，直接提交到仓库中，无需联网即可完成搜索，避免了网络问题对绘图效率的影响。通过 `searchshapes` 工具，AI 可以精准检索对应图形样式，避免把专业图标画成普通方框，保证架构图规范统一。若需更新形状索引，可进入 shape-search 目录，执行 `npm install` 和 `DRAWIODEV_PATH=../../drawio-dev node generate-index.js` 命令生成新索引，更新后需重建 MCP App Server worker 以嵌入新索引。

统一技术规范

drawio-mcp 之所以能实现四种接入方式的顺畅联动，核心在于其统一的技术规范 —— 项目内部维护了一份关键文件，所有接入方式都以此为标准：

shared/xml-reference.md

这份文件是所有接入方式共同遵循的 XML 生成规范，涵盖边的路由规则、容器、图层、标签、元数据、深色模式、样式属性、XML 规范性等核心内容，相当于 XML 生成的 “单一信息源”，确保了不同方式生成的图表格式一致。

四种接入方式访问该参考手册的方式虽有不同，但均严格遵循这份规范，具体如下：

MCP App Server：启动 / 构建时读取文件，将规范纳入工具描述。

MCP Tool Server：启动时读取文件，可从仓库或 prepack 打包副本中获取。

Claude Code Skill：运行时通过 GitHub Raw URL 拉取最新规范。

Project Instructions：用户将文件内容复制到 Claude Project 中，确保规范落地。

因此，若需更新 XML 生成规则，只需编辑 `shared/xml-reference.md` 文件，修改会自动同步到所有接入方式，无需单独调整，极大提升了项目维护效率。

同时，图形索引采用离线预构建，不从网络实时拉取，稳定性更强，避免因网络问题影响绘图效率，进一步保障了使用体验。

落地建议

结合实际工作场景，给大家整理了一套最实用的使用路径，可根据自身需求对号入座，提升绘图效率：

临时快速画图→ 使用 Project Instructions，零配置、粘贴即用，无需花费时间搭建环境。
经常用 Claude 网页→ 待 MCP App Server 托管地址恢复后配置使用，或暂时切换其他方式，实现聊天内内嵌预览，无需跳转工具。
本地开发、边写代码边画图→ 优先选择 Claude Code Skill，纯本地运行、无外部依赖，效率最高，且能与开发流程无缝衔接。
习惯桌面编辑器→ 使用 MCP Tool Server，一行命令启动，一键打开浏览器编辑，兼顾桌面操作的便捷性。

整体来看，drawio-mcp 并没有创造新的绘图工具，而是把绘图这件事从 “手工操作” 升级为 “AI 生成 + 微调”，让开发者摆脱繁琐的排版工作，把时间真正花在图表设计本身，这也是它的核心价值所在。

项目地址：

https://github.com/jgraph/drawio-mcp

Draw.io 官方接入了Claude Code，画流程图终于不用自己动手了！

Sun, 26 Apr 2026 13:33:15 +0800

你有没有过这样的经历：明明脑子里已经把架构想得明明白白，结果打开画图软件，拖控件、调对齐、连箭头……大半天过去了，图还没画完。如果把写代码比作自动驾驶，那画流程图简直像是在开手动挡老爷车——每一个节点都要亲手“挂挡”，反复调整布局样式，耗时又费力。

好消息是，这次真的可以解放双手了。Draw.io官方已经弄了一套非常丝滑的方案，现在你可以直接在Claude里“一句话”生成架构图，还能接着改，无缝协作。这背后是一套全新的图表绘制体系——Draw.io 官方接入了 MCP（Model Context Protocol，模型上下文协议），让 AI 不仅能看懂文字描述，还能直接生成并编辑完整的 .drawio 图表文件。

别再手动画图了，现在流行“聊”出来

用自然语言生成图表，并不是指让 AI 生成 Mermaid 代码拿去渲染，而是让 AI 直接操作 Draw.io 的底层 XML 文件，生成“原生”的 .drawio 格式架构图。这就意味着 AI 画出来的图和你平时用鼠标拖拽出来的图表一模一样，所有元素、连接线、图层都完美保留，随时可以进一步编辑——这才是真正的“生产力革命”。

想要体验这种“对话式绘图”，最简单的方式是在 Claude Code CLI 中运行下面这条命令：

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

这条命令会自动完成 MCP 服务器的配置，把所有需要的依赖和环境都设置好。配置完成后，重启 Claude Code CLI，你就可以像这样向 AI 下达指令：

“创建一个电商系统架构图。前端使用 React，后端使用 Spring Boot，数据库用 PostgreSQL，加入 Redis 做缓存，再用消息队列 Kafka 处理订单事件。把它们按层次画出来。”

AI 会通过 MCP 协议在你的浏览器中自动启动一个实时预览页面，图表会随着 AI 的“构思”步骤逐一呈现在你眼前。从输入指令到生成一张结构完整、层次分明的架构图，整个过程可能不到 30 秒。

MCP 到底是何方神圣？

MCP 的全称是 Model Context Protocol，可以通俗地理解为“AI 和外界打交道的 USB-C 接口”。通过 MCP，AI 可以和 Draw.io 编辑器建立连接，双方能够相互发送数据：AI 提供 XML 数据，Draw.io 负责把数据渲染成好看的、可编辑的图表。

至于为什么要做这种官方集成？道理很简单，如果你让 AI 输出 XML，它可能像天书一样难以阅读；但如果让 AI 直接“通上”编辑器，你就能在熟悉的界面里实时看到理解对错的成果。这就是 MCP 给画图带来的变革——把你从细节中解放出来，让你回归构思想法和梳理逻辑的本源。

这套方案的高明之处在于，“大脑”只负责组织业务逻辑（把它变成描述性文字），而“手脚”（MCP 工具集）则负责精确执行可视化操作。如此一来，我们与基础的、重复的格式调整彻底“解绑”，得以全神贯注地去攻克那些真正复杂、核心的生产力问题。

老工具的新生机，不止一种玩法

当然，MCP 只是 Draw.io 官方在 AI 赋能道路上的最新一步，他们其实早早布局，提供了四种主流玩法，给不同场景的用户提供了足够的选择空间：

1，MCP App Server（页面级渲染）：推荐在 Claude.ai 网页版或 VS Code 这类场景中使用。它可以在聊天界面内部直接渲染出图表，无需跳转新页面，设计简洁又好用。

2，MCP Tool Server（多格式大师）：这个模式“内功”深厚。它支持 XML、CSV 和 Mermaid.js 三种输入格式。哪怕是不懂绘图的编程小白，过去只会写文本形式的 Mermaid 流程图，现在也能被它一键转为可视化极强的 Draw.io 大图。

3，Skill + CLI：这是给追求原汁原味、且重度依赖 Node.js 开发者环境的“极客”准备的终极方案。它可以直接生成 .drawio 文件，也能配套导出 PNG/SVG/PDF，做到离线环境下全本地化完成工作，适用于本地桌面版 Draw.io 的深度使用场景。

4，Project Instructions（零安装入口）：这可能是门槛最低的一种。在 Claude.ai 中创建一个新项目，把官方的指令文本粘贴到项目自定义说明中，AI 就能根据你的要求直接通过 Python 压缩并编码生成 Draw.io 的 URL。

至于在 Claude Code 的应用场景，尤其是大型云架构场景，这套方案的威力能发挥到极致。比如直接告诉 AI 你的业务体量，它会根据需求自动生成包含多可用区部署、负载均衡设置和数据库读写分离的 AWS 架构全套设计图。

简而言之，MCP 解决了准确性和格式的难题，Skill 解决了深度编辑和二次修改的问题，Project Instructions 则解决了零基础安装的门槛。几套方案互为补充，共同支撑起了 Draw.io 的 AI 生态。

让 AI 学会“看图”反馈，才是下一代协同作业

所有这些方案都离不开一个关键的确认环节：Claude 如何看到自己画的图并实现闭环调优？早期的 AI 在工作流中是一个“盲人画师”——它能凭感觉生成 XML 输出，但不知道最终成品长什么样、哪里布局错位、哪里颜色失配。

真正的协同作业需要让 AI “睁开眼睛”，进入双向反馈循环（Two-way Feedback Loop）：AI 生成图表 → 人类手动调整 → AI 读取用户修改后的结果 → 基于修改继续优化，形成高效而精准的协作迭代。比如一次边缘路由排错的精妙调整，或者专家在手动模式下修正节点的层级关系，AI 都能追踪到并在下次对话优化。此外，在 Next AI Draw.io 方案里，配合智能识别系统（Upload & Parse），你甚至可以上传一张手画的草图或 PDF 截图，AI 会立刻读懂元素、提取文字、构建连接线，在 10 至 30 秒内把静态图变成可以自由编辑的 Draw.io 版本。

写在最后

不得不承认，像 Draw.io 这样的图表工具和 Claude 等 AI 之间进行 MCP 直连，直接为未来的“脑力劳动外包”提供了一个参考样板——让 AI 去完成那些我们不想做、但又不得不做的繁重琐碎的基础工作。

有了 Draw.io + Claude 这套灵活的 AI 绘图体系，我们要做的就是集中精力处理那些独特的、反常规的想法与架构革新，把那些需要反复做锚点对齐、精细排版的机械工作放心地交给 AI 去完成。

下次再要梳理什么复杂业务拓扑或技术架构时，别再一个人焦头烂额地画到凌晨了——打开 Claude Code，用文字描述你的设计思路，然后静静地交给 AI 来为你绘制一张“蓝图”。当 AI 把画好的清爽图表呈现在你面前时，那种思维被精准流畅地表达出来的畅爽体验，才是最让人上瘾的地方。

超级好用、免费！这可能是老师最该收藏的画图神器

Sat, 25 Apr 2026 13:34:53 +0800

老师们，这些真实场景你是不是也遇到过：

🎯 公开课/比赛：设计板书思维导图

把整节课的知识脉络画成思维导图，评委看了都说“逻辑清晰”。

📖 备课：把教学步骤画成流程图

语文老师讲《小蝌蚪找妈妈》，把“导入→初读→精读→复述→拓展”画成流程图，上课投到屏幕上，学生一眼看明白。
数学老师讲应用题解题步骤，画一个“读题→找条件→列式→计算→验算”的流程图，贴在PPT里，比纯文字清楚十倍。

📊 做汇报：让领导一眼看懂

年终总结、教研汇报、课题结题……贴一张项目架构图或研究路线图，领导不用你解释就能看懂。
而且导出的图片高清、无水印，放PPT里显得很专业。

📑 课题研究：画研究路线图

从“提出问题→文献综述→研究设计→实施→成果”一条线画下来，申报书里贴一张，专家一眼看懂。

📝 写教案：一张图顶500字

很多学校要求教案里写“教学过程”。以前写一大段文字，现在直接贴一张流程图。教研评审的时候，老师一看就说“这个设计思路真清楚”。
你还可以画单元知识框架图，放在教案开头，整个单元的重难点和逻辑关系，一张图讲完。

🖥️ 教学生画专业图

信息课教数据库，要画ER图。diagrams.net 自带ER图符号库，学生拖拽就能完成，比在Word里戳半天快多了。
教编程逻辑，画流程图讲if-else、循环，学生理解起来特别直观。

🏫 班主任工作：画班级管理架构

班干部职责分工、值日表安排、家校沟通流程……一张图发到家长群，清清楚楚。

今天介绍一个免费好用的画图工具draw.io。

一、认识diagrams.net

diagrams.net（以前叫 draw.io）就是一个在线画图工具。

不用下载，不用注册，没有试用期。打开浏览器就能用。

它能画什么？老师最常用的几种：

教学流程图（上课步骤、实验流程）
知识结构图（单元框架、概念关系）
思维导图（课堂板书、复习提纲）
ER图（数据库教学，信息课必备）
组织结构图（班级管理、项目分工）
时间轴（历史课、事件发展）

软件里还自带上百种模板，点开就能改，不用从零开始硬画。

二、基础用法

第一步：打开网站

浏览器输入 app.diagrams.net，回车直接进，无需注册。

第一次打开会慢几秒，因为网页要加载图形库，后面就快了。

第二步：开始画图

界面分三块：

左侧：图形库。各种形状、箭头、矩形、圆形……直接拖到画布上就能用。
中间：画布。你的作品区，随便拖拽缩放。
右侧：属性面板。选中一个图形，改颜色、粗细、文字、箭头样式。

常用操作：

双击图形 → 打字
拖动图形边缘 → 调大小
点击图形四周的小圆点 → 拉连线

不用记快捷键，跟玩积木一样。五分钟就能画出第一张图。

第三步：保存和导出

画完之后：

存源文件：点“文件” → “保存”，生成一个 .drawio 文件，下次打开接着改。
导出成图：点“文件” → “导出为”，选 PNG、JPG、PDF、SVG 都行。

导出PNG时记得把“缩放”调高一点，插到PPT里才不会糊。

最良心的一点：导出的图片完全没有水印，也没有“试用版”字样。随便用。

三、进阶玩法：让AI帮你画图

基础用法你学会了。但如果你连拖拽都嫌麻烦——直接把活儿甩给AI。

点击标题看教程：AI一键生成流程图

写在最后

如果你还在为画图头疼，花3分钟打开 app.diagrams.net 试一下。
先试试基础拖拽，再试试AI粘贴。画完三张图之后，你就再也不想回到Word里手动对齐了。

告别推诿扯皮！用 Draw.io 搞定跨部门“泳道图”的终极指南

Fri, 24 Apr 2026 13:37:52 +0800

在复杂的业务流转中，销售、技术、运营、供应链等角色往往交织在组团作战。想要厘清“谁在什么阶段该干什么”，普通的流程图早就不够看了——你需要跨职能泳道图（Swimlane Diagram）。

早期被流程工作者广泛使用的VISIO软件，被微软看上，收购并集成到Office套装中去了，因此，今天花了点时间找了个免费开源绘图神器，Draw.io，使用了下，绝对是画泳道图的首选。今天，就来手把手教你如何用 Draw.io 快速绘制出清晰、专业的跨部门职能流程图！

一、先搞到兵器：Draw.io 的两种打开方式

Draw.io 非常灵活，你可以根据自己的喜好和工作环境选择以下两种方式之一，它们的核心功能几乎完全一致：

1. 稳扎稳打：安装桌面客户端（推荐重度用户）

如果你经常在离线环境下工作，或者讨厌浏览器占满标签页，可以直接下载安装包。

获取方式：访问 GitHub 官方发布页（搜索 jgraph/drawio-desktop），直接下载适合你系统的安装包。
直接点击链接访问下载：https://github.com/jgraph/drawio-desktop/releases
💡避坑提示：国内直接从 GitHub 下载可能龟速甚至失败。办法你懂！

2. 极速轻量：浏览器网页版（推荐临时/跨设备用户）

不想装软件？直接用浏览器打开官网 (https://app.diagrams.net/) 就能开干！

优势：零安装、自动云端同步、随开随用。
⚠️注意：千万别用浏览器的“无痕模式”，否则一旦不小心关掉标签页，神仙也救不回你的流程图。

二、实战演练：用浏览器版绘制跨部门泳道图

接下来，我们以浏览器网页版为例，带你四步画出一份标准的跨部门职能流程图。

Step 1：新建画布，选定“泳道”方向

打开 app.diagrams.net，新建一个 Blank Diagram（空白图表）。
在左侧的图形库面板中，滚动找到 Advanced（高级） 分类并点击展开。
将 Swimlanes（泳道） 图标直接拖拽到右侧的空白画布上。
此时会弹出一个小窗口，让你选择泳道的走向。跨部门协作通常选 Horizontal（水平排列），这样方便从左到右展示时间轴和业务推进。

Step 2：划分角色，搭建“责任池”

泳道拉出来后，你会看到一个大的“池子（Pool）”被分成了几行（或几列）。

双击上方的池子标题，命名为整个流程的大名：“线索管理流程”。
每一行左侧的泳道标签，依次填入参与协作的角色如：线索登记者、线索分配者、客户经理、系统）。
美化小技巧：为了视觉清晰，可以给相近角色涂上相同的底色。右键泳道标签 -> Edit Style（编辑样式） -> 修改 fillColor参数即可。

Step 3：填入流程，指明“动作与交接”

框架搭好后，就可以往各角色的“泳道”里填肉了。

从左侧拖拽 Basic（基础图形） 里的圆角矩形/矩形/判断菱形等作为流程步骤。
把步骤拖到对应的角色泳道里。比如“分配线索”就放到【线索分配者】的泳道，“开发功能”放在【研发团队】的泳道。
使用 Connector（连接线，快捷键 Ctrl+L） 把各个步骤串起来。如果流程需要跨角色，连接线自然会跨越不同的泳道，一目了然。

Step 4：调整布局，避开“图层覆盖”的坑

业务复杂时，你可能会发现默认的泳道太窄或太宽，需要微调。

❌错误操作：直接鼠标拖拽泳道边框。这会导致泳道重叠、错位，甚至整个池子崩溃散架！
✅正确操作（高能必记）：按住键盘上的 Alt键不放，同时用鼠标左键拖拽泳道的边框，此时松开鼠标，其他泳道会自动智能避让，完美适应你的布局调整！

三、老司机防翻车指南（保存与备份）

画了半天，最后一步就是妥善保存。Draw.io 的保存机制非常强大，但也需要你稍微留意：

常规保存（手动存档）：点击工具栏的 File-> Save As，你可以选择把文件保存到本地硬盘，或者直接存进 Google Drive、GitHub、GitLab 等云端。每次手动保存都会生成一个带时间戳的新 XML 文件，这其实间接实现了版本控制，方便你随时回溯历史版本。
防丢保命法（自动实时保存）：如果你用的是浏览器网页版，强烈建议在 File-> Save As时，选择 Browser（即保存在浏览器的本地存储中）。只要不清空浏览器缓存，它就会在后台实时自动保存你的每一次改动，再也不怕断电或误关页面！

掌握了这些技巧，无论是梳理错综复杂的业务逻辑，还是向老板汇报跨部门协作方案，你都能轻松拿出专业级的流程图。赶紧打开 Draw.io 试一试吧！

四、写到最后（流程知识小贴士）

虽然习惯上称泳道图为跨部门职能流程图，其实好的流程一定是基于角色来呈现描述的，否则，岗位、职位、部门名称的变动将带来无尽的烦恼！

Drawio 中文官网

炸裂！Draw.io 官方接入 Claude Code，自然语言直接生成流程图

在线Web版Drawio-desktop 桌面最新版 29.7.9

优势

入门教程

Mac版Drawio-desktop 桌面最新版 29.7.9

优势

入门教程

Windows 版Drawio-desktop 桌面最新版 29.7.9

优势

入门教程

我关掉 draw.io 的那一刻，突然觉得画图这件事，AI 真该接手了

我关掉 draw.io 的那一刻，突然觉得画图这件事，AI 真该接手了

画图的痛，画过的人都懂

MCP 协议：让 AI 从"参谋"变成"助理"

四种玩法，我推荐第三种

一个细节，让 AI 生成的图真正能用

导出的文件，还能继续编辑

这件事背后的意义，比工具本身更大

Draw.io 24.7.8免费安装包下载及安装教程，一款开源流程图工具，强烈推荐！

告别手动拖拽！AI 一键生成架构图！官方开源项目彻底解放双手

Draw.io 官方接入了Claude Code，画流程图终于不用自己动手了！

别再手动画图了，现在流行“聊”出来

“创建一个电商系统架构图。前端使用 React，后端使用 Spring Boot，数据库用 PostgreSQL，加入 Redis 做缓存，再用消息队列 Kafka 处理订单事件。把它们按层次画出来。”

MCP 到底是何方神圣？

老工具的新生机，不止一种玩法

让 AI 学会“看图”反馈，才是下一代协同作业

写在最后

超级好用、免费！这可能是老师最该收藏的画图神器

🎯 公开课/比赛：设计板书思维导图

📖 备课：把教学步骤画成流程图

📊 做汇报：让领导一眼看懂

📑 课题研究：画研究路线图

📝 写教案：一张图顶500字

🖥️ 教学生画专业图

🏫 班主任工作：画班级管理架构

一、认识diagrams.net

二、基础用法

第一步：打开网站

第二步：开始画图

第三步：保存和导出

三、进阶玩法：让AI帮你画图

写在最后

告别推诿扯皮！用 Draw.io 搞定跨部门“泳道图”的终极指南

在复杂的业务流转中，销售、技术、运营、供应链等角色往往交织在组团作战。想要厘清“谁在什么阶段该干什么”，普通的流程图早就不够看了——你需要跨职能泳道图（Swimlane Diagram）。

一、 先搞到兵器：Draw.io 的两种打开方式

1. 稳扎稳打：安装桌面客户端（推荐重度用户）

2. 极速轻量：浏览器网页版（推荐临时/跨设备用户）

二、 实战演练：用浏览器版绘制跨部门泳道图

Step 1：新建画布，选定“泳道”方向

Step 2：划分角色，搭建“责任池”

Step 3：填入流程，指明“动作与交接”

Step 4：调整布局，避开“图层覆盖”的坑

三、 老司机防翻车指南（保存与备份）

一、先搞到兵器：Draw.io 的两种打开方式

二、实战演练：用浏览器版绘制跨部门泳道图

三、老司机防翻车指南（保存与备份）