刷到一条视频：一句话需求丢进 Codex——“帮我把这段实验报告里的逻辑画成流程图”，它没有甩回一段 Mermaid 代码，也没生成一张糊掉的图片，而是自己打开浏览器里的 Draw.io，一笔一笔把节点和连线画了出来。画完的图能拖、能改、能换样式、能导出，跟你手画的没区别——只是它替你画了第一稿。

做过毕业设计、写过技术文档的人都懂那种痛：流程图、架构图、时序图，手动拖框连线，鼠标拖来拖去排半天，看着还是乱。这条视频给的不是”又一个画图 AI”，而是换了条路子，让 AI 产出能继续编辑的图，而不是一张死图。

这篇就拆它：为什么 Mermaid 和”AI 直接出图”都不够、Codex + MCP + Draw.io 这三件套各管什么、怎么自己跑起来，以及最值得记住的那条判断——AI 该交付的不是成品图片，是一份能改、能维护、能交付的图表资产。

一句话定性

这套方法的核心不是”AI 会画流程图了”，而是改变了 AI 的交付物形态：从”给你一张最终图片”变成”给你一份结构化、可继续编辑的初稿”。它让 AI 只负责最擅长的”把需求梳理成节点和关系”，把”精修和交付”留给 Draw.io 这种专业工具。一句话——AI 画初稿，专业工具做交付。

先看清痛点：AI 画流程图，老办法差在哪

要看懂这套方法的价值，得先看清以前两种主流做法各自的坑。

老办法一：让 AI 生成 Mermaid 代码。 Mermaid 是文本描述图表的语法，AI 写一段文本、渲染成图。优点是快、是文本好版本管理。但坑也硬：复杂一点的图，布局和样式很容易失控——节点一多，线就开始打架、重叠、绕远路，你想挪一个框、调一条线的走向，得回去抠语法，很别扭。Mermaid 适合简单流程，一上规模就力不从心。

老办法二：让 AI 直接生成一张图片。 看起来可能还不错，但问题是后期基本没法编辑。错一个字、少一个分支、想换个配色，对不起，整张图重新生成——而且重新生成又是一张全新的图，跟上一版对不上。这是一张”死图”：好看，但不能维护、不能交付给团队接着改。

两条老路的共同病根是同一个：AI 的产出是终点，不是起点。 你拿到的要么是难改的代码，要么是不能改的图片，没法在它基础上继续工作。

这次为什么不一样：三件套各管一段

视频里的方法把”画图”这件事拆成三个角色，各管一段，串成一条流水线：

角色它是谁它负责什么
Codex写代码/做任务的 AI理解需求（业务流程、接口逻辑、代码结构），把它拆成清晰的节点和关系
Draw.io MCP中间的连接器让 Codex 能真去操作 Draw.io，而不只是”输出一段文本”
Draw.io专业绘图工具真正把图画出来，并且支持手动编辑、调布局、改样式、导出

这里面 MCP 是关键的一环，也是最容易被忽略的一环。没有 MCP，AI 只能”说”——告诉你这图该怎么画；有了 MCP，AI 能”做”——直接动手在 Draw.io 里画。 MCP（Model Context Protocol）的作用就是给大模型接上一只手，把”我建议你这么画”变成”我已经画好了”。

这就是为什么它的产出是活的：Draw.io 画出来的是结构化的图（节点、连线、坐标都是数据），天生就能拖、能改、能导出。AI 在 Draw.io 里画完，等于直接把”可编辑的源文件”交到你手上，而不是一张截图。

这其实是 MCP 这类工具反复在证明的同一件事：让 AI 从”建议者”变成”执行者”。 以前 AI 只能告诉你”你该打开 Draw.io 这么画”，现在它直接替你打开、替你画。区别不在模型多聪明，在于有没有给它接上能操作真实工具的那只手。

视频里还有个值得注意的细节：作者特意问了这个 MCP 能不能控制网页版的 Draw.io，答案是能——不需要把 Draw.io 桌面软件装到电脑上，直接在浏览器里就把图画了。对不想装一堆软件的人，这是个不小的省事。

怎么跑起来：连装 MCP 都是一句话

