从0到1 实现低代码 DAG 编辑器：Flowgram 实战
ReactTypeScriptFlowgram可视化编辑器低代码DAG工作流RsbuildSemiDesignCodeMirror开源项目前端
本期内容
看点 - 拖拽式搭建 DAG 工作流，所见即所得 - 内置 5+ 节点类型：SQL、JS、飞书表格、飞书通知、API 调用 - 表单 + 变量引擎，下游节点可直接引用上游输出（{{nodeName.field}}） - 支持循环子画布、节点分组、自动布局、撤销重做、缩略图导航 - 浏览器端 runtime，可直接试跑；切换 server 模式即可对接后端 - 完整的工具栏与侧边栏：保存、运行、变量面板、节点配置 技术栈 - 框架：React 18 + TypeScript - 编辑器核心：@flowgram.ai/free-layout-editor 0.2.14 - 运行时：@flowgram.ai/runtime-js（browser mode） - UI 组件：@douyinfe/semi-ui（Semi Design） - 代码编辑：@uiw/react-codemirror 6（支持 SQL/JS/JSON 多语言高亮） - 构建工具：Rsbuild 1.x（基于 Rspack） - 样式：styled-components 5 - 依赖注入：Inversify 风格 + 装饰器（legacy 模式） - 表单/变量：@flowgram.ai/form-materials