文档教程后端【免费下载链接】CodeGuide:books: 本代码库是作者小傅哥多年从事一线互联网 Java 开发的学习历程技术汇总旨在为大家提供一个清晰详细的学习教程侧重点更倾向编写Java核心内容。如果本仓库能为您提供帮助请给予支持(关注、点赞、分享)项目地址https://gitcode.com/gh_mirrors/code/CodeGuide点击查看免费下载导读本节是《AI Agent 场景应用 - ai draw.io》第 4 部分的第一个实操环节核心任务是初始化 ai draw.io 的前端工程。由于 draw.io 的开发插件基于 React 语言构建因此前端工程同样选择 React 技术栈。读完本节你将掌握 Node.js 环境的安装与 npm 镜像源配置、WebStorm 开发工具的准备以及 TypeScript 的快速入门路径为后续基于 AI IDE 完成页面嵌入、接口对接与交互式画图打下工程基础。一、本章诉求为什么要先初始化前端工程ai draw.io 是 AI Agent 脚手架 场景应用 项目第 4 部分的业务场景它的目标非常明确基于 AI Agent 智能体脚手架在 draw.io 场景下使用 React 开发一套 AI 智能绘图功能详见 第4-0节ai draw.io 产品设计。而本节的诉求只有一件事——初始化搭建 ai draw.io 前端工程。之所以选择 React原文给出的理由非常直接draw.io 的开发插件是 React 语言的所以我们也要基于 React 语言构建工程。也就是说技术选型不是拍脑袋而是由后续要嵌入的 react-drawio 组件决定的。react-drawio 把 draw.io 编辑器以 React 组件的形式封装出来提供了相关的 API 操作既能将 AI 生成的 XML 渲染到 draw.io 面板上也能读取面板内容再交给 AI 分析和调整。因此前端工程必须与它保持同语言、同生态才能以最小的成本完成嵌入与双向通信。从项目笔记notes.md中可以进一步确认该场景的简历级核心技术栈包含React、Draw.io (mxGraph)、TypeScript、Maven Archetype、Docker、Nginx等其中前端正是 React TypeScript 的组合。二、场景定位前端工程在整个项目中的位置在动工之前先看清本节在整个课程体系中的坐标。整体项目分为 5 个部分部分内容说明第 1 部分需求与架构脚手架需求分析、系统架构设计第 2 部分基础底座开发Spring AI Google ADK 智能体底座20 节课程第 3 部分脚手架工程化Maven Archetype 脚手架生成与发布第 4 部分业务场景ai draw.io本文所在部分共 6 节第 5 部分业务场景MobileOpenClaw手机自动化网关第 4 部分的 6 节课是一条完整的链路第4-0节ai draw.io 产品设计 —— 场景定位与产品效果设计第4-1节初始化工程搭建本文—— React 前端工程从 0 到 1第4-2节在页面嵌入draw.io组件和对话框 —— 引入 react-drawio页面右侧放置对话框第4-3节智能体API接口对接 —— 创建会话 SessionID、调用对话接口进行绘图第4-4节AI用户DrawIO交互式画图 —— 分析、绘制、检查的多智能体流程增强第4-5节ai-draw-io云服务器部署 —— 前后端 Docker 化部署。可以看到本节是第 4 部分的地基工程后续所有画图、对话、部署操作都建立在这套 React 工程之上。三、开发环境准备原文档对本节的开发环境给出了明确的要求清单这是初始化工程前必须完成的准备工作逐项落实即可。1. Node.js v20前端工程基于 React 构建而 React 工程的依赖安装、脚本运行都依赖 Node.js 运行时因此第一步是安装 Node.js版本要求 v20 及以上。可以直接从 Node.js 官网下载对应操作系统的安装包安装安装完成后可以在终端验证版本node -v npm -v确保node -v输出为v20.x或更高版本npm -v能正常输出版本号即表示 Node.js 与 npmNode 包管理器环境就绪。npm 随 Node.js 一同安装后续无论是安装 react-drawio、Vite 等依赖还是运行构建脚本都依赖它。2. WebStorm 2023.1开发工具建议使用WebStorm 2023.1。原文档给出的理由是WebStorm 自带了一整套开发前端的工具能力代码提示、调试、内置终端、版本管理等因此对前端开发非常好用。对于长期做后端、初次接触前端工程的程序员使用这类开箱即用的 IDE 可以显著降低环境配置的心智负担。说明工具本身是可替换的VSCode 等同样可以胜任。选择 WebStorm 更多是出于开箱即用的体验考虑并非工程硬性依赖。3. 配置 npm 镜像源关键一步安装好环境后务必先设置 npm 源地址。原文档特别强调如果不配置后续构建项目会非常慢。执行以下命令即可npm config set registry https://registry.npmmirror.comregistry.npmmirror.com是国内的 npm 镜像源将 npm 默认的官方源切换为国内镜像后npm install下载 react、react-drawio、TypeScript 等依赖的速度会有质的提升。配置完成后可以通过以下命令确认是否生效npm config get registry输出https://registry.npmmirror.com即表示镜像源配置成功。4. TypeScript 学习资料由于前端工程使用 TypeScript原文档建议先花少量时间了解 TypeScript 的语言结构。原文特别点出了对后端程序员友好的一个重要事实TypeScript 的语言结构比较清晰甚至和我们学习的 Java 是有类似的地方的。TypeScript 作为 JavaScript 的超集引入了类型系统、接口、泛型等面向对象能力这与 Java 的思维模式天然契合。有 Java 基础的同学看 TypeScript 代码基本没有障碍——所有的面向对象语言代码核心概念是通用的。原文档给出的学习路径是两份入门教程菜鸟入门教程 TypeScript 中文文档可以作为课下补充材料。四、工程初始化实操要点1. 技术栈定位React TypeScript工程的技术栈是React TypeScript。这一点可以从多个仓库文档相互印证第 4-0 节产品设计明确指出要使用 react 开发一套 ai draw.io 智能绘图功能场景项目笔记notes.md的核心技术清单中列有React、Draw.io (mxGraph)、TypeScript后续第 4-5 节部署文档中提到前端页面运行在3000 端口这符合 React 工程本地开发服务的常见约定。初始化一个 React TypeScript 工程的方式有很多如 Vite、Create React App 等从仓库文档无法确认具体采用的脚手架工具实操时选择你熟悉的任一种 React 工程初始化方式即可。核心是工程创建完成后语言是 TypeScript框架是 React且能正常启动一个跑在 3000 端口的开发服务。2. 为什么这节对后端程序员很友好原文档给出了一个非常务实的定位——这部分前端的内容会使用即可初始化工程搭建完成后就可以基于 AI IDE 工具如 Cursor、Trae、通义灵码等任一款来完成后续开发前端页面、组件、接口对接的代码可以大量借助 AI 生成开发效率远高于手写对后端程序员来说找工作一般后端岗位不会考察前端细节所以前端部分仅仅是当做使用即可重点精力仍应放在后端智能体脚手架的装配与编排能力上。也就是说本节的目标不是让后端同学成为前端专家而是搭好一个能跑的 React 工程底座让后续的 AI IDE 编程、页面嵌入、接口对接有地方落地。3. 初始化完成后的最小可运行标准从后续课程的衔接来看工程初始化完成后应当满足以下最小标准才算是合格npm install能顺利安装依赖依赖镜像源配置正确开发环境准备 的第 3 步在此发挥作用开发服务能正常启动浏览器可访问前端页面后续第 4-5 节部署时前端对应 3000 端口工程内已预留引入 react-drawio 的基础目录结构第 4-2 节会在初始页面中引入 react-drawio 组件并在右侧放置对话框。五、初始化之后前端工程将要承载的能力为了让本节的工作更有画面感这里提前预告一下这套前端工程后续要承载的核心能力均来自仓库中后续章节文档嵌入 draw.io 编辑器通过 react-drawio 将 draw.io 嵌入到初始页面实现AI 生成 XML → draw.io 渲染的闭环第4-2节对接智能体 API前端打开页面时加载智能体列表 → 选择智能体创建会话 SessionID → 调用对话接口服务端以 draw.io XML 格式返回结果并渲染到面板上第4-3节交互式画图服务端智能体按分析 → 绘制 → 检查流程工作信息不全时以 JSON 类型返回让用户补充前端按user对话与drawioXML 渲染两种类型分发处理并增加对话历史记录、浏览器本地保存绘图等能力第4-4节云服务器部署前端与后端分别构建 Docker 镜像在 2c4g 云服务器Ubuntu 24上通过 Docker Portainer 完成部署并开放9000管理面板、8091后端接口、3000前端页面端口第4-5节。六、小结本节完成的工作可以概括为一句话搭好 React TypeScript 的 ai draw.io 前端工程并备齐 Node.js v20、WebStorm、npm 镜像源、TypeScript 基础四样开发前提。理解本节时有三个重点值得反复体会技术选型跟随生态因为 draw.io 插件是 React 生态所以前端工程选择 React这是场景决定技术的典型例子环境配置先行npm 镜像源配置虽是一行命令却直接决定后续所有依赖安装的速度是新手最容易忽略、也最影响体验的一步定位是会用即可前端部分对后端程序员友好初始化完成后即可借助 AI IDE 工具完成后续开发核心精力应放在智能体后端能力的构建上。工程底座就绪后下一节将正式进入 在页面嵌入 draw.io 组件和对话框开始绘制这套智能绘图系统的第一块界面拼图。赞分享文档教程后端【免费下载链接】CodeGuide:books: 本代码库是作者小傅哥多年从事一线互联网 Java 开发的学习历程技术汇总旨在为大家提供一个清晰详细的学习教程侧重点更倾向编写Java核心内容。如果本仓库能为您提供帮助请给予支持(关注、点赞、分享)项目地址https://gitcode.com/gh_mirrors/code/CodeGuide点击查看免费下载相关推荐AI Agent 场景应用基于 CodeGuide 智能体脚手架打造 ai draw.io 交互式绘图产品AI Agent 场景应用基于 CodeGuide 智能体脚手架打造 ai draw.io 交互式绘图产品 本文基于 第4 0节ai draw.io文档教程后端Next AI Draw.io 智能绘图工具完整使用教程Next AI Draw.io 智能绘图工具完整使用教程 还在为绘制专业图表而烦恼吗传统绘图工具需要你手动拖拽每个元素、调整每条连线、配置每种样式整个过程既AI 应用大模型前端后端MCP 服务arduino-esp32 ZigbeeColorDimmableLight 端点实战指南用 ESP32 打造 HA 标准的彩色可调光 Zigbee 灯具arduino esp32 ZigbeeColorDimmableLight 端点实战指南用 ESP32 打造 HA 标准的彩色可调光 Zigbee 灯具 本文档教程后端上一篇Pako 项目使用教程下一篇IntervalTree 项目教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考