Add Guides/QuickStart

Guides%2FQuickStart.md

@@ -0,0 +1,60 @@
+# Image Processing Graph - Getting Started Guide
+
+Welcome to the **Image Processing Graph**! This guide will walk you through creating and using graphs within the editor.
+
+---
+
+## 1. **Creating a Graph**
+
+To create a new graph:
+
+1. **Right click in the project view**.
+2. Navigate to **Create → Image Processing Graph → New Graph**.
+3. Name the asset as desired.
+
+---
+
+## 2. **Opening a Graph**
+
+To open an existing graph:
+
+- **Double-click** the newly created asset or any pre-existing graph asset.
+- Alternatively, with a graph asset selected, click the **"Open"** button in the Inspector.
+
+---
+
+## 3. **Using the Graph**
+
+### 3.1 **Creating Nodes**
+
+To create a node:
+
+1. **Press the "Space" button** or **Right-click** → **Create Node** to open the node creation window.
+2. In the search window that opens, type the name of the node you wish to create and press **Enter** or **double-click** on the node name to add it to the graph.
+3. You can also use the **arrow keys** to navigate through the search results in the creation window.
+
+### 3.2 **Connecting Nodes**
+
+To connect nodes:
+
+1. **Click and drag** from one port to another. The ports must be of the same type.
+2. Hovering over a port will show its type, making it easier to connect compatible nodes.
+3. If you drop a connection in empty space, a **contextual search window** will open.
+4. The contextual search window will only show nodes that can connect to the port you dragged from.
+
+### 3.3 **Deleting Nodes**
+
+- To delete a node, you can **right-click** on the node and select **Delete**.
+- Alternatively, you can press the **Delete** key after selecting a node.
+
+---
+
+## Tips & Tricks
+
+- **Ports and Types**: Make sure you connect ports of the same type for proper functionality.
+- **Contextual Search**: Use the contextual search window for more dynamic and flexible node connections.
+- **Keyboard Shortcuts**: Use the **Spacebar** and **Arrow Keys** for quick navigation and node creation.
+
+---
+
+Enjoy creating and processing your images with the powerful Image Processing Graph tool!