使用react-flow制作流程图

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

官方文档地址: 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} />);

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

属性	作用
id	唯一标识
type	有input，output，default三种，input只有一个输出，output只有一个输入，default输入输出各有一个
data	显示label中的值，可在label中自定义jsx代码
position	node在图中的x，y位置
targetPosition	有 ‘left’ ，‘right’， ‘top’， 'bottom’用来定义输入口的位置
sourcePosition	同targetPosition，用来定义输出口位置
draggable	控制单个node可否被拖动
connectable	控制单个node可否被连接

edge：

属性	作用
id	唯一标识
source	连接线发出的node的id
target	连接线接受的node的id
sourceHandle	自定义node允许拥有多个输出口，此属性用来确定从哪个输出口发出
targetHandle	同sourceHandle，用来定义哪个口接收
type	连接线类型，有‘default’（bezier），‘straight’，‘step’，‘smoothstep’几种
draggable	控制单个node可否被拖动
connectable	控制单个node可否被连接
animated	控制连接线是否有动画
label	在线上显示的文字

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

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

列出几个比较常用的属性

属性	作用
elements	接收的node和edge数据
onConnect	连接节点时触发
onLoad	组件加载时触发，返回组件实例，可通过实例调用方法
onElementsRemove	选中元素后点击Backspace删除元素时触发
nodeTypes	设置所有node的类型
edgeTypes	设置所有连接线的类型
connectionLineType	设置所有连接线类型
connectionMode	有strict（只允许输出口向输入口连线），loose（允许输出向输出，输入向输入连线）两种模式
onlyRenderVisibleElements	只渲染可以被看到元素，默认为true，建议改为false。否则图的元素的位置可能会歪
defaultZoom	默认流程图的放大倍数
minZoom，maxZoom	最小，最大缩放倍数
zoomOnDoubleClick	是否允许双击放大

实例调用的方法

属性	作用
project()	将像素坐标转换为内部 ReactFlow 坐标系
fitView()	调整窗口，尽量使所有元素可见
zoomIn()	放大
zoomOut()	缩小
zoomTo()	缩放到指定倍数
edgeTypes()	设置所有连接线的类型
setTransform()	同时设置缩放倍数与流程图位置
toObject()	返回elements，流程图位置，缩放倍数
onlyRenderVisibleElements	只渲染可以被看到元素，默认为true，建议改为false。否则图的元素的位置可能会歪
defaultZoom	默认流程图的放大倍数
minZoom，maxZoom	最小，最大缩放倍数
zoomOnDoubleClick	是否允许双击放大

组件封装的方法

属性	作用
isEdge()	判断数据是否为连接线
isNode()	判断数据是否为节点
getConnectedEdges()	获取和节点相连的线
removeElements()	移除元素
addEdge()	添加连接线
updateEdge()	更新连接线

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

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

使用react-flow制作流程图相关推荐

如何在word中制作流程图_在Word 2007中创建流程图
如何在word中制作流程图 Flowcharts are a very good way to get a new idea explained in a presentation. Office ...
如何在word中制作流程图_如何在Word中创建流程图
如何在word中制作流程图 Microsoft Word provides built-in tools for creating and arranging different types of f ...
计算机图像图形设计制作步骤,怎样在电脑上制作流程图？小编“墙裂”推荐它！...
原标题:怎样在电脑上制作流程图?小编"墙裂"推荐它! 我们在工作生活中经常能看到各式各样的流程图.流程图主要由线条.几何图框以及文字构成,根据应用场景分为:业务流程图.数据流程图. ...
2019如何新建流程图_用Word制作流程图，居然还有这么多小技巧
用Word制作流程图,是我们经常会用到的功能,本期Word妹与大家分享在制作流程图时一个流程图的制作小技巧. 效果图: 制作小技巧: 1.插入绘图区点击插入--形状--新建画布,之后根据需要调整画布 ...
excel制作跨职能流程图_你会用Excel制作流程图吗？超级强大的功能
曾经有一张辞职测试图火爆了网络,这样的流程图是不是只有专门的流程图制作软件才能做出来呢? 这里,小编不是鼓励大家辞职,其实哪儿都一样,关键是提升能力,升职加薪! 如果让你用excel来做上面的流程图, ...
excel自动换行_你会用Excel制作流程图吗？
这么多年呆在一个公司里,青春都奉献给了它.但,你工作的开心吗? 有想过辞职吗?曾经有一张辞职测试图火爆了网络. @所有人,本周有一个重要知识点,马上点击学习↓ 两个Excel表格核对的最完美做法其 ...
如何用Word制作流程图(一)
在日常的很多实际任务中,我们可能需要表达某个工作的过程或流程.有些工作的过程比较复杂,如果你仅仅用文字表达,通常是很难描述清楚的.与此同时,听者也难于搞懂,在这种情况下,最好的方式就是绘制工作流程图, ...
超实用流程图制作技巧，制作流程图so easy
现在学习思维导图的人越来越多了,但很多人不知道流程图也是思维导图的一种,今天小编就带大家来了解什么是流程图. 一.流程图是什么流程图是思维导图的一种形式,是以流程和图组合而成的一种导图,一般运用于工 ...
制作流程图用什么软件比较好？这些简单好用的制作软件推荐给你
流程图是一种梳理架构.工作流程的常用工具.许多小伙伴在工作中应该常接触到它,无论是从产品的需求规划,还是整个开发研究的流程,都需要使用流程图来进行构思.而且,它能让制作的我们理清每个环节的内容,还可以 ...
excel制作跨职能流程图_excel制作流程图的方法步骤图
Excel中经常需要使用到制作流程图的技巧进行制作流程图方便读者一目了然,流程图具体该如何进行制作呢?下面是由学习啦小编分享的excel制作流程图的方法,以供大家阅读和学习. excel制作流程图的方 ...