Vue 你想要的流程图

引言：

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

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

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

功能介绍：

画布缩放

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

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

文本添加

外部导入SVG图形

撤销与重做
复制代码

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

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

约定容器
       
        
    
  
   
          
生成对应的模块
复制代码

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

数据格式为JSON

json格式
复制代码

保存方法为saveData
复制代码

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

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

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

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

---

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

转载于:https://juejin.im/post/5cb6ce4ef265da0373717e00