AI一键图表生成、样式修改的绘图开源工具【easy-draw】

Easy Draw

🚀在线体验地址http://123.57.223.239/draw/

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

Easy Draw 开源地址GitHub - grid-oaa/easy-draw

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 插件

目录结构

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

快速开始

1) 二开后的draw.io(开源地址:GitHub - grid-oaa/drawio

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

2) 启动后端

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

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

3) 启动前端

复制代码
cd frontend
npm install
npm run serve

4) 首次使用

  • 右侧点击 Model 填写 Base URL / API Key / Model
  • 输入描述生成图表 / 修改样式
相关推荐
冬奇Lab9 小时前
开源项目第172期:agentOS — 以库的形式给 AI Agent 一个操作系统,冷启动 92x 更快、内存 47x 更少
人工智能·开源·agent
陳陈陳13 小时前
🚀 前端流式输出革命:SSE + BFF 架构从零到一实战指南
vue.js·架构·node.js
Revolution6113 小时前
第一次运行 Node.js:终端里的 JavaScript 怎样执行
后端·面试·node.js
半句唐诗13 小时前
我是如何通过 Access Token 成功发布第一个 npm 包的
前端·npm·node.js
paopaokaka_luck13 小时前
基于springboot3+vue3的智能文库平台(AI智能搜索、AI智能汇总、实时在线状态展示、多格式文档预览与富文本编辑、Echarts图形化分析)
前端·网络·spring boot·网络协议·echarts
zzzll111114 小时前
Spring Boot 入门指南:从零开始构建 Java Web 应用
java·前端·spring boot
贩卖黄昏的熊15 小时前
NestJS简明教程——异常处理和日志
javascript·node.js·nest.js
haishikeji696_16 小时前
多部门协同无人机管理系统架构设计|飞控管理平台、无人机巡检平台标准化开发方案
开源·无人机·低空经济·无人机管理系统·无人机飞控平台·一网统飞
Revolution6119 小时前
Node.js 是什么:前端项目里哪些事情由它完成
前端·面试·node.js
热心市民lcj19 小时前
Spring Boot 整合 Caffeine 本地缓存实战
spring boot·后端·缓存