前端流程编辑器,vue流程编辑器

继上一篇发布了vue的表单设计器(说等流程编辑器开发完之后也开源),现在流程编辑器也发布了npm包,并且项目也在git上开源了,需要的小伙伴可以看一下,如果对你有帮助的话,也帮项目点个star,是对我最大的鼓励,还是有问题,有需求可以直接在下面留言,或者加入QQ群218461534(群刚建)
这两个项目纯属个人爱好

指南

基于G6的vue流程编辑器,主要功能是在可视化图形界面画流程如,生成可保存的JSON数据,并能将JSON还原成流程图。

预览地址
项目文档
[GitHub]源码开源地址
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tjwmjWfB-1593768618461)(./img/flowDesignTCD1.gif)]特性

  • 可视化画图页面页面
  • 自由控制节点属性
  • 提供画图工具按钮
  • 支持miniMap
  • 根据json渲染成图

    vue element-ui G6 license

版本

vue

设计原则

flow-design-tcd本着尽可能使所有流程图信息由使用者通过图形界面操作。

快速上手

1.安装vue-cli

 npm install -g @vue/cli
 # OR
 yarn global add @vue/cli

2.创建一个项目

使用初始化项目命令

 vue create myapp

3.安装flow-design-tcd

 npm i flow-design-tcd --save
 # OR
 yarn add flow-design-tcd

4.使用flow-design-tcd

在项目main.js中

 import FlowDesignTCD from 'flow-design-tcd'
 import "flow-design-tcd/lib/flow-design-tcd.css"
 Vue.use(FlowDesignTCD)

以上步骤便完成便可在项目中直接使用flow-design-tcd。

建议

::: warning
flow-design-tcd样式风格引用element-ui的组件库,使用过程中可搭配element使用。
flow-design-tcd中对canvas渲染出的流程图,引用蚂蚁数据可视化G6,如若开发集成本插件源码,建议学习G6
:::

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值