https://github.com/MyButifullyLife/vue-x6-flow

vue版流程图简易编辑器、简单易上手
https://github.com/MyButifullyLife/vue-x6-flow

antv antv-x6 dag flow vue vue-flow-edit

Last synced: 28 days ago
JSON representation

vue版流程图简易编辑器、简单易上手

• Host: GitHub
• URL: https://github.com/MyButifullyLife/vue-x6-flow
• Owner: MyButifullyLife
• Created: 2022-01-14T09:40:26.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-05-16T09:13:00.000Z (11 months ago)
• Last Synced: 2024-10-28T17:39:24.075Z (6 months ago)
• Topics: antv, antv-x6, dag, flow, vue, vue-flow-edit
• Language: Vue
• Homepage:
• Size: 680 KB
• Stars: 139
• Watchers: 1
• Forks: 32
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-x6 - vue-x6-flow - vue版流程图简易编辑器、简单易上手 (Frameworks / Vue Component)

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/).