使用 AntV X6 + vue 实现单线流程图

使用 AntV X6 + vue 实现单线流程图

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。

官方文档

安装

yarn add  @antv/[email protected]

Tips： 目前 X6 有 1.x 和 2.x 两个版本，因为官方文档的示例代码都是 1.x 版本的，所以本文档也是基于 1.x 版本的，如果你使用的是 2.x 版本，可以参考官方文档。

常用 API

API	说明	使用方法
Graph	图实例	const graph=new Graph()
graph.zoomTo	缩放图形	graph.zoomTo(0.8)
graph.centerContent	图形居中	graph.centerContent()
graph.getCell	获取节点	graph.getCell(node.id)
graph.addCell	新增节点	graph.addCell([node1,edge1,node2,node3])
graph.removeCells	删除节点	graph.removeCells(cell)
graph.createEdge	创建连接线	graph.createEdge(node1,node2)
graph.removeEdge	删除连接线	graph.removeEdge(edge.id)
graph.getNodes	获取所有节点	graph.getNodes()
graph.getEdges	获取所有连接线	graph.getEdges()
Graph.registerNod	自定义元素样式	可查看文档

demo 代码（以下为 vue 实现单线流程图示例）

实现效果

vue 代码

Tips： 示例代码需安装 dagre 和 insert-css 依赖