前端UI组件图表库【免费下载链接】xyflowReact Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.项目地址https://gitcode.com/GitHub_Trending/xy/xyflow点击查看免费下载xyflow/system是 xyflow 仓库中驱动 React Flow 与 Svelte Flow 的共享工具层封装了边路径计算、平移缩放、节点拖拽、连接线、缩略图等全部底层逻辑。本文将结合 packages/system/README.md 与其源码实现系统讲解该包的定位、功能清单、安装方式与核心 API帮助你理解两个框架开箱即用能力背后的统一实现并掌握在纯 TypeScript 场景下复用这些工具的方法。什么是 xyflow/system在 xyflow 单仓库中packages/react 与 packages/svelte 是两个独立的框架适配层而xyflow/system位于两者之下提供一套**框架无关framework-agnostic**的 vanilla TypeScript 工具与类型。正如其 README 所言Core system utilities powering React Flow and Svelte Flow它包含两个框架之间共享的逻辑与工具函数例如边路径计算edge path calculations、平移缩放pan/zoom、节点拖拽node dragging等。该包的设计目标是作为 React Flow 和 Svelte Flow 的共享基础层不面向无关库使用README 明确注明 not intended for use with unrelated libraries。从依赖声明看它直接依赖d3-drag、d3-interpolate、d3-selection、d3-zoom等 D3 交互原语在此基础上封装出面向流程图编辑场景的高层能力。从源码结构看包的入口 packages/system/src/index.ts 仅做统一转发export * from ./constants; export * from ./types; export * from ./utils; export * from ./xydrag; export * from ./xyhandle; export * from ./xyminimap; export * from ./xypanzoom; export * from ./xyresizer;可见包内共有三大类内容constants常量、types类型、utils工具函数以及四个以xy前缀命名的交互模块拖拽、Handle、缩略图、平移缩放、尺寸调整。安装与构建信息在 xyflow monorepo 中xyflow/system通过 pnpm workspace 管理React 与 Svelte 两个包均以xyflow/system: workspace:*引用见 packages/react/package.json 与 packages/svelte/package.json。若要在自己的项目中使用按 README 说明执行pnpm add xyflow/system从 packages/system/package.json 可以了解到该包的工程细节版本0.0.82MIT 许可sideEffects: false可安全参与 tree-shaking发布形态同时提供 UMDdist/umd/index.js、ESMdist/esm/index.js与index.mjs与类型声明dist/esm/index.d.tsNode 与浏览器环境均有对应的导出条件构建方式基于xyflow/rollup-config的 rollup 配置rollup.vanilla true全局名为XYFlowSystem并将d3-selection、d3-zoom、d3-drag声明为 external globals因此打包产物不含 D3 代码质量保障提供dev、build、lint、typecheck脚本其中typecheck通过tsc --noEmit对全量源码做类型检查。功能全景README 中的 11 项能力README 的 Features 清单概括了该包的全部能力结合源码逐项对应如下功能说明源码位置Pan ZoomXYPanZoom画布平移与缩放交互xypanzoom/XYPanZoom.tsDraggingXYDrag节点与多选集合的拖拽xydrag/XYDrag.tsHandles/ConnectionsXYHandle节点连接点与连线管理xyhandleMinimapXYMiniMap缩略图总览与导航xyminimapEdge UtilitiesSVG 边路径生成bezier、straight、step、smoothstep 等utils/edgesStore Utilities流程状态管理与更新utils/store.tsDOM UtilitiesDOM 测量与交互辅助utils/dom.tsMarker Utilities边的 SVG marker 处理utils/marker.tsGraph Utilities节点、边与图结构运算utils/graph.tsGeneral Utilities通用杂项工具utils/general.tsTypes Constants共享类型、枚举与常量types 与 constants.ts工具的聚合入口为 utils/index.ts它再导出 attribution、connections、dom、edges、graph、general、marker、node-toolbar、edge-toolbar、store、types、shallow-node-data 等模块而边的工具又细分出 bezier-edge.ts、straight-edge.ts、smoothstep-edge.ts、general.ts 与 positions.ts。入门用法直接导入工具函数README 强调所有工具、类型、helper 都可直接从包中导入import { getBezierPath, getConnectedEdges, Position, XYPanZoom } from xyflow/system;下面的示例演示了最常用的边路径计算函数getBezierPathimport { getBezierPath, Position } from xyflow/system; const [path, labelX, labelY] getBezierPath({ sourceX: 0, sourceY: 20, sourcePosition: Position.Right, targetX: 150, targetY: 100, targetPosition: Position.Left, });返回值是一个元组固定长度数组这在源码的 JSDoc 中有明确说明——This function returns a tuple to make it easier to work with multiple edge paths at once。五个返回项依次为可直接用于 SVGpath元素的path字符串、路径中心的labelX/labelY用于渲染边标签、以及源 Handle 到路径中点之间的绝对偏移offsetX/offsetY。边路径计算从参数到 SVG 的完整链路getBezierPath三次贝塞尔曲线bezier-edge.ts 定义了getBezierPath的完整参数与默认值参数说明默认值sourceX/sourceY源 Handle 的 x/y 坐标必填sourcePosition源 Handle 所在方位Position.BottomtargetX/targetY目标 Handle 的 x/y 坐标必填targetPosition目标 Handle 所在方位Position.Topcurvature曲线弯曲程度0.25其内部实现分三步可追溯源码getControlWithCurvature依据 Handle 方位Left/Right/Top/Bottom计算源端与目标端的控制点当两点距离较大时控制点偏移为0.5 * distance距离较小时则退化为curvature * 25 * Math.sqrt(-distance)的非线性收缩calculateControlOffset从而保证短边不会出现夸张的曲线getBezierEdgeCenter用三次贝塞尔在t 0.5处的公式source * 0.125 control * 0.375 ...估算路径中心点与偏移量该处注释注明这不是弧长意义上的真正中点而是一个易计算的近似中点最终拼出 SVG path 指令M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}。getStraightPath 与 getSmoothStepPath直线边 straight-edge.ts 的getStraightPath只接受源/目标的坐标内部通过getEdgeCenter计算中点直接输出M ${sourceX},${sourceY}L ${targetX},${targetY}。阶梯边 smoothstep-edge.ts 的getSmoothStepPath则参数更丰富borderRadius默认5阶梯拐角的圆角半径0即得到直角 Step 边offset默认20边从 Handle 出发后沿方位方向延伸的距离相当于正交布线中的出线长度stepPosition默认0.5折弯点沿主方向的相对位置0表示折弯发生在源端、1表示在目标端、0.5为中点centerX/centerY可手动覆盖折弯中心。源码注释说明getPoints的设计目标是模拟正交边路由orthogonal edge routing——虽然不如真正的正交路由引擎精细但更快作为 Step/SmoothStep 边的默认实现足够好。它内部会处理多种特殊情况相反方位 Handle 的默认路径、同方位 Handle 之间距离小于offset时自动追加gapOffset防止折弯重叠、混合方位如 Right → Bottom时的flipSourceTarget翻转逻辑等标签位置则被放在路径中最长的线段上。生成的路径由getBend用L/Q指令逐段拼接圆角。边的增删与 ID 生成utils/edges/general.ts 还提供了边管理相关的实用函数getEdgeId默认边 ID 生成器格式为xy-edge__${source}${sourceHandle || }-${target}${targetHandle || }与 React Flow / Svelte Flow 渲染出的边 DOM id 一致addEdge(edgeParams, edges, options)向边数组追加一条边同时做两类校验——缺少source/target时报错error006若已存在 source/target/handle 完全相同的边则直接返回原数组即使id不同也不会重复添加。options.getEdgeId可自定义 ID 生成options.onError可接管错误处理reconnectEdge(oldEdge, newConnection, edges, options)按id找到旧边用新连接替换其 source/target/handle 属性shouldReplaceId默认true决定是否用新连接的 ID 替换旧 ID找不到旧边时触发error007getElevatedEdgeZIndex根据连接节点与选中状态计算边层级。默认情况下边渲染在节点之下但连接到带父级节点的边会渲染在父节点之上zIndexMode: manual时完全返回手动zIndex选中提升elevateOnSelect时选中边在zIndex基础上加1000isEdgeVisible用源/目标节点的包围盒与当前视口由 transform 反推做重叠检测用于渲染时的可见性裁剪。从 Handle 到路径坐标getEdgePositionutils/edges/positions.ts 的getEdgePosition把哪条边、连接哪个 Handle解析成getBezierPath所需的源/目标坐标与方位。它会校验源/目标节点是否已初始化有 handleBounds 且测得宽高从handleBounds.source/handleBounds.target中按handleId查找 Handle未指定时取第一个并依据ConnectionMode决定目标端可连接的 Handle 集合Strict模式只允许 source→target宽松模式允许 source→source。找不到 Handle 时触发error008。getHandlePosition则根据 Handle 的方位Top/Right/Bottom/Left与节点绝对坐标计算出锚点位置。画布交互模块XYPanZoom、XYDrag、XYMiniMap、XYResizerXYPanZoom基于 d3-zoom 的平移缩放xypanzoom/XYPanZoom.ts 导出的XYPanZoom工厂函数接收domNode、minZoom、maxZoom、translateExtent、viewport以及onPanZoom/onPanZoomStart/onPanZoomEnd/onDraggingChange回调返回一个PanZoomInstance提供scaleTo、setViewport等方法缩略图模块即通过panZoom.scaleTo(nextZoom)驱动主画布缩放。源码中有两个值得注意的实现细节通过ResizeObserver持续缓存 pane 的 extentcachedExtent避免 d3-zoom 在拖拽/捏合过程中回退到默认 extent 而触发同步布局该 observer 故意不主动断开因为destroy()还会在用户框选时暂停缩放断开会导致缓存失效最终随 pane 卸载被 GC 回收事件处理被拆分到 eventhandler.ts创建 pan/zoom 的 start/change/end 处理器与 filter.ts事件过滤中滚动缩放、平移滚动分别由createZoomOnScrollHandler与createPanOnScrollHandler实现。XYDrag节点与选区拖拽xydrag/XYDrag.ts 基于d3-drag封装节点拖拽逻辑。其OnDrag回调签名为(event, dragItems, node, nodes)拖拽过程中会综合处理节点 extent 约束、父节点位置、snapToGrid吸附网格、自动平移autoPanOnNodeDrag、多选拖拽与 touch 事件OnNodeDrag同时接受MouseEvent | TouchEvent。拖拽所需的指针坐标换算、节点位置计算与吸附逻辑分别来自 utils/dom.ts 与 utils/general.ts。XYMiniMap缩略图交互xyminimap/index.ts 导出的XYMiniMap({ domNode, panZoom, getTransform, getViewScale })返回{ update, destroy, pointer }实例。update接受translateExtent、width、height、zoomStep默认 1、pannable默认 true、zoomable默认 true、inversePan等参数滚轮事件通过panZoom.scaleTo(nextZoom)联动主画布缩放macOS 上按住 Ctrl 滚轮会放大 10 倍增量。React Flow / Svelte Flow 的 MiniMap 插件组件本质上就是这个实例的薄封装。XYResizer节点尺寸调整xyresizer/XYResizer.ts 是 NodeResizer 的底层实现基于d3-drag提供八个方向由ControlPosition/ResizeControlDirection定义的拖拽缩放支持minWidth/minHeight/maxWidth/maxHeight边界、keepAspectRatio保持宽高比、网格吸附以及通过onChange/onEnd回调把XYResizerChangex/y/width/height 的增量与子节点位置变化XYResizerChildChange反馈给上层。图结构与状态工具节点/边关系查询utils/graph.ts 集中了图算法相关工具isEdgeBase/isNodeBase/isInternalNodeBaseTypeScript 类型守卫分别通过含 id、source、target、含 id、position 且无 source/target、含 id、internals 且无 source/target来判别对象类型是解析用户数据时的重要基础getOutgoers(node, nodes, edges)/getIncomers(node, nodes, edges)返回以给定节点为源source出发、或以该节点为目标target汇入的相邻节点集合getConnectedEdges(nodes, edges)返回端点出现在给定节点集合中的全部边getNodesBounds(nodes, params)计算包含所有给定节点的包围盒RectnodeOrigin参数支持[0, 0]左上与[0.5, 0.5]中心等原点配置开发环境下不带nodeLookup调用会打印警告提示子流程场景请通过useReactFlow/useSvelteFlow获取正确的值getNodesInside按视口矩形与 transform 反推流坐标系中的可见节点支持partially部分可见与excludeNonSelectableNodes过滤是只渲染可视区域节点性能优化虚拟化的依据fitViewport计算恰好容纳所有节点的 transform 并调用panZoom.setViewport执行动画duration、ease、interpolate可选即fitView功能的底层实现calculateNodePosition综合节点 extent、父节点与 origin 计算节点的下一个位置返回position与positionAbsolute。DOM 与通用工具utils/dom.ts 提供getPointerPosition把鼠标/touch 事件换算为渲染器坐标可选 snap 网格吸附、getDimensions读取 offsetWidth/offsetHeight、isInputDOMNode判断事件目标是否为输入框/可编辑元素或.nokey元素用于避免在输入时误触删除/移动快捷键等。getEventPosition同时兼容鼠标与触摸事件touches[0]。utils/general.ts 则包含clamp、clampPosition把节点位置约束进CoordinateExtent、clampPositionToParent子节点约束在父节点范围内、calcAutoPanVelocity鼠标接近画布边缘时的自动平移速度计算返回值在 0~1 之间等基础函数。Marker 工具utils/marker.ts 负责边箭头的 SVG marker 管理getMarkerId把 marker 配置序列化为唯一 id字符串形式的 marker 直接返回自身对象形式则按 key 排序拼接id__keyvalue...createMarkerIds遍历边的markerStart/markerEnd或全局默认值去重后生成 Marker 定义列表供defs渲染并按 id 排序保证稳定性。Store 工具与常量utils/store.ts 是两框架状态管理的中枢updateAbsolutePositions遍历节点表对无父节点者按 origin 计算绝对位置并做 extent 约束对有父节点者调用updateChildNode递归联动parseHandles把用户声明的 handles 解析为内部NodeHandleBoundssource/target 分组宽高缺省为 1。常量方面constants.ts 定义了infiniteExtent无限 extent、elementSelectionKeysEnter/空格/Escape、defaultAriaLabelConfig节点、边、控件、缩略图的默认无障碍文案供 A11y 功能使用以及从error001到error016的全量错误消息模板——例如error013提示未加载dist/style.csserror001提示缺少ReactFlowProvider/SvelteFlowProvidererror015提示拖拽了未初始化的节点。它如何支撑 React Flow 与 Svelte Flow从依赖关系可以确认xyflow/system的实际消费方式React Flow 与 Svelte Flow 均将其作为 workspace 依赖引入各自的组件层如EdgeWrapper、NodeWrapper、FlowRenderer、各类插件直接调用上述工具函数完成渲染与交互而框架层只负责 React/Svelte 的响应式状态与 DOM 挂载。这正是 xyflow 能在两个框架间保持行为一致同样的边路径、同样的拖拽手感、同样的缩放与 fitView 逻辑的原因。需要留意的是README 明确指出该包不面向无关库使用且当前没有专门的 API 文档There is currently no dedicated API documentation官方推荐直接阅读 packages/system/src 源码或查阅 React Flow 文档的 API Reference 章节——其中大量内容正是从本包导出的。因此若要深度定制 React Flow / Svelte Flow 的行为例如编写自定义边、自定义拖拽逻辑或复用路径计算本包源码就是最权威的参考资料。小结xyflow/system是 xyflow 生态的引擎舱它用一套与框架解耦的 TypeScript 实现统一承载了节点编辑器所需的最底层能力——从单条贝塞尔边的坐标计算到整图的可视区域裁剪、拖拽、缩放、缩略图与 fitView。理解它的模块划分constants / types / utils / xy* 交互模块、核心 API 签名与默认值既能帮助你更精准地排查 React Flow / Svelte Flow 使用中的疑难问题也为基于这两大框架构建自定义节点编辑器提供了坚实的技术底座。赞分享前端UI组件图表库【免费下载链接】xyflowReact Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.项目地址https://gitcode.com/GitHub_Trending/xy/xyflow点击查看免费下载相关推荐深入Prompt Flow核心概念Flow、Tool与Prompty详解深入Prompt Flow核心概念Flow、Tool与Prompty详解 本文深入解析了Prompt Flow生态系统的三大核心概念Flow、Tool和PrReMe记忆检索完全指南:BM25向量混合搜索实战教程ReMe记忆检索完全指南:BM25向量混合搜索实战教程 ReMe 是一款面向 AI Agent 的记忆管理工具包Remember Me, Refine Me人工智能Agent 记忆知识库RAGMCP 服务Source Serif 4 开源衬线字体完整指南字重体系、光学尺寸与网页集成一次讲透Source Serif 4 开源衬线字体完整指南字重体系、光学尺寸与网页集成一次讲透 如果你是排版设计师或前端开发者大概率经历过这样的场景正文小字一缩到上一篇Ascend C SIMD浮点转整型API下一篇Obsidian电子表格插件完整使用指南从入门到精通创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考