Graph Diagram Block
Create force-directed graph diagrams for visualising entity relationships, domain models, and service dependencies. D3-powered visualisation with interactive node properties.
Graph diagrams use D3.js force simulation to create dynamic, interactive visualisations of entity relationships. Each node can contain properties with data types and constraints, making them ideal for domain models, ERD-style schemas, and service architecture documentation.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Diagram Path | Yes | Path to the .graph-diagram.json file |
| Title | No | Optional title displayed above the diagram |
Node Properties
Each node in a graph diagram can contain properties that describe its attributes.
| Property Attribute | Description |
|---|---|
| Name | Property name displayed in the node |
| Type | Data type (String, Integer, UUID, Boolean, DateTime, etc.) |
| Required | Constraint badge indicating mandatory values |
| Unique | Constraint badge indicating unique values |
| Indexed | Constraint badge indicating query optimisation |
| Default Value | Default value for optional properties |
Edge Labels and Cardinality
Example: E-Commerce Domain Model
This diagram shows core entities and relationships for an e-commerce platform. Select a node to view its properties in the right panel.
Example: Microservice Architecture
Graph diagrams work well for showing service dependencies with their configuration properties.
Interactive Features
| Feature | Description |
|---|---|
| Drag Nodes | Reposition nodes to improve layout; force simulation adjusts surrounding nodes |
| Zoom and Pan | Navigate large diagrams using mouse wheel and drag |
| Select Nodes | Double-click a node to view its properties in the side panel |
| Filter Nodes | Use the nodes list panel to search and filter by name |
| Toggle Theme | Switch between light and dark modes to match documentation |
Force Simulation
Editor Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Tab | Create a new node connected to the selected node |
| Delete/Backspace | Delete selected nodes or edges |
| Escape | Clear selection |
| Shift+Drag | Create an edge between two nodes |
| Ctrl/Cmd+Z | Undo last action |
| Ctrl/Cmd+Y | Redo action |
| Double-click | Edit node or edge label |