Knowledge graphPro
Entities and relations laid out once, deterministically, then still, with search and focus.
On this page
ProCompanies, people and products from filings. Search, or focus an entity.
Installation
Usage
import { KnowledgeGraph } from "@/components/ui/chatcn/pro/knowledge-graph"
<KnowledgeGraph entities={entities} relations={relations} />The layout runs a seeded force simulation to rest before the first paint, so the same graph always lands the same way and nothing drifts while you read. Search lights matches and their neighbors. Focusing an entity dims the rest and lists its relations as text, where each related entity is a link to focus next.
Examples
States
ProFocused on one entity, and a small graph.
Props
| Prop | Type | Notes |
|---|---|---|
entities | { id, label, type }[] | Nodes |
relations | { from, to, label }[] | Edges |
seed | number | Same seed, same layout |
focusId, onFocusChange | string | null | Controlled focus |
height | number | Default 420 |
Accessibility
- Every entity is a button; the relations panel is a polite live region and the keyboard path through the graph.
- Search has a label for assistive tech.