基于VUE和JSPlumb的在线绘制流程图工具

介绍
  • VUE FLOW DESIGN流程设计器，基于Vue + Ant Design Vue + JSPlumb，该组件目的是为了使用在Vue项目中，它前身是原生版流程设计器。
  • Vue版本以全新的技术栈重构了代码，并在原版基础上实现了更好的操作方式，新版会作为优先版本持续迭代。
效果演示
  • 基础面板
    在这里插入图片描述
  • 拖拽节点到绘图区连线
    在这里插入图片描述
  • 拖拽对齐或使用自动对齐
    在这里插入图片描述
  • 显示/隐藏网格
    在这里插入图片描述
  • 设置节点和连线的属性
    在这里插入图片描述
  • 单节点、多节点移动(按住CTRL键)
    在这里插入图片描述
  • 改变节点对齐的排序顺序(按住Ctrl键一个一个单击选中要对齐的节点，单击的顺序就是对齐的排列顺序)
    在这里插入图片描述
  • 清空画布，重新绘制
    在这里插入图片描述
  • 保存流程图(会生成一段json数据，后台可以保存这段数据，为了便于调试，生成的json数据可以通过快捷键CTRL+ALT+T打开的测试窗口看到。同时也可以从该窗口载入其他的符合流程图的json数据)
    在这里插入图片描述
  • 保存流程图为图片保存到本地
    在这里插入图片描述
  • 通过设置页面(CTRL+ALT+S)可以设置相关参数
    在这里插入图片描述
  • 快捷键说明
    在这里插入图片描述
  • 。。。。。。

QQ交流群：637230519

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue