Knowledge Graph

Entities and the named relations between them. Where a note graph answers what is connected, this answers how — and the edge label carries as much meaning as the nodes, so relations are labelled and directed.

src/components/ui/knowledge-graph.tsx

About

From the component's own source, where it was written.

Entities and the named relations between them.

The distinction from NoteGraph, which shares the same layout: a note graph answers *what is connected*, and every edge means the same thing — "links to". A knowledge graph answers *how* things are connected, and the edge label carries as much meaning as the nodes. "Ada — **founded** → Astralyx" and "Ada — **left** → Astralyx" are the same two circles and the same line.

So relations are labelled and **directed**, drawn with an arrowhead, because employs and employed by are not the same fact and a knowledge graph that loses direction is a set of vague associations.

Entities are drawn as labelled pills rather than circles. A knowledge graph is read entity-first — you are looking for *Astralyx*, not for a hub — and a circle with a caption underneath makes you match shapes to text. This is denser and it is why these graphs stay smaller than note vaults.

Install

npx astralyx-ui add knowledge-graph

Usage

import { KnowledgeGraph } from '@/components/ui/knowledge-graph'

<KnowledgeGraph entities={entities} relations={relations} onSelect={open} />

Composer

Change the props and the source below follows.

person
company
product
technology
standard

Props

relation labels

height

tsx

<KnowledgeGraph
  entities={entities}
  relations={relations}
  showRelationLabels={true}
  height={460}
/>

Examples

People, products and standards

tsx

<KnowledgeGraph entities={entities} relations={relations} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`KnowledgeGraph`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
entities	Entity[]	required	These graphs are read entity-first — you are looking for a name, not a hub — and a circle with a caption underneath makes you match shapes to text.
relations	Relation[]	required	{ id, label, type? } and { source, target, label? }. The relation label is the reason this exists.
onSelect	(entity: Entity) => void	—	—
selectedId	string	—	—
height	number \| string	460	—
showRelationLabels	boolean	true	Off once the graph is dense enough that the labels collide.
colorFor	(type: string) => string	—	—
emptyLabel	string	'Nothing in this graph yet.'	—
label	string	'Knowledge graph'	—
direction	arrowheads	—	`employs` and `employed by` are not the same fact. A knowledge graph that loses direction is a set of vague associations.

Types

`Entity`

Entities and the named relations between them.

Field	Type	Description
id	string	—
label	string	—
type?	string	Colours the pill and builds the legend. Any vocabulary you like.

`Relation`

Field	Type	Description
source	string	—
target	string	—
label?	string	The verb. The reason this component exists.