Vue 你想要的流程图

引言：

由于项目业务的需求，前端需要支持后台流程图适配 其实很扯淡哈哈 第一次在掘金发文 不喜欢勿喷哈 也欢迎大家指教

模块简介 废话不多说 先上图在解释

项目实际用到的技术栈：SVG + vue + vuex

功能介绍：

画布缩放

节点( 开始,基础,判断等 )添加，删除

节点间连线( 直线/折线 )

文本添加

外部导入SVG图形

撤销与重做

节点相关 npm i @antv/g6-editor --save 下载antv 依赖

import G6Editor from '@antv/g6-editor';

约定容器
<div id="minimap"></div>       <!-- 缩略图 DOM 结构规约参考 Minimap API -->
<div id="toolbar"></div>       <!-- 工具栏 DOM 结构规约参考 Toolbar API --> 
<div id="itempannel"></div>    <!-- 元素面板栏 DOM 结构规约参考 Itempannel API -->
<div id="detailpannel"></div>  <!-- 详情面板栏 DOM 结构规约参考 Detailpannel API -->
<div id="contextmenu"></div>   <!-- 右键菜单栏 DOM 结构规约参考 Contextmenu API -->
<div id="page"></div>          <!-- 参考 Flow、Mind API -->
生成对应的模块

导航的编辑可以参考 我省略了部分功能

数据格式为JSON

json格式

保存方法为saveData

初始化读取后台数据的话需要调用API

editor.read()该方法由接口读取数据

参考文档 www.yuque.com/antv/g6-edi…

项目代码地址 github.com/zhouping920…

---

欢迎指正 下载项目有啥问题可以@我 哈哈 觉得OK的 别忘了start