概述
🌐 Overview
从根本上说，React Flow 的核心是创建交互式流程图——由节点组成并通过边连接的集合。为了帮助你理解我们在整个文档中使用的术语，让我们看一下下面的示例流程。
🌐 At its core, React Flow is about creating interactive flowgraphs — a collection of nodes connected by edges. To help you understand the terminology we use throughout the documentation, let’s take a look at the example flow below.
节点
🌐 Nodes
React Flow 开箱即用提供了一些默认的节点类型，但自定义才是 React Flow 真正发挥魔力的地方。你可以设计节点，使其完全按照你的需求工作——无论是嵌入交互式表单元素、显示动态数据可视化，还是整合多个连接句柄。React Flow 打下了基础，而剩下的就由你的想象力决定。
🌐 React Flow has a few default node types out of the box, but customization is where the magic of React Flow truly happens. You can design your nodes to work exactly the way you need them to—whether that’s embedding interactive form elements, displaying dynamic data visualizations, or even incorporating multiple connection handles. React Flow lays the foundation, and your imagination does the rest.
我们有一份关于创建你自己的 自定义节点 的指南，你可以在 节点 参考中找到自定义节点的所有选项。
🌐 We have a guide on creating your own Custom Nodes and you can find all the options for customizing your nodes in the Node reference.
句柄
🌐 Handles
一个句柄（在其他库中也称为“端口”）是边连接到节点的附着点。默认情况下，它们显示为节点顶部、底部、左侧或右侧的灰色圆圈。但它们只是div元素，可以以任何方式定位和设置样式。当创建自定义节点时，可以根据需要包含任意数量的句柄。更多信息，请参考Handle 页面。
🌐 A handle (also known as a “port” in other libraries) is the attachment point where an edge
connects to a node. By default, they appear as grey circles on the top, bottom, left, or
right sides of a node. But they are just div elements, and can be positioned and styled
any way you’d like. When creating a custom node, you can include as many handles as
needed. For more information, refer to the Handle page.
边缘
🌐 Edges
边连接节点。每条边都需要一个目标节点和一个源节点。React Flow 提供了四种内置的 边类型：default（贝塞尔曲线）、smoothstep、step 和 straight。边是可以用 CSS 样式化的 SVG 路径，并且完全可自定义。如果你使用多个句柄，你可以单独引用它们，为一个节点创建多个连接。
🌐 Edges connect nodes. Every edge needs a target and a source node. React Flow comes with
four built-in edge types: default (bezier), smoothstep,
step, and straight. An edge is a SVG path that can be styled with CSS and is
completely customizable. If you are using multiple handles, you can reference them
individually to create multiple connections for a node.
像自定义节点一样，你也可以自定义边。人们使用自定义边做的事情包括：
🌐 Like custom nodes, you can also customize edges. Things that people do with custom edges include:
- 添加按钮以移除边
- 自定义路由行为
- 复杂的样式或交互无法仅通过一个 SVG 路径解决
有关更多信息，请参阅 Edges 页面。
🌐 For more information, refer to the Edges page.
选择
🌐 Selection
你可以通过点击来选择边或节点。如果你想通过点击选择多个节点/边，你可以按住 Meta/Control 键并点击多个元素进行选择。如果你想将多选的键盘键更改为其他键，你可以使用 multiSelectionKeyCode 属性。
🌐 You can select an edge or a node by clicking on it. If you want to select multiple
nodes/edges via clicking, you can hold the Meta/Control key and click on multiple
elements to select them. If you want to change the keyboard key for multiselection to
something else, you can use the
multiSelectionKeyCode prop.
你也可以按住 Shift 并拖动鼠标来选择多个边/节点，从而创建一个选择框。当你释放鼠标时，任何位于选择框内的节点或边都会被选中。如果你想更改此行为的键盘按键，你可以使用 selectionKeyCode 属性。
🌐 You can also select multiple edges/nodes by holding down Shift and dragging the mouse to
make a selection box. When you release the mouse, any node or edge that falls within the
selection box is selected. If you want to change the keyboard key for this behavior, you
can use the selectionKeyCode prop.
选定的节点和边被抬高（分配了比其他元素更高的 zIndex），因此它们显示在所有其他元素之上。
🌐 Selected nodes and edges are elevated (assigned a higher zIndex than other elements), so
that they are shown on top of all the other elements.
对于默认的边和节点，选中时会显示比平常更深的描边/边框。如果你使用自定义节点/边，则可以使用 selected 属性在自定义组件中自定义选中效果。
🌐 For default edges and nodes, selection is shown by a darker stroke/border than usual. If
you are using a custom node/edge, you can use the selected prop to customize selection
appearance inside your custom component.
连接线
🌐 Connection line
React Flow 内置功能允许你从一个连接点点击并拖动到另一个连接点以创建新的边。在拖动过程中，占位边被称为连接线。连接线具有与边相同的四种内置类型，并且可以自定义。你可以在 connection props 参考中找到配置连接线的属性。
🌐 React Flow has built-in functionality that allows you to click and drag from one handle to another to create a new edge. While dragging, the placeholder edge is referred to as a connection line. The connection line comes with the same four built-in types as edges and is customizable. You can find the props for configuring the connection line in the connection props reference.
Viewport
所有的 React Flow 都包含在视口内。每个节点都有 x 和 y 坐标，表示其在视口内的位置。视口有 x、y 和缩放值。当你拖动面板时，你会改变 x 和 y 坐标。当你放大或缩小时，你会改变缩放级别。
🌐 All of React Flow is contained within the viewport. Each node has an x- and y-coordinate, which indicates its position within the viewport. The viewport has x, y, and zoom values. When you drag the pane, you change the x and y coordinates. When you zoom in or out, you alter the zoom level.