Vue 你想要的流程图

最新推荐文章于 2024-07-16 14:59:12 发布

转载最新推荐文章于 2024-07-16 14:59:12 发布 · 1.7w 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb6ce4ef265da0373717e00

文章标签：

#javascript #前端 #json #ViewUI

本文介绍使用SVG、Vue及Vuex技术栈搭建的流程图编辑器，涵盖画布缩放、节点操作、连线绘制、文本添加等功能，并提供数据导入导出、撤销重做等实用特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言：

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

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

项目实际用到的技术栈：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