【亲测免费】 Vue+Antv X6绘制流程图demo

项目描述

本项目是一个基于Vue框架和AntV X6组件库的流程图绘制demo。通过本项目，您可以学习如何在Vue项目中使用AntV X6组件库来实现流程图的绘制，并满足以下需求：

需求1：拖拽生成流程图模块

左侧菜单中的模块可以通过拖拽的方式进入画布，生成对应的流程图模块。

需求2：节点间连线交互

流程图中的节点之间可以进行连线交互，实现节点之间的逻辑连接。

需求3：节点操作

点击流程图中的节点后，可以进行节点的操作，包括删除节点和查看节点的相关信息参数。

需求4：连线操作

鼠标悬浮在连线上时，可以删除当前连线，方便用户进行流程图的调整。

隐含需求：自定义节点样式

节点样式需要满足UI设计要求，因此需要自定义节点样式，以确保流程图的美观性和一致性。

项目效果

项目实现了以上所有需求，具体效果如下：

使用说明

1. 克隆项目：将本仓库克隆到本地。
2. 安装依赖：使用npm install或yarn install安装项目依赖。
3. 运行项目：使用npm run serve或yarn serve启动项目，访问本地服务器查看效果。

技术栈

• Vue.js
• AntV X6
• JavaScript
• HTML/CSS

贡献

欢迎大家提出问题和建议，或者提交PR进行代码贡献。

许可证

本项目采用MIT许可证，详情请参阅LICENSE文件。