解决AI画图的最后一公里-Next AI Draw.io MCP实践

一：简介

在软件工程领域，"一图胜千言"是永恒的真理。随着 LLM（大语言模型）的爆发，我们习惯了让 AI 解释代码、重构逻辑，甚至直接生成 Mermaid 流程图，对于复杂的逻辑生成的Mermaid 流程图有明显的缺点：

• 表现力贫乏：复杂的嵌套关系（如 Swimlanes 内的 Containers）变成了扁平的方块，无法体现架构的层次感。
• 布局失控：连线像乱麻一样纠缠，节点重叠，完全没法放在技术评审文档里。
• 不可编辑的"死图"：这是最致命的。如果你想微调一个模块的位置，或者换一种颜色来表示状态，你只有两个选择：
  1. 改 Prompt 抽奖：祈祷 AI 下一次能理解你的布局要求（通常会越改越乱）。
  2. 重头再来：放弃 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 的核心数据结构）的架构师，这种模式带来了三个质的飞跃：

1. 原生可编辑 (Editable by Design)：AI 生成的不再是图片，而是 XML 源文件。你可以直接在浏览器里拖拽节点、修改连线、调整配色。AI 负责 90% 的逻辑梳理和初稿绘制，人类负责最后 10% 的审美微调。
2. 结构化映射：利用 Draw.io 强大的容器（Container）和泳道（Swimlane）功能，我们可以将复杂的代码逻辑（如状态管理、渲染层级、运行时环境）完美映射到图形中，这是简单 Markdown 图表无法做到的。
3. 实时反馈闭环：代码的变动可以即时反映在架构图中，让文档不再是滞后的"死文档"，而是随着代码演进的"活资产"。
   

• 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

导入飞书文档：先在文档中添加一个新的画板-流程图，然后点进去，... ，导入。

虽然导入后宽度上有些改变，但是稍微调整一下很快就好，要比自己一点一点画快的多。

四：总结

使用该工具可以梳理陌生的代码逻辑，生成流程图放到设计文档中，使用场景还是挺多的。