reactflow 泳道图的实现与自动排版

最新推荐文章于 2024-04-28 20:37:43 发布
最新推荐文章于 2024-04-28 20:37:43 发布
阅读量224 收藏
点赞数 2
分类专栏： 技术分享 文章标签： 排序算法 typescript reactjs 流程图 dashboard
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shen20121/article/details/134665116
版权

Project - Implement Swimlane flow chart with Reactflow

This is building Swimlane flowchart based on ReactFlow and Dagre alogrithm. It contains below features:

  • auto layout based on DAG Dagre algorithm.
  • auto change edge path if there is intermediate node.
  • supports change layout Top to Bottom and Left to Right
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

Sample of how to use

npm install @liangfaan/reactflow-swimlane

import React from "react";
import { SwimlaneFlow } from "@liangfaan/reactflow-swimlane";
// wrap the component under ReactFlowProvider
import { ReactFlowProvider } from "reactflow";
import "reactflow/dist/style.css";

function App() {
  return (
    <div style={{ height: 800 }}>
      <ReactFlowProvider>
        <SwimlaneFlow
          rankDirection="LR"
          selectedFlow={{
            id: "Sample 3",
            swimlanes: [
              {
                id: "S3-1",
                label: "Mindmap Root",
                layer: 0,
                nodes: [
                  {
                    id: "S3-1-M1",
                    label: "Root",
                    code: "ROOT",
                  },
                ],
              },
              {
                id: "S3-2",
                label: "Mindmap Level 1",
                layer: 1,
                nodes: [
                  {
                    id: "S3-2-M1",
                    label: "Child 1",
                    code: "CHILD1",
                  },
                  {
                    id: "S3-2-M2",
                    label: "Child 2",
                    code: "CHILD2",
                  },
                ],
              },
              {
                id: "S3-3",
                label: "Mindmap Level 2",
                layer: 2,
                nodes: [
                  {
                    id: "S3-3-M1",
                    label: "Child 1",
                    code: "CHILD1",
                  },
                  {
                    id: "S3-3-M2",
                    label: "Child 2",
                    code: "CHILD2",
                  },
                  {
                    id: "S3-3-M3",
                    label: "Child 3",
                    code: "CHILD4",
                  },
                  {
                    id: "S3-3-M4",
                    label: "Child 4",
                    code: "CHILD4",
                  },
                ],
              },
            ],
            edges: [
              {
                id: "E-S3-1-M1-S3-2-M1",
                sourceNodeId: "S3-1-M1",
                targetNodeId: "S3-2-M1",
              },
              {
                id: "E-S3-1-M1-S3-2-M2",
                sourceNodeId: "S3-1-M1",
                targetNodeId: "S3-2-M2",
              },
              {
                id: "E-S3-2-M1-S3-3-M1",
                sourceNodeId: "S3-2-M1",
                targetNodeId: "S3-3-M1",
              },
              {
                id: "E-S3-2-M1-S3-3-M2",
                sourceNodeId: "S3-2-M1",
                targetNodeId: "S3-3-M2",
              },
              {
                id: "E-S3-2-M1-S3-3-M3",
                sourceNodeId: "S3-2-M1",
                targetNodeId: "S3-3-M3",
              },
              {
                id: "E-S3-2-M1-S3-3-M4",
                sourceNodeId: "S3-2-M1",
                targetNodeId: "S3-3-M4",
              },
              {
                id: "E-S3-2-M2-S3-3-M3",
                sourceNodeId: "S3-2-M2",
                targetNodeId: "S3-3-M3",
              },
              {
                id: "E-S3-2-M2-S3-3-M4",
                sourceNodeId: "S3-2-M2",
                targetNodeId: "S3-3-M4",
              },
              {
                id: "E-S3-2-M2-S3-3-M2",
                sourceNodeId: "S3-2-M2",
                targetNodeId: "S3-3-M2",
              },
              {
                id: "E-S3-2-M2-S3-3-M1",
                sourceNodeId: "S3-2-M2",
                targetNodeId: "S3-3-M1",
              },
              {
                id: "E-S3-3-M3-S3-1-M1",
                targetNodeId: "S3-3-M3",
                sourceNodeId: "S3-1-M1",
              },
              {
                id: "E-S3-3-M2-S3-1-M1",
                targetNodeId: "S3-3-M2",
                sourceNodeId: "S3-1-M1",
              },
            ],
          }}
        />
      </ReactFlowProvider>
    </div>
  );
}

