Graph Links Block
Create interactive navigation diagrams that link to pages, external URLs, and the home page. Build site maps, knowledge bases, and learning paths with clickable nodes.
Graph Links diagrams use D3.js force simulation to create interactive navigation structures. Unlike Graph Diagrams (which focus on entity properties), Graph Links nodes are clickable and navigate to pages, external URLs, or the home page. This makes them ideal for site maps, documentation navigation, and learning paths.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Diagram Path | Yes | Path to the .graph-links.json file |
| Title | No | Optional title displayed above the diagram |
Link Types
Each node in a Graph Links diagram can link to one of three destinations.
Example: Documentation Site Map
This diagram shows the navigation structure for this documentation site. Click any node to navigate to that page, or select a node to see its link type in the info panel.
Edge Labels
Edges in Graph Links diagrams can include labels that describe the navigation relationship.
Example: Learning Path
This diagram shows a progressive learning structure through NeoArc features. Numbered edges indicate the recommended learning sequence. Click any node to navigate to that feature page.
Example: Features Overview
This diagram shows all NeoArc features branching from the Features Overview page. Relationship labels show how features connect. Click any node to explore that feature.
Viewer Features
| Feature | Description |
|---|---|
| Link Info Panel | Select a node to see its link type and destination in the right panel |
| Navigate Button | Click the button in the info panel to follow the link |
| Visual Link Indicators | Nodes with links show enhanced hover effects and pointer cursors |
| Link Type Badges | Colour-coded badges identify home (green), page (blue), and external (amber) links |
Interactive Features
Like Graph Diagrams, Graph Links diagrams support full interactivity.
| Feature | Description |
|---|---|
| Drag Nodes | Reposition nodes to improve layout |
| Zoom and Pan | Navigate large diagrams using mouse wheel and drag |
| Filter Nodes | Use the nodes list to search by name |
| Toggle Theme | Switch between light and dark modes |
Navigation Events
When a user clicks a node in the viewer, the diagram dispatches custom events.
Use Cases
Creating Graph Links Diagrams
| Step | Action |
|---|---|
| 1 | Create a new graph links file (.graph-links.json) in the file browser |
| 2 | Add nodes representing navigation destinations |
| 3 | Set each node's link type (home, page, or external) and target |
| 4 | Connect nodes with edges, adding relationship labels where helpful |
| 5 | Adjust spacing to optimise the layout |
| 6 | Reference the diagram in your page using the Graph Links block |
Editor Keyboard Shortcuts
The Graph Links editor shares shortcuts with the Graph Diagram editor.
| 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 |
Graph Links vs Graph Diagrams
Choose the right diagram type for your purpose.
| Aspect | Graph Links | Graph Diagrams |
|---|---|---|
| Purpose | Navigation structures with clickable destinations | Entity relationships with properties |
| Node Content | Link to pages, URLs, or home | Data type and constraint information |
| Interaction | Click to navigate | Click to view properties |
| Best For | Site maps, learning paths, documentation navigation | Domain models, ERD schemas, service dependencies |