使用react-flow制作流程图_reactflow中文手册

1.react-flow

 react-flow是一个用于构建基于节点的应用程序的库。这些可以是简单的静态图或复杂的基于节点的编辑器。同时react-flow支持自定义节点类型和边线类型，并且它附带一些组件，可以查看缩略图的Mini Map和悬浮控制器Controls.

2.react-flow安装

npm install react-flow-renderer    # npm
yarn add react-flow-renderer       # Yarn
1
2

官方文档地址: https://reactflow.dev/docs/
github地址: https://github.com/wbkd/react-flow

3.react-flow基本使用

 const elements = [
        {
            id: 'node1',
            type: 'input',
            data: { label: ('start') },
            position: { x: 450, y: 50 },
        },
        {
            id:'edge1',
            source:'1',
            target:'2'
        },
        {
            id: 'node2',
            type: 'output',
            data: { label: ('end') },
            position: { x: 450, y: 450 },
        },
    ];
   return (
        <ReactFlow elements={elements} />
   );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

ReactFlow组件中接受数据elements里存储着nodes(节点)和edge(连线)两种数据。
node：

edge：

同过在element中设置node和edge数据，可以绘制出完整的流程图

4.react-flow属性与封装的方法

列出几个比较常用的属性

实例调用的方法

组件封装的方法

tips：如果想要使用代码更改节点的位置，直接更改elements里的positions并不起作用,可以像下面一样通过组件自带的钩子获取到节点后修改。

   const nodes: Node[] = useStoreState((store: ReactFlowState) => store.nodes);
   const node = nodes.find((node) => node.id === 'node2');
   node.__rf.position.y =  150 ;
1
2
3