Graph

The graph component displays an interactive node graph for visualizing relationships between documents.

Usage

text

<Graph
  nodes={[
    { id: "intro", title: "introduction" },
    { id: "install", title: "installation" },
    { id: "config", title: "configuration" }
  ]}
  links={[
    { source: "intro", target: "install" },
    { source: "install", target: "config" }
  ]}
/>

Props

prop	type	default	description
nodes	`GraphNode[]`	required	Array of nodes to display
links	`GraphLink[]`	required	Array of connections between nodes
onNodeClick	`(node: GraphNode) => void`	-	Callback when a node is clicked
width	`number`	600	Canvas width
height	`number`	400	Canvas height

Types

text

interface GraphNode {
  id: string
  title: string
  group?: string
}

interface GraphLink {
  source: string
  target: string
}

Use onNodeClick to navigate to pages:

text

<Graph
  nodes={nodes}
  links={links}
  onNodeClick={(node) => {
    window.location.href = `/docs/${node.id}`
  }}
/>

The graph component displays an interactive node graph for visualizing relationships between documents.

Usage

text

<Graph
  nodes={[
    { id: "intro", title: "introduction" },
    { id: "install", title: "installation" },
    { id: "config", title: "configuration" }
  ]}
  links={[
    { source: "intro", target: "install" },
    { source: "install", target: "config" }
  ]}
/>

Props

prop	type	default	description
nodes	`GraphNode[]`	required	Array of nodes to display
links	`GraphLink[]`	required	Array of connections between nodes
onNodeClick	`(node: GraphNode) => void`	-	Callback when a node is clicked
width	`number`	600	Canvas width
height	`number`	400	Canvas height

Types

text

interface GraphNode {
  id: string
  title: string
  group?: string
}

interface GraphLink {
  source: string
  target: string
}

Use onNodeClick to navigate to pages:

text

<Graph
  nodes={nodes}
  links={links}
  onNodeClick={(node) => {
    window.location.href = `/docs/${node.id}`
  }}
/>

Graph

Usage

Props

Types

Navigation

Graph

Usage

Props

Types

Navigation