在项目业务上有一个能源流向图的需求需要实现，我选择的是jsplumb框架库，它可以绘制流程图表；大致的动态能源流向图demo如下：

想要实现上面的流向图，首先要先熟悉jsplumb的几个api和属性。

一、安装使用jsplumb

npm install jsplumb //安装jsplumb库
import {jsPlumb} from "jsplumb"; //引入jsplumb库

二、API与属性

1、getInstance() 方法用于返回一个已创建的jsPlumbInstance对象。jsPlumbInstance 是 jsPlumb 库中重要的对象之一，它代表了一个 jsPlumb 实例，并包含了一系列 API 和配置选项，用于管理连接器和元素。

2、repaintEverything()方法用于重新渲染整个页面上的连接器，以适应元素位置或大小的变化。当元素被移动或缩放时，它们的位置、大小、旋转等属性都会发生变化。如果这些元素与其他元素之间存在连接器，则连接器的位置和样式也需要相应地进行更新，以保证页面上的连接显示正确。

3、deleteEveryConnection()方法用于删除页面上的所有连接器。当你需要一次性删除页面上所有的连接器时，可以调用 deleteEveryConnection() 方法。这个方法会遍历整个页面上的连接器，并将它们全部删除。

4、 connect() 方法用于创建一个连接器，并将其连接到页面上的两个元素之间.

5、属性字段参数：

1. source：连接节点的起始位置。
2. target：连接节点的结束位置。
3. anchor：连接的位置(Right ，Left，Bottom，Top)。
4. orerlays：给连接的线上添加小箭头。
5. connector：连接的线的类型（Bezier:贝塞尔曲线；Flowchart：流程线；StateMachine：状态机；Straight：直线）。

具体的参考文档可以看这个： jsplumb 中文基础教程 (wdd.js.org)

三、完整代码

