React项目实战：用@xyflow/react快速搭建可拖拽流程图（附完整代码）

最新推荐文章于 2026-03-26 09:10:40 发布

原创

最新推荐文章于 2026-03-26 09:10:40 发布 · 513 阅读

标签

#React #流程图 #@xyflow/react #交互式UI

React项目实战：用@xyflow/react快速搭建可拖拽流程图（附完整代码）

在当今前端开发领域，可视化交互工具的需求日益增长。无论是构建低代码平台、设计自动化工作流，还是开发数据管道配置界面，流程图功能都成为现代Web应用的核心组件之一。本文将带你从零开始，使用@xyflow/react这个专为React设计的流程图库，快速实现一个功能完备的可拖拽流程图应用。

1. 环境准备与基础搭建

1.1 初始化React项目

首先确保你的开发环境已配置Node.js（建议版本18+）和npm/yarn/pnpm。我们使用Vite作为构建工具，它能提供更快的开发体验：

npm create vite@latest flow-demo --template react-ts
cd flow-demo
npm install @xyflow/react

1.2 基础配置要点

在项目入口文件（通常是main.tsx）中导入必要的样式文件：

import '@xyflow/react/dist/style.css'

这个CSS文件包含了所有必要的交互样式，如果遗漏会导致拖拽、连线等功能异常。

1.3 最小化流程图实现

创建一个基础组件FlowCanvas.tsx，实现最简单的两个节点连接：

import { ReactFlow, useNodesState, useEdgesState, addEdge } from '@xyflow/react'

const initialNodes = [
  {
    id: 'start',
    position: { x: 100, y: 100 },
    data: { label: '开始' },
    style: { backgroundColor: '#f0f9ff', borderColor: '#bae6fd' }
  },
  {
    id: 'end',
    position: { x: 400, y: 100 },
    data: { label: '结束' },
    style: { backgroundColor: '#f0fdf4', borderColor: '#bbf7d0' }
  }
]

const initialEdges = [{ id: 'e1', source: 'start', target: 'end' }]

export default function FlowCanvas() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)

  const onConnect = (params) => setEdges((eds) => addEdge(params, eds))

  return (
    <div style={
  
  { width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  )
}