用途:使用 Svelte Flow(@xyflow/svelte)在 Svelte 中构建节点式 UI,如工作流编辑器、数据流图、流程图与可视化。
安装:npm install @xyflow/svelte,并引入 '@xyflow/svelte/dist/style.css'。Svelte 5 中节点与边建议使用 $state.raw。
主要能力:节点需 id、position、data,边需 id、source、target;内置边类型 default、smoothstep、step、straight、bezier,内置节点类型 default、input、output。支持自定义节点(Handle、Position、NodeProps)与自定义边(BaseEdge、EdgeLabel、getStraightPath/getBezierPath/getSmoothStepPath),通过 nodeTypes、edgeTypes 注册。
使用方式:<SvelteFlow bind:nodes bind:edges fitView />;状态不可直接修改,需创建新对象,或用 useSvelteFlow 的 updateNode。支持 onconnect、onnodedrag、onbeforedelete 等事件。内置 Controls、MiniMap、Background(Dots/Lines/Cross)、Panel 组件。可用 Dagre 做层次布局;支持浮动边、邻近自动连接、边重连、删除节点后重连、导出图片(配合 html-to-image)等。
适用场景:工作流编辑器、数据流图、交互式图表与流程可视化。
限制:资料未提供收费、价格、平台与效果信息。大图(1000+ 节点)可关闭 elevateNodesOnSelect 与 elevateEdgesOnSelect,并限制缩放;超大图建议虚拟化。节点和边为不可变,直接改属性不会更新。