Projects
Smart Drawio Next
用自然语言或参考图片，几秒钟生成可编辑的专业科研 Draw.io 图表
项目简介
Smart Drawio Next 将 Next.js 16、Draw.io embed 以及流式大模型调用组合在一起，打造了一款革命性的图表生成工具。它能够理解你的自然语言描述或参考图片，自动生成结构化的专业图表，并且支持在线编辑和持续优化。
无论是科研论文中的架构图、产品设计的流程图，还是技术文档的系统架构，都可以通过简单的描述快速生成。项目已经内置了多模型配置、访问密码、历史记录、通知系统等配套功能，可以直接部署为个人效率工具或团队内部服务。
功能亮点
LLM 原生绘图体验
流式显示生成进度，支持"继续生成"拆分长内容；可手动指定 20+ 图表类型或让模型自动选择
多模态输入
支持拖拽 PNG/JPG/WebP/GIF（≤5 MB）或使用文件选择，配合 Vision 模型将已有图纸转成可编辑信息
双画布联动
Monaco 编辑器负责查看/修改原始代码，Draw.io iframe 负责渲染与微调；支持随时重新应用代码
智能优化链路
一键修复箭头锚点、线条宽度等常见问题，或通过高级优化面板勾选/自定义需求交给 AI 再处理
配置管理器
UI 里即可创建、复制、导入/导出任意数量的 OpenAI/Anthropic 兼容配置，支持在线测试模型列表
历史记录 & 通知
最近 20 条生成记录保存在浏览器 localStorage，可随时回放；通知、确认弹窗等提升整体 UX
技术栈
前端框架
- • Next.js 16 (App Router)
- • React 19
画布渲染
- • Draw.io Embed
代码编辑器
- • @monaco-editor/react
样式方案
- • Tailwind CSS v4
- • 自定义设计系统
LLM 接入
- • OpenAI / Anthropic 兼容接口
- • Server Actions
- • Edge API 路由
状态持久化
- • localStorage（配置、历史、访问密码）
快速开始
1.克隆仓库：git clone https://github.com/yunshenwuchuxun/smart-drawio-next.git
2.安装依赖：pnpm install
3.启动开发服务器：pnpm dev
4.访问 http://localhost:3000 即可体验
适用人群
- →科研工作者 - 快速生成论文中的架构图、流程图
- →产品经理 - 绘制产品流程图、用户旅程图
- →开发人员 - 创建系统架构图、技术文档图表
- →教育工作者 - 制作教学演示图表
- →任何需要快速生成专业图表的用户
开源许可
MIT License – 可在保留版权声明的前提下自由使用、复制与分发