Flow

节点画布编排器 · 零依赖原生 Pointer Events + SVG 贝塞尔连线 · 拖节点/拖桩连线/平移缩放/适配视图 + 受控 nodes/edges(onNodesChange/onConnect/删点删线) + renderNode 自定义节点内容 · 几何抽纯函数带单测 · AI 工作流/流程编排旗舰

提示词

赛博朋克城市夜景

生图模型

SDXL · 30 步

高清放大

×2 · 面部修复

输出

1 张图片

全状态

提示词

赛博朋克城市夜景

生图模型

SDXL · 30 步

高清放大

×2 · 面部修复

输出

1 张图片

AI 生图流水线（拖节点 / 拖出桩连线 / 滚轮平移 · Ctrl+滚轮缩放）

提示词

赛博朋克城市夜景

生图模型

SDXL · 30 步

高清放大

×2 · 面部修复

输出

1 张图片

运行中（连线流光）

Playground

缩放控制条连线流光

提示词

赛博朋克城市夜景

生图模型

SDXL · 30 步

高清放大

×2 · 面部修复

输出

1 张图片

<Flow
  nodes={nodes}
  edges={edges}
  getHandles={(n) => [{ id: "in", type: "target" }, { id: "out", type: "source" }]}
  onNodesChange={setNodes}
  onConnect={(c) => setEdges((e) => [...e, { id: uid(), ...c }])}
  renderNode={(n) => <NodeCard data={n.data} />}
/>