任务进度bpmn绘制选型antv/x6与g6

一、起源

因为想要记录业务【在整个流程开始与结束之外的操作】与流程【图中红色标码的节点为审批节点】结合的全流程进度，因为时间与一些其他原因想采用前端制作

二、G6尝试

2.1官方示例

g6的官方流程图示例

2.2参照实现

layout: {
          type: 'grid',
          begin: [200, 200],
          preventOverlap: true, // 防止重叠
          cols: 5
        }

通过设置layout控制行有5个节点，但是效果并不怎么样，边会重合

2.3通过anchorPoints标记节点连接桩

连接十分混乱，除非是固定的节点位置

参考：antv G6绘制流程图

三、X6尝试

3.1官方示例

g6的官方bpmn流程图示例

基本符合，但需要一定的适配改造

3.2适配需求

实现当前节点和通过节点的高亮，以及驳回边的智能处理

代码放在gitee的仓库里