原来流程图也可AI:当trae用MCP接入drawio

IHaveADiscovery

158人浏览 · 2026-09-29 16:29:43

IHaveADiscovery · 2026-09-29 16:29:43 发布

不允许还有人不知道这个组合。

你是不是经常看到别人随手甩出一张干干净净的流程图、架构图、时序图，然后开始自责：为什么我在展示的时候，不能花点时间和精力也画一张这么漂亮的图？我以前也这么想，直到今天在 TRAE 里通过 MCP 接入了 Draw.io，才发现——人家根本就不是手画的，人家是用 AI 画的。

简单说就是：你拿一份长 Markdown 喂给 AI，AI 通过 Draw.io 的 MCP 工具，把它画成一张结构清晰的图。

真的，打开新世界的大门。

Draw.io 是什么？

Draw.io 是一个免费的在线图表工具，用来画流程图、架构图、UML 图、思维导图这些都行，不用注册，不用付费，浏览器打开就能用。

它本质上用的是一种标记符号语言——XML 格式的 mxGraphModel。每个图形元素是一个 mxCell，通过 style 属性里的 key=value 对来控制形状、颜色、连线样式。你写的是一段结构化的文本描述，Draw.io 把它“翻译”成图形展示出来。正因为底层是文本，所以修改起来极其方便——改几个参数就能调整颜色和布局，视觉审美也在线，出来的图不会丑。

MCP 又是什么？

MCP 全称 Model Context Protocol，是 Anthropic 推出的一个开放协议，用来标准化地连接 AI 应用和外部工具。在 TRAE 里，MCP 让 AI 智能体可以直接调用外部工具——比如 Draw.io 的图表生成能力。

Draw.io 官方提供了 MCP Server，AI 通过它拿到图表操作工具，能够创建、读取、更新和删除图表元素，自动生成架构图、流程图和可视化文档。你只需要用自然语言说“帮我画一个 XX 流程图”，AI 就会生成对应的 Draw.io XML，然后直接在编辑器里打开。

在 TRAE 里怎么配？不用手动，直接让 TRAE 自己装

很多人一看到 MCP 配置就头大，JSON、endpoint、路径……其实在 TRAE 里完全不用这么麻烦。

你只需要三步：

先去 Draw.io 官网，把 Draw.io 桌面版下载好、安装好。
打开 TRAE，直接对它说：

我已经下载好 Draw.io 了，你帮我装一下 Draw.io 的 MCP，我要让你帮我画图。

剩下的交给 TRAE。它会自己识别、下载、配置 Draw.io MCP Server。你等它提示完成就行。

如果它中途问你 Draw.io 装在哪，就把安装路径发它；一般它自己能找到。配好之后，直接说“根据这份 Markdown 画一张架构图/流程图”，它就会调用 Draw.io MCP 出图。

真的不用手动填 JSON，也不用记什么 endpoint。你只要告诉 TRAE：我已经装好 Draw.io，帮我接 MCP，我要画图。 它就给你办。

我为什么觉得它特别好用

第一个好处：长文档终于不用硬着头皮啃了。

我手头很多 Markdown 文件，几百行甚至上千行，纯靠一行一行读，头真的很大。现在的做法是：把文档丢给 AI，让它先根据内容画一张概述图。我扫一眼图，对整个结构有了直观印象，再针对具体部分深入读、跟 AI 追问细节。先看图再读文，效率完全不一样。

第二个好处：免费，而且不怎么消耗 token。

Draw.io 本身免费，官方 MCP Server 也不需要 API Key。相比让 AI 生成图片，生成 Draw.io XML 的 token 消耗要低得多。Mermaid 格式的 token 效率大约是 XML 的 10 倍左右，对于大部分场景完全够用。

第三个好处：输出的是可编辑文件，不是死图片。

AI 生成图片，改一个节点位置就得重新生成。但 Draw.io MCP 输出的是 .drawio 文件，你可以手动微调，也可以继续让 AI 改。不满意就调，改到顺眼为止。

第四个好处：自动化程度高，支持双向通信。

Draw.io MCP Server 支持实时双向通信，AI 的每次写入操作都变成一个撤销步骤，不会打乱你已有的编辑。还自带智能路由和自动布局引擎，连线和排版基本不用操心。

第五个好处：和 Mermaid、符号图完全不是一个体验。

平时在对话里让 AI 画图，它要么给你用 ASCII 符号拼一个，丑得没法看；要么给你一段 Mermaid 代码，渲染出来箭头细细的、不明显，样式也受渲染器限制，不美观。更麻烦的是，Mermaid 想调一个节点位置，只能回去改代码、重新渲染，复杂图越改越乱。

但 Draw.io MCP 不一样。它生成的是真正的 Draw.io 图形文件，节点、连线、箭头都是标准图形元素，箭头清晰、布局规整、配色好看。你可以在 Draw.io 里直接拖拽节点、改颜色、调箭头，想怎么编辑就怎么编辑。输出的 .drawio 文件既能手动改，也能继续让 AI 改。它不是给你一张死图，而是给你一个能继续折腾的图表工程。