news 2026/5/30 23:05:08

解决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/5/28 20:33:34

【超全】基于微信小程序的政务办理预约系统【源码+文档+调试】

一、绪论 1.1 课题背景 随着移动互联网技术的快速发展,政务服务逐步向数字化、智能化转型。微信小程序因其无需下载安装、使用便捷、用户基数庞大等特点,成为政务服务的重要入口。传统政务办理存在排队时间长、流程繁琐、信息不对称等问题,影…

作者头像 李华
网站建设 2026/5/29 2:14:02

Slot API 设计模式

整体架构分析 一个典型的 组合式UI架构,使用了 Slot API 设计模式。图表示意: MediaItemLayout (核心布局容器) ├── 参数: │ ├── leading: () -> Unit // 左侧内容 │ ├── center: () -> Unit // 中间内容 │ …

作者头像 李华
网站建设 2026/5/31 2:34:50

小白前端速成:用HTML+CSS做出超酷边框流动特效(附实战细节)

小白前端速成:用HTMLCSS做出超酷边框流动特效(附实战细节) 小白前端速成:用HTMLCSS做出超酷边框流动特效(附实战细节)先泼盆冷水:你的网页为啥像古董?HTML骨架其实简单得可怜核心原理…

作者头像 李华
网站建设 2026/5/28 18:58:06

西门子840D HMI ADVANCED FOR PC 也可用于810D,840DSL中文版

西门子840D HMI ADVANCED FOR PC 也可用于810D,840DSL中文版。 1、软件可安装到台式机或笔记本上,可以连接到机床的NCU进行NC与PLC的数据备份与恢复,备份和恢复的数据存储在电脑中。 也可以把NC程序放到电脑中,通过此软件加载到NCU中&#xf…

作者头像 李华