# vue-x6-flow

**Repository Path**: jjfinal/vue-x6-flow

## Basic Information

- **Project Name**: vue-x6-flow
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# vue3 和 vue2 两个项目的demo是不同的，可以都下载下来运行查看是否有符合自身业务的demo

# vue-x6-flow

**基于antv-x6 vue版本**
vue2.x+ element +antv-x6 
适用于流程图-dag图


# vue3版本地址
https://github.com/MyButifullyLife/vue-x6-flow-3.0

有以下功能内容：
1、拖拽布局
2、右键菜单
3、保存

4、缩放
5、多选
6、快捷键 cv  cx  cz（重做）
7、连线判断
8、配置属性
9、动态节点流向动画
其余功能可在antv-x6文档自行添加

## 文档地址  
https://x6.antv.vision/zh/docs/api/graph/graph

## 本项目效果图
![image](https://user-images.githubusercontent.com/16436933/149902393-4a9fd58f-eadd-4a5f-af71-81076d0364d0.png)

## 流向动画
![GIF 2022-1-18 16-51-01](https://user-images.githubusercontent.com/16436933/149902899-b630b119-c39f-45e9-b576-da8d571386be.gif)

## 树状图 现成源码
![1679362448522](https://user-images.githubusercontent.com/16436933/226499607-5ad1b21d-79c5-45d1-9d31-b59841889eaa.jpg)

![企业微信截图_d2f74ba5-4202-43eb-90e8-9f95bfc3ff2f](https://user-images.githubusercontent.com/16436933/226512037-53dcc958-6112-402d-92b8-cf530b2f531d.png)


## x6 对于流程图 dag图 思维导图均可实现
![image](https://user-images.githubusercontent.com/16436933/153532050-5bd5372b-e3a0-43dd-8407-9f0a05b7f59a.png)


## 如果文章对你有帮助，那么5块、10块也是爱
![image](https://user-images.githubusercontent.com/16436933/153533288-32647686-344f-4933-a692-5f4451fe24f6.png)


## 有疑问可加QQ
冠希：微信转账30可以让你少掉、少白几根头发永远跟我一样帅
QQ：251275985  wx：gjh251275985


## antv在vue使用所需要的依赖
···

    "@antv/x6": "^1.29.5"
    
    "@antv/x6-vue-shape": "^1.3.0"
    
    "@vue/composition-api": "^1.4.3"
    
    
    
    vue.config.js 配置
    runtimeCompiler: true
   
    
···

## Project setup
```
因为项目是由最新vue-cli创建，运行环境必须要有 yarn
本地环境没有yarn 可以通过 npm install yarn 下载

yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint

```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).