这套流程的门槛比想象中低，连最劝退新手的”装 MCP”这步都被省成了对话：

  1. 装 MCP——直接跟 Codex 说。 很多人卡在”MCP 怎么安装”，其实直接告诉 Codex 你要装哪个 MCP，它会自动全网搜索、找到并安装。视频作者用的是一个在 GitHub 上、专门连 Draw.io 的 MCP，把它的提示词/仓库名给 Codex，Codex 自己搞定下载和配置。
  2. 确认装好了。 装完去 Codex 的设置 → MCP 服务器列表里看一眼，对应的 drawio 服务显示已安装、已开启，就能进下一步。
  3. 丢需求、让它画。 把要画的东西用自然语言描述清楚（视频里直接复制粘贴了一份高校实验报告的题目），告诉它”通过 MCP 控制我打开的浏览器网页版 Draw.io，画出这段逻辑的流程图”。需要的话还能加附加条件，比如把复合条件拆开（视频里把 Y==7 和 Y==21 两个分支分开画）。
  4. 它自动开浏览器画图。 Codex 调 MCP，浏览器里的 Draw.io 自动开始画。
  5. 你来精修。 生成的结构一般不错，但细节常要手动调——视频里两个例子都需要微调：流程图有些线条要顺一下，控制流图（CFG）默认排线太直，作者偏好弯一点的线更美观，就去设置里改了线条样式。

整个回合下来，AI 干的是”从一段文字到一张结构完整的初稿图”，你干的是”在初稿上精修和交付”。

最该记住的那条判断：AI 交付”资产”，不交付”成品”

视频里作者自己点破了这套方法最核心的一句话：

这套流程最重要的点，不是 AI 画了一张图，而是它生成的是一个可编辑、可维护、可交付的图表资产。

这句话值得拎出来单独想。它其实划清了 AI 在”出活”这件事上的正确位置：

  • 别让 AI 出”终稿”。 不管是 Mermaid 代码还是一张图片，只要它是”终点”，你就被锁死在它的产出形态里，改一点都费劲。
  • 让 AI 出”可继续加工的初稿”。 AI 最擅长的是前半段——把杂乱的需求梳理成结构（哪些是节点、谁连谁、什么分支）。这一步它又快又好。
  • 把交付留给专业工具。 后半段的精修、排版、导出、版本维护，交给 Draw.io 这种本来就为”编辑和交付”而生的工具。

合起来就是一句可迁移的方法论：AI 参与前面的结构梳理和初稿生成，最终结果交给专业工具来编辑和交付。 这条不止适用于画流程图——写文档、做表格、出设计稿、搭数据看板，凡是”既要 AI 的速度、又要成品能维护”的活，都适用同一个分工。判断一个 AI 工作流好不好用，可以先问一句：它给我的是死的成品，还是活的、能接着改的半成品？

它适合谁、边界在哪

适合的人： 视频结尾说得很清楚——平时要写技术文档、做项目汇报、整理业务流程的人。这些场景的共同点是：图不是画一次就完，是要反复改、给别人接着用、最后还要导出进文档。可编辑性在这里是刚需，正好打在这套方法的强项上。

它的边界（要诚实看）：

  • 不是零干预。 视频里两个实战都需要手动微调（顺线、改线条样式）。它给的是”完成度不错的初稿”，不是”一键终稿”——别指望丢个需求就拿到能直接交付的图。
  • 依赖把需求说清楚。 AI 画得好不好，前提是你把逻辑、分支、条件描述清楚（视频里还得手动提示”把复合条件拆开”）。需求含糊，画出来也含糊。
  • 结构清晰的图最受益。 流程图、控制流图、架构图这类”节点+关系”明确的图，最吃这套方法的好处；越是讲究美术表现、自由排版的图，AI 初稿能帮的越有限。

作者还预告了下一期会用同样的方法画系统架构图、泳道图、代码调用链路图——都是”结构明确、要反复改、要交付”的典型场景，思路完全一致。

顺便看一眼：这条教程视频本身怎么做的

这是条标准的”痛点→方法→实战→升华”教程片，结构很值得做内容的人抄：

  • 开头三秒钩痛点：“别再手动画流程图了""做毕业设计的同学应该都懂”——直接戳目标人群最具体的痛，不绕弯。
  • 先破后立：先把 Mermaid 和”AI 出图”两条老路的坑摆出来，再引出新方法。有对比，新方法的价值才立得住。
  • 拆角色降认知门槛：把抽象的”Codex+MCP+Draw.io”拆成三个各管一段的角色，新手一听就懂谁干啥。
  • 真实战增可信度：拿一份真实的高校实验报告当题目，连”线条要微调”这种不完美都如实展示——反而更可信，不像广告。
  • 结尾升华+留钩子：把”可编辑可维护可交付的资产”这个判断点出来拔高，再用”下期画架构图”留住关注。

一句话总结这条片的套路：用具体痛点开场、用新旧对比立论、用真实战兜底、用一句金句升华。 这套结构换任何工具教程都能套。

这条值不值得自己上手？ 如果你经常要画那种”画完还得改、还得给别人接着用”的图——流程图、架构图、业务流程——这套 Codex + Draw.io MCP 的组合值得试，核心收益是拿到能编辑的源文件而不是死图。如果只是偶尔画张极简单的示意图，Mermaid 或者直接手画可能还更快。关键不在工具多炫，在于它解决的是不是你的真问题：你要的是一张图，还是一份能一直改下去的图表资产。