Add Lab data modeling page

components/release-notes/LabReleasesClient.js

@@ -62,7 +62,7 @@ export default function LabReleasesClient({ version }) {
                             <li className={`my-3 ${i === 0 ? 'mt-6' : ''}`} key={i}>
                                 {itemGroup.map((entry, j) => (
                                     <span key={j}>
-                                        {entry.type === "code" ? <code>{entry.value}</code> : entry.value}
+                                        {entry.type === "code" ? <code>{entry.value}</code> : entry.value.replace(/\*\*/g, "")}
                                     </span>
                                 ))}
                             </li>

pages/memgraph-lab/features.mdx

@@ -36,6 +36,7 @@ different environments:
 | [Collections](/memgraph-lab/features/collections)                                                 | Organize and save queries, visualizations, and configurations for quick access.             | ✅         | ✅                     | ✅                       |
 | [CSV file import](/memgraph-lab/features/csv-file-import)                                         | Easily load structured data from CSV files into Memgraph.                                   | ✅         | ✅                     | ✅                       |
 | [Custom configuration](/memgraph-lab/features/custom-configuration)                               | Customize Lab’s behavior and interface using a configuration file.                          | ❌         | ✅                     | ✅                       |
+| [Data modeling](/memgraph-lab/features/data-modeling)                                             | Create, edit, and manage visual graph schemas in Memgraph Lab.                              | ✅         | ✅                     | ✅                       |
 | [GraphChat](/memgraph-lab/features/graphchat)                                                     | Query the Memgraph database using the English language instead of Cypher queries            | ✅         | ✅                     | ✅                       |
 | [Graph schema](/memgraph-lab/features/graph-schema)                                               | Understand the structure of your graph database.                                            | ✅         | ✅                     | ✅                       |
 | [Graph Style Script (GSS)](/memgraph-lab/features/graph-style-script)                             | Customize the appearance of graph visualizations with reusable styling scripts.             | ✅         | ✅                     | ✅                       |

pages/memgraph-lab/features/_meta.ts

@@ -2,6 +2,7 @@ export default {
     "collections": "Collections",
     "csv-file-import": "CSV file import",
     "custom-configuration": "Custom configuration",
+    "data-modeling": "Data modeling",
     "graphchat": "GraphChat",
     "graph-schema": "Graph schema",
     "graph-style-script": "Graph Style Script (GSS)",

pages/memgraph-lab/features/data-modeling.mdx

@@ -0,0 +1,124 @@
+---
+title: Data modeling
+description: Create, edit, and manage visual graph schemas in Memgraph Lab with an intuitive schema builder for data modeling.
+---
+
+import { Callout } from 'nextra/components'
+import { CommunityLinks } from '/components/social-card/CommunityLinks'
+
+# Data modeling
+
+**Data modeling** feature in Memgraph Lab provides a versatile platform for creating, editing, and managing visual representations of your graph schemas.
+It's designed to allow developers and data engineers to structure complex relationships clearly and intuitively, offering flexibility in organizing and visualizing their ideas.
+Users can easily save, load, and revisit their models, making it simple to manage multiple projects or iterations.
+
+![data-modeling](/pages/data-visualization/features/data-modeling/data-modeling.png)
+
+## How it works
+
+### Create elements
+
+Schemas can be expanded in several intuitive ways. You can create completely new nodes on the canvas, or quickly grow your schema by connecting nodes with edges.
+
+{<h4 className="custom-header">Nodes</h4>}
+
+**Create a node** <br/>
+Double-click on an empty space to create a new node.
+
+**Drag from a handler** <br/>
+When you drag from a handler of an existing node into empty space, a new node is created.
+
+**Quick expansion** <br/>
+If you simply click a handler, a new node will appear automatically in one of the four directions.
+
+**Preview mode** <br/>
+Press `n` (or use the toolbox) to see where the next node will appear before creating it.
+
+{<h4 className="custom-header">Edges</h4>}
+
+**Create an edge** <br/>
+Drag from a handler of one node to an existing node to connect them with an edge.
+
+**Automatic edges** <br/>
+Every time you create a new node from an existing one, an edge is automatically generated. This makes schema expansion fast and seamless.
+
+This enables the rapid construction of both simple and complex schemas directly on the canvas.
+
+### Edit elements
+
+Once created, nodes and edges can be styled and adjusted to better reflect the structure of your data.
+Editing can be done directly on the canvas, through the toolbox, or via the sidebar for more detailed control.
+
+{<h4 className="custom-header">Nodes</h4>}
+
+**Toolbox options** <br/>
+When you select a node, the toolbox appears with options to delete it or change its color and size.
+
+**Sidebar editing** <br/>
+The node sidebar provides more detailed editing, including labels and properties.
+
+**Inline labels** <br/>
+Labels on the canvas can also be edited directly.
+
+{<h4 className="custom-header">Edges</h4>}
+
+**Toolbox options** <br/>
+When you select an edge, the toolbox allows you to delete it or change its direction.
+
+**Sidebar editing** <br/>
+The edge sidebar lets you edit the edge label and properties.
+
+**Inline labels** <br/>
+Edge labels on the canvas can also be edited directly.
+
+This flexibility allows you to quickly adjust both the **visual style** and the **semantic information** of your model without leaving the canvas.
+
+### Shortcuts
+
+| Shortcut     | Action                      |
+| ------------ | --------------------------- |
+| **N**        | Enter node preview mode     |
+| **Delete**   | Delete selected node/edge   |
+| **Ctrl + Z** | Undo last action            |
+| **Ctrl + Y** | Redo the last undone action |
+
+## Manage data models
+
+All models created using the data modeling can be accessed and managed from the **Saved models** tab.
+This view provides a table that lists all previously stored models along with their key information:
+
+- **Name**: The model name defined when it was created.
+- **State**: Shows whether the model is valid or invalid.
+- **Last modified**: The date and time when the model was last updated.
+- **Actions**: Each entry includes the following actions:
+    - **Edit:** Opens the model in edit mode.
+    - **Delete**: Permanently removes the model from the list.
+
+This centralized overview makes it easy to keep track of multiple models, quickly jump back into editing, or clean up unused models.
+A search option is also available, allowing you to filter models by name.
+
+## Import and export models
+
+### Export model
+
+Models can be exported only if they are in a **valid** state.
+
+The export option is available from the menu next to the editor. Three formats are supported: **SVG**, **PNG**, and **JSON**.
+While SVG and PNG provide static visual representations of the model, the JSON export contains both the model data (aligned with the `SHOW SCHEMA INFO` output) and additional metadata such as styles.
+
+### Import from JSON
+
+Currently, only JSON files exported from the application can be imported back.
+These files include both the model data definition and metadata required to restore the original layout and styles.
+Importing a JSON file always creates a new model, populated with the information contained in the file.
+
+### Import from the current graph schema
+
+Models can also be created directly from the current graph schema.
+This option is available via the **Edit schema** button in the **Graph schema** tab. Selecting it generates a new model populated with the data present in the graph schema at that moment, making it easy to start editing based on the live graph structure.
+
+<Callout type="warning">
+Importing from a very large graph (>1k nodes) is not recommended, as it can significantly slow down the application.
+</Callout>
+
+<CommunityLinks/>