构建流程

添加导入

¥Add imports

首先，我们需要从 @xyflow/react 包中导入一些基本组件和 CSS 样式表，这是 React Flow 工作所必需的：

¥First, we need to import some basic components from the @xyflow/react package and the css stylesheet, which is required for React Flow to work:

import { ReactFlow, Background, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

渲染 ReactFlow

¥Render ReactFlow

现在我们创建一个 React 组件来渲染我们的流程。父容器的宽度和高度是必需的，因为 React Flow 使用这些尺寸。

¥Now we create a React component, that renders our flow. The width and height on the parent container are required because React Flow uses these dimensions.

export default function App() {
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

空流程

¥Empty flow

就是这样！你已经创建了第一个空流程 🎉

¥That’s it! You have created your first empty flow 🎉

创建节点对象

¥Create node objects

在你的 React 组件之外，创建一个 node 对象数组。每个节点对象都需要一个唯一的 id 和一个 position。我们再给它们添加一个标签：

¥Outside of your React component, create an array of node objects. Each node object needs a unique id and a position. Let’s also add a label to them:

const initialNodes = [
  {
    id: 'n1',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
];

将节点添加到流程

¥Add nodes to the flow

现在我们可以使用 nodes 属性将 initialNodes 数组传递给 <ReactFlow /> 组件：

¥Now we can pass our initialNodes array to the <ReactFlow /> component using the nodes prop:

<ReactFlow nodes={initialNodes}>
  <Background />
  <Controls />
</ReactFlow>

带有节点的流程

¥Flow with nodes

这为我们提供了一个包含两个带标签节点的流。 🎉

¥This gives us a flow with two labeled nodes 🎉

创建边

¥Create an edge

要创建一条边，我们定义一个 edge 对象数组。每个边对象都需要有一个 id、一个 source（边的起点）和一个 target（边的终点）。在此示例中，我们使用迄今为止创建的两个节点（n1 和 n2）的 id 值来定义边：

¥To create an edge, we define an array of edge objects. Each edge object needs to have an id, a source (where the edge begins), and a target (where it ends). In this example, we use the id values of the two nodes we created so far (n1 and n2) to define the edge:

const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
  },
];

此边将 id: 'n1' 节点（源）连接到 id: 'n2' 节点（目标）。

¥This edge connects the node with id: 'n1' (the source) to the node with id: 'n2' (the target).

标记边缘

¥Label the edge

我们给这条边添加两个 React Flow 内置的属性：label 和 type: "step"。

¥Let’s give this edge two properties that are built into React Flow, a label and a type: "step".

const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
    type: 'step',
    label: 'connects with',
  },
];

基本流程

¥Basic flow

现在我们已经完成了一个包含节点和边的基本流程！🎉

¥Now we have completed a basic flow with nodes and edges! 🎉