# itzsanket99/algorithm-visualizer architecture

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

- Interactive diagram: https://gitdiagram.com/itzsanket99/algorithm-visualizer
- Repository: https://github.com/itzsanket99/algorithm-visualizer

## Overview

AlgoTrace accepts student Java source, executes it under JDI observation, converts the resulting trace into API data, and presents it as interactive execution states and visualizations. The principal workflow is supported by the sampled engine, service, controller, and frontend excerpts. The README documents additional visualizations, including linked lists; the tree has no dedicated linked-list component, so that capability is represented at the App level. Unsampled wiring is omitted where it cannot be established.

Main entry points: [`frontend/src/App.jsx`](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/App.jsx) (Execution workspace), [`backend/src/main/java/com/algotrace/backend/execution/ExecutionService.java`](https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionService.java) (Execution service), [`execution-engine/src/main/java/com/algotrace/engine/ExecutionEngine.java`](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/ExecutionEngine.java) (Execution orchestrator), [`frontend/src/services/executionApi.js`](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/services/executionApi.js) (Execution API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Interactive frontend"]
  node_app["Execution workspace<br/>[App.jsx]"]
  node_api_client["Execution API client<br/>[executionApi.js]"]
  node_code_viewer["Code viewer<br/>[CodeViewer.jsx]"]
  node_execution_state["Execution state<br/>[ExecutionState.jsx]"]
  node_call_tree_view["Call tree view<br/>[CallTree.jsx]"]
  node_visualization_panel["Visualization panel"]
  node_array_view["Array visualizer"]
  node_stack_view["Stack visualizer"]
  node_queue_view["Queue visualizer<br/>[QueuePanel.jsx]"]
  node_playback["State playback<br/>[playback.js]"]
end

subgraph group_api["Execution API"]
  node_http_endpoint["Run endpoint"]
  node_execution_service["Execution service"]
  node_execution_payload["Execution response data<br/>[ExecutionData.java]"]
end

subgraph group_runtime["Java execution engine"]
  node_execution_engine["Execution orchestrator"]
  node_compiler["Java compiler"]
  node_debug_launcher["Debug JVM launcher<br/>[DebugLauncher.java]"]
  node_debug_session["JDI debug session<br/>[DebugSession.java]"]
  node_event_collector["Method event collector"]
end

subgraph group_trace["Trace processing"]
  node_execution_trace["Execution trace"]
  node_call_tree_builder["Call tree builder"]
  node_call_tree["Recursion call tree<br/>[CallTree.java]"]
end

node_learner(("Learner"))

node_learner -->|"enters code"| node_app
node_app -->|"submits source"| node_api_client
node_api_client -->|"posts request"| node_http_endpoint
node_http_endpoint -->|"invokes service"| node_execution_service
node_execution_service -->|"executes source"| node_execution_engine
node_execution_engine -->|"compiles source"| node_compiler
node_execution_engine -->|"launches JVM"| node_debug_launcher
node_debug_launcher -->|"creates session"| node_debug_session
node_execution_engine -->|"starts collection"| node_event_collector
node_event_collector -->|"observes events"| node_debug_session
node_event_collector -->|"builds trace"| node_execution_trace
node_execution_engine -->|"returns trace"| node_execution_trace
node_execution_service -->|"builds call tree"| node_call_tree_builder
node_call_tree_builder -->|"reads events"| node_execution_trace
node_call_tree_builder -->|"produces tree"| node_call_tree
node_execution_service -->|"assembles events and tree"| node_execution_payload
node_execution_service -->|"returns response"| node_http_endpoint
node_http_endpoint -->|"returns result"| node_api_client
node_api_client -->|"provides result"| node_app
node_app -->|"steps states"| node_playback
node_app -->|"renders source"| node_code_viewer
node_app -->|"renders state"| node_execution_state
node_app -->|"renders calls"| node_call_tree_view
node_app -->|"selects visualization"| node_visualization_panel
node_app -->|"renders arrays"| node_array_view
node_app -->|"renders stacks"| node_stack_view
node_app -->|"renders queues"| node_queue_view

click node_app "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/App.jsx"
click node_api_client "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/services/executionApi.js"
click node_code_viewer "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/CodeViewer.jsx"
click node_execution_state "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/ExecutionState.jsx"
click node_call_tree_view "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/CallTree.jsx"
click node_visualization_panel "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/VisualizationPanel.jsx"
click node_array_view "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/ArrayVisualizer.jsx"
click node_stack_view "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/StackVisualizer.jsx"
click node_queue_view "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/QueuePanel.jsx"
click node_playback "https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/utils/playback.js"
click node_http_endpoint "https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionController.java"
click node_execution_service "https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionService.java"
click node_execution_payload "https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionData.java"
click node_execution_engine "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/ExecutionEngine.java"
click node_compiler "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/compiler/JavaSourceCompiler.java"
click node_debug_launcher "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/debug/DebugLauncher.java"
click node_debug_session "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/debug/DebugSession.java"
click node_event_collector "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/debug/MethodEventCollector.java"
click node_execution_trace "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/model/ExecutionTrace.java"
click node_call_tree_builder "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/tracer/CallTreeBuilder.java"
click node_call_tree "https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/model/CallTree.java"

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_api_client,node_code_viewer,node_execution_state,node_call_tree_view,node_visualization_panel,node_array_view,node_stack_view,node_queue_view,node_playback toneBlue
class node_http_endpoint,node_execution_service,node_execution_payload toneAmber
class node_execution_engine,node_compiler,node_debug_launcher,node_debug_session,node_event_collector toneMint
class node_execution_trace,node_call_tree_builder,node_call_tree toneRose
class node_learner toneIndigo
```

## Components

### Interactive frontend

- [Execution workspace](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Execution API client](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/services/executionApi.js): `frontend/src/services/executionApi.js`
- [Code viewer](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/CodeViewer.jsx): `frontend/src/components/CodeViewer.jsx`
- [Execution state](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/ExecutionState.jsx): `frontend/src/components/ExecutionState.jsx`
- [Call tree view](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/CallTree.jsx): `frontend/src/components/CallTree.jsx`
- [Visualization panel](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/VisualizationPanel.jsx): `frontend/src/components/VisualizationPanel.jsx`
- [Array visualizer](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/ArrayVisualizer.jsx): `frontend/src/components/ArrayVisualizer.jsx`
- [Stack visualizer](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/StackVisualizer.jsx): `frontend/src/components/StackVisualizer.jsx`
- [Queue visualizer](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/components/QueuePanel.jsx): `frontend/src/components/QueuePanel.jsx`
- [State playback](https://github.com/itzsanket99/algorithm-visualizer/blob/main/frontend/src/utils/playback.js): `frontend/src/utils/playback.js`

### Execution API

- [Run endpoint](https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionController.java): `backend/src/main/java/com/algotrace/backend/execution/ExecutionController.java`
- [Execution service](https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionService.java): `backend/src/main/java/com/algotrace/backend/execution/ExecutionService.java`
- [Execution response data](https://github.com/itzsanket99/algorithm-visualizer/blob/main/backend/src/main/java/com/algotrace/backend/execution/ExecutionData.java): `backend/src/main/java/com/algotrace/backend/execution/ExecutionData.java`

### Java execution engine

- [Execution orchestrator](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/ExecutionEngine.java): `execution-engine/src/main/java/com/algotrace/engine/ExecutionEngine.java`
- [Java compiler](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/compiler/JavaSourceCompiler.java): `execution-engine/src/main/java/com/algotrace/engine/compiler/JavaSourceCompiler.java`
- [Debug JVM launcher](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/debug/DebugLauncher.java): `execution-engine/src/main/java/com/algotrace/engine/debug/DebugLauncher.java`
- [JDI debug session](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/debug/DebugSession.java): `execution-engine/src/main/java/com/algotrace/engine/debug/DebugSession.java`
- [Method event collector](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/debug/MethodEventCollector.java): `execution-engine/src/main/java/com/algotrace/engine/debug/MethodEventCollector.java`

### Trace processing

- [Execution trace](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/model/ExecutionTrace.java): `execution-engine/src/main/java/com/algotrace/engine/model/ExecutionTrace.java`
- [Call tree builder](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/tracer/CallTreeBuilder.java): `execution-engine/src/main/java/com/algotrace/engine/tracer/CallTreeBuilder.java`
- [Recursion call tree](https://github.com/itzsanket99/algorithm-visualizer/blob/main/execution-engine/src/main/java/com/algotrace/engine/model/CallTree.java): `execution-engine/src/main/java/com/algotrace/engine/model/CallTree.java`

### Other components

- **Learner**

## Connections

- Learner → Execution workspace: enters code
- Execution workspace → Execution API client: submits source
- Execution API client → Run endpoint: posts request
- Run endpoint → Execution service: invokes service
- Execution service → Execution orchestrator: executes source
- Execution orchestrator → Java compiler: compiles source
- Execution orchestrator → Debug JVM launcher: launches JVM
- Debug JVM launcher → JDI debug session: creates session
- Execution orchestrator → Method event collector: starts collection
- Method event collector → JDI debug session: observes events
- Method event collector → Execution trace: builds trace
- Execution orchestrator → Execution trace: returns trace
- Execution service → Call tree builder: builds call tree
- Call tree builder → Execution trace: reads events
- Call tree builder → Recursion call tree: produces tree
- Execution service → Execution response data: assembles events and tree
- Execution service → Run endpoint: returns response
- Run endpoint → Execution API client: returns result
- Execution API client → Execution workspace: provides result
- Execution workspace → State playback: steps states
- Execution workspace → Code viewer: renders source
- Execution workspace → Execution state: renders state
- Execution workspace → Call tree view: renders calls
- Execution workspace → Visualization panel: selects visualization
- Execution workspace → Array visualizer: renders arrays
- Execution workspace → Stack visualizer: renders stacks
- Execution workspace → Queue visualizer: renders queues