技术栈

使用magicFlow插件绘制。
原生HTML页面也可以，vue或react前端框架也可以，官网有详细安装方法，本文章后面也会详细说明。
官网链接: MagicFlow官网地址

需求

前端绘制泳道图结合流程图，达到如下效果

当然如果仅仅只是长成这样，想必大家用canvas或者svg画图都能解决一大半。
还需要页面能够识别节点所在的泳道，可能节点拖拽拉长后会跨多个泳道，要能知道每个节点移动后从属于哪些泳道（即节点权限问题）。

安装MagicFlow

直接用script引入

在原生html中直接通过script标签引入

<!--LogicFlow core包css-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css"
/>
<!--LogicFlow extension包css-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.css"
/>
<!--LogicFlow core包js-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<!--LogicFlow的插件支持单个引入，这里以菜单插件为例-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/Menu.js"></script>

这些都是通过官网cdn引入文件，也可以将文件下载到本地引入。

使用 npm 引入

npm install @logicflow/core
npm install @logicflow/extension

绘制一个简单的流程图

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";const lf = new LogicFlow({container: document.querySelector("#app"),grid: true,
});
lf.render({nodes: [{id: "1",type: "rect",x: 100,y: 100,text: "节点1",},{id: "2",type: "circle",x: 300,y: 200,text: "节点2",},],edges: [{sourceNodeId: "1",targetNodeId: "2",type: "polyline",text: "连线",},],
});

绘制泳道

泳道可以用svg或canvas绘制，或者简单点也可以直接用div布局绘制

多行多列就可以了。

逻辑交互

最后，如何判断节点从属于哪些泳道呢？
没错，没有简单地办法，就是自己写个小方法用坐标去和泳道的宽高对比
小技巧：magicFlow中lf.getDataById(id)可以获取节点或者连线的具体数据，lf.getNodeDataById(id)也可以获取节点的具体数据，id是节点的id。

// 获取节点的具体数据
console.log(lf.getNodeDataById('1'))
// { "id": "1", "type": "rect", "x": 75, "y": 68, "properties": { "nodeSize": { "width": 90, "height": 60 } }, "text": { "x": 75, "y": 68, "value": "任务节点1" } }

注意，如果初始化时没有写入"properties": { “nodeSize”: { “width”: 90, “height”: 60 } }时，上面方法获取到的properties字段是空的，可以在初始化节点时就写入默认的properties: { nodeSize: { width: 90, height: 60 } }

上面的x和y就是当前节点的坐标，注意，是以画布左上角点为原点，节点的中心点的坐标。nodesize中的就是节点的宽和高
我们将左边列的表头最上面和画布对齐，上面表头的下边和画布对齐，就可以根据表头的宽高来计算节点的泳道位置了

testNodeBelong(id) {// 测试节点从属的泳道let nodeYData = this.lf.getDataById(id);//测试节点从属    81为每个泳道的高start = Math.floor((nodeYData?.y - nodeYData?.properties?.nodeSize?.height / 2) /swim.height);end = Math.floor((nodeYData?.y + nodeYData?.properties?.nodeSize?.height / 2) /swim.height);let Arr = [];for (let i in this.columns) {if (i >= start && i <= end) {Arr.push(this.columns[i].value);}}window.alert(Arr);},

columns是竖表头的内容，包含表头的值和表头的高

columns: [{ value: "产品经理", height: "80px" },{ value: "泳道图1", height: "80px" },{ value: "泳道图2", height: "80px" },{ value: "泳道图3", height: "80px" },{ value: "泳道图4", height: "80px" },{ value: "泳道图5", height: "80px" },{ value: "泳道图6", height: "80px" },{ value: "泳道图7", height: "80px" },{ value: "泳道图8", height: "80px" },],

前端绘制流程图、泳道图相关推荐

2023/07/14 UML图/流程图/泳道图是什么
UML图 UML图中的几种图简介(时序图,协作图,状态图,活动图,对象图) 泳道图适合做这种效果,体现角色关系流程图定义绘制要素开始/结束:用一个椭圆标识,代表流畅的开始或结束,流畅图只有一 ...
前端绘制k线图 -- 原生js canvas图表绘制
样式如下图源码地址: https://github.com/sutianbinde/charts 演示地址:kchart.html 编写这个需要具备canvas基础,如果没有canvas基础可以学习 ...
使用PlantUML快速绘制流程图/时序图/类图/用例图…
一.前言教程:https://plantuml.com/zh/ 二.PlantUML语言编写环境常用的编译器eclipse,IDEA intelliJ都有对应的插件,同时还和Maven和JQuer ...
Word上怎么绘制流程图的图线绑定的流程图
看截图这就可以了,喜欢的话记得关注哦,谢谢~~~~~~~~~~~
Omnigraffle绘制泳道图教程
泳道图,一种UML活动图,能够清晰体现出某个动作发生在哪个部门,泳道图在纵向上是部门职能,横向是岗位(有时候横向上不区分岗位).绘图元素与传统流程图类似,但在业务流程主体上,通过泳道(纵向条)区分出执 ...
泳道图是什么？究竟如何绘制？
泳道图是什么呢?泳道图就是UML软件开发中活动图的一种,通过横纵线来表达部门职能和岗位,将企业公司中的人事关系进行划分,让数据更加具有层次感.由于泳道图是将活动组织用线框分为不同区域,形状酷似泳道,所 ...
js 绘制泳道图_软件工程师，如何绘制业务架构图 — 4.流程图
流程图,可以用来描述任何有顺序.有规则的活动过程. 流程图是业务架构三视图的最后一张,也是描写客户业务最为重要的一张架构图. 在企业管理的分析和设计中,主要涉及到的流程是业务流程与审批流程.流程是为达 ...
excel制作跨职能流程图_如何绘制泳道图（跨职能流程图）
如何定义泳道图?泳道图也叫跨职能流程图,旨在展示工作流中每个步骤涉及的流程和职能部门.泳道流程图是一种特殊的图表可以展示出一个商业过程之间的关系,并展示为那个过程负责的功能板块(比如说部门).泳道流程 ...
如何绘制合格的泳道图（跨职能流程图）？
泳道图,又称为跨职能流程图. 它是用于明确流程环节所属的阶段.流程环节负责人.组织机构或部门的一类图形. 本文将从以下三方面对泳道图进行拆解: 泳道图的三大维度泳道图的绘制绘制泳道图的误区和规范 ...

前端绘制流程图、泳道图

技术栈

需求