# painekillers/tree-builder architecture

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

- Interactive diagram: https://gitdiagram.com/painekillers/tree-builder
- Repository: https://github.com/painekillers/tree-builder
- Video tour (about a minute): https://gitdiagram.com/painekillers/tree-builder/video

## Overview

tree-builder is a browser-based graph/tree viewer: callers provide nodes and a root, then the viewer lays out the graph, renders it on a canvas, and offers search, theme switching, node details, and navigation controls. The graph, world, and viewer excerpts support the main runtime links; README provides no additional capability detail. The sample app demonstrates the workflow, while some viewer UI handlers and theme implementations are only partially or not sampled.

Main entry points: [`viewer/viewer.js`](https://github.com/painekillers/tree-builder/blob/main/viewer/viewer.js) (Viewer Controller), [`core/world/bridge.js`](https://github.com/painekillers/tree-builder/blob/main/core/world/bridge.js) (Layout Bridge), [`core/world/world.js`](https://github.com/painekillers/tree-builder/blob/main/core/world/world.js) (Canvas World), [`main.js`](https://github.com/painekillers/tree-builder/blob/main/main.js) (Sample App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_input["Graph Input"]
  node_sample["Sample App<br/>[main.js]"]
  node_nodes["Node Data<br/>[nodes.js]"]
end

subgraph group_engine["Graph Rendering"]
  node_graph["Graph Model<br/>[graph.js]"]
  node_bridge["Layout Bridge<br/>[bridge.js]"]
  node_world["Canvas World<br/>[world.js]"]
  node_camera["Camera<br/>[camera.js]"]
  node_objects["Render Objects<br/>[objects.js]"]
end

subgraph group_ui["Viewer Interface"]
  node_viewer["Viewer Controller<br/>[viewer.js]"]
  node_search["Fuzzy Search<br/>[search.js]"]
  node_tooltip["Tooltips<br/>[tooltip.js]"]
end

subgraph group_themes["Themes"]
  node_theme["Theme Control<br/>[theme.js]"]
  node_corethemes["Theme Definitions"]
  node_css["Theme Stylesheets"]
end

node_user(("Viewer User"))

node_user -->|"operates"| node_viewer
node_sample -->|"loads data"| node_nodes
node_sample -->|"creates viewer"| node_viewer
node_sample -->|"constructs graph"| node_graph
node_viewer -->|"accepts graph"| node_graph
node_viewer -->|"configures layout"| node_bridge
node_bridge -->|"builds layout"| node_graph
node_bridge -->|"creates render objects"| node_objects
node_bridge -->|"adds objects"| node_world
node_viewer -->|"initializes canvas"| node_world
node_viewer -->|"creates camera"| node_camera
node_world -->|"draws objects"| node_objects
node_world -->|"applies view"| node_camera
node_viewer -->|"queries index"| node_search
node_viewer -->|"initializes tooltips"| node_tooltip
node_viewer -->|"applies themes"| node_theme
node_theme -->|"loads definitions"| node_corethemes
node_theme -->|"loads stylesheets"| node_css

click node_sample "https://github.com/painekillers/tree-builder/blob/main/main.js"
click node_nodes "https://github.com/painekillers/tree-builder/blob/main/nodes.js"
click node_graph "https://github.com/painekillers/tree-builder/blob/main/core/graph.js"
click node_bridge "https://github.com/painekillers/tree-builder/blob/main/core/world/bridge.js"
click node_world "https://github.com/painekillers/tree-builder/blob/main/core/world/world.js"
click node_camera "https://github.com/painekillers/tree-builder/blob/main/core/world/camera.js"
click node_objects "https://github.com/painekillers/tree-builder/blob/main/core/world/objects.js"
click node_viewer "https://github.com/painekillers/tree-builder/blob/main/viewer/viewer.js"
click node_search "https://github.com/painekillers/tree-builder/blob/main/viewer/search.js"
click node_tooltip "https://github.com/painekillers/tree-builder/blob/main/viewer/tooltip.js"
click node_theme "https://github.com/painekillers/tree-builder/blob/main/viewer/theme.js"
click node_corethemes "https://github.com/painekillers/tree-builder/tree/main/core/themes"
click node_css "https://github.com/painekillers/tree-builder/tree/main/viewer/themes"

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_sample,node_nodes,node_user toneBlue
class node_graph,node_bridge,node_world,node_camera,node_objects toneAmber
class node_viewer,node_search,node_tooltip toneMint
class node_theme,node_corethemes,node_css toneRose
```

## Components

### Graph Input

- [Sample App](https://github.com/painekillers/tree-builder/blob/main/main.js): `main.js`
- [Node Data](https://github.com/painekillers/tree-builder/blob/main/nodes.js): `nodes.js`

### Graph Rendering

- [Graph Model](https://github.com/painekillers/tree-builder/blob/main/core/graph.js): `core/graph.js`
- [Layout Bridge](https://github.com/painekillers/tree-builder/blob/main/core/world/bridge.js): `core/world/bridge.js`
- [Canvas World](https://github.com/painekillers/tree-builder/blob/main/core/world/world.js): `core/world/world.js`
- [Camera](https://github.com/painekillers/tree-builder/blob/main/core/world/camera.js): `core/world/camera.js`
- [Render Objects](https://github.com/painekillers/tree-builder/blob/main/core/world/objects.js): `core/world/objects.js`

### Viewer Interface

- [Viewer Controller](https://github.com/painekillers/tree-builder/blob/main/viewer/viewer.js): `viewer/viewer.js`
- [Fuzzy Search](https://github.com/painekillers/tree-builder/blob/main/viewer/search.js): `viewer/search.js`
- [Tooltips](https://github.com/painekillers/tree-builder/blob/main/viewer/tooltip.js): `viewer/tooltip.js`

### Themes

- [Theme Control](https://github.com/painekillers/tree-builder/blob/main/viewer/theme.js): `viewer/theme.js`
- [Theme Definitions](https://github.com/painekillers/tree-builder/tree/main/core/themes): `core/themes`
- [Theme Stylesheets](https://github.com/painekillers/tree-builder/tree/main/viewer/themes): `viewer/themes`

### Other components

- **Viewer User**

## Connections

- Viewer User → Viewer Controller: operates (evidence: `viewer/viewer.js`)
- Sample App → Node Data: loads data (evidence: `main.js`)
- Sample App → Viewer Controller: creates viewer (evidence: `main.js`)
- Sample App → Graph Model: constructs graph (evidence: `main.js`)
- Viewer Controller → Graph Model: accepts graph (evidence: `viewer/viewer.js`)
- Viewer Controller → Layout Bridge: configures layout (evidence: `viewer/viewer.js`)
- Layout Bridge → Graph Model: builds layout (evidence: `core/world/bridge.js`)
- Layout Bridge → Render Objects: creates render objects (evidence: `core/world/bridge.js`)
- Layout Bridge → Canvas World: adds objects (evidence: `core/world/bridge.js`)
- Viewer Controller → Canvas World: initializes canvas (evidence: `viewer/viewer.js`)
- Viewer Controller → Camera: creates camera (evidence: `viewer/viewer.js`)
- Canvas World → Render Objects: draws objects (evidence: `core/world/world.js`)
- Canvas World → Camera: applies view (evidence: `core/world/world.js`)
- Viewer Controller → Fuzzy Search: queries index (evidence: `viewer/viewer.js`)
- Viewer Controller → Tooltips: initializes tooltips (evidence: `viewer/viewer.js`)
- Viewer Controller → Theme Control: applies themes (evidence: `viewer/viewer.js`)
- Theme Control → Theme Definitions: loads definitions (evidence: `viewer/theme.js`)
- Theme Control → Theme Stylesheets: loads stylesheets (evidence: `viewer/theme.js`)