chore: update README.md
This commit is contained in:
@@ -1,24 +1,42 @@
|
|||||||
# Vue Flow 🌊
|
# Vue Flow 🌊
|
||||||
|
|
||||||
[](https://vueflow.dev/)
|
[](https://vueflow.dev/)
|
||||||

|

|
||||||

|

|
||||||

|

|
||||||

|

|
||||||
|
|
||||||
### __Vue Flow: A highly customizable Vue 3 Flowchart component.__
|
__Vue Flow: A highly customizable Vue 3 Flowchart component.__
|
||||||
|
|
||||||
With Vue Flow you can build your own, customized node-based applications like static diagrams or even more complex and
|
With Vue Flow, you can build your own, customized node-based applications like static diagrams or even more complex and
|
||||||
interactive editors!
|
interactive editors!
|
||||||
|
|
||||||
You can find a detailed explanation on how to get started in the [documentation](https://vueflow.dev/guide) or check
|
You can find a detailed explanation of how to get started in the [documentation](https://vueflow.dev/guide) or check
|
||||||
the [examples](https://vueflow.dev/examples).
|
the [examples](https://vueflow.dev/examples).
|
||||||
|
|
||||||
|
## Table of contents
|
||||||
|
|
||||||
|
* [⭐️ Features](#-features)
|
||||||
|
|
||||||
|
* [🛠 Setup](#-setup)
|
||||||
|
|
||||||
|
* [🎮 Quickstart](#-quickstart)
|
||||||
|
|
||||||
|
+ [▸ Vue 2](#-vue-2)
|
||||||
|
|
||||||
|
* [🧪 Development](#-development)
|
||||||
|
|
||||||
|
+ [🐳 Dev Container](#-dev-container)
|
||||||
|
|
||||||
|
* [⭐ Stargazers](#-stargazers)
|
||||||
|
|
||||||
|
* [💝 Special Thanks](#-special-thanks)
|
||||||
|
|
||||||
## ⭐️ Features
|
## ⭐️ Features
|
||||||
|
|
||||||
- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
|
- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
|
||||||
|
|
||||||
- 🎨 __Customizable__: Use your own custom nodes, edges, connection lines and expand on the Vue Flows functionality
|
- 🎨 __Customizable__: Use your custom nodes, edges and connection lines and expand on Vue Flows' functionality
|
||||||
|
|
||||||
- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
|
- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
|
||||||
|
|
||||||
@@ -45,15 +63,15 @@ $ yarn add @braks/vue-flow
|
|||||||
|
|
||||||
## 🎮 Quickstart
|
## 🎮 Quickstart
|
||||||
|
|
||||||
A flow consists of __nodes__ and __edges__ (or just nodes). Together we call them
|
A flow consists of __nodes__ and __edges__ (or just nodes).
|
||||||
__elements__.
|
Together they are called __elements__.
|
||||||
|
|
||||||
__Each element needs a unique id.__
|
__Each element needs a unique id.__
|
||||||
|
|
||||||
A node also needs a xy-position.
|
A node also needs an XY position.
|
||||||
An edge needs a source (node id) and a target (node id).
|
An edge needs a source (node id) and a target (node id).
|
||||||
|
|
||||||
A simple setup could look like this:
|
A basic setup looks like this:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<!-- Flowchart.vue -->
|
<!-- Flowchart.vue -->
|
||||||
@@ -84,11 +102,10 @@ const elements = ref([
|
|||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
### __Make sure to import the necessary styles:__
|
|
||||||
|
⚠️ __Make sure to import the necessary styles:__
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* main.css */
|
|
||||||
|
|
||||||
/* import the required styles */
|
/* import the required styles */
|
||||||
@import "@braks/vue-flow/dist/style.css";
|
@import "@braks/vue-flow/dist/style.css";
|
||||||
|
|
||||||
@@ -96,9 +113,12 @@ const elements = ref([
|
|||||||
@import "@braks/vue-flow/dist/theme-default.css";
|
@import "@braks/vue-flow/dist/theme-default.css";
|
||||||
```
|
```
|
||||||
|
|
||||||
### ▸ Vue 2
|
### 🪴 Vue 2
|
||||||
|
|
||||||
**_This library doesn't work with Vue2._**
|
**_This library doesn't work with Vue 2._**
|
||||||
|
|
||||||
|
Vue Flow uses features that are exclusive to Vue 3, therefore
|
||||||
|
there is no support for Vue 2, nor will there be any support in the future, sorry.
|
||||||
|
|
||||||
## 🧪 Development
|
## 🧪 Development
|
||||||
|
|
||||||
@@ -110,19 +130,24 @@ $ yarn dev
|
|||||||
$ yarn build
|
$ yarn build
|
||||||
```
|
```
|
||||||
|
|
||||||
## ⭐ Stargazers
|
### 🐳 Dev Container
|
||||||
|
|
||||||
Thanks for your star!
|
To start using development containers, install the `Docker` extension
|
||||||
|
for VSCode.
|
||||||
|
After installing the extension, open the connection menu either
|
||||||
|
on the bottom left or open it via the commands tab.
|
||||||
|
Select the `Open Folder in Container` option to mount the project.
|
||||||
|
|
||||||
[](https://github.com/bcakmakoglu/vue-flow/stargazers)
|
The development container will spin up all packages example apps and forward
|
||||||
|
the ports to your machine.
|
||||||
|
|
||||||
## 💝 Special Thanks
|
## 💝 Special Thanks
|
||||||
|
|
||||||
This project is built with
|
This project is built with
|
||||||
|
|
||||||
- [React Flow](https://reactflow.dev/)
|
- [React Flow](https://reactflow.dev/)
|
||||||
- Vue flow is heavily based on [webkid's](https://webkid.io/) [react flow](https://reactflow.dev/). I wholeheartedly thank
|
- Vue flow is heavily based on [webkids'](https://webkid.io/) [react flow](https://reactflow.dev/). I wholeheartedly thank
|
||||||
them for their amazing work! Without them this vue flow would not exist.
|
them for their amazing work! Without them, Vue Flow would not exist.
|
||||||
Please consider [donating](https://github.com/sponsors/wbkd) to them!
|
Please consider [donating](https://github.com/sponsors/wbkd) to them!
|
||||||
|
|
||||||
- [D3.js](https://d3js.org/)
|
- [D3.js](https://d3js.org/)
|
||||||
@@ -130,4 +155,11 @@ This project is built with
|
|||||||
Check it out to see if you can find other uses for it too!
|
Check it out to see if you can find other uses for it too!
|
||||||
|
|
||||||
- [VueUse](https://vueuse.org/)
|
- [VueUse](https://vueuse.org/)
|
||||||
- VueUse is a collection of helpful utilities/composables that have been battle tested.
|
- VueUse is a collection of helpful utilities/composables that have been battle-tested.
|
||||||
|
|
||||||
|
## ⭐ Stargazers
|
||||||
|
|
||||||
|
Many thanks to the kind individuals who leave a star.
|
||||||
|
Your support is much appreciated!
|
||||||
|
|
||||||
|
[](https://github.com/bcakmakoglu/vue-flow/stargazers)
|
||||||
|
|||||||
Reference in New Issue
Block a user