Table of Contents
You can build flow diagrams or develop editors to make users able to build ones with vue2 flow. The rest is your imagination.
Demo project: https://codesandbox.io/s/vue2-flow-demo-mjdogn
- Simple Use: Designed for the dummiest user
- Easy Setup: Charts can be created with few lines of code
- Utils: Built-in zooming and panning, dragging and resizing
- Extensible: Lots of exposed slots, events and properties
To install vue2 flow, use npm i vue2-flow or yarn add vue2-flow for yarn.
Flow renders nodes and connections separately. Therefore, it expects array of nodes and connections.
The only constraint for them is that both require unique id. Even addNode method handles it, you can also use generateId method to have one.
A simple example is as follows.
<script setup>
import VFlow from "vue2-flow";
export default {
data() {
return {
nodes: [
{
id: 1,
x: 84,
y: 189,
width: 120,
height: 50,
name: "Start",
type: "input",
},
{
id: 2,
x: 782,
y: 188,
width: 120,
height: 50,
name: "End",
type: "output",
},
],
conns: [],
};
},
};
</script>
<template>
<v-flow :nodes="nodes" :conns="conns" />
</template>Definitely check documentation folder for the api and practicises.
Run npm run serve command to start dev application located at dev/serve.vue. However, it requires Vue CLI to be installed.
It mounts editor example located at examples. You can change it to whichever you want and play with them or directly import vue2 flow and start fresh one.
All contributions are welcome, there are lots of thing to do :)
Do not hesitate to create issues about bugs and ideas.
- Tests***
- Readonly mode
- Connection texts
- Shapes
- Component based nodes
- Improve connection paths
- More examples
Distributed under the MIT License. See LICENSE.txt for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent