NODE GRAPH

SVG node-edge graph for visualizing networks, pipelines, and system topologies. Supports directed arrowheads, animated marching-ants edges, per-node status colors, and hover highlights.

PREVIEW

SHIP SUBSYSTEM NETWORK

INSTALLATION

BASH

npx shadcn@latest add @scificn/node-graph

USAGE

TSX

import { NodeGraph, type NodeGraphNode, type NodeGraphEdge } from '@/ui/node-graph'

// Node coordinates are 0–100 in both x and y
const nodes: NodeGraphNode[] = [
  { id: 'a', label: 'ALPHA',  x: 20, y: 50, status: 'ACTIVE' },
  { id: 'b', label: 'BETA',   x: 80, y: 50, status: 'WARNING', sublabel: 'check req' },
]

const edges: NodeGraphEdge[] = [
  { from: 'a', to: 'b', animated: true, label: 'DATA' },
]

<NodeGraph
  nodes={nodes}
  edges={edges}
  directed
  title="DATA PIPELINE"
  height={280}
/>

DIRECTED + ANIMATED

DATA PIPELINE // DIRECTED + ANIMATED EDGES

VARIANTS

variant="ACTIVE"

variant="WARNING"

variant="CRITICAL"

variant="DEFAULT"

NODE STATUS COLORS

NODE STATUS STATES

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
nodes	NodeGraphNode[]	—	Array of nodes. x/y are 0–100 coordinate space.
edges	NodeGraphEdge[]	—	Array of from/to edge connections.
variant	DEFAULT \| ACTIVE \| WARNING \| CRITICAL	ACTIVE	Controls default edge and fallback node color.
title	string	undefined	Optional header label.
height	number	320	SVG height in px.
directed	boolean	false	Show arrowheads on edges.
className	string	—	Additional classes merged via cn().