# jany-m/repo-visualizer architecture

> Architecture diagram of the GitHub repository jany-m/repo-visualizer, 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/jany-m/repo-visualizer
- Repository: https://github.com/jany-m/repo-visualizer

## Overview

Repo Visualizer has two connected product workflows: a command-line analyzer that turns Git history and per-commit imports into a history dataset, and a browser app that loads that dataset (or its bundled demo), replays graph state over time, and renders it interactively. The app also provides inspection, cluster focus, four themes, mobile controls, and video/GIF export. Analyzer detail and several UI relationships are based on the README and SOURCE INDEX; unsampled implementation links are omitted where their caller is not shown.

Main entry points: [`src/App.jsx`](https://github.com/jany-m/repo-visualizer/blob/main/src/App.jsx) (App coordinator), [`scripts/analyze.mjs`](https://github.com/jany-m/repo-visualizer/blob/main/scripts/analyze.mjs) (History analyzer), [`src/engine/layout.js`](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/layout.js) (Force layout), [`src/visualizers/useVisualizerCore.js`](https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/useVisualizerCore.js) (Canvas visualizer core)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_analysis["History analysis"]
  node_analyzer["History analyzer<br/>[analyze.mjs]"]
  node_import_parser["Import parsers<br/>[importParsers.mjs]"]
  node_import_resolver["Import resolver<br/>[importResolve.mjs]"]
  node_file_filter["File inclusion<br/>[includeFile.mjs]"]
  node_history_data["History dataset<br/>[analyze.mjs]"]
end

subgraph group_app["Application"]
  node_application["App coordinator<br/>[App.jsx]"]
  node_dataset_loader["Dataset loader<br/>[useDataset.js]"]
  node_demo_data["Bundled demo<br/>[bundledDemo.js]"]
end

subgraph group_state["Timeline and graph"]
  node_timeline["Timeline playback<br/>[useTimeline.js]"]
  node_graph_state["Incremental graph state<br/>[graphState.js]"]
  node_visibility["Time visibility<br/>[visibility.js]"]
  node_layout["Force layout<br/>[layout.js]"]
end

subgraph group_render["Visualization"]
  node_canvas_core["Canvas visualizer core"]
  node_galaxy["Galaxy theme"]
  node_webgl["WebGL renderer"]
  node_other_themes["Other themes"]
end

subgraph group_interaction["Controls and export"]
  node_inspector["File inspector<br/>[NodeInspector.jsx]"]
  node_timeline_controls["Timeline controls<br/>[ControlBar.jsx]"]
  node_legend["Cluster legend<br/>[Legend.jsx]"]
  node_export["Recording export<br/>[recorder.js]"]
end

node_repository(("Git repository"))

node_repository -->|"analyzes history"| node_analyzer
node_analyzer -->|"parses imports"| node_import_parser
node_analyzer -->|"resolves imports"| node_import_resolver
node_analyzer -->|"filters files"| node_file_filter
node_file_filter -->|"checks exclusions"| node_analyzer
node_analyzer -->|"writes dataset"| node_history_data
node_history_data -->|"loads history"| node_dataset_loader
node_dataset_loader -->|"falls back to"| node_demo_data
node_application -->|"loads dataset"| node_dataset_loader
node_application -->|"drives playback"| node_timeline
node_timeline -->|"applies commits"| node_graph_state
node_layout -->|"positions graph"| node_graph_state
node_layout -->|"filters visible items"| node_visibility
node_application -->|"selects renderer"| node_canvas_core
node_application -->|"selects renderer"| node_webgl
node_galaxy -->|"uses shared core"| node_canvas_core
node_canvas_core -->|"creates layout"| node_layout
node_canvas_core -->|"fades nodes"| node_visibility
node_webgl -->|"creates layout"| node_layout
node_webgl -->|"filters nodes"| node_visibility
node_application -->|"selects theme"| node_other_themes
node_application -->|"shows inspection"| node_inspector
node_application -->|"provides controls"| node_timeline_controls
node_application -->|"shows clusters"| node_legend
node_application -->|"starts recording"| node_export

click node_analyzer "https://github.com/jany-m/repo-visualizer/blob/main/scripts/analyze.mjs"
click node_import_parser "https://github.com/jany-m/repo-visualizer/blob/main/scripts/importParsers.mjs"
click node_import_resolver "https://github.com/jany-m/repo-visualizer/blob/main/scripts/importResolve.mjs"
click node_file_filter "https://github.com/jany-m/repo-visualizer/blob/main/scripts/includeFile.mjs"
click node_history_data "https://github.com/jany-m/repo-visualizer/blob/main/scripts/analyze.mjs"
click node_application "https://github.com/jany-m/repo-visualizer/blob/main/src/App.jsx"
click node_dataset_loader "https://github.com/jany-m/repo-visualizer/blob/main/src/engine/useDataset.js"
click node_demo_data "https://github.com/jany-m/repo-visualizer/blob/main/src/data/bundledDemo.js"
click node_timeline "https://github.com/jany-m/repo-visualizer/blob/main/src/engine/useTimeline.js"
click node_graph_state "https://github.com/jany-m/repo-visualizer/blob/main/src/engine/graphState.js"
click node_visibility "https://github.com/jany-m/repo-visualizer/blob/main/src/engine/visibility.js"
click node_layout "https://github.com/jany-m/repo-visualizer/blob/main/src/engine/layout.js"
click node_canvas_core "https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/useVisualizerCore.js"
click node_galaxy "https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/GalaxyVisualizer.jsx"
click node_webgl "https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/WebGLVisualizer.jsx"
click node_other_themes "https://github.com/jany-m/repo-visualizer/tree/main/src/visualizers"
click node_inspector "https://github.com/jany-m/repo-visualizer/blob/main/src/components/NodeInspector.jsx"
click node_timeline_controls "https://github.com/jany-m/repo-visualizer/blob/main/src/components/ControlBar.jsx"
click node_legend "https://github.com/jany-m/repo-visualizer/blob/main/src/components/Legend.jsx"
click node_export "https://github.com/jany-m/repo-visualizer/blob/main/src/engine/recorder.js"

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_analyzer,node_import_parser,node_import_resolver,node_file_filter,node_history_data toneBlue
class node_application,node_dataset_loader,node_demo_data toneAmber
class node_timeline,node_graph_state,node_visibility,node_layout toneMint
class node_canvas_core,node_galaxy,node_webgl,node_other_themes toneRose
class node_inspector,node_timeline_controls,node_legend,node_export,node_repository toneIndigo
```

## Components

### History analysis

- [History analyzer](https://github.com/jany-m/repo-visualizer/blob/main/scripts/analyze.mjs): `scripts/analyze.mjs`
- [Import parsers](https://github.com/jany-m/repo-visualizer/blob/main/scripts/importParsers.mjs): `scripts/importParsers.mjs`
- [Import resolver](https://github.com/jany-m/repo-visualizer/blob/main/scripts/importResolve.mjs): `scripts/importResolve.mjs`
- [File inclusion](https://github.com/jany-m/repo-visualizer/blob/main/scripts/includeFile.mjs): `scripts/includeFile.mjs`
- [History dataset](https://github.com/jany-m/repo-visualizer/blob/main/scripts/analyze.mjs): `scripts/analyze.mjs`

### Application

- [App coordinator](https://github.com/jany-m/repo-visualizer/blob/main/src/App.jsx): `src/App.jsx`
- [Dataset loader](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/useDataset.js): `src/engine/useDataset.js`
- [Bundled demo](https://github.com/jany-m/repo-visualizer/blob/main/src/data/bundledDemo.js): `src/data/bundledDemo.js`

### Timeline and graph

- [Timeline playback](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/useTimeline.js): `src/engine/useTimeline.js`
- [Incremental graph state](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/graphState.js): `src/engine/graphState.js`
- [Time visibility](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/visibility.js): `src/engine/visibility.js`
- [Force layout](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/layout.js): `src/engine/layout.js`

### Visualization

- [Canvas visualizer core](https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/useVisualizerCore.js): `src/visualizers/useVisualizerCore.js`
- [Galaxy theme](https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/GalaxyVisualizer.jsx): `src/visualizers/GalaxyVisualizer.jsx`
- [WebGL renderer](https://github.com/jany-m/repo-visualizer/blob/main/src/visualizers/WebGLVisualizer.jsx): `src/visualizers/WebGLVisualizer.jsx`
- [Other themes](https://github.com/jany-m/repo-visualizer/tree/main/src/visualizers): `src/visualizers`

### Controls and export

- [File inspector](https://github.com/jany-m/repo-visualizer/blob/main/src/components/NodeInspector.jsx): `src/components/NodeInspector.jsx`
- [Timeline controls](https://github.com/jany-m/repo-visualizer/blob/main/src/components/ControlBar.jsx): `src/components/ControlBar.jsx`
- [Cluster legend](https://github.com/jany-m/repo-visualizer/blob/main/src/components/Legend.jsx): `src/components/Legend.jsx`
- [Recording export](https://github.com/jany-m/repo-visualizer/blob/main/src/engine/recorder.js): `src/engine/recorder.js`

### Other components

- **Git repository**

## Connections

- Git repository → History analyzer: analyzes history (evidence: `README.md`)
- History analyzer → Import parsers: parses imports (evidence: `scripts/analyze.mjs`)
- History analyzer → Import resolver: resolves imports (evidence: `scripts/analyze.mjs`)
- History analyzer → File inclusion: filters files (evidence: `scripts/analyze.mjs`)
- File inclusion → History analyzer: checks exclusions (evidence: `scripts/includeFile.mjs`)
- History analyzer → History dataset: writes dataset (evidence: `README.md`)
- History dataset → Dataset loader: loads history (evidence: `src/engine/useDataset.js`)
- Dataset loader → Bundled demo: falls back to (evidence: `src/engine/useDataset.js`)
- App coordinator → Dataset loader: loads dataset (evidence: `src/App.jsx`)
- App coordinator → Timeline playback: drives playback (evidence: `src/App.jsx`)
- Timeline playback → Incremental graph state: applies commits (evidence: `src/engine/useTimeline.js`)
- Force layout → Incremental graph state: positions graph (evidence: `src/engine/layout.js`)
- Force layout → Time visibility: filters visible items (evidence: `src/engine/layout.js`)
- App coordinator → Canvas visualizer core: selects renderer (evidence: `src/App.jsx`)
- App coordinator → WebGL renderer: selects renderer (evidence: `src/App.jsx`)
- Galaxy theme → Canvas visualizer core: uses shared core (evidence: `src/visualizers/GalaxyVisualizer.jsx`)
- Canvas visualizer core → Force layout: creates layout (evidence: `src/visualizers/useVisualizerCore.js`)
- Canvas visualizer core → Time visibility: fades nodes (evidence: `src/visualizers/useVisualizerCore.js`)
- WebGL renderer → Force layout: creates layout (evidence: `src/visualizers/WebGLVisualizer.jsx`)
- WebGL renderer → Time visibility: filters nodes (evidence: `src/visualizers/WebGLVisualizer.jsx`)
- App coordinator → Other themes: selects theme (evidence: `src/App.jsx`)
- App coordinator → File inspector: shows inspection (evidence: `src/App.jsx`)
- App coordinator → Timeline controls: provides controls (evidence: `src/App.jsx`)
- App coordinator → Cluster legend: shows clusters (evidence: `src/App.jsx`)
- App coordinator → Recording export: starts recording (evidence: `src/App.jsx`)