大家好，這次使用的是AntV的螞蟻數據可視化X6框架，類似于審批流的場景等，代碼如下：
X6框架參考網址：https://x6.antv.vision/zh/examples/showcase/practices#bpmn
可以進入該網址，直接復制下方代碼進行調試或觀察。
效果圖如下：

<canvas id="container"></canvas>

import { Graph, Cell } from '@antv/x6'const data = [{"id": "1","shape": "event","width": 40,"height": 40,"position": {"x": 50,"y": 180}},{"id": "2","shape": "activity","width": 100,"height": 60,"position": {"x": 20,"y": 280},"label": "請假申請"},{"id": "3","shape": "bpmn-edge","source": "1","target": "2"},{"id": "4","shape": "gateway","width": 55,"height": 55,"position": {"x": 170,"y": 282.5}},{"id": "5","shape": "bpmn-edge","source": "2","target": "4"},{"id": "6","shape": "activity","width": 100,"height": 60,"position": {"x": 300,"y": 240},"label": "領導審批"},{"id": "7","shape": "activity","width": 100,"height": 60,"position": {"x": 300,"y": 320},"label": "人事審批"},{"id": "8","shape": "bpmn-edge","source": "4","target": "6"},{"id": "9","shape": "bpmn-edge","source": "4","target": "7"},{"id": "10","shape": "gateway","width": 55,"height": 55,"position": {"x": 460,"y": 282.5}},{"id": "11","shape": "bpmn-edge","source": "6","target": "10"},{"id": "12","shape": "bpmn-edge","source": "7","target": "10"},{"id": "13","shape": "activity","width": 100,"height": 60,"position": {"x": 560,"y": 280},"label": "人事審批"},{"id": "14","shape": "bpmn-edge","source": "10","target": "13"},{"id": "15","shape": "event","width": 40,"height": 40,"position": {"x": 710,"y": 290},"attrs": {"body": {"strokeWidth": 4}}},{"id": "16","shape": "bpmn-edge","source": "13","target": "15"}
]
// 設置event類型節點的樣式（起點和終點的樣式）
Graph.registerNode('event',{inherit: 'circle',attrs: {body: {strokeWidth: 2,stroke: '#5F95FF',fill: '#FFF',},},},true,
)
// 設置activity類型節點的樣式
Graph.registerNode('activity',{inherit: 'rect',markup: [{tagName: 'rect',selector: 'body',},{tagName: 'image',selector: 'img',},{tagName: 'text',selector: 'label',},],attrs: {body: {rx: 6,ry: 6,stroke: '#5F95FF',fill: '#EFF4FF',strokeWidth: 1,},img: {x: 6,y: 6,width: 16,height: 16,'xlink:href':'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ',},label: {fontSize: 12,fill: '#262626',},},},true,
)
// 設置gateway類型節點的樣式
Graph.registerNode('gateway',{inherit: 'polygon',attrs: {body: {refPoints: '0,10 10,0 20,10 10,20',strokeWidth: 2,stroke: '#5F95FF',fill: '#EFF4FF',},label: {text: '+',fontSize: 40,fill: '#5F95FF',},},},true,
)
// 設置bpmn-edge類型線段的樣式
Graph.registerEdge('bpmn-edge',{inherit: 'edge',attrs: {line: {stroke: '#A2B1C3',strokeWidth: 2,},},},true,
)
// 設置展示canvas圖表的容器
const graph = new Graph({container: document.getElementById('container')!,connecting: {router: 'orth',},
})// 處理一下數據的格式，開始渲染圖表
const cells = []
data.forEach((item: any) => {if (item.shape === 'bpmn-edge') {cells.push(graph.createEdge(item))} else {cells.push(graph.createNode(item))}
})
graph.resetCells(cells)
graph.zoomToFit({ padding: 10, maxScale: 1 })

最后，原創不易，如本文對您有所幫助，麻煩點個贊收藏謝謝！