diff --git a/README.md b/README.md index a0d320d5..4c5d832b 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,42 @@ # Vue Flow ๐ŸŒŠ -[![vue flow](package/src/assets/vue-flow.gif)](https://vueflow.dev/) +[![Vue flow](vue-flow.gif)](https://vueflow.dev/) ![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow) ![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow) ![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow) -### __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! -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). +## 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 - ๐Ÿ‘ถ __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 @@ -45,15 +63,15 @@ $ yarn add @braks/vue-flow ## ๐ŸŽฎ Quickstart -A flow consists of __nodes__ and __edges__ (or just nodes). Together we call them -__elements__. +A flow consists of __nodes__ and __edges__ (or just nodes). +Together they are called __elements__. __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). -A simple setup could look like this: +A basic setup looks like this: ```vue @@ -84,11 +102,10 @@ const elements = ref([ ``` -### __Make sure to import the necessary styles:__ + +โš ๏ธ __Make sure to import the necessary styles:__ ```css -/* main.css */ - /* import the required styles */ @import "@braks/vue-flow/dist/style.css"; @@ -96,9 +113,12 @@ const elements = ref([ @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 @@ -110,19 +130,24 @@ $ yarn dev $ 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. -[![Stargazers repo roster for @braks/vue-flow](https://reporoster.com/stars/bcakmakoglu/vue-flow)](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 This project is built with - [React Flow](https://reactflow.dev/) - - Vue flow is heavily based on [webkid's](https://webkid.io/) [react flow](https://reactflow.dev/). I wholeheartedly thank - them for their amazing work! Without them this vue flow would not exist. + - 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, Vue Flow would not exist. Please consider [donating](https://github.com/sponsors/wbkd) to them! - [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! - [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! + +[![Stargazers for @braks/vue-flow](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)