【React Flow】快速开始

创建 React 模板

npm create vite@latest

安装 react-flow

npm install @xyflow/react

示例 demo

import {ReactFlow} 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'}];

export default function App() {
    return (
        <div style={{width: '100vw', height: '100vh'}}>
            <ReactFlow nodes={initialNodes} edges={initialEdges}/>
        </div>
    );
}

预览