From 1fe8fd334b8ecd905ce966a673438cedef12a79d Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 29 Mar 2022 13:29:04 +0200
Subject: [PATCH] chore(docs): update README.md

---
 README.md | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 580b4a6c..f5fba39d 100644
--- a/README.md
+++ b/README.md
@@ -20,12 +20,12 @@ If you want to see how it's used with Nuxt3, check out the [docs repo](https://g
 
 ## ⭐️ Features
 
-- 👶 Easy to use: Seamless zooming & panning behaviour and single and multi-selections of
-  elements
+- 👶 Easy to use: Seamless zooming & panning behaviour and single and multi-selections of elements
 
 - 🎨 Customizable: Different and edge types and support for custom nodes with multiple handles and custom edges
 
-- 🚀 Fast rendering: Only nodes that have changed are re-rendered and only those that are in the viewport are displayed (optionally)
+- 🚀 Fast rendering: Only nodes that have changed are re-rendered and only those that are in the viewport are
+  displayed (optionally)
 
 - 🧲 Utils: Snap-to-grid and graph helper functions
 
@@ -51,9 +51,8 @@ $ yarn add @braks/vue-flow
 
 A flow consists of **nodes** and **edges** (or just nodes). Together we call them
 **elements**. You can pass a set of elements as a prop to the Flow component.
-**Each element needs a unique id.** A node needs a position and a label and an
-edge needs a source (node id) and a target (node id). These are the most basic parameters for a flow. A simple setup could
-look like this:
+**Each element needs a unique id.** A node needs a position and a label and an edge needs a source (node id) and a
+target (node id). These are the most basic parameters for a flow. A simple setup could look like this:
 
 ```vue
 <!-- Flowchart.vue -->
@@ -61,24 +60,18 @@ look like this:
   <VueFlow :elements="elements"></VueFlow>
 </template>
 <script lang="ts" setup>
-import { VueFlow, Elements, Position } from '@braks/vue-flow'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   {
     id: '1',
-    data: {
-      label: 'node 1',
-    },
+    label: 'node 1',
     position: { x: 100, y: 100 },
-    targetPosition: Position.Right
   },
   {
     id: '2',
-    data: {
-      label: 'node 2',
-    },
+    label: 'node 2',
     position: { x: 100, y: 200 },
-    sourcePosition: Position.Left
   },
   {
     id: 'e1-2',
@@ -91,6 +84,7 @@ const elements = ref<Elements>([
 ```
 
 **Make sure to import the necessary styles:**
+
 ```css
 /* main.css */
 
@@ -115,6 +109,13 @@ $ yarn dev
 $ yarn build
 ```
 
-## 💝 Credit
+## ⭐ Stargazers
 
-Thanks to [webkid](https://webkid.io/) for creating React Flow! Without their work this would've been impossible for me.
+Thanks for your star!
+
+[![Stargazers repo roster for @braks/vue-flow](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)
+
+## 💝 Acknowledgement
+
+This project is based on [webkid's](https://webkid.io/) [react flow](https://reactflow.dev/). I wholeheartedly thank
+them for their amazing work! Without them this project would've been impossible for me.