# sibangi15/corollary-algorithmvisualizer architecture

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

- Interactive diagram: https://gitdiagram.com/sibangi15/corollary-algorithmvisualizer
- Repository: https://github.com/sibangi15/corollary-algorithmvisualizer

## Overview

Corollary is an interactive algorithm visualizer. Users choose a sorting, searching, or graph algorithm, configure input, run or scrub its generated steps, and inspect synchronized visuals, pseudocode, and complexity. The visualizer also displays recent runs; the control panel records run metadata through the API, which stores and retrieves session history. The graph reflects the documented capabilities and sampled call paths; some rendering and algorithm internals were not sampled, so uncertain links are omitted.

Main entry points: [`client/src/pages/Visualizer.jsx`](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/pages/Visualizer.jsx) (Visualizer Page), [`client/src/components/controls/ControlPanel.jsx`](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/controls/ControlPanel.jsx) (Controls), [`server/index.js`](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/index.js) (Express API), [`client/src/App.jsx`](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/App.jsx) (React App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application UI"]
  node_app["React App<br/>[App.jsx]"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_visualizer["Visualizer Page<br/>[Visualizer.jsx]"]
  node_controls["Controls<br/>[ControlPanel.jsx]"]
end

subgraph group_algorithms["Algorithm Modes"]
  node_sort["Sorting"]
  node_search["Searching"]
  node_graphalg["Graph Search"]
  node_complexity["Complexity Data<br/>[complexity.js]"]
end

subgraph group_animation["Playback and Display"]
  node_pseudocode["Pseudocode Data<br/>[pseudocode.js]"]
  node_animationhook["Animation Engine<br/>[useAnimation.js]"]
  node_arrayview["Array Bars<br/>[ArrayBars.jsx]"]
  node_gridview["Graph Grid<br/>[Grid.jsx]"]
  node_codeview["Code Panel<br/>[CodePanel.jsx]"]
  node_gridutils["Grid Utilities<br/>[createGrid.js]"]
end

subgraph group_history["Session History"]
  node_server["Express API<br/>[index.js]"]
  node_routes["Session Routes<br/>[sessionRoutes.js]"]
  node_model["Session Model<br/>[Session.js]"]
  node_database[("MongoDB<br/>[db.js]")]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_visualizer
node_visualizer -->|"renders"| node_controls
node_visualizer -->|"renders"| node_arrayview
node_visualizer -->|"renders"| node_gridview
node_visualizer -->|"renders"| node_codeview
node_visualizer -->|"reads"| node_pseudocode
node_visualizer -->|"reads"| node_complexity
node_visualizer -->|"creates grid"| node_gridutils
node_controls -->|"runs selected"| node_sort
node_controls -->|"runs selected"| node_search
node_controls -->|"runs selected"| node_graphalg
node_controls -->|"starts playback"| node_animationhook
node_animationhook -->|"updates array state"| node_arrayview
node_animationhook -->|"updates grid state"| node_gridview
node_visualizer -->|"fetches history"| node_server
node_controls -->|"posts run"| node_server
node_server -->|"mounts routes"| node_routes
node_routes -->|"queries and saves"| node_model
node_server -->|"connects"| node_database

click node_app "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/App.jsx"
click node_home "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/pages/Home.jsx"
click node_visualizer "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/pages/Visualizer.jsx"
click node_controls "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/controls/ControlPanel.jsx"
click node_sort "https://github.com/sibangi15/corollary-algorithmvisualizer/tree/main/client/src/algorithms/sorting"
click node_search "https://github.com/sibangi15/corollary-algorithmvisualizer/tree/main/client/src/algorithms/searching"
click node_graphalg "https://github.com/sibangi15/corollary-algorithmvisualizer/tree/main/client/src/algorithms/graph"
click node_complexity "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/utils/complexity.js"
click node_pseudocode "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/utils/pseudocode.js"
click node_animationhook "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/hooks/useAnimation.js"
click node_arrayview "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/visualizer/ArrayBars.jsx"
click node_gridview "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/graphs/Grid.jsx"
click node_codeview "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/visualizer/CodePanel.jsx"
click node_gridutils "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/utils/createGrid.js"
click node_server "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/index.js"
click node_routes "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/routes/sessionRoutes.js"
click node_model "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/models/Session.js"
click node_database "https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/config/db.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_app,node_home,node_visualizer,node_controls toneBlue
class node_sort,node_search,node_graphalg,node_complexity toneAmber
class node_pseudocode,node_animationhook,node_arrayview,node_gridview,node_codeview,node_gridutils toneMint
class node_server,node_routes,node_model,node_database toneRose
class node_learner toneIndigo
```

## Components

### Application UI

- [React App](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Home Page](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/pages/Home.jsx): `client/src/pages/Home.jsx`
- [Visualizer Page](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/pages/Visualizer.jsx): `client/src/pages/Visualizer.jsx`
- [Controls](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/controls/ControlPanel.jsx): `client/src/components/controls/ControlPanel.jsx`

### Algorithm Modes

- [Sorting](https://github.com/sibangi15/corollary-algorithmvisualizer/tree/main/client/src/algorithms/sorting): `client/src/algorithms/sorting`
- [Searching](https://github.com/sibangi15/corollary-algorithmvisualizer/tree/main/client/src/algorithms/searching): `client/src/algorithms/searching`
- [Graph Search](https://github.com/sibangi15/corollary-algorithmvisualizer/tree/main/client/src/algorithms/graph): `client/src/algorithms/graph`
- [Complexity Data](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/utils/complexity.js): `client/src/utils/complexity.js`

### Playback and Display

- [Pseudocode Data](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/utils/pseudocode.js): `client/src/utils/pseudocode.js`
- [Animation Engine](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/hooks/useAnimation.js): `client/src/hooks/useAnimation.js`
- [Array Bars](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/visualizer/ArrayBars.jsx): `client/src/components/visualizer/ArrayBars.jsx`
- [Graph Grid](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/graphs/Grid.jsx): `client/src/components/graphs/Grid.jsx`
- [Code Panel](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/components/visualizer/CodePanel.jsx): `client/src/components/visualizer/CodePanel.jsx`
- [Grid Utilities](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/client/src/utils/createGrid.js): `client/src/utils/createGrid.js`

### Session History

- [Express API](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/index.js): `server/index.js`
- [Session Routes](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/routes/sessionRoutes.js): `server/routes/sessionRoutes.js`
- [Session Model](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/models/Session.js): `server/models/Session.js`
- [MongoDB](https://github.com/sibangi15/corollary-algorithmvisualizer/blob/main/server/config/db.js): `server/config/db.js`

### Other components

- **Learner**

## Connections

- Learner → React App: opens
- React App → Home Page: routes
- React App → Visualizer Page: routes
- Visualizer Page → Controls: renders
- Visualizer Page → Array Bars: renders
- Visualizer Page → Graph Grid: renders
- Visualizer Page → Code Panel: renders
- Visualizer Page → Pseudocode Data: reads
- Visualizer Page → Complexity Data: reads
- Visualizer Page → Grid Utilities: creates grid
- Controls → Sorting: runs selected
- Controls → Searching: runs selected
- Controls → Graph Search: runs selected
- Controls → Animation Engine: starts playback
- Animation Engine → Array Bars: updates array state
- Animation Engine → Graph Grid: updates grid state
- Visualizer Page → Express API: fetches history
- Controls → Express API: posts run
- Express API → Session Routes: mounts routes
- Session Routes → Session Model: queries and saves
- Express API → MongoDB: connects