【保姆级教程】draw.io + AI Agent:我如何用一张流程图,构建了一个能自动处理工单的智能体?
又到年底了,又要必不可少的开始画图做PPT述职啦 😂,述职的好坏和年终奖都有可能挂钩!这对天天写代码大部分的程序员👨🏻💻来说是一件非常头疼的事,但好在这次可以使用个**神器**!

又到年底了,又要必不可少的开始画图做PPT述职啦 😂,述职的好坏和年终奖都有可能挂钩!这对天天写代码大部分的程序员👨🏻💻来说是一件非常头疼的事,但好在这次可以使用个神器!
Ai Agent 会结合到各个场景!
可以想象,将来我们使用的各种工具,都会很方便的以标准的协议方式结合到 AI Agent 智能体。这就像小傅哥,25年,年初开始做 Ai Agent 时,对一个智能体的执行过程,是需要自己进行分析,设计,实现的(那时候我就在讲,Agent 也会出标准框架)。到了年中的时候 Google ADK 除了 0.1.0 最初的版本,年尾发布了 0.4.0,这个框架提供了构建智能体的最基本框架,可以整合 Spring AI、Langchain4j 快速构建智能体。
Spring AI、Langchain4j 提供的是 AI 封装能力,Google ADK 提供的是 Agent 执行能力(并行、循环、串行)的组装和使用。
未来(甚至不会太久),各个软件与 Ai Agent 的对接会变得非常容易,你手里用到的各项软件,都可以很方便的添加上智能体的能力。就像,我们现在用到的 trae.ai、Cursor,在以后 Ai Agent 基础能力成熟后,在结合 Visual Studio Code 给出软件对接标准协议,那么任何一个人都可以快速的搭建出一个智能体编码工具。除此之外,其他的软件也都会逐步提供出这样的能力。
扩展的思路分析完毕,小傅哥这次先带着大家了解下,draw.io 是怎么与 Ai 结合使用的。
🧧 文末提供了小傅哥所有编程实战项目获取方式,一次加入即可获得19个已完结的和本次新开展的。
一、关于 draw.io
draw.io 是一个用于绘制通用图表的 JavaScript 客户端编辑器。
官网:https://www.drawio.com/代码:https://github.com/jgraph/drawio

我所有的这类的绘图,都来自于使用 draw.io 完成(bugstack.cn 还有很多绘图)。它可以下载到本地使用,也可以在网页使用。如果你是开发人员,还可以使用它的开发组件引入到自己的程序中进行使用。也正因如此,有了 Ai Agent 能力的结合,一种是通过 MCP,另外一种是直接通过扩展功能,直接在 draw.io 二开上完成。接下来小傅哥会分别介绍这两种方式以及使用。
二、MCP 方式对接
MCP(Model Context Protocol)是用于解决 AI 与服务接口通信的标准模型上下文协议,该协议通过标准化通信方式,使AI应用程序能够访问和使用实时数据、执行操作,从而克服了模型训练数据的局限性。 你可以将MCP想象成AI应用程序的“USB-C接口”,它提供了一个标准化的方法,让AI模型能够连接各种外部资源。
Draw.io Model Context Protocol (MCP) Server,就是基于此协议实现的对接 Draw.io 的 MCP 服务。我们可以使用这样一套服务,把 AI 与 Draw.io 建立起使用链接。
源码:https://github.com/lgazo/drawio-mcp-server
1. 插件安装
- 谷歌浏览器:https://chromewebstore.google.com/detail/drawio-mcp-extension/okdbbjbbccdhhfaefmcmekalmmdjjide
- 火狐浏览器:https://addons.mozilla.org/en-US/firefox/addon/drawio-mcp-extension/

安装完成后,可以看到这样一个小插件(右侧插件文件里可以点击让常驻浏览器),之后后面可以等着使用(继续下面的步骤)。
2. 配置服务
{ "mcpServers": { "drawio": { "command": "npx", "args": [ "-y", "drawio-mcp-server" ] } }}
2.1 trae.ai - 也可以其他的

2.2 spring ai

3. 使用服务
首先打开:https://app.diagrams.net/#

- 对接上之后,你就可以在右侧提问了。之后他就可以实时的出设计图。
受限于MCP服务对接,它不是在 Draw.io 上扩展,会缺少一些交互和判断,画图有时候会有重叠。 - 不过,这个方式的好处是,你可以结合自己的代码,拖进去,让它直接出架构图、流程图、模型图等。之后在自己做一些调整。
三、软件方式使用
现在 Github 上有很多基于 Draw.io 的二次开发,结合了 Ai 的能力,这里小傅哥找到一个做这块功能比较早的,next-ai-draw-io 来演示给大家。感兴趣的伙伴,还可以结合代码做二次开发。
这是一个基于 Next.js 的 Web 应用程序,它将 AI 功能与 draw.io 图表集成在一起。该应用程序允许您通过自然语言命令和 AI 辅助可视化来创建、修改和增强图表。
1. 代码下载
代码:https://github.com/DayuanJiang/next-ai-draw-io
git clone https://github.com/DayuanJiang/next-ai-draw-io.git

下载代码后,注意修改配置文件。
2. 启动工程

- 进入 package.json 点击绿色箭头执行启动。
3. 访问项目

- 访问 http://localhost:6002 这样你就可以提问来让它绘制图了。这个效果还不错。
那么,如何系统的去学习大模型LLM?
作为一名深耕行业的资深大模型算法工程师,我经常会收到一些评论和私信,我是小白,学习大模型该从哪里入手呢?我自学没有方向怎么办?这个地方我不会啊。如果你也有类似的经历,一定要继续看下去!这些问题啊,也不是三言两语啊就能讲明白的。
所以我综合了大模型的所有知识点,给大家带来一套全网最全最细的大模型零基础教程。在做这套教程之前呢,我就曾放空大脑,以一个大模型小白的角度去重新解析它,采用基础知识和实战项目相结合的教学方式,历时3个月,终于完成了这样的课程,让你真正体会到什么是每一秒都在疯狂输出知识点。
由于篇幅有限,⚡️ 朋友们如果有需要全套 《2025全新制作的大模型全套资料》,扫码获取~
👉大模型学习指南+路线汇总👈
我们这套大模型资料呢,会从基础篇、进阶篇和项目实战篇等三大方面来讲解。

👉①.基础篇👈
基础篇里面包括了Python快速入门、AI开发环境搭建及提示词工程,带你学习大模型核心原理、prompt使用技巧、Transformer架构和预训练、SFT、RLHF等一些基础概念,用最易懂的方式带你入门大模型。
👉②.进阶篇👈
接下来是进阶篇,你将掌握RAG、Agent、Langchain、大模型微调和私有化部署,学习如何构建外挂知识库并和自己的企业相结合,学习如何使用langchain框架提高开发效率和代码质量、学习如何选择合适的基座模型并进行数据集的收集预处理以及具体的模型微调等等。
👉③.实战篇👈
实战篇会手把手带着大家练习企业级的落地项目(已脱敏),比如RAG医疗问答系统、Agent智能电商客服系统、数字人项目实战、教育行业智能助教等等,从而帮助大家更好的应对大模型时代的挑战。
👉④.福利篇👈
最后呢,会给大家一个小福利,课程视频中的所有素材,有搭建AI开发环境资料包,还有学习计划表,几十上百G素材、电子书和课件等等,只要你能想到的素材,我这里几乎都有。我已经全部上传到CSDN,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】
相信我,这套大模型系统教程将会是全网最齐全 最易懂的小白专用课!!
更多推荐
所有评论(0)