Projects

Smart Drawio Next

用自然语言或参考图片,几秒钟生成可编辑的 Draw.io 图表,适用于科研、架构文档与演示场景

项目简介

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

从 Prompt 到可编辑图表:这是结构化图表工作流,而不是一次性截图生成

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

代码编辑器 + Draw.io 画布双栈联动,是它真正拉开差距的地方

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

它不是只会一类图:科研图、视觉模型图和多模态结构图都能生成

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

多模态输入不是噱头,而是把“参考图改造”为可编辑内容的关键入口

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

复杂科研图也能保持结构清晰,这让它更像生产工具而不是展示 Demo

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

后处理工具链与样式系统,让图表从“能用”走向“能展示”

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 – 可在保留版权声明的前提下自由使用、复制与分发