# reaviz/reagraph architecture

> Architecture diagram of the GitHub repository reaviz/reagraph, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/reaviz/reagraph
- Repository: https://github.com/reaviz/reagraph

## Overview

Reagraph is a React library for interactive WebGL network-graph visualization. A consumer supplies graph data to GraphCanvas; graph preparation applies visibility, layout, and sizing before the scene renders nodes and edges. Users can then navigate, select, drag, and expand or collapse the graph. The README also documents path finding, clustering, edge bundling, radial menus, themes, and customizable symbols. The sampled excerpts establish parts of graph preparation and interaction; some feature wiring is inferred only at the subsystem level from the README and tree.

Main entry points: [`src/GraphScene.tsx`](https://github.com/reaviz/reagraph/blob/master/src/GraphScene.tsx) (Graph scene), [`src/useGraph.ts`](https://github.com/reaviz/reagraph/blob/master/src/useGraph.ts) (Graph orchestration), [`src/utils`](https://github.com/reaviz/reagraph/tree/master/src/utils) (Graph utilities), [`src/GraphCanvas/GraphCanvas.tsx`](https://github.com/reaviz/reagraph/blob/master/src/GraphCanvas/GraphCanvas.tsx) (Graph canvas)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Graph entry"]
  node_canvas["Graph canvas<br/>[GraphCanvas.tsx]"]
  node_scene["Graph scene<br/>[GraphScene.tsx]"]
end

subgraph group_prepare["Graph preparation"]
  node_graphhook["Graph orchestration<br/>[useGraph.ts]"]
  node_layout["Layout strategies"]
  node_sizing["Node sizing"]
  node_collapse["Visibility and collapse"]
  node_store[("Graph state<br/>[store.ts]")]
  node_graphutils["Graph utilities"]
end

subgraph group_render["Scene rendering"]
  node_symbols["Node and edge symbols"]
  node_edgegeom["Edge geometry<br/>[useEdgeGeometry.ts]"]
  node_clusters["Clustering"]
end

subgraph group_interaction["User interaction"]
  node_selection["Selection and paths"]
  node_lasso["Lasso selection<br/>[Lasso.tsx]"]
  node_drag["Node dragging<br/>[useDrag.ts]"]
  node_camera["Camera controls"]
  node_radial["Radial menu"]
end

subgraph group_appearance["Appearance"]
  node_themes["Themes"]
end

node_consumer(("React consumer"))

node_consumer -->|"provides graph data"| node_canvas
node_canvas -->|"renders scene"| node_scene
node_scene -->|"prepares graph"| node_graphhook
node_graphhook -->|"derives visibility"| node_collapse
node_graphhook -->|"runs layout"| node_layout
node_graphhook -->|"applies sizing"| node_sizing
node_graphhook -->|"transforms graph"| node_graphutils
node_graphhook -->|"writes graph state"| node_store
node_scene -->|"reads graph state"| node_store
node_scene -->|"renders symbols"| node_symbols
node_symbols -->|"builds edge geometry"| node_edgegeom
node_edgegeom -->|"uses geometry helpers"| node_graphutils
node_scene -->|"renders clusters"| node_clusters
node_scene -->|"uses theme"| node_themes
node_scene -->|"handles selection"| node_selection
node_selection -->|"finds paths"| node_graphutils
node_scene -->|"enables lasso"| node_lasso
node_scene -->|"enables dragging"| node_drag
node_scene -->|"controls camera"| node_camera
node_scene -.->|"offers context menu"| node_radial

click node_canvas "https://github.com/reaviz/reagraph/blob/master/src/GraphCanvas/GraphCanvas.tsx"
click node_scene "https://github.com/reaviz/reagraph/blob/master/src/GraphScene.tsx"
click node_graphhook "https://github.com/reaviz/reagraph/blob/master/src/useGraph.ts"
click node_layout "https://github.com/reaviz/reagraph/tree/master/src/layout"
click node_sizing "https://github.com/reaviz/reagraph/tree/master/src/sizing"
click node_collapse "https://github.com/reaviz/reagraph/tree/master/src/collapse"
click node_store "https://github.com/reaviz/reagraph/blob/master/src/store.ts"
click node_selection "https://github.com/reaviz/reagraph/tree/master/src/selection"
click node_lasso "https://github.com/reaviz/reagraph/blob/master/src/selection/Lasso.tsx"
click node_drag "https://github.com/reaviz/reagraph/blob/master/src/utils/useDrag.ts"
click node_camera "https://github.com/reaviz/reagraph/tree/master/src/CameraControls"
click node_radial "https://github.com/reaviz/reagraph/tree/master/src/RadialMenu"
click node_symbols "https://github.com/reaviz/reagraph/tree/master/src/symbols"
click node_edgegeom "https://github.com/reaviz/reagraph/blob/master/src/symbols/edges/useEdgeGeometry.ts"
click node_clusters "https://github.com/reaviz/reagraph/tree/master/src/symbols/clusters"
click node_themes "https://github.com/reaviz/reagraph/tree/master/src/themes"
click node_graphutils "https://github.com/reaviz/reagraph/tree/master/src/utils"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_canvas,node_scene toneBlue
class node_graphhook,node_layout,node_sizing,node_collapse,node_store,node_graphutils toneAmber
class node_symbols,node_edgegeom,node_clusters toneMint
class node_selection,node_lasso,node_drag,node_camera,node_radial toneRose
class node_themes,node_consumer toneIndigo
```

## Components

### Graph entry

- [Graph canvas](https://github.com/reaviz/reagraph/blob/master/src/GraphCanvas/GraphCanvas.tsx): `src/GraphCanvas/GraphCanvas.tsx`
- [Graph scene](https://github.com/reaviz/reagraph/blob/master/src/GraphScene.tsx): `src/GraphScene.tsx`

### Graph preparation

- [Graph orchestration](https://github.com/reaviz/reagraph/blob/master/src/useGraph.ts): `src/useGraph.ts`
- [Layout strategies](https://github.com/reaviz/reagraph/tree/master/src/layout): `src/layout`
- [Node sizing](https://github.com/reaviz/reagraph/tree/master/src/sizing): `src/sizing`
- [Visibility and collapse](https://github.com/reaviz/reagraph/tree/master/src/collapse): `src/collapse`
- [Graph state](https://github.com/reaviz/reagraph/blob/master/src/store.ts): `src/store.ts`
- [Graph utilities](https://github.com/reaviz/reagraph/tree/master/src/utils): `src/utils`

### Scene rendering

- [Node and edge symbols](https://github.com/reaviz/reagraph/tree/master/src/symbols): `src/symbols`
- [Edge geometry](https://github.com/reaviz/reagraph/blob/master/src/symbols/edges/useEdgeGeometry.ts): `src/symbols/edges/useEdgeGeometry.ts`
- [Clustering](https://github.com/reaviz/reagraph/tree/master/src/symbols/clusters): `src/symbols/clusters`

### User interaction

- [Selection and paths](https://github.com/reaviz/reagraph/tree/master/src/selection): `src/selection`
- [Lasso selection](https://github.com/reaviz/reagraph/blob/master/src/selection/Lasso.tsx): `src/selection/Lasso.tsx`
- [Node dragging](https://github.com/reaviz/reagraph/blob/master/src/utils/useDrag.ts): `src/utils/useDrag.ts`
- [Camera controls](https://github.com/reaviz/reagraph/tree/master/src/CameraControls): `src/CameraControls`
- [Radial menu](https://github.com/reaviz/reagraph/tree/master/src/RadialMenu): `src/RadialMenu`

### Appearance

- [Themes](https://github.com/reaviz/reagraph/tree/master/src/themes): `src/themes`

### Other components

- **React consumer**

## Connections

- React consumer → Graph canvas: provides graph data
- Graph canvas → Graph scene: renders scene
- Graph scene → Graph orchestration: prepares graph
- Graph orchestration → Visibility and collapse: derives visibility
- Graph orchestration → Layout strategies: runs layout
- Graph orchestration → Node sizing: applies sizing
- Graph orchestration → Graph utilities: transforms graph
- Graph orchestration → Graph state: writes graph state
- Graph scene → Graph state: reads graph state
- Graph scene → Node and edge symbols: renders symbols
- Node and edge symbols → Edge geometry: builds edge geometry
- Edge geometry → Graph utilities: uses geometry helpers
- Graph scene → Clustering: renders clusters
- Graph scene → Themes: uses theme
- Graph scene → Selection and paths: handles selection
- Selection and paths → Graph utilities: finds paths
- Graph scene → Lasso selection: enables lasso
- Graph scene → Node dragging: enables dragging
- Graph scene → Camera controls: controls camera
- Graph scene → Radial menu: offers context menu