# dhanush777x/protoviz-3d architecture

> Architecture diagram of the GitHub repository dhanush777x/protoviz-3d, 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/dhanush777x/protoviz-3d
- Repository: https://github.com/dhanush777x/protoviz-3d

## Overview

Protoviz 3D is a browser-based teaching tool for exploring UART and I²C communication. Users select a protocol, configure a transmission, then inspect its evolving bit-level behavior in a 3D scene and waveform; tutorials and searchable deep dives provide guided learning. The README documents the protocol capabilities, while sampled sources confirm page orchestration, protocol-specific controls and state stores, and deep-dive UI. Scene-internal data wiring is not established by the excerpts, so those links are omitted.

Main entry points: [`app/page.tsx`](https://github.com/dhanush777x/protoviz-3d/blob/main/app/page.tsx) (Page orchestrator), [`components/protocol-visualizer/ControlPanel.tsx`](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/ControlPanel.tsx) (Protocol selector), [`components/protocol-visualizer/DeepDive.tsx`](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/DeepDive.tsx) (Searchable deep dive), [`components/FloatingNavBar.tsx`](https://github.com/dhanush777x/protoviz-3d/blob/main/components/FloatingNavBar.tsx) (Floating navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_page["Page orchestrator<br/>[page.tsx]"]
  node_scene_dispatch["Protocol scene selector<br/>[ProtocolScene.tsx]"]
  node_protocol_controls["Protocol selector<br/>[ControlPanel.tsx]"]
end

subgraph group_shared["Shared learning UI"]
  node_intro["Intro tutorial<br/>[ProtovizIntro.tsx]"]
  node_navbar["Floating navigation<br/>[FloatingNavBar.tsx]"]
  node_common_state["Shared UI state<br/>[CommonStore.tsx]"]
end

subgraph group_uart["UART simulation"]
  node_uart_controls["UART controls"]
  node_uart_logic["UART transmission logic<br/>[useUARTLogic.tsx]"]
  node_uart_scene["UART 3D scene<br/>[UARTScene.tsx]"]
  node_uart_board["UART wiring model<br/>[UARTBoard.tsx]"]
  node_uart_wire["UART wires<br/>[UARTWire.tsx]"]
  node_uart_wave["UART waveform<br/>[UARTWaveform.tsx]"]
  node_uart_particles["UART bit particles<br/>[UARTParticles.tsx]"]
  node_uart_basics["UART guided tutorial<br/>[UARTBasics.tsx]"]
end

subgraph group_i2c["I²C simulation"]
  node_i2c_controls["I²C controls"]
  node_i2c_logic["I²C bus logic<br/>[useI2CLogic.tsx]"]
  node_i2c_scene["I²C 3D scene<br/>[I2CScene.tsx]"]
  node_i2c_board["I²C bus model<br/>[I2CBoard.tsx]"]
  node_i2c_wire["I²C bus wires<br/>[I2CWire.tsx]"]
  node_i2c_wave["I²C waveform<br/>[I2CWaveform.tsx]"]
  node_i2c_particles["I²C bit particles<br/>[I2CParticles.tsx]"]
  node_i2c_basics["I²C guided tutorial<br/>[I2CBasics.tsx]"]
end

subgraph group_learning["Protocol learning content"]
  node_deep_dive["Searchable deep dive<br/>[DeepDive.tsx]"]
  node_uart_content["UART deep-dive content<br/>[uart.json]"]
  node_i2c_content["I²C deep-dive content<br/>[i2c.json]"]
end

node_learner(("Learner"))

node_learner -->|"opens visualizer"| node_page
node_page -->|"shows intro"| node_intro
node_page -->|"renders controls"| node_protocol_controls
node_page -->|"renders scene"| node_scene_dispatch
node_page -->|"renders navigation"| node_navbar
node_protocol_controls -->|"selects UART"| node_uart_controls
node_protocol_controls -->|"selects I²C"| node_i2c_controls
node_uart_controls -->|"updates state"| node_uart_logic
node_i2c_controls -->|"updates state"| node_i2c_logic
node_navbar -->|"sets overlay state"| node_common_state
node_deep_dive -->|"loads content"| node_uart_content
node_deep_dive -->|"loads content"| node_i2c_content
node_page -->|"presents deep dive"| node_deep_dive

click node_page "https://github.com/dhanush777x/protoviz-3d/blob/main/app/page.tsx"
click node_scene_dispatch "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/ProtocolScene.tsx"
click node_protocol_controls "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/ControlPanel.tsx"
click node_intro "https://github.com/dhanush777x/protoviz-3d/blob/main/components/ProtovizIntro.tsx"
click node_navbar "https://github.com/dhanush777x/protoviz-3d/blob/main/components/FloatingNavBar.tsx"
click node_common_state "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/CommonStore.tsx"
click node_deep_dive "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/DeepDive.tsx"
click node_uart_controls "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTControlPanel.tsx"
click node_uart_logic "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/useUARTLogic.tsx"
click node_uart_scene "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTScene.tsx"
click node_uart_board "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTBoard.tsx"
click node_uart_wire "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTWire.tsx"
click node_uart_wave "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTWaveform.tsx"
click node_uart_particles "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTParticles.tsx"
click node_uart_basics "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTBasics.tsx"
click node_i2c_controls "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CControlPanel.tsx"
click node_i2c_logic "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/useI2CLogic.tsx"
click node_i2c_scene "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CScene.tsx"
click node_i2c_board "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CBoard.tsx"
click node_i2c_wire "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CWire.tsx"
click node_i2c_wave "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CWaveform.tsx"
click node_i2c_particles "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CParticles.tsx"
click node_i2c_basics "https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CBasics.tsx"
click node_uart_content "https://github.com/dhanush777x/protoviz-3d/blob/main/public/deep-dive/uart.json"
click node_i2c_content "https://github.com/dhanush777x/protoviz-3d/blob/main/public/deep-dive/i2c.json"

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_page,node_scene_dispatch,node_protocol_controls toneBlue
class node_intro,node_navbar,node_common_state toneAmber
class node_uart_controls,node_uart_logic,node_uart_scene,node_uart_board,node_uart_wire,node_uart_wave,node_uart_particles,node_uart_basics toneMint
class node_i2c_controls,node_i2c_logic,node_i2c_scene,node_i2c_board,node_i2c_wire,node_i2c_wave,node_i2c_particles,node_i2c_basics toneRose
class node_deep_dive,node_uart_content,node_i2c_content,node_learner toneIndigo
```

## Components

### Application shell

- [Page orchestrator](https://github.com/dhanush777x/protoviz-3d/blob/main/app/page.tsx): `app/page.tsx`
- [Protocol scene selector](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/ProtocolScene.tsx): `components/protocol-visualizer/ProtocolScene.tsx`
- [Protocol selector](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/ControlPanel.tsx): `components/protocol-visualizer/ControlPanel.tsx`

### Shared learning UI

- [Intro tutorial](https://github.com/dhanush777x/protoviz-3d/blob/main/components/ProtovizIntro.tsx): `components/ProtovizIntro.tsx`
- [Floating navigation](https://github.com/dhanush777x/protoviz-3d/blob/main/components/FloatingNavBar.tsx): `components/FloatingNavBar.tsx`
- [Shared UI state](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/CommonStore.tsx): `components/protocol-visualizer/CommonStore.tsx`

### UART simulation

- [UART controls](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTControlPanel.tsx): `components/protocol-visualizer/protocols/uart/UARTControlPanel.tsx`
- [UART transmission logic](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/useUARTLogic.tsx): `components/protocol-visualizer/protocols/uart/useUARTLogic.tsx`
- [UART 3D scene](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTScene.tsx): `components/protocol-visualizer/protocols/uart/UARTScene.tsx`
- [UART wiring model](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTBoard.tsx): `components/protocol-visualizer/protocols/uart/UARTBoard.tsx`
- [UART wires](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTWire.tsx): `components/protocol-visualizer/protocols/uart/UARTWire.tsx`
- [UART waveform](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTWaveform.tsx): `components/protocol-visualizer/protocols/uart/UARTWaveform.tsx`
- [UART bit particles](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTParticles.tsx): `components/protocol-visualizer/protocols/uart/UARTParticles.tsx`
- [UART guided tutorial](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/uart/UARTBasics.tsx): `components/protocol-visualizer/protocols/uart/UARTBasics.tsx`

### I²C simulation

- [I²C controls](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CControlPanel.tsx): `components/protocol-visualizer/protocols/i2c/I2CControlPanel.tsx`
- [I²C bus logic](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/useI2CLogic.tsx): `components/protocol-visualizer/protocols/i2c/useI2CLogic.tsx`
- [I²C 3D scene](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CScene.tsx): `components/protocol-visualizer/protocols/i2c/I2CScene.tsx`
- [I²C bus model](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CBoard.tsx): `components/protocol-visualizer/protocols/i2c/I2CBoard.tsx`
- [I²C bus wires](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CWire.tsx): `components/protocol-visualizer/protocols/i2c/I2CWire.tsx`
- [I²C waveform](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CWaveform.tsx): `components/protocol-visualizer/protocols/i2c/I2CWaveform.tsx`
- [I²C bit particles](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CParticles.tsx): `components/protocol-visualizer/protocols/i2c/I2CParticles.tsx`
- [I²C guided tutorial](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/protocols/i2c/I2CBasics.tsx): `components/protocol-visualizer/protocols/i2c/I2CBasics.tsx`

### Protocol learning content

- [Searchable deep dive](https://github.com/dhanush777x/protoviz-3d/blob/main/components/protocol-visualizer/DeepDive.tsx): `components/protocol-visualizer/DeepDive.tsx`
- [UART deep-dive content](https://github.com/dhanush777x/protoviz-3d/blob/main/public/deep-dive/uart.json): `public/deep-dive/uart.json`
- [I²C deep-dive content](https://github.com/dhanush777x/protoviz-3d/blob/main/public/deep-dive/i2c.json): `public/deep-dive/i2c.json`

### Other components

- **Learner**

## Connections

- Learner → Page orchestrator: opens visualizer
- Page orchestrator → Intro tutorial: shows intro
- Page orchestrator → Protocol selector: renders controls
- Page orchestrator → Protocol scene selector: renders scene
- Page orchestrator → Floating navigation: renders navigation
- Protocol selector → UART controls: selects UART
- Protocol selector → I²C controls: selects I²C
- UART controls → UART transmission logic: updates state
- I²C controls → I²C bus logic: updates state
- Floating navigation → Shared UI state: sets overlay state
- Searchable deep dive → UART deep-dive content: loads content
- Searchable deep dive → I²C deep-dive content: loads content
- Page orchestrator → Searchable deep dive: presents deep dive