前端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点击查看免费下载导读本指南以 examples/README.md 为核心完整梳理 xyflow 仓库中面向功能开发与 E2E 测试的示例体系包括基于 Vite 的 React Flow 示例应用、基于 SvelteKit 的 Svelte Flow 示例应用以及专用于 SSR服务端渲染验证的 Astro 应用。读完本文你将掌握每个示例应用的启动方式、如何为正在开发的新功能添加对应示例与路由、如何通过generic-tests配置驱动 Playwright 跨框架 E2E 测试并理解示例代码与 packages/react 和 packages/svelte 等源码包之间的关联。示例仓库的定位与整体结构xyflow 仓库中的examples目录不是面向最终用户的演示站点而是内部用于功能开发和 E2E 测试的测试床。仓库根目录的 examples/README.md 开宗明义地说明These examples are used for feature development and E2E testing.这些示例用于功能开发与 E2E 测试。该目录下包含三个彼此独立的示例工程示例工程框架/构建工具用途说明examples/reactVite ReactReact Flow 功能开发与测试由src/examples下的示例 Flow 和src/generic-tests下的 E2E 测试 Flow 组成examples/svelteSvelteKit Svelte 5Svelte Flow 功能开发与测试同样包含src/generic-tests并通过动态路由承载测试 Flowexamples/astro-xyflowAstroSSR 场景验证同时挂载 React Flow 与 Svelte Flow 组件验证服务端渲染兼容性三者共享同一套跨框架的 E2E 测试策略测试实现放在tests/playwright而测试用例所依赖的 Flow 配置则定义在各个示例工程内部。仓库中 E2E 测试的完整文档位于 tests/playwright/README.md。从依赖关系看各示例工程通过 pnpm workspace 直接引用源码包。例如 examples/react/package.json 中声明了xyflow/react: workspace:*和xyflow/system: workspace:*examples/svelte/package.json 中声明了xyflow/svelte: workspace:^。这意味着示例代码始终运行在仓库当前源码版本之上开发者在packages中的改动会即时反映到示例应用中这也是开发即测试工作流能够成立的基础。React Flow 示例应用examples/react启动本地开发服务器examples/react/README.md 给出了最简单的启动方式pnpm dev该命令实际执行的是 Vite 开发服务器examples/react/package.json 中定义dev: vite --port 3000 --open --host即固定端口3000、自动打开浏览器并监听所有主机地址。其余可用脚本包括pnpm serve仅启动静态服务器vite serve --port 3000供 E2E 测试使用pnpm build执行vite build构建生产版本pnpm preview预览构建产物pnpm test依次运行组件测试与 E2E 测试test-componenttest-e2epnpm test:dev打开 Cypress 交互界面pnpm test-e2e通过start-server-and-test先启动静态服务器再以 headless 模式运行 Cypress E2E。添加一个新的示例 Flow功能开发是围绕src/examples目录进行的README 给出了两步添加流程在 examples/react/src/examples 下创建新的文件夹与 Flow 实现在 examples/react/src/App/routes.ts 中注册新路由。examples/react/src/App/routes.ts 是路由注册表顶部批量import了每个示例组件中部定义了IRoute接口name、path、component底部通过routes数组将每个示例映射到形如basic、draghandle、save-restore、validation的 URL 路径。当前仓库中已注册了数十个示例覆盖节点CustomNode、NodeToolbar、NodeResizer、DetachedHandle、边Edges、EdgeToolbar、EdgeRouting、ReconnectEdge、CancelConnection、HooksuseConnection、useNodesData、useKeyPress、useOnSelectionChange、useReactFlow、useUpdateNodeInternals、状态管理Redux、SetNodesBatching、ControlledUncontrolled以及交互DragNDrop、TouchDevice、InteractiveMinimap、ZIndexMode、Middlewares、DevTools等主题。以Basic为例入口组件位于 examples/react/src/examples/Basic/index.tsx在路由表中注册为{ name: Basic, path: basic, component: Basic }开发时即可通过http://localhost:3000/basic访问。添加新的 E2E 测试 Flow与功能示例不同E2E 测试面向的是src/generic-tests目录下按配置驱动方式定义的 Flow。README 中特别强调Adding a new configuration file automatically adds a new route underhttp://localhost:3000/tests/generic/$foldername/$filename.即新增一个配置文件就会自动获得一条新路由无需手动注册。其实现机制在 examples/react/src/generic-tests/index.tsx 中import { useLocation } from react-router-dom; import Flow from ./Flow; const flowConfigs import.meta.globFlowConfig(./**/*.ts, { eager: true, import: default }); export default () { const location useLocation(); const path .${location.pathname.replace(/tests/generic, )}.ts; const flowConfig flowConfigs[path]; if (!flowConfig) { return 404: This route doesnt exists.; } return Flow flowConfig{flowConfig} /; };这里借助 Vite 的import.meta.glob在构建期将generic-tests目录下所有.ts文件批量收集为FlowConfig再把 URL 路径如/tests/generic/pane/general映射为对应配置文件./pane/general.ts。配置文件不存在时返回 404 提示存在则渲染通用 examples/react/src/generic-tests/Flow.tsx 组件。通用Flow组件把FlowConfig中的flowProps展开为ReactFlow的 props并依次挂载Controls、Panel、MiniMap、Background分别受controlsProps、panelProps、minimapProps、backgroundProps控制。同时它内部维护受控的 nodes/edges 状态onNodesChange走applyNodeChanges、onEdgesChange走applyEdgeChanges、onConnect走addEdge——这是 examples/react/src/generic-tests/Flow.tsx 中最核心的三行受控逻辑与 examples/react/src/examples/Basic/index.tsx 等常规示例的写法一致。Svelte Flow 示例应用examples/svelteexamples/README.md 指出 Svelte 示例是一个SvelteKit App。其启动方式同样为pnpm devexamples/svelte/package.json 中的脚本基于 SvelteKitvite dev并额外提供了checksvelte-kit syncsvelte-check、lint、format等开发辅助命令。依赖方面它引入了 Svelte 5svelte: ^5.55.5与xyflow/svelte同时包含dagrejs/dagre以支持布局类示例。Svelte 示例的 E2E Flow 配置位于 examples/svelte/src/generic-tests包含与 React 侧平行的目录结构如edges/general.ts、pane/general.ts、node-toolbar/components/ToolbarNode.svelte、nodes/components/DragHandleNode.svelte。配置通过 SvelteKit 的动态路由 examples/svelte/src/routes/tests/generic/[topic]/[example]/page.ts 加载import { error } from sveltejs/kit; const flowConfigs import.meta.globFlowConfig(/src/generic-tests/**/*.ts, { eager: true, import: default }); export function load({ params }) { const flowConfig flowConfigs[/src/generic-tests/${params.topic}/${params.example}.ts]; if (!flowConfig) { throw error(404, Not found); } return { flowConfig }; }与 React 侧一样这里也使用import.meta.glob批量收集配置并将 URL 中的[topic]/[example]段映射为src/generic-tests下的具体文件配置不存在时通过 SvelteKit 的error(404)返回 404。得益于同一套FlowConfig结构与相同的目录组织同一份测试用例如pane/general可以在 React 与 Svelte 两个框架上运行几乎一致的 Flow这正是 xyflow 跨框架 E2E 测试的基石。Astro 示例应用examples/astro-xyflowexamples/README.md 将 examples/astro-xyflow 定位为Astro App used for SSR testing即专门用于服务端渲染测试的轻量应用。examples/astro-xyflow/README.md 说明它是一个Tiny app for testing React Flow and Svelte Flow with Astro启动方式同样是pnpm dev从目录结构看examples/astro-xyflow/src/components 下同时存在ReactFlowExample、ReactFlowInitialExample、SvelteFlowExample、SvelteFlowInitialExample四组组件并由 examples/astro-xyflow/src/pages/index.astro 统一承载。这种React Svelte 双框架共存于同一个 Astro 页面的结构正是为了验证 xyflow 的库组件在 Astro 的 islands客户端岛屿架构下能否在服务端正常渲染、序列化并水合从而覆盖 SSR 兼容性这一关键场景。跨框架 Playwright E2E 测试tests/playwright安装与运行examples/README.md 将 E2E 测试的详细文档指向仓库根的 tests/playwright其使用说明位于 tests/playwright/README.mdcd tests/playwright # 确认位于正确目录 pnpm install # 安装 node 依赖 npx playwright install # 按提示安装浏览器运行测试的命令pnpm run test:react # headless 运行全部 React 测试 pnpm run test:react:ui # UI 模式运行 React 测试便于调试 pnpm run test:svelte # headless 运行全部 Svelte 测试 pnpm run test:svelte:ui # UI 模式运行 Svelte 测试便于调试这些脚本定义在 tests/playwright/package.json 中例如test:react: FRAMEWORKreact pnpm exec playwright test -c playwright.react.config.ts即通过环境变量FRAMEWORK区分框架并分别使用 tests/playwright/playwright.react.config.ts端口 3000与 tests/playwright/playwright.svelte.config.ts 两份配置ui后缀版本在命令后追加--ui参数以进入 Playwright UI 模式。创建新的测试 FlowE2E 测试的 Flow 实现位于各示例工程的src/generic-tests下。创建流程分为两步。第一步创建或复用 Flow 配置。在examples/{framework}/src/generic-tests下新建文件以配置对象 satisfies FlowConfig的方式声明将应用到组件上的所有 propstests/playwright/README.md 给出的示例// NewFolder/NewTest.ts export default { flowProps: { minZoom: 0.25, maxZoom: 4, fitView: true, nodes: [ { id: 1, data: { label: 1 }, position: { x: 0, y: 0 }, type: input, }, { id: 2, data: { label: 2 }, position: { x: -100, y: 100 }, }, { id: 3, data: { label: 3 }, position: { x: 100, y: 100 }, }, ], edges: [ { id: first-edge, source: 1, target: 2 }, { id: second-edge, source: 1, target: 3 }, ], }, backgroundProps: { /* ... */ }, panelProps: { /* ... */ }, minimapProps: { /* ... */ }, controlsProps: { /* ... */ }, } satisfies FlowConfig;仓库中真实存在的示例见 examples/react/src/generic-tests/pane/general.ts配置了minZoom: 0.25、maxZoom: 4、fitView: true以及 1 个 input 节点 2 个普通节点、2 条边的三节点拓扑类似的配置还存在于 examples/react/src/generic-tests/edges/general.ts、examples/svelte/src/generic-tests/nodes/general.ts 等文件中。README 特别用:warning:强调目录与文件名直接决定测试用例的路由。以上示例会生成http://localhost:3000/tests/generic/newDirectory/newTest其中 3000 是 React 示例应用的端口其他框架可能不同。这一行为与 examples/react/src/generic-tests/index.tsx 和 SvelteKit 动态路由的路径映射机制完全吻合。第二步编写 Playwright 测试用例。将新的测试文件放到 tests/playwright/e2e 下。当前仓库已包含background.spec.ts、edges.spec.ts、node-toolbar.spec.ts、nodes.spec.ts、pane.spec.ts、props.spec.ts等规格文件以及 tests/playwright/e2e/constants.ts测试 URL 常量与 tests/playwright/e2e/utils.ts公共工具函数可作为新用例的编写范式。FlowConfig 的字段约定综合 README 示例与 examples/react/src/generic-tests/Flow.tsx 的实际消费方式FlowConfig包含以下字段字段类型作用挂载目标flowProps对象展开后作为ReactFlow的 props如nodes、edges、minZoom、maxZoom、fitView等ReactFlow/SvelteFlowbackgroundProps对象背景组件的 propsBackgroundpanelProps对象面板组件的 propsPanelminimapProps对象小地图组件的 propsMiniMapcontrolsProps对象控制按钮组的 propsControls值得注意的设计是flowProps中的nodes、edges只是初始值真正的运行状态由Flow组件内的useState接管并通过applyNodeChanges/applyEdgeChanges/addEdge维持受控更新。这意味着 E2E 测试既能以稳定的初始拓扑启动又能完整验证拖拽、连接等交互行为对节点与边状态的影响。从示例到源码示例体系与核心包的呼应示例工程并非孤立存在它与packages下的源码包形成用例 — 实现的呼应关系示例中使用的ReactFlow、applyNodeChanges、applyEdgeChanges、addEdge、Controls、MiniMap、Background、Panel等 API 的实现位于 packages/react/src如容器组件 packages/react/src/container/ReactFlow/index.tsx、状态变更工具 packages/react/src/utils/changes.ts 与附加组件目录 packages/react/src/additional-componentsSvelte 侧的对应实现位于 packages/svelte/src/lib其中 packages/svelte/src/lib/container/SvelteFlow、packages/svelte/src/lib/pluginsBackground、Controls、MiniMap、NodeToolbar 等与 React 侧结构一一对应两个框架共享的底层交互逻辑拖拽、缩放、连线、调整尺寸沉淀在 packages/system/src 的xydrag、xypanzoom、xyhandle、xyresizer等模块中这正是 examples/react/package.json 同时依赖xyflow/react与xyflow/system的原因。因此当你为某个新特性例如一个新的自定义节点类型或一条新的交互路径添加示例并运行 E2E 测试时实际验证的是xyflow/system→xyflow/react/xyflow/svelte→ 示例组件 的完整调用链这也是该示例体系能够同时服务于功能开发与跨框架质量保障的根本原因。结语examples目录是 xyflow 仓库中连接库源码与质量保障的关键枢纽examples/react与examples/svelte分别是 React Flow 与 Svelte Flow 的活体开发环境examples/astro-xyflow覆盖 SSR 兼容性验证而tests/playwright则借助FlowConfig配置驱动模式用同一套 Flow 在两大框架上运行框架无关的 E2E 测试。理解这套配置即路由、示例即用例的组织方式后无论是为新功能添加示例还是为既有行为补充回归测试你都能快速上手。赞分享前端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点击查看免费下载相关推荐Svelte Flow 示例应用指南本地开发、示例扩展与 E2E 测试全流程Svelte Flow 示例应用指南本地开发、示例扩展与 E2E 测试全流程 导读 examples/svelte 是 xyflow 仓库React Flo前端UI组件图表库xyflow 贡献指南React Flow / Svelte Flow 仓库架构、开发工作流与 Changeset 写作规范xyflow 贡献指南React Flow / Svelte Flow 仓库架构、开发工作流与 Changeset 写作规范 本篇技术指南围绕 xyflow前端UI组件图表库Windows 11优化神器Win11Debloat让电脑性能提升51%的终极指南Windows 11优化神器Win11Debloat让电脑性能提升51%的终极指南 你是否感觉Windows 11越来越臃肿开机慢、内存占用高、广告推送不断桌面应用CLI上一篇ptcr容器性能测试工具快速入门指南与安装教程下一篇A-Tune-UI安全配置最佳实践保护你的性能调优数据创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考