Vue3+Vite+TS+electron实现自定义流程图绘制

511 阅读1分钟

Vue3 + Vite + element-plus + TS + electron

本项目采用了 Vue3 + Vite + element-plus + TS + electron 开发的桌面端应用。采用logic-flow实现自定义的业务流程图绘制(配合自研的工作流后端)。

流程图绘制功能说明

  • 实现了工作流常见图标的自定义,支持拖拽、连线、删除、自定义节点属性。
  • 支持导出保存流程图json文件;
  • 支持流程图保存为图片;
  • 支持导入已保存的流程图json文件;
  • 支持节点连线的自定义校验;

效果预览

1.gif

效果2

运行项目

npm run dev

logic-flow 绘制流程图软件

官网地址
site.logic-flow.cn/
LogicFlow自定义业务节点
1024code.com/collections…
Icon素材库
www.iconfont.cn/
自定义节点参考
site.logic-flow.cn/api/model/g…
gitee.com/xzs0822/log…
logic-flow源码地址
github.com/didi/LogicF…

element-plus

指南
element-plus.org/zh-CN/guide…
组件
element-plus.org/zh-CN/compo…
图标集合
element-plus.org/zh-CN/compo…
菜单组件
element-plus.org/zh-CN/compo…
Container 布局容器
element-plus.org/zh-CN/compo…
按钮
element-plus.org/zh-CN/compo…

源码

项目源码地址:gitee.com/gaoshiwen/e…

自研工作流

image.png

image.png

image.png