这个项目采用的是G6（阿里开源），由于现在已经没有维护了，导致很多的配置，参数，方法示例demo等都是自己摸索的，大概介绍下本案例中使用到的以及一些后续维护可能会用到的。
Editor 该类是整个编辑器的主控类，其主要职责是将编辑器的各个组件协同起来。
//实例化：import G6Editor from '@antv/g6-editor'const editor = new G6Editor()//实例方法：add // 可以理解为vue的添加组件editor.add(this.flow)save // 保存数据（Object类型，里面存放nodes以及edges，对应节点和连线）let data = this.flow.save()read // 读取数据this.data && this.flow.read(this.data)getGraph // 获取流图示例this.graph = this.flow.getGraph()getCurrentPage // 获取当前页面this.page = editor.getCurrentPage()hideGrid // 背景以网格的形式呈现this.page.hideGrid()on // 事件监听this.page.on('afteritemselected', e => { //处理数据 })Destory // 销毁（相当于vue的destoryed生命周期）this.page.destory()Flow 继承自Editor的page，专用于构建有向流程图编辑器。
实例化：
new Editor.flow()配置项
主要介绍下配置项，也是项目中用到最多的。
Graph G6图的配置项，语雀上可以搜到。
Align 文本对齐。
Grid 网格线的配置
Shortcut 快捷键的配置
this.flow = new G6Editor.Flow({ graph: { container: this.$refs.flow }, align: { grid: true },// 网格对齐 grid: { cell: 10 },// 网孔尺寸 shortcut: { zoomIn: true, // 开启放大快捷键 zoomOut: true // 开启视口缩小快捷键 }})节点的配置项
this.graph.node({ id: 'node1', // id 必须唯一 color: '#333', // 颜色 size: 10 || [10, 10], // 尺寸 || [宽, 高] shape: 'circle', // 所用图形 style: { // 关键形样式（优先级高于color） fill: 'red', stroke: 'blue' }, label: '文本标签' || { // 文本标签 || 文本图形配置 text: '文本标签', fill: 'green' }, parent: 'group1', // 所属组 index: 1, // 渲染层级 })线的配置项
this.graph.edge({ id: 'edge1', // id 必须唯一 source: 'node1', // 源节点 id target: 'node2', // 目标节点 id controlPoints: [{ // 控制点 x: 10, y: 10 }], sourceAnchor: 0, // 源节点锚点 targetAnchor: 2, // 目标节点锚点 shape: 'line', // 所用图形 style: { // 关键形样式（优先级高于color） fill: 'red', stroke: 'blue' }, label: '文本标签' || { // 文本标签 || 文本图形配置 text: '文本标签', fill: 'green' }, labelRectStyle: { // 文本矩形底的样式 fill: 'blue' }, parent: 'group1', // 所属组 index: 1, // 渲染层级 }),状态改变触发的事件
flow.on('beforeitemselected', e=>{}); // 选中前 flow.on('afteritemselected', e=>{}); // 选中后 flow.on('beforeitemunselected', e=>{}); // 取消选中前 flow.on('afteritemunselected', e=>{}); // 取消选中后数据改变触发的事件
flow.on('beforechange', e=>{}); // 图数据变更前 flow.on('afterchange', e=>{}); // 图数据变更后