Skip to content

Commit 6cd4ea6

Browse files
Add Lab data modeling page (#1388)
* new: Add Lab data modeling page * fix: Refactor formatting * chore: Align copy and formatting
1 parent cce5f05 commit 6cd4ea6

File tree

5 files changed

+127
-1
lines changed

5 files changed

+127
-1
lines changed

components/release-notes/LabReleasesClient.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function LabReleasesClient({ version }) {
6262
<li className={`my-3 ${i === 0 ? 'mt-6' : ''}`} key={i}>
6363
{itemGroup.map((entry, j) => (
6464
<span key={j}>
65-
{entry.type === "code" ? <code>{entry.value}</code> : entry.value}
65+
{entry.type === "code" ? <code>{entry.value}</code> : entry.value.replace(/\*\*/g, "")}
6666
</span>
6767
))}
6868
</li>

pages/memgraph-lab/features.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ different environments:
3636
| [Collections](/memgraph-lab/features/collections) | Organize and save queries, visualizations, and configurations for quick access. ||||
3737
| [CSV file import](/memgraph-lab/features/csv-file-import) | Easily load structured data from CSV files into Memgraph. ||||
3838
| [Custom configuration](/memgraph-lab/features/custom-configuration) | Customize Lab’s behavior and interface using a configuration file. ||||
39+
| [Data modeling](/memgraph-lab/features/data-modeling) | Create, edit, and manage visual graph schemas in Memgraph Lab. ||||
3940
| [GraphChat](/memgraph-lab/features/graphchat) | Query the Memgraph database using the English language instead of Cypher queries ||||
4041
| [Graph schema](/memgraph-lab/features/graph-schema) | Understand the structure of your graph database. ||||
4142
| [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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export default {
22
"collections": "Collections",
33
"csv-file-import": "CSV file import",
44
"custom-configuration": "Custom configuration",
5+
"data-modeling": "Data modeling",
56
"graphchat": "GraphChat",
67
"graph-schema": "Graph schema",
78
"graph-style-script": "Graph Style Script (GSS)",
Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
title: Data modeling
3+
description: Create, edit, and manage visual graph schemas in Memgraph Lab with an intuitive schema builder for data modeling.
4+
---
5+
6+
import { Callout } from 'nextra/components'
7+
import { CommunityLinks } from '/components/social-card/CommunityLinks'
8+
9+
# Data modeling
10+
11+
**Data modeling** feature in Memgraph Lab provides a versatile platform for creating, editing, and managing visual representations of your graph schemas.
12+
It's designed to allow developers and data engineers to structure complex relationships clearly and intuitively, offering flexibility in organizing and visualizing their ideas.
13+
Users can easily save, load, and revisit their models, making it simple to manage multiple projects or iterations.
14+
15+
![data-modeling](/pages/data-visualization/features/data-modeling/data-modeling.png)
16+
17+
## How it works
18+
19+
### Create elements
20+
21+
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.
22+
23+
{<h4 className="custom-header">Nodes</h4>}
24+
25+
**Create a node** <br/>
26+
Double-click on an empty space to create a new node.
27+
28+
**Drag from a handler** <br/>
29+
When you drag from a handler of an existing node into empty space, a new node is created.
30+
31+
**Quick expansion** <br/>
32+
If you simply click a handler, a new node will appear automatically in one of the four directions.
33+
34+
**Preview mode** <br/>
35+
Press `n` (or use the toolbox) to see where the next node will appear before creating it.
36+
37+
{<h4 className="custom-header">Edges</h4>}
38+
39+
**Create an edge** <br/>
40+
Drag from a handler of one node to an existing node to connect them with an edge.
41+
42+
**Automatic edges** <br/>
43+
Every time you create a new node from an existing one, an edge is automatically generated. This makes schema expansion fast and seamless.
44+
45+
This enables the rapid construction of both simple and complex schemas directly on the canvas.
46+
47+
### Edit elements
48+
49+
Once created, nodes and edges can be styled and adjusted to better reflect the structure of your data.
50+
Editing can be done directly on the canvas, through the toolbox, or via the sidebar for more detailed control.
51+
52+
{<h4 className="custom-header">Nodes</h4>}
53+
54+
**Toolbox options** <br/>
55+
When you select a node, the toolbox appears with options to delete it or change its color and size.
56+
57+
**Sidebar editing** <br/>
58+
The node sidebar provides more detailed editing, including labels and properties.
59+
60+
**Inline labels** <br/>
61+
Labels on the canvas can also be edited directly.
62+
63+
{<h4 className="custom-header">Edges</h4>}
64+
65+
**Toolbox options** <br/>
66+
When you select an edge, the toolbox allows you to delete it or change its direction.
67+
68+
**Sidebar editing** <br/>
69+
The edge sidebar lets you edit the edge label and properties.
70+
71+
**Inline labels** <br/>
72+
Edge labels on the canvas can also be edited directly.
73+
74+
This flexibility allows you to quickly adjust both the **visual style** and the **semantic information** of your model without leaving the canvas.
75+
76+
### Shortcuts
77+
78+
| Shortcut | Action |
79+
| ------------ | --------------------------- |
80+
| **N** | Enter node preview mode |
81+
| **Delete** | Delete selected node/edge |
82+
| **Ctrl + Z** | Undo last action |
83+
| **Ctrl + Y** | Redo the last undone action |
84+
85+
## Manage data models
86+
87+
All models created using the data modeling can be accessed and managed from the **Saved models** tab.
88+
This view provides a table that lists all previously stored models along with their key information:
89+
90+
- **Name**: The model name defined when it was created.
91+
- **State**: Shows whether the model is valid or invalid.
92+
- **Last modified**: The date and time when the model was last updated.
93+
- **Actions**: Each entry includes the following actions:
94+
- **Edit:** Opens the model in edit mode.
95+
- **Delete**: Permanently removes the model from the list.
96+
97+
This centralized overview makes it easy to keep track of multiple models, quickly jump back into editing, or clean up unused models.
98+
A search option is also available, allowing you to filter models by name.
99+
100+
## Import and export models
101+
102+
### Export model
103+
104+
Models can be exported only if they are in a **valid** state.
105+
106+
The export option is available from the menu next to the editor. Three formats are supported: **SVG**, **PNG**, and **JSON**.
107+
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.
108+
109+
### Import from JSON
110+
111+
Currently, only JSON files exported from the application can be imported back.
112+
These files include both the model data definition and metadata required to restore the original layout and styles.
113+
Importing a JSON file always creates a new model, populated with the information contained in the file.
114+
115+
### Import from the current graph schema
116+
117+
Models can also be created directly from the current graph schema.
118+
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.
119+
120+
<Callout type="warning">
121+
Importing from a very large graph (>1k nodes) is not recommended, as it can significantly slow down the application.
122+
</Callout>
123+
124+
<CommunityLinks/>
136 KB
Loading

0 commit comments

Comments
 (0)