news 2026/2/13 5:31:48

解决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/2/10 12:50:23

金融信创环境下,百度富文本编辑器支持哪些格式的WORD粘贴操作?

2023年XX月XX日 | 企业级编辑器插件选型与开发日志 一、需求背景与市场调研 1.1 核心需求痛点 政务项目特殊性:需100%兼容信创环境(麒麟/UOS龙芯/鲲鹏)IE8兼容:部分政务系统仍运行在Windows XPIE8环境富文本保真:需支…

作者头像 李华
网站建设 2026/2/12 0:26:16

医院电子病历系统用百度编辑器粘贴WORD内容,图片位置如何固定?

CMS企业官网Word导入功能开发实录 需求分析与技术评估 客户核心需求 支持Office文档(Word/Excel/PPT/PDF)导入并保留完整样式实现Word内容一键粘贴功能公式处理(LaTeX/MathType)转换MathML图片自动上传至阿里云OSS高龄用户友好型操作设计 技术栈现状 前端:Vue2…

作者头像 李华
网站建设 2026/2/12 17:04:17

无人机反无人机识别检测数据集VOC+YOLO格式2863张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2863 标注数量(xml文件个数):2863 标注数量(txt文件个数):2863 …

作者头像 李华
网站建设 2026/2/11 13:04:38

智慧农业番茄西红柿成熟度检测数据集VOC+YOLO格式1497张4类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):1497 标注数量(xml文件个数):1497 标注数量(txt文件个数):1497 …

作者头像 李华
网站建设 2026/2/8 4:35:50

‌AI生成的测试用例如何实现“数据隔离”?

‌一、背景与核心挑战:为什么AI测试用例必须做数据隔离?‌AI驱动的测试用例生成(AI-Generated Test Cases, AGTC)正快速取代传统手工编写模式。通过NLP解析需求、ML分析历史缺陷、GAN模拟用户行为,AI可在分钟内生成数千…

作者头像 李华