update(docs): quickstart example in README.md

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

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._**