功能强大的开源库，可使用 React 或 Svelte 构建基于节点的 UI。开箱即用且可无限自定义。
xyflow 存储库包含四个软件包：
- React Flow 12
@xyflow/react软件包/react - React Flow 11
reactflowv11 分支 - Svelte Flow
@xyflow/svelte软件包/svelte - 共享帮助库
@xyflow/system包/系统
您是否在个人项目中使用 React Flow 或 Svelte Flow？太棒了！无需赞助，您可以通过报告发现的任何错误、向我们发送项目截图以及在 Github 上为我们点赞来支持我们 🌟
您是否在组织中使用 React Flow 或 Svelte Flow 并从中获利？太棒了！我们依靠您的支持来保持我们的库在 MIT 许可下开发和维护，这正是我们想要的。对于 React Flow，您可以在React Flow Pro 网站上进行此操作，对于我们的两个库，您都可以通过Github Sponsors进行此操作。
入门的最佳方式是查看React Flow或Svelte Flow学习部分。但是，如果你想要了解如何安装和使用这些库，可以在此处查看：
React Flow基本使用
npm install @xyflow/react
import { useCallback } from 'react'; import { ReactFlow, MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, } from '@xyflow/react';import '@xyflow/react/dist/style.css';
const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, ];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
function Flow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} > <MiniMap /> <Controls /> <Background /> </ReactFlow> ); }
export default Flow;
import '@xyflow/react/dist/style.css';
const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, ];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
function Flow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect}
<MiniMap />
<Controls />
<Background />
export default Flow;" tabindex="0" role="button">
Svelte Flow基本用法
npm install @xyflow/svelte
<script lang="ts"> import { writable } from 'svelte/store'; import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap, } from '@xyflow/svelte'; import '@xyflow/svelte/dist/style.css' const nodes = writable([ { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 0, y: 0 } }, { id: '2', type: 'custom', data: { label: 'Node' }, position: { x: 0, y: 150 } } ]); const edges = writable([ { id: '1-2', type: 'default', source: '1', target: '2', label: 'Edge Text' } ]); </script><SvelteFlow {nodes} {edges} fitView on:nodeclick={(event) => console.log('on node click', event)} > <Controls /> <Background variant={BackgroundVariant.Dots} /> <MiniMap /> </SvelteFlow>
import '@xyflow/svelte/dist/style.css'
const nodes = writable([ { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 0, y: 0 } }, { id: '2', type: 'custom', data: { label: 'Node' }, position: { x: 0, y: 150 } } ]);
const edges = writable([ { id: '1-2', type: 'default', source: '1', target: '2', label: 'Edge Text' } ]); </script>
<SvelteFlow {nodes} {edges} fitView on:nodeclick={(event) => console.log('on node click', event)}
" tabindex="0" role="button">
为了发布软件包，我们将变更集与变更集 Github 操作结合使用。大致思路是：
- 为新功能、更新和修复创建 PR（如果与变更日志相关，则使用变更集）
- 合并到主目录
- changset 创建一个 PR，根据变更集对所有软件包进行改进
- 如果要发布到 Github 和 npm，请合并变更集 PR
React Flow 和 Svelte Flow 由xyflow背后的团队维护。如果您需要帮助或想与我们讨论合作事宜，请通过我们的 联系表 或加入我们的Discord 服务器与我们联系。
- 克里斯托弗 • Twitter • Github
- Hayleigh • Twitter • Github
- 约翰 • 网站 • Mastodon
- 莫里茨 • Twitter • Github
- Peter • Github
React Flow 和 Svelte Flow 是MIT 许可的。