我的第一个 React Flow 小实验

最近在做一个小项目，想让用户能通过拖拽的方式设计一些简单的流程逻辑。调研了一圈，发现 React Flow 比较合适------社区用的人不少，文档也还算清晰。于是今天抽了点时间，试着跑通了第一个 demo。

记录一下过程，顺便理清思路。

为什么选 React Flow？

之前也看过 d3.js、jointjs 这类库，但要么太底层，要么配置复杂。而 React Flow 是基于 React 和 TypeScript 的，和我现在用的技术栈一致，上手成本低一些。

它支持：

节点和边的基本渲染
画布拖拽、缩放
自定义节点样式
导出为 JSON

看起来能满足我现阶段的需求。

环境准备

确保你有一个 React 项目

lua 复制代码

npx create-next-app@latest

项目是用 Next.js（App Router）搭的，所以先装包：

复制代码

npm install reactflow

别忘了引入样式，在 app/globals.css 里加上：

css 复制代码

@import 'reactflow/dist/style.css';

然后在组件顶部加上 "use client"，因为 React Flow 需要客户端渲染。

写个最简单的图

目标很简单：画两个节点，连一条线。

代码如下：

jsx 复制代码

"use client";

import React from 'react';
import ReactFlow, { Background } from 'reactflow';
import 'reactflow/dist/style.css';

export default function FlowDemo() {
  const nodes = [
    {
      id: '1',
      position: { x: 100, y: 100 },
      data: { label: '开始节点' },
    },
    {
      id: '2',
      position: { x: 300, y: 100 },
      data: { label: '结束节点' },
    },
  ];

  const edges = [
    {
      id: 'e1-2',
      source: '1',
      target: '2',
    },
  ];

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
      </ReactFlow>
    </div>
  );
}

就这么几行，其实核心就是 nodes 和 edges 两个数组。每个节点有 id、位置和数据；边则指定来源和目标。

实际运行效果

保存之后，启动项目，页面加载出来长这样：

可以看到：

两个默认样式的矩形节点
中间有一条带箭头的连线
可以拖动画布，鼠标滚轮缩放
背景加了网格，视觉上更清晰

虽然简单，但至少验证了环境没问题，基础功能也能跑通。

遇到的小问题

样式没生效？
忘了导入 reactflow/dist/style.css，节点显示异常。加上就好了。
服务端报错？
因为用了 App Router，默认组件是服务端渲染的。必须加 "use client"，否则会提示 document is not defined。

接下来想做什么

这个 demo 只是起点。下一步我打算试试：

用按钮添加新节点
双击节点弹出编辑框
把当前图结构保存成 JSON
存到 Supabase，按用户 uid 区分

尤其是保存功能，毕竟用户可不希望刷新页面后一切归零。

总结

今天花了一个多小时，从零跑通了 React Flow 的第一个例子。没有一步到位，中间也踩了点小坑，但整体体验还算顺利。

它不像某些库那样需要写一堆 SVG 或手动处理事件，而是用数据驱动的方式描述图结构，这对 React 开发者来说很友好。

接下来就是一点点扩展功能了。可视化这条路不简单，但至少，我已经站在起点了。