diff --git a/components/release-notes/LabReleasesClient.js b/components/release-notes/LabReleasesClient.js index b0ce48511..64548f01a 100644 --- a/components/release-notes/LabReleasesClient.js +++ b/components/release-notes/LabReleasesClient.js @@ -62,7 +62,7 @@ export default function LabReleasesClient({ version }) {
  • {itemGroup.map((entry, j) => ( - {entry.type === "code" ? {entry.value} : entry.value} + {entry.type === "code" ? {entry.value} : entry.value.replace(/\*\*/g, "")} ))}
    • diff --git a/pages/memgraph-lab/features.mdx b/pages/memgraph-lab/features.mdx index 9904dabff..87bb50fce 100644 --- a/pages/memgraph-lab/features.mdx +++ b/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. | ✅ | ✅ | ✅ | diff --git a/pages/memgraph-lab/features/_meta.ts b/pages/memgraph-lab/features/_meta.ts index 2e424e726..f378fa924 100644 --- a/pages/memgraph-lab/features/_meta.ts +++ b/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)", diff --git a/pages/memgraph-lab/features/data-modeling.mdx b/pages/memgraph-lab/features/data-modeling.mdx new file mode 100644 index 000000000..d59c774ab --- /dev/null +++ b/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. + +{

    Nodes

    } + +**Create a node**
    +Double-click on an empty space to create a new node. + +**Drag from a handler**
    +When you drag from a handler of an existing node into empty space, a new node is created. + +**Quick expansion**
    +If you simply click a handler, a new node will appear automatically in one of the four directions. + +**Preview mode**
    +Press `n` (or use the toolbox) to see where the next node will appear before creating it. + +{

    Edges

    } + +**Create an edge**
    +Drag from a handler of one node to an existing node to connect them with an edge. + +**Automatic edges**
    +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. + +{

    Nodes

    } + +**Toolbox options**
    +When you select a node, the toolbox appears with options to delete it or change its color and size. + +**Sidebar editing**
    +The node sidebar provides more detailed editing, including labels and properties. + +**Inline labels**
    +Labels on the canvas can also be edited directly. + +{

    Edges

    } + +**Toolbox options**
    +When you select an edge, the toolbox allows you to delete it or change its direction. + +**Sidebar editing**
    +The edge sidebar lets you edit the edge label and properties. + +**Inline labels**
    +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. + + +Importing from a very large graph (>1k nodes) is not recommended, as it can significantly slow down the application. + + + \ No newline at end of file diff --git a/public/pages/data-visualization/features/data-modeling/data-modeling.png b/public/pages/data-visualization/features/data-modeling/data-modeling.png new file mode 100644 index 000000000..6dcedef26 Binary files /dev/null and b/public/pages/data-visualization/features/data-modeling/data-modeling.png differ