From ec66f90cb08efc74ac3d849ce47e62b0c129692a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 5 Nov 2023 10:51:41 +0100
Subject: [PATCH] docs(guide): update getting-started page

---
 docs/src/guide/getting-started.md | 84 ++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index a766042d..b7b3dc09 100644
--- a/docs/src/guide/getting-started.md
+++ b/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/)
-- [Vue 3](https://vuejs.org/)
+Before you begin, ensure you have the following installed on your machine:
+
+- [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,53 +24,62 @@ pnpm i @vue-flow/core
 
 ## Usage
 
-A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
-and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge).
-Together we call them
+In Vue Flow, an application structure consists
+of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
+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>
-A node also needs a [xy-position](/typedocs/interfaces/XYPosition). An edge needs at least a
-source (node id) and a target (node id).
+Below is a basic example:
 
 ```vue
+
 <script setup>
-import { VueFlow  } from '@vue-flow/core'
+  import {VueFlow} from '@vue-flow/core'
 
-const elements = ref([
-  // Nodes
-  // An input node, specified by using `type: 'input'`
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  const elements = ref([
+    // Nodes
+    // An input node, specified by using `type: 'input'`
+    {id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
 
-  // Default nodes, you can omit `type: 'default'`
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+    // Default nodes, you can omit `type: 'default'`
+    {id: '2', label: 'Node 2', position: {x: 100, y: 100},},
+    {id: '3', label: 'Node 3', position: {x: 400, y: 100}},
 
-  // An output node, specified by using `type: 'output'`
-  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
+    // An output node, specified by using `type: 'output'`
+    {id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
 
-  // Edges
-  // Most basic edge, only consists of an id, source-id and target-id
-  { id: 'e1-3', source: '1', target: '3' },
+    // Edges
+    // Most basic edge, only consists of an id, source-id and target-id
+    {id: 'e1-3', source: '1', target: '3'},
 
-  // An animated edge
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-])
+    // An animated edge
+    {id: 'e1-2', source: '1', target: '2', animated: true},
+  ])
 </script>
+
 <template>
-  <VueFlow v-model="elements" />
+  <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
-Make sure you include the necessary styles.
-See the [Theming](/guide/theming) section for more info.
-:::
+::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
+styles. Refer to the [Theming](/guide/theming) section for additional information. :::
 
 ## 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
-avoid common mistakes.
-The types are included in the library.
+As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer
+experience and prevention of common errors.
+The necessary type definitions are included with the library.
 
-[You can find the TypeDocs here](/typedocs/).
+For more information, review our [TypeDocs documentation](/typedocs).