# joele89/ledbuilder architecture

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

- Interactive diagram: https://gitdiagram.com/joele89/ledbuilder
- Repository: https://github.com/joele89/ledbuilder

## Overview

ledbuilder is a browser-based LED display builder. Its main workflow is configuring a screen and its wiring, then managing screen configurations within a project; the application also uses panel and processor specifications to populate configuration choices. The sampled code shows the application’s canvas and path-calculation logic and project compression, but excerpts omit much of the runtime, so finer internal call relationships are not asserted.

Main entry points: [`application.js`](https://github.com/joele89/ledbuilder/blob/main/application.js) (Screen and project workflow), [`panelLibrary.js`](https://github.com/joele89/ledbuilder/blob/main/panelLibrary.js) (Panel specifications), [`processorLibrary.js`](https://github.com/joele89/ledbuilder/blob/main/processorLibrary.js) (Processor specifications)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_builder["Screen Builder"]
  node_app["Screen and project workflow<br/>[application.js]"]
  node_ui["Expandable UI sections<br/>[ui.js]"]
end

subgraph group_catalogs["Hardware Catalogs"]
  node_panels["Panel specifications<br/>[panelLibrary.js]"]
  node_processors["Processor specifications"]
end

node_user(("Builder user"))

node_user -.->|"configures screens"| node_app
node_app -->|"imports catalog"| node_panels
node_app -->|"loads options"| node_processors

click node_app "https://github.com/joele89/ledbuilder/blob/main/application.js"
click node_ui "https://github.com/joele89/ledbuilder/blob/main/ui.js"
click node_panels "https://github.com/joele89/ledbuilder/blob/main/panelLibrary.js"
click node_processors "https://github.com/joele89/ledbuilder/blob/main/processorLibrary.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_ui,node_user toneBlue
class node_panels,node_processors toneAmber
```

## Components

### Screen Builder

- [Screen and project workflow](https://github.com/joele89/ledbuilder/blob/main/application.js): `application.js`
- [Expandable UI sections](https://github.com/joele89/ledbuilder/blob/main/ui.js): `ui.js`

### Hardware Catalogs

- [Panel specifications](https://github.com/joele89/ledbuilder/blob/main/panelLibrary.js): `panelLibrary.js`
- [Processor specifications](https://github.com/joele89/ledbuilder/blob/main/processorLibrary.js): `processorLibrary.js`

### Other components

- **Builder user**

## Connections

- Builder user → Screen and project workflow: configures screens
- Screen and project workflow → Panel specifications: imports catalog (evidence: `application.js`)
- Screen and project workflow → Processor specifications: loads options (evidence: `application.js`)