export default function Test(props:any) {
    let timer: any;
    const instance = jsPlumb.getInstance();//创建一个jsplumb对象
    const resize = () => {
        instance.repaintEverything();
    const clear = () => {
        if (timer) {
            clearInterval(timer);
        instance.deleteEveryConnection();
    const init = () => {
        let m = 0.01;
        timer = setInterval(() => {
            m += 0.002;
            if (m > 0.98) {
                m = 0.012;
            instance.deleteEveryConnection();
            //连接图一和图二
            instance.connect({
                source: "flowChart1",//图一的id
                target: "flowChart2",//图二的id
                endpoint: "Blank", //端点的形状设置为空
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Right", "Left"],//连接端点的位置，起始节点的右侧和结束节点的左侧
                paintStyle: { stroke: "#457DA5", strokeWidth: 2 },//线的样式
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],//小箭头样式及位置
            //连接图二和图三
            instance.connect({
                source: "flowChart2",
                target: "flowChart3",
                endpoint: "Blank",
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Right", "Left"],
                paintStyle: { stroke: "#474554", strokeWidth: 2 },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],
            //连接图四和图三
            instance.connect({
                source: "flowChart4",
                target: "flowChart3",
                endpoint: "Blank",
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Right", "Left"],
                paintStyle: { stroke: "#27951D", strokeWidth: 2 },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],
            //连接图四和图二
            instance.connect({
                source: "flowChart4",
                target: "flowChart2",
                endpoint: "Blank",
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Bottom", "Bottom"],
                paintStyle: { stroke: "#27951D", strokeWidth: 2 },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],
        }, 20);
    useEffect(() => {
        init();
        window.addEventListener("resize", resize);
        return () => {
            clear();
            window.removeEventListener("resize", resize);
    }, []);
    return (
          <div style={{width:'100%',display:"flex",justifyContent:"space-between"}}>
              <div id={'flowChart1'} style={{border: "5px solid #457DA5"}}>FlowChart1</div>
              <div id={'flowChart2'} style={{border: "5px solid #474554"}}>FlowChart2</div>
              <div id={'flowChart3'} style={{border: "5px solid #9C8D41"}}>FlowChart3</div>
              <div id={'flowChart4'} style={{border: "5px solid #27951D"}}>FlowChart4</div>
以上代码就可以实现图例中的流向图了，有什么其他的好方法欢迎评论交流。
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
				
探索React-JsPlumb-Flow：构建可视化流程图的强大工具
去发现同类优质开源项目:https://gitcode.com/
在现代前端开发中，实现交互式、动态的流程图已经成为了提升用户体验和复杂系统理解的关键。今天，我们将深入探讨一个名为的开源项目，它利用React和JsPlumb库，为开发者提供了一个高效的解决方案。
React-JsPlumb-Flow是基于JavaScr...
一.流程图拖动问题
从某个地方拖动元素到流程图区域可以使用jQuery-UI的拖动和放置进行处理。流程图内的拖动直接使用jsPlumb.draggable(id)改api里面的id为元素id。
二.流程图...
时隔三年，我跳去了某大厂工作了。从以前使用vue，到现在使用React，感觉还可以接受，毕竟现在好多框架都是开箱即用的。刚好有个拓扑图的需求，于是我技术选型了使用jsplumb，发现里面有不少坑，于是写下博客已作记录。
二、需要在container上加上position:relative;
如果你在使用jsplumb时，使用到它的api——setContainer的话，那么这个时候你就要注意了，一定要为这个container设置一个样式——position: relative;如下图1-
 :bow_and_arrow: 在React中的DOM元素之间绘制箭头 :fountain_pen:
npm install react-archer --save或yarn add react-archer
 import { ArcherContainer , ArcherElement } from 'react-archer' ;
const rootStyle = { display : 'flex' , justifyContent : 'center' } ;
const rowStyle = { margin : '200px 0' , display : 'flex' , justifyContent : 'space-between' , }
const boxStyle = { padding : '10px' , border : '1px solid black' , } ;
				
功能：通过使用jsPlumb库，实现了一个简单的流程图编辑器。用户可以通过拖拽节点和连接线来创建和编辑流程图。同时，该示例还使用了JsRender模板引擎、jquery、jquery-ui和bootstrap图标等插件。
能做到什么：
1. 流程图编辑：用户可以在网页上拖拽节点和连接线来创建和编辑流程图，实现对工作流程的可视化表示。
2. 模板引擎：使用JsRender模板引擎，可以方便地将数据渲染到页面上，实现动态内容的展示。
3. 交互性：通过jquery和jquery-ui库，可以实现与用户的交互操作，如缩放、拖拽等。
4. 样式支持：使用bootstrap图标库，可以提供丰富的样式和图标选择，使界面更加美观和易用。
5. 跨平台兼容性：由于该示例是基于JavaScript编写的，因此可以在不同的操作系统和设备上使用，具有良好的跨平台兼容性。
6. 灵活性高：用户可以根据自己的需求自定义流程图的内容和样式，具有很高的灵活性。
	Connector：连线，连接两个节点的直观表现
	Overlay：装饰连接器的组件，类似箭头之类
	Group：包含在某个其他元素中的一组元素，可以折叠，导致与所有组成员的连接被合并到折叠的组容器上。
jsPlumb通过元素id来和所有的元素进行交互，如果没有为...
				
    最近公司有个导航项目需要做个流程图比较复杂的那种，作为一个前端小菜也是很蒙的，要求就两条一：动态加载流程图；二：动态连线；这两点要求也是难住了一阵呢，最后选择了jointJS，选着原因官网API很详细，代码量比较少封装起来使用也很便捷，进阶文档基础略过，没接触过得可以去在官网先学习一下，废话不多少直接上硬菜。
    我这块写了两个一个是节点型流程图和关系行流程图。（源码在下一篇文章可以...
在利用jsPlumb.deleteEveryConnection 删除所有连线报错
jsPlumb.deleteEveryConnection is not a function!
jsPlumb.js 版本是Community Edition社区版 1.7.6。
我的jsPlumb是cdn引入的，直接去网页上查看js源文件。
发现deleteEveryConnection方法的确搜索不到，然后翻了下，在文件中找到了detachEveryConnection()！
jsPlumb