docs(guide): update getting-started page

docs/src/guide/getting-started.md

@@ -1,12 +1,19 @@
-# Getting Started
+# Getting Started with Vue Flow
+
+This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and
+utilize it within your own projects.
 
 ## Prerequisites
 
-- [Node.js v14+](https://nodejs.org/)
+Before you begin, ensure you have the following installed on your machine:
-- [Vue 3](https://vuejs.org/)
+
+- [Node.js v14 or above](https://nodejs.org/)
+- [Vue 3.0 or above](https://vuejs.org/)
 
 ## Installation
 
+Install Vue Flow using any of the following package managers:
+
 ```bash
 npm i --save @vue-flow/core
 
@@ -17,16 +24,18 @@ pnpm i @vue-flow/core
 
 ## Usage
 
-A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
+In Vue Flow, an application structure consists
-and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge).
+of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
-Together we call them
+and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge), all of which are categorised as
 [<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements).
+<span class="font-bold text-blue-500">Each element requires a unique id.</span>
+Nodes additionally need a specific position, while edges require a source and a
+target, both represented by node ids.
 
-<span class="font-bold text-blue-500">Each element needs a unique id.</span>
+Below is a basic example:
-A node also needs a [xy-position](/typedocs/interfaces/XYPosition). An edge needs at least a
-source (node id) and a target (node id).
 
 ```vue
+
 <script setup>
   import {VueFlow} from '@vue-flow/core'
 
@@ -50,20 +59,27 @@ const elements = ref([
     {id: 'e1-2', source: '1', target: '2', animated: true},
   ])
 </script>
+
 <template>
   <VueFlow v-model="elements"/>
 </template>
+
+<style>
+  /* import the necessary styles for Vue Flow to work */
+  @import '@vue-flow/core/dist/style.css';
+  
+  /* import the default theme, this is optional but generally recommended */
+  @import '@vue-flow/core/dist/theme-default.css';
+</style>
 ```
 
-::: warning Necessary styles
+::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
-Make sure you include the necessary styles.
+styles. Refer to the [Theming](/guide/theming) section for additional information. :::
-See the [Theming](/guide/theming) section for more info.
-:::
 
 ## TypeScript
 
-Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and
+As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer
-avoid common mistakes.
+experience and prevention of common errors.
-The types are included in the library.
+The necessary type definitions are included with the library.
 
-[You can find the TypeDocs here](/typedocs/).
+For more information, review our [TypeDocs documentation](/typedocs).