Projects
用自然语言或参考图片,几秒钟生成可编辑的 Draw.io 图表,适用于科研、架构文档与演示场景
项目简介
Smart Drawio Next 是一个面向科研图、系统架构图与产品说明图的 AI 绘图工具。它不是把想法直接渲染成一张不可修改的图片,而是把自然语言描述或参考图片转成结构化的 Draw.io 内容,让你得到真正可编辑、可继续优化的图表结果。
整个流程围绕“生成 → 编辑 → 应用 → 优化”展开:用户先输入 prompt 或上传参考图,模型流式生成 XML / JSON,结果会同步进入 Monaco 编辑器与嵌入式 Draw.io 画布;你既可以像写代码一样直接改结构,也可以像传统白板工具一样继续拖拽微调。再配合后处理工具、样式包、多模型配置与本地历史记录,它更像一套完整的图表生产工作台,而不是一次性 demo。
从 Prompt 到可编辑图表:这是结构化图表工作流,而不是一次性截图生成

README 里最重要的判断,是把“AI 生成图”从一次性输出升级成可反复迭代的图表工作流。Smart Drawio Next 接收自然语言描述,也支持上传参考图片,然后把结果生成成结构化的 XML / JSON,而不是只吐出一张静态图。这样做的好处非常直接:图生成出来之后,你依然可以继续编辑、继续优化、继续应用到真实的科研、文档和汇报场景里。
对研究者和工程团队来说,这种可编辑性比“单次出图速度”更重要。论文结构图、系统架构图、流程图、时间线图往往都需要多轮修改,如果 AI 只能给你一张图片,你最后还是要重画;而 Smart Drawio Next 生成的是可落进 Draw.io 的内容,所以它在产品定位上更像“AI 加持的专业绘图工作台”。
代码编辑器 + Draw.io 画布双栈联动,是它真正拉开差距的地方

项目最强的体验不是“AI 会画图”,而是“图生成之后还能像工程对象一样被继续操作”。README 把这一层讲得很清楚:左边是输入与生成控制,中间是 Monaco 编辑器,右边是嵌入式 Draw.io 画布。你可以直接在代码层修改节点、箭头、布局与文本,再一键重新应用;也可以在画布里继续拖动和微调,让生成结果真正融入既有工作流。
这种 code + canvas 的双栈设计非常适合复杂图表:一方面,结构化编辑让你可以精确控制图的逻辑;另一方面,Draw.io 原生的可视化交互保留了普通用户的低门槛操作方式。它不是在编辑器和白板之间二选一,而是把两者的优势拼接到了一起。
它不是只会一类图:科研图、视觉模型图和多模态结构图都能生成

README 的 Gallery 很能说明这个项目的上限。除了通用流程图和架构图,它还展示了 Transformer、Swin Transformer、CLIP、ProSST 等不同风格与内容密度的科研图表示例。这一点很重要,因为真正的图表工具不能只会“画几个盒子”,而要能适应完全不同的信息组织方式:有的图强调模块分层,有的图强调跨模态交互,有的图强调时序和数据流。
从这些示例可以看出,Smart Drawio Next 更像一个图表生成引擎:你可以显式指定图表类型,也可以让模型自动判断;你可以做学术论文里的模型图,也可以做技术文档里的系统图、汇报里的概念图,甚至偏信息可视化风格的演示图。这种跨场景通用性,正是它适合作为 portfolio 项目的原因。
多模态输入不是噱头,而是把“参考图改造”为可编辑内容的关键入口

README 强调了这个项目不仅支持文本生成,还支持图片输入。你可以上传一张已有图示、手绘草图、论文截图或参考页面,让 vision 模型先理解其结构,再转成可编辑图表内容。相比单纯的 text-to-diagram,这一步非常实用:现实工作里很多需求并不是“从零开始画”,而是“把这张已有图改成适合我汇报、文档或论文的版本”。
这也是 Smart Drawio Next 在实战里更有价值的原因。它把图片理解、结构重建和后续编辑串成一条链路,让参考图不再只是灵感来源,而是可转换、可重组、可二次创作的输入。对科研和工程用户来说,这类能力比“炫技式自动生成”更贴近真实工作流。
复杂科研图也能保持结构清晰,这让它更像生产工具而不是展示 Demo

README 里的 ProSST 示例说明,这个项目不仅能处理经典 AI 架构图,也能覆盖更复杂的科研示意场景。此类图通常包含更多层次、更复杂的关系线和更高的信息密度,如果没有后续编辑与后处理能力,很容易生成出“元素都有,但读不明白”的结果。Smart Drawio Next 的优势在于:生成只是起点,后续你还能继续整理结构、调整视觉层级、压缩冗余线条与文本噪声。
因此它适合的不只是“做一张好看的图”,而是“把复杂知识表达整理成真正能被人读懂、能放进论文和文档里的图”。这是科研绘图里很稀缺、也很有说服力的产品能力。
后处理工具链与样式系统,让图表从“能用”走向“能展示”

很多 AI 图表工具的问题不是“生成不出来”,而是“生成出来以后不够像最终交付物”。README 里的 Tools System 正是在解决这个问题:Drawing Tricks 负责对齐、正交连线、统一间距、箭头规范化、跳线等结构修正;Text Tools 负责文本折行、居中、面板化与紧凑排版;Style Presets 与 Style Packs 则负责把整张图一键拉到可展示、可汇报的视觉质量。
这让 Smart Drawio Next 不只是一个生成器,更像一个能把草图打磨成展示级图表的后期系统。你可以先用模型快速起稿,再用工具链把它整理到适合论文、演讲或技术方案评审的精度。这种“生成 + 工具化 refinement”的组合,是这个项目最值得在 portfolio 里强调的地方之一。
功能亮点
流式图表生成
支持 streaming generation 与 continue generation,长图或复杂图表也能分段生成并持续补全
多模态输入
既支持自然语言 prompt,也支持上传参考图片,把已有图示转换成可编辑 Draw.io 内容
代码 + 画布双工作流
中间用 Monaco 编辑 XML / JSON,右侧嵌入 Draw.io 实时预览与继续编辑,兼顾精确控制与可视操作
后处理工具链
提供布局整理、连线修复、文本格式化、样式预设与 style packs,让初稿快速提升到展示级效果
20+ 图表类型
覆盖 flowchart、mind map、sequence、UML、ER、timeline、architecture diagram、network topology 等多种图表形态
主题与样式系统
内置 10 种颜色主题,并支持 blueprint、business clean、presentation cards 等一键视觉风格
配置管理与历史记录
支持多模型配置切换、访问密码模式、本地历史回放与通知系统,适合个人或团队长期使用
可部署产品形态
提供 Docker / Docker Compose 部署路径,并支持 client-side 与 server-side 两种 LLM 配置模式
技术栈
前端框架
- • Next.js 16 (App Router)
- • React 19
画布渲染
- • Draw.io Embed
代码编辑器
- • @monaco-editor/react
样式方案
- • Tailwind CSS v4
- • 自定义设计系统
LLM 接入
- • OpenAI / Anthropic 兼容接口
- • SSE 流式响应
- • Server Actions
- • Edge API 路由
状态与配置
- • localStorage
- • 访问密码模式
- • 历史记录回放
部署方式
- • Docker
- • Docker Compose
- • Next.js standalone output
开源许可
MIT License – 可在保留版权声明的前提下自由使用、复制与分发