news 2026/6/15 21:31:18

解决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/15 12:41:24

Java毕设项目推荐-基于SSM框架的网上购物商城及电商后台管理系统基于SSM的商城管理系统【附源码+文档,调试定制服务】

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

作者头像 李华
网站建设 2026/6/15 14:19:46

【DVMSVM诊断网络】基于离散韦格纳分布DWVD结合MCNN-SVM多尺度卷积神经网络和支持向量机的故障诊断研究附Matlab代码

✅作者简介:热爱科研的Matlab仿真开发者,擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。 🍎 往期回顾关注个人主页:天天Matlab 👇 关注我领取海量matlab电子书和数学建模资料 &#x1f34a…

作者头像 李华
网站建设 2026/6/15 13:54:11

Java毕设项目推荐-基于SpringBoot的高校教室资源管理平台的设计与实现高校多媒体教室管理系统预约、审核、归还、统计【附源码+文档,调试定制服务】

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

作者头像 李华
网站建设 2026/6/15 13:45:36

如何更改 Windows Server 2022 的主机名

主机名是用于设备之间网络通信的独特标识符,便于系统之间的顺畅交互。在服务器管理中,主机名(hostname)尤为重要。本文将为您详细讲解如何在 Windows Server 2022 中更改主机名,包括具体步骤和建议,帮助您高…

作者头像 李华
网站建设 2026/6/15 13:48:41

大规模语言模型在自动代码注释生成中的应用

大规模语言模型在自动代码注释生成中的应用 关键词:大规模语言模型、自动代码注释生成、代码理解、自然语言生成、深度学习 摘要:本文深入探讨了大规模语言模型在自动代码注释生成中的应用。首先介绍了该研究的背景,包括目的、预期读者、文档结构和相关术语。接着阐述了核心…

作者头像 李华