From 091ed3eeb41127e1364756e21758e969f439cdab Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 17 Nov 2021 17:10:47 +0100
Subject: [PATCH] update(docs): quickstart example in README.md

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 README.md | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 14a26bf4..a56452d2 100644
--- a/README.md
+++ b/README.md
@@ -49,16 +49,20 @@ $ yarn add @braks/vue-flow
 
 ## 🎮 Quickstart
 
+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:
+
 ```vue
+<!-- Flowchart.vue -->
 <template>
   <VueFlow :elements="elements"></VueFlow>
 </template>
 <script lang="ts" setup>
 import { VueFlow, Elements, Position } from '@braks/vue-flow'
 
-// import the default theme (optional)
-import 'node_modules/@braks/vue-flow/dist/theme-default.css'
-
 const elements = ref<Elements>([
   {
     id: '1',
@@ -86,6 +90,17 @@ const elements = ref<Elements>([
 </script>
 ```
 
+**Make sure to import the necessary styles:**
+```css
+/* main.css */
+
+/* import the required styles */
+@import "node_modules/@braks/vue-flow/dist/styles.css";
+
+/* import the default theme (optional) */
+@import "node_modules/@braks/vue-flow/dist/theme-default.css";
+```
+
 ### ▸ Vue 2
 
 **_This library doesn't work with Vue2._**