infrahub-schema-visualizer

An interactive graph visualization component for Infrahub schema data. Built with React Flow, it displays nodes, profiles, templates, and their relationships in a draggable, zoomable canvas.

Features

• Interactive graph visualization of schema relationships
• Automatic layout using Dagre algorithm
• Filter panel to show/hide schema types by namespace
• Node details panel showing attributes and relationships
• Context menus for nodes and edges
• Export graph as PNG image
• Zoom, pan, and fit-to-view controls
• Visual distinction between schema types (nodes, profiles, templates)
• Animated edges for "many" cardinality relationships
• Self-referencing relationship indicators
• State persistence to localStorage

Schema Types and Colors

Type	Color	Description
Node	Indigo	Core schema nodes
Profile	Pink	Profile schemas
Template	Amber	Template schemas
Generic	Emerald	Generic schemas (rendered as inheritance)

Installation

npm install @infrahub/schema-visualizer

Usage

import { SchemaVisualizer, type SchemaVisualizerData } from "@infrahub/schema-visualizer";

const schemaData: SchemaVisualizerData = {
  nodes: [...],      // Array of NodeSchema
  generics: [...],   // Array of GenericSchema
  profiles: [...],   // Array of ProfileSchema
  templates: [...],  // Array of TemplateSchema
};

function App() {
  return (
    <SchemaVisualizer
      data={schemaData}
      className="h-screen w-full"
    />
  );
}

Exports

Components

• SchemaVisualizer - Main visualization component
• SchemaNode - Custom node renderer
• FilterPanel - Schema type filtering panel
• NodeDetailsPanel - Schema details side panel
• BottomToolbar - Zoom and layout controls

Types

• SchemaVisualizerData - Input data structure
• NodeSchema, ProfileSchema, TemplateSchema, GenericSchema - Schema type definitions
• AttributeSchema, RelationshipSchema - Schema property definitions

Utilities

• schemaToFlow - Convert schema data to React Flow format
• schemaToFlowFiltered - Convert with filtering support
• applyNamespaceLayout - Apply Dagre layout grouped by namespace
• groupByNamespace - Group schemas by their namespace
• cn - Tailwind class name utility

Tech Stack

• React 19
• @xyflow/react (React Flow) - Graph visualization
• Tailwind CSS 4 - Styling
• @dagrejs/dagre - Automatic graph layout
• @iconify-icon/react - Icons
• html-to-image - PNG export

Development

# Install dependencies
npm install

# Run linter
npm run lint

# Build webview bundle (for VSCode extension)
npm run build:webview

# Type check
npx tsc --noEmit

Webview Bundle

This package includes a self-contained webview bundle for use in VSCode extensions:

// Import the pre-built bundle
import "@infrahub/schema-visualizer/webview";
import "@infrahub/schema-visualizer/webview/styles";

Credits

Initial design by @peynadol

License

Apache License 2.0