news 2026/6/10 2:15:56

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
解决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

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

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

四:总结

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/7 11:27:55

计算机Java毕设实战-基于SSM实现的在线购物商城系统基于SSM的商城管理系统【完整源码+LW+部署说明+演示视频,全bao一条龙等】

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华
网站建设 2026/6/7 12:24:40

02_dify-plugin-daemon使用源码本地启动

前言 本文提供了在Windows环境下使用Conda和Go语言编译部署Dify插件守护进程(dify-plugin-daemon)的详细图文教程。主要步骤包括:使用Conda创建Python 3.12虚拟环境并在其中安装Go语言工具链;克隆dify-plugin-daemon的指定版本源码;在VSCode中配置Go开发环境并安装依赖;…

作者头像 李华
网站建设 2026/6/9 22:18:21

导师又让重写?9个AI论文网站深度测评,本科生毕业论文写作必备!

面对日益繁重的学术写作任务,越来越多的本科生开始寻求AI工具的帮助。然而,市面上的论文辅助工具种类繁多,功能各异,如何选择真正适合自己的成为了难题。为此,我们基于2026年的实测数据与用户反馈,对多个主…

作者头像 李华