Schema & Graph Visualization
Relevant source files
The following files were used as context for generating this wiki page:
Schema & Graph Visualization in Infrahub represents the underlying graph-based infrastructure data management platform. It provides a visual interface for users to interact with the Neo4j database structure, encompassing nodes, attributes, and relationships. The system uses a schema-driven approach where every piece of data must adhere to definitions before existing in the database. Sources: AGENTS.md:3-5, dev/constitution.md:23-26
The visualization layer integrates with the backend's temporal branching model, allowing users to view infrastructure state across different branches and points in time. The frontend utilizes specialized packages, such as the infrahub-schema-visualizer submodule, to render these complex relationships. Sources: AGENTS.md:120-121, backend/AGENTS.md:58-62
Core Visualization Architecture
Infrahub visualizes the infrastructure through a combination of frontend React components and backend graph definitions. The backend stores data in Neo4j using specific vertex types, while the frontend consumes these via GraphQL and REST APIs to generate visual representations. Sources: backend/AGENTS.md:5-15, frontend/app/AGENTS.md:5-10
The diagram shows the data flow from initial YAML schema definitions through the Neo4j database to the final visual representation in the React frontend. Sources: backend/AGENTS.md:5-15, specs/2026-05-schema-doc-migration.md:148-152
Database Vertex Types
The visualization layer represents the following Neo4j vertex types:
- Root: The base of the graph structure.
- Branch: Represents isolated environments for changes.
- Node: Standard infrastructure objects.
- Relationship: Connections between infrastructure objects.
- Attribute: Properties belonging to nodes or relationships.
- AttributeValue: The specific data stored within an attribute.
Sources: backend/AGENTS.md:58-62
Schema Building Blocks
Visualization is structured around four primary conceptual categories: About Schema, Schema Operations, Advanced Features, and Display & Presentation. Sources: specs/2026-05-schema-doc-migration.md:38-42
Nodes and Attributes
Nodes are the fundamental objects in the graph, such as devices or organizations. Attributes define the data fields within these nodes, including uniqueness constraints and human-friendly identifiers (hfid). Sources: specs/2026-05-schema-doc-migration.md:83-88
Relationships and Generics
Relationships define how nodes connect, specifying direction (from/to) and cardinality. Generics allow for inheritance patterns where nodes can inherit properties from abstract types. Sources: specs/2026-05-schema-doc-migration.md:89-94, dev/constitution.md:23-26
The class diagram illustrates the inheritance relationship between Generics and Nodes, and the connection mapping via Relationships. Sources: specs/2026-05-schema-doc-migration.md:89-94
Display and Presentation Logic
Visualization behavior is controlled by specific schema parameters that dictate how fields appear in the UI.
Key Presentation Features
| Feature | Description | Source |
|---|---|---|
| Field Visibility | Controls which attributes are shown or hidden in the UI. | specs/2026-05-schema-doc-migration.md:104 |
| Display Label | Defines the human-readable text used to identify a node in the graph. | specs/2026-05-schema-doc-migration.md:105 |
| Order Weight | Determines the sorting order of attributes and nodes in lists and visual menus. | specs/2026-05-schema-doc-migration.md:106 |
| Menu Placement | Customizes where a node type appears in the navigation sidebar. | specs/2026-05-schema-doc-migration.md:126-128 |
Human-Friendly Identifiers (HFID)
The system derives HFIDs to provide readable labels for graph nodes instead of relying on internal UUIDs. Visualization components use these HFIDs for node labels and navigation paths. Sources: specs/2026-05-schema-doc-migration.md:83-88, backend/AGENTS.md:106
Implementation Components
The visualization is implemented through several specialized frontend packages and backend protocols.
- Schema Viewer: A React component (
schema-viewer.tsx) that renders the current schema state. Sources: frontend/app/src/entities/schema/ui/schema-viewer.tsx - Graph Package: The core graph rendering logic (
frontend/packages/graph/src/index.ts). Sources: frontend/packages/graph/src/index.ts - Submodules: The
infrahub-schema-visualizerpackage provides advanced visualization capabilities. Sources: AGENTS.md:120-121
This sequence diagram shows how the UI requests schema data for a specific branch and renders the result. Sources: frontend/app/AGENTS.md:5-10, backend/AGENTS.md:63-66
Summary
Schema & Graph Visualization serves as the primary interface for exploring the Infrahub infrastructure graph. By enforcing schema integrity and utilizing a multi-layered visualization architecture, the system ensures that infrastructure data is presented accurately across all temporal branches. The combination of Neo4j vertex types and frontend visualizer submodules enables complex representations of nodes, attributes, and their multifaceted relationships. Sources: dev/constitution.md:23-28, specs/2026-05-schema-doc-migration.md:8-13