xyflow/xyflow：30.1k Star 开源神器，构建节点式UI的强大React和Svelte库
无需从零开始，快速搭建可定制的流程图和节点编辑器
项目地址： https://github.com/xyflow/xyflow
xyflow 是一个强大的开源库集合，旨在帮助开发者轻松构建基于节点的用户界面。它提供了 React Flow 和 Svelte Flow 两个库，分别用于 React 和 Svelte 平台。这两个库都具有开箱即用且高度可定制的特性，让开发者能够快速搭建各种流程图、节点编辑器等应用。
该项目主要包含以下几个核心包：
- React Flow 12 (@xyflow/react): 用于 React 平台的节点式 UI 库。
- React Flow 11: React Flow 的 v11 版本分支。
- Svelte Flow (@xyflow/svelte): 用于 Svelte 平台的节点式 UI 库。
- Shared helper library (@xyflow/system): 共享的辅助库。
主要特点：
- 易于上手： 提供了详细的文档和示例，可以快速了解和使用。
- 高度可定制： 几乎所有组件都可以定制，满足各种 UI 需求。
- 交互性强： 支持节点拖拽、连接、编辑等多种交互操作。
- 多平台支持： 同时支持 React 和 Svelte 平台，方便在不同项目中使用。
- 内置常用组件： 例如 MiniMap、Controls 和 Background，减少重复开发。
使用示例：
以下分别是 React Flow 和 Svelte Flow 的基本用法示例：
React Flow:
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;
Svelte Flow:
<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>
xyflow 通过提供现成的组件和灵活的定制选项，极大地简化了节点式 UI 的开发过程。它解决了开发者需要从零开始构建流程图和节点编辑器的痛点，节省了大量时间和精力。
怎么样，看完这个项目是不是觉得很棒？ 这个项目对于需要构建流程图、节点编辑器或任何基于节点的用户界面的开发者来说非常有用！ 快来转发给你的朋友们一起学习使用吧！
