解决AI画图的最后一公里-Next AI Draw.io MCP实践
一：简介
在软件工程领域，“一图胜千言”是永恒的真理。随着 LLM（大语言模型）的爆发，我们习惯了让 AI 解释代码、重构逻辑，甚至直接生成 Mermaid 流程图，对于复杂的逻辑生成的Mermaid 流程图有明显的缺点：
- 表现力贫乏：复杂的嵌套关系（如 Swimlanes 内的 Containers）变成了扁平的方块，无法体现架构的层次感。
- 布局失控：连线像乱麻一样纠缠，节点重叠，完全没法放在技术评审文档里。
- 不可编辑的“死图”：这是最致命的。如果你想微调一个模块的位置，或者换一种颜色来表示状态，你只有两个选择：
- 改 Prompt 抽奖：祈祷 AI 下一次能理解你的布局要求（通常会越改越乱）。
- 重头再来：放弃 AI 的成果，打开 Visio 或 Draw.io 从零开始画。
这就是AI 生成图形的最后一公里问题：AI 可以生成逻辑正确的“图”，但无法交付符合工程标准的、可维护的“设计资产”。
要解决这个问题，我们需要改变 AI 的产出模式：不生成像素，也不生成简单的 DSL（如 Mermaid），而是直接生成工程源文件，这就是 Next AI Draw.io MCP 的核心理念。通过 Model Context Protocol (MCP) 协议，我们将 IDE 与专业的绘图工具（Draw.io）连接起来，AI 不再是一个只会画草图的助手，它变成了一个能够直接操作 mxGraphModel（Draw.io 的核心数据结构）的架构师，这种模式带来了三个质的飞跃：
- 原生可编辑 (Editable by Design)：AI 生成的不再是图片，而是 XML 源文件。你可以直接在浏览器里拖拽节点、修改连线、调整配色。AI 负责 90% 的逻辑梳理和初稿绘制，人类负责最后 10% 的审美微调。
- 结构化映射：利用 Draw.io 强大的容器（Container）和泳道（Swimlane）功能，我们可以将复杂的代码逻辑（如状态管理、渲染层级、运行时环境）完美映射到图形中，这是简单 Markdown 图表无法做到的。
- 实时反馈闭环：代码的变动可以即时反映在架构图中，让文档不再是滞后的“死文档”，而是随着代码演进的“活资产”。
https://github.com/DayuanJiang/next-ai-draw-io
https://next-ai-drawio.jiang.jp/zh
二：Cursor配置MCP
{"mcpServers":{"drawio":{"command":"npx","args":["@next-ai-drawio/mcp-server@latest"]}}}三：使用MCP
Promt：分析SerPackOrderConsumer、PushSapMiOraApi#createSapData、PushSapMiOraApi#pushByTypes这三个步骤的逻辑，并使用drawio mcp 绘制出来流程图
drawio mcp会分析代码逻辑，自动打开浏览器的本地Next AI Draw.io应用，然后在上面绘制流程图，也可以下载该流程图。
使用drawio mcp绘制的图十分的精美。drawio本质是xml
我们可以在此基础上调整一下格式，使得更加美观。
下载Download
导入飞书文档：先在文档中添加一个新的画板-流程图，然后点进去，… ，导入。
虽然导入后宽度上有些改变，但是稍微调整一下很快就好，要比自己一点一点画快的多。
四：总结
使用该工具可以梳理陌生的代码逻辑，生成流程图放到设计文档中，使用场景还是挺多的。