Getting Started with Graph Diagrams

Graph diagrams use D3.js force-directed layouts to visualise relationships between entities. Create ERD-style diagrams with typed properties and constraints for data models, API resources, and domain models. In graph-db mode, graph diagrams also serve as the editing canvas for the project model (model.neoarc), which drives derived views and per-property projections.

What Are Graph Diagrams?

Graph diagrams are standalone diagram files (.graph-diagram.json) for visualising entity relationships. In graph-db mode, they can also serve as the project model (model.neoarc) that drives derived views across the workspace:

Use Cases

Example: Insurance Domain Model

This graph diagram shows a domain model for an insurance business. Each entity includes typed properties with required fields and constraints. Edges describe the domain relationships between policyholders, policies, claims, and payments.

Creating a Graph Diagram

Adding Nodes

Creating Edges

Authoring Modes

Graph diagrams support three authoring modes for different stages of design:

Keyboard Shortcuts

Graph diagrams support extensive keyboard shortcuts for efficient editing:

Diagram Properties

Each graph diagram has:

Theme Support

Graph diagrams render in both light and dark themes:

Next Steps