https://github.com/ahmetkoprulu/vue2-flow
simple and customizable vue 2 flow chart component.
https://github.com/ahmetkoprulu/vue2-flow
flowchart vue vue2
Last synced: 3 months ago
JSON representation
simple and customizable vue 2 flow chart component.
- Host: GitHub
- URL: https://github.com/ahmetkoprulu/vue2-flow
- Owner: ahmetkoprulu
- License: mit
- Created: 2022-06-09T18:03:44.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-28T17:42:58.000Z (over 1 year ago)
- Last Synced: 2025-03-26T07:11:35.315Z (4 months ago)
- Topics: flowchart, vue, vue2
- Language: Vue
- Homepage:
- Size: 858 KB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[![LinkedIn][linkedin-shield]][linkedin-url]
Vue2 Flow
simple and customizable vue 2 flow chart component.
Table of Contents
## About The Project
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
### Features
- **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
## Getting Started
To install vue2 flow, use `npm i vue2-flow` or `yarn add vue2-flow` for yarn.
### Basics
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.
```vue
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: [],
};
},
};
```
Definitely check documentation folder for the api and practicises.
### Development
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.
## Contribution
All contributions are welcome, there are lots of thing to do :)
Do not hesitate to create issues about bugs and ideas.
### To Do
- Tests\*\*\*
- Readonly mode
- Connection texts
- Shapes
- Component based nodes
- Improve connection paths
- More examples
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/ahmetkoprulu/