GraphLayout

stable

Force-directed or grid layout engine for node graphs

Graph/Storybook ↗

import { GraphLayout } from "@nodus/design-system"

Orchestrator

RAG

Tools

Output

Loading demo…

Props

Prop	Type	Default	Description
`nodes`req	`Node[]`	—	Array of graph nodes
`edges`req	`Edge[]`	—	Array of connections between nodes
`layout`	`"force" \| "dagre" \| "manual"`	"force"	Layout algorithm
`onNodeClick`	`(id: string) => void`	—	Node click handler

nodesrequired

Type Node[]Default —

Array of graph nodes

edgesrequired

Type Edge[]Default —

Array of connections between nodes

layout

Type "force" | "dagre" | "manual"Default "force"

Layout algorithm

onNodeClick

Type (id: string) => voidDefault —

Node click handler

Metadatasurface node

MobileStacks / Scroll

Graph canvas does not reflow automatically. On mobile, wrap in a fixed-height scrollable container (overflow: auto; -webkit-overflow-scrolling: touch). Consider a simplified list view as a mobile fallback.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

NodePrimitive→

Draggable graph node with status-driven styling and pulse animation

EdgePrimitive→

SVG connection line between graph nodes

AgentGraph→

Force-directed graph of agent relationships and communication

Was this helpful?