Easy Draw 的由来

之前是看鱼皮介绍的 next-ai-draw-io 绘图工具，发现这个挺有意思的。 但AI绘图在实际使用中，往往还需要对生成的图形样式进行调整，如果是想制作一个实用的图形还是比较麻烦的。 Easy Draw 不仅可以使用对话方式来生成图形，还可以对图形样式进行修改，这在实际使用过程中是非常实用的！

在线体验

🚀在线体验地址：http://123.57.223.239/draw/ ⭐GitHub地址：https://github.com/grid-oaa/easy-draw

模型key只会记录在本地浏览器的localstorage，放心使用

Easy Draw 是 AI + draw.io 的在线绘图原型。 使用自然语言描述业务 / 修改图形，生成drawio可编辑图形、Mermaid格式图形。 默认设置了多套绘图风格，图形可保存为png或drawio格式

功能亮点

• 文本生成图表：自然语言生成 Mermaid 图表代码
• 历史数据导入/插入：将历史图形导入 draw.io 画布
• 样式修改能力：AI 指令 + 内置风格预设
• 本地保存与导出：支持 .drawio / PNG
• 模型可配置：Base URL / API Key / Model

样式修改能力（核心特色）

选中“修改”按钮后，使用对话的方式修改图形的颜色、线条、透明度、字体等等属性

整体架构

• 前端：Vue 2 + Element UI + Vuex + axios
• 后端：Spring Boot 3 + Spring AI（OpenAI 兼容）
• 绘图引擎：diagrams.net iframe + mermaid-import 插件

目录结构

▼
text
复制代码
.
├─ frontend/   # 前端（Vue 2）
├─ backend/    # 后端（Spring Boot）
└─ doc/        # 部署与集成文档

快速开始

1) 二开后的draw.io（开源地址：GitHub - grid-oaa/drawio）

• 该资源已放在 frontend/public/drawio
• 设置 VUE_APP_DRAWIO_BASE_URL=/drawio

2) 启动后端

▼
text
复制代码
cd backend
mvn spring-boot:run

默认端口 8081，默认上下文路径为 /drawio。

3) 启动前端

▼
text
复制代码
cd frontend
npm install
npm run serve

4) 首次使用

• 右侧点击 Model 填写 Base URL / API Key / Model
• 输入描述生成图表 / 修改样式