• 💂 个人网站:IT知识小屋
• 🤟 版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主
• 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

简介

Vue-Flow是一款MIT协议开源的专业在线绘制流程图工具，基于Vue + Ant Design Vue + JSPlumb实现，基于它可快速在项目中引入可视化流程编辑功能。工具支持节点拖拽、连线、对齐、缩放、画布操作等核心功能，并提供简洁直观的操作界面，帮助用户快速所需的可视化流程图功能。只需遵循MIT开源协议许可，你可以免费使用，甚至可以基于它进一步开发软件进行发布、销售。

功能界面

最新界面效果

基础面板

拖拽节点到绘图区连线

拖拽对齐或使用自动对齐

显示/隐藏网格

设置节点和连线的属性

单节点、多节点移动(按住 CTRL 键)

改变节点对齐的排序顺序(按住 Ctrl 键一个一个单击选中要对齐的节点，单击的顺序就是对齐的排列顺序)

保存流程图(会生成一段 json 数据，后台可以保存这段数据，为了便于调试，生成的 json 数据可以通过快捷键 CTRL+ALT+T 打开的测试窗口看到。同时也可以从该窗口载入其他的符合流程图的 json 数据)

保存流程图为图片保存到本地

画布拖拽、缩放

通过设置页面(CTRL+ALT+S)可以设置相关参数

快捷键说明

快速启动

安装项目：node_modules 包：yarn 启动项目：yarn start 构建项目 dist 文件夹资源：npm run build

开源地址&使用手册

点击下方的【IT学习日记】回复【资源】领取！

如果这篇文章对您有帮助，请一定帮我点个“关注”和“点赞”,这对我非常重要。我将会继续推荐更多优质项目和新闻。

写在最后

1000+优质开源项目更新进度：241/1000。如需更多类型优质项目推荐，请在文章后留言。