export default App;

Output

在这里插入图片描述

Start project npm start

Runs the app in the development mode.
Open http://localhost:3005 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Data Schema

{
    "id": "object id",
    "swimlanes": [
        {
            "id": "swimlane obj",
            "layer": 0,  <=swimlane layer order
            "label": "swimlane label, will display in flowchat",
            "nodes": [
                {
                    "id": "nodes id",
                    "name": "node name",
                    "label": "node label, will display in flowchart"
                },
            ],
            "edges": [
                {
                    "id": "edge id",
                    "sourceNodeId": "source node id",
                    "targetNodeId": "target node id"
                }
            ]
        }
    ]
}

Samples

Simple swimlane

{
  "id": "Sample 2",
  "swimlanes": [
    {
      "id": "S21",
      "layer": 0,
      "label": "Swimlane 21",
      "nodes": [
        {
          "id": "S21-1",
          "name": "Node S211",
          "label": "Node S211",
          "code": "NODES211"
        }
      ]
    },
    {
      "id": "S22",
      "label": "Swimlane 22",
      "layer": 1,
      "nodes": [
        {
          "id": "S22-1",
          "name": "Node S221",
          "label": "Node S221",
          "code": "NODES221"
        }
      ]
    }
  ],
  "edges": [
    {
      "id": "S211-S221",
      "sourceNodeId": "S21-1",
      "targetNodeId": "S22-1"
    }
  ]
}

在这里插入图片描述

Swimlane mindmap

{
  "id": "Sample 3",
  "swimlanes": [
    {
      "id": "S3-1",
      "label": "Mindmap Root",
      "layer": 0,
      "nodes": [
        {
          "id": "S3-1-M1",
          "label": "Root",
          "code": "ROOT"
        }
      ]
    },
    {
      "id": "S3-2",
      "label": "Mindmap Level 1",
      "layer": 1,
      "nodes": [
        {
          "id": "S3-2-M1",
          "label": "Child 1",
          "code": "CHILD1"
        },
        {
          "id": "S3-2-M2",
          "label": "Child 2",
          "code": "CHILD2"
        }
      ]
    },
    {
      "id": "S3-3",
      "label": "Mindmap Level 2",
      "layer": 2,
      "nodes": [
        {
          "id": "S3-3-M1",
          "label": "Child 1",
          "code": "CHILD1"
        },
        {
          "id": "S3-3-M2",
          "label": "Child 2",
          "code": "CHILD2"
        },
        {
          "id": "S3-3-M3",
          "label": "Child 3",
          "code": "CHILD4"
        },
        {
          "id": "S3-3-M4",
          "label": "Child 4",
          "code": "CHILD4"
        }
      ]
    }
  ],
  "edges": [
    {
      "id": "E-S3-1-M1-S3-2-M1",
      "sourceNodeId": "S3-1-M1",
      "targetNodeId": "S3-2-M1"
    },
    {
      "id": "E-S3-1-M1-S3-2-M2",
      "sourceNodeId": "S3-1-M1",
      "targetNodeId": "S3-2-M2"
    },
    {
      "id": "E-S3-2-M1-S3-3-M1",
      "sourceNodeId": "S3-2-M1",
      "targetNodeId": "S3-3-M1"
    },
    {
      "id": "E-S3-2-M1-S3-3-M2",
      "sourceNodeId": "S3-2-M1",
      "targetNodeId": "S3-3-M2"
    },
    {
      "id": "E-S3-2-M1-S3-3-M3",
      "sourceNodeId": "S3-2-M1",
      "targetNodeId": "S3-3-M3"
    },
    {
      "id": "E-S3-2-M1-S3-3-M4",
      "sourceNodeId": "S3-2-M1",
      "targetNodeId": "S3-3-M4"
    },
    {
      "id": "E-S3-2-M2-S3-3-M3",
      "sourceNodeId": "S3-2-M2",
      "targetNodeId": "S3-3-M3"
    },
    {
      "id": "E-S3-2-M2-S3-3-M4",
      "sourceNodeId": "S3-2-M2",
      "targetNodeId": "S3-3-M4"
    },
    {
      "id": "E-S3-2-M2-S3-3-M2",
      "sourceNodeId": "S3-2-M2",
      "targetNodeId": "S3-3-M2"
    },
    {
      "id": "E-S3-2-M2-S3-3-M1",
      "sourceNodeId": "S3-2-M2",
      "targetNodeId": "S3-3-M1"
    },
    {
      "id": "E-S3-3-M3-S3-1-M1",
      "targetNodeId": "S3-3-M3",
      "sourceNodeId": "S3-1-M1"
    },
    {
      "id": "E-S3-3-M2-S3-1-M1",
      "targetNodeId": "S3-3-M2",
      "sourceNodeId": "S3-1-M1"
    }
  ]
}

左右排版

在这里插入图片描述

上下排版

在这里插入图片描述

梁发安
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
draggable-swimlane-editor:可拖拽的泳道图编辑器
04-06
可视化泳道图编辑器 react-beautiful-dnd
初识AntV-X6
kniknii的博客
03-19 3728
初识Antv-X6简介1.官网地址2. 官方例子选择Antv-X61. 原因 简介 X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。 1.官网地址 链接: antv 2. 官方例子 图表示例链接: antv-examples 官方流程图demo在线地址: antv-demo 选择Antv-X6 1. 原因 近期项目中有流程图以及泳道图的需求，一开始选型为mxgraph，抠破头后也只做了个小demo出来，完全没
泳道图是什么？怎么绘制泳道图
高效办公能手
03-08 424
泳道图，也被称为流程图、跨职能流程图或跨功能流程图，是一种在项目管理、业务流程分析、系统设计和许多其他领域广泛使用的视觉工具。泳道图通过清晰地展示不同职能或团队在整个流程中的职责和互动，帮助团队成员更好地理解复杂流程。泳道图通常将不同的职能或团队划分为不同的垂直泳道，每个泳道代表一个特定的角色或部门。流程中的每个步骤或活动都被描绘成水平方向的箭头，并标注在相应的泳道中。通过今天的介绍相信你已经对泳道图有了一定的了解了，下次需要进行绘制的时候，就可以用上今天介绍的方法了。这些将成为泳道图中的垂直泳道。
泳道图是什么？究竟如何绘制？
FzjDaMi的博客
09-14 1万+
泳道图是什么呢？泳道图就是UML软件开发中活动图的一种，通过横纵线来表达部门职能和岗位，将企业公司中的人事关系进行划分，让数据更加具有层次感。由于泳道图是将活动组织用线框分为不同区域，形状酷似泳道，所以被称作泳道图。泳道图可以直观的描述各类活动的关系，方便理解业务逻辑。 泳道图的常见用途 泳道图拥有可以清晰的表述关系和直观的逻辑关系等特点，都可以有效的帮助业务员进行人事管理和程序软件开发。 1、计算机维护功能流程。计算机的每个程序之间都是有固定联系的，所以泳道图可以有效的帮助整理不同功能之间的关系，来对
前端绘制流程图、泳道图
byebukesi的博客
07-11 2262
使用magicFlow插件绘制。原生HTML页面也可以，vue或react前端框架也可以，官网有详细安装方法，本文章后面也会详细说明。
Draw.io | 一款强大且支持在线编辑和导出的流程图绘制神器
热门推荐
青春木鱼的博客
07-02 3万+
Draw.io是一款非常出色的免费流程图绘制工具。利用这款工具，您可以轻松地绘制各种图表、图示和图形，涵盖了流程图、UML类图、组织结构图、泳道图、E-R图、文氏图等多种类型，适用于商务、工程、电气、网络设计、软件设计等各个领域的专业绘图需求。Draw.io致力于成为一款完全开源、免费且高质量的绘图软件。
react-flow基础使用及dagre库的使用
https://ligo100.cn 小何博客欢迎访问。
07-11 4806
最近项目中需要用到拓扑图的展示，最开始选用的是antv的拓扑图组件。antv组件虽然此很方便，但是在布局的时候总是会有莫名其妙的bug，然后自己也想法去解决（看前辈经验、官方issue），最后还是不能解决。于是更换了组件库，也就是我们今天的主角：react-flow。React Flow 是一个基于 React 的用于构建可视化流程图和图形编辑器的库。它提供了一个灵活的、可扩展的组件集合，使开发者可以轻松地创建交互式的流程图和图形编辑器应用。
html泳道连线图插件,mxGraph之在流程图上显示图片及泳道
weixin_39584549的博客
06-19 621
mxGraph开发过程中，显示流程图相信好多朋友通过fileio.html那个示例已经都能熟练操作了，至于为什么客户端Graph换出来的流程图上面的图片为什么在web层面上不显示，这是个很麻烦的问题，关键是样式的问题，如果你研究grapheditor.html你就可以发现这个示例上面有一个showxml的菜单选项，每次你画完图点击这个菜单项就会显示最新的xml定义，注意看里面关于图片的内容的代码s...
html泳道连线图插件,GooFlow流程图绘制插件
weixin_34159899的博客
06-19 450
var property = {width: 1200,height: 600,toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveHead: true,headBtns: ["new", "open", "s...
在vue中使用bpmn-js（一）
weixin_42776027的博客
05-06 8094
转载地址:www.jianshu.com/p/5ff652279a8d 由于之前的公司的项目中的工作流管理要用到流程图，而bpmn-js官方的文档是全英的而且使用的js框架是jQuery，可能是比较新的技术，官方也还在不断的更新，相关的文档或者资料很少很难找，只好自己不断爬坑填坑了。 什么是bpmn-js？ 一个BPMN 2.0渲染工具包和Web建模器。 github地址：https://g...
项目规划的泳道图分享
07-22
Project，项目是被管理的一组为客户提供一种或多种产品的资源。这组资源有个明确的开始和结束过程，并且按照一个文档化的计划执行。文档化的计划规定了应交付或应完成的产品、资金和资源以及应完成的工作和时间表。
Gooflow1.3 前端流程设计插件（拖拽生成流程）
12-29
前端流程设计插件， 可拖拽生成流程。内附文档\以及demo
myflow流程图绘制插件（js版）
06-23
前端比较方便的流程图绘制插件myflow，可结合后台程序，做流程可视化操作使用。
论文自动排版系统的设计与实现
03-30
论文自动排版系统的设计与实现,基于Wordvba,在一定程度上减少工作量。
Keil AStyle 自动排版工具
07-31
Keil AStyle 自动排版工具 Keil自动排版工具
Android Studio自动排版的两种实现方式
08-19
主要介绍了Android Studio自动排版的两种实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于jQuery的试卷自动排版系统实现代码
10-28
题目提干、选择题的选项、说明文字可以包含多媒体信息（文字、图片、列表、表格、视频等等……）。
帝国cms后台自动排版插件.zip
07-14
1、自动排版，将编辑器内的内容自动排版，段落自动居左，图片自动居中，清除多余空行，可定制段前是否空格。 2、图片排版，将编辑器中的图片自动居中，免去每张单独设置的烦恼。 3、简繁转换，可在编辑器中直接进行...
插入排序 - C++ / Python
最新发布
qianzhima2012的博客
04-28 52
插入排序是一种简单直观的排序算法，它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到(插入排序由于其简单和对小规模数据集的有效性，常被用于教学和作为其他更复杂算法的一部分（例如，作为快速排序中分区操作的选择排序）。)的额外空间的排序），因而在小规模数据或基本有序的数据集上表现良好。)，当输入数组已经是排好序的情况下。• 最好情况时间复杂度：(• 最坏情况时间复杂度：()，当输入数组是反序的。
python实现word自动排版
06-25
Python实现word自动排版是通过操作Word文档来实现的。Word文档是一种MS Word应用程序的文档格式，使用Python可以通过Office API来实现对Word的操作。 Python提供了一些针对Word文档的库，比如Python-docx库、Win32...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值