# Entity Relationship Graph

Entity Relationship Graph [#entity-relationship-graph]

The **Entity Relationship Graph** is an interactive force-directed graph of typed nodes and relationship-labeled edges, supporting drag, zoom, pan, hover, click, and SVG/PNG export. The layout runs entirely client-side over local data using a lightweight in-component force simulation (no `d3-force` or other heavy dependency).

**When to use it:** visualizing VectorDB entity relationships, agent-memory connections, embedding clusters, or `useExtractEntities` (NER) co-occurrences — all from local data, with no network calls.

Preview [#preview]

```tsx
'use client';

import { EntityRelationshipGraph } from '@/components/entity-relationship-graph';

const NODES = [
  { id: 'ada', label: 'Ada Lovelace', type: 'PER', weight: 3 },
  { id: 'babbage', label: 'Charles Babbage', type: 'PER', weight: 2 },
  { id: 'engine', label: 'Analytical Engine', type: 'MISC', weight: 2 },
  { id: 'london', label: 'London', type: 'LOC' },
  { id: 'society', label: 'Royal Society', type: 'ORG' },
];

const EDGES = [
  { source: 'ada', target: 'babbage', label: 'collaborated' },
  { source: 'babbage', target: 'engine', label: 'designed' },
  { source: 'ada', target: 'engine', label: 'wrote notes on' },
  { source: 'babbage', target: 'society', label: 'member of' },
  { source: 'ada', target: 'london', label: 'lived in' },
];

/**
 * Demo for the EntityRelationshipGraph component, used by the docs live preview.
 * Renders a force-directed graph of sample NER co-occurrences — drag nodes,
 * scroll to zoom, drag the background to pan, export SVG/PNG. Fully local, no
 * network.
 */
export default function EntityRelationshipGraphDemo() {
  return <EntityRelationshipGraph nodes={NODES} edges={EDGES} />;
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/results/entity-relationship-graph
```

Dependencies [#dependencies]

* **Data source:** renders the `nodes` / `edges` arrays you pass — works with any backend. Recommended producer: `useExtractEntities` (NER co-occurrences) from `@localmode/react` (optional). See [Bring your own data](/docs/bring-your-own-data#results--insights).

* `clsx` + `tailwind-merge` — via the shared `cn()` util

Files installed [#files-installed]

* `entity-relationship-graph.tsx` — the component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**EntityRelationshipGraph**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `nodes` | `array` | — | **Required.** The typed nodes. |
| `edges` | `array` | — | **Required.** The labeled edges. |
| `registry` | `NodeTypeRegistry` | `the built-in PER/LOC/ORG/MISC registry` | Per-type node colors. Types absent from the registry use a default color. |
| `height` | `number` | `420` | Canvas height in pixels. |
| `onNodeClick` | `function` | — | Invoked when a node is clicked. |
| `showExport` | `boolean` | `true` | Whether to render the SVG/PNG export toolbar. |

Examples [#examples]

From NER co-occurrences [#from-ner-co-occurrences]

```tsx
import { EntityRelationshipGraph } from '@/components/entity-relationship-graph';

export function Example() {
  const nodes = [
    { id: 'ada', label: 'Ada Lovelace', type: 'PER' },
    { id: 'london', label: 'London', type: 'LOC' },
  ];
  const edges = [{ source: 'ada', target: 'london', label: 'lived in' }];
  return <EntityRelationshipGraph nodes={nodes} edges={edges} onNodeClick={(n) => console.log(n)} />;
}
```

Customization [#customization]

Node colors come from a per-type registry (defaults wired to CSS variables); pass your own `registry` to recolor. The force simulation (`layoutGraph`, exported) is a compact repulsion + edge-spring + center-gravity loop — tune the constants in the copied file for tighter or looser layouts. SVG and PNG export serialize the live SVG entirely in-browser; no network or third-party service is involved.