# ladislaulopes/arcade-builder architecture

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

- Interactive diagram: https://gitdiagram.com/ladislaulopes/arcade-builder
- Repository: https://github.com/ladislaulopes/arcade-builder

## Overview

Arcade Builder is a browser-based arcade-controller design editor, accompanied by Blender models. The main workflow is to choose a model and layout, customize artwork and controls, inspect the design, then export print files, a video, or an order summary. Projects can be saved and reopened locally. The README documents these capabilities and the asset collections, but no source excerpts were provided, so internal implementation calls cannot be verified; edges below reflect documented interactions only.

Main entry points: [`index.html`](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html) (Ateliê editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Browser editor"]
  node_editor_app["Ateliê editor<br/>[index.html]"]
  node_model_layout["Model and layout<br/>[index.html]"]
  node_artwork["Artwork placement<br/>[index.html]"]
  node_text_logo["Text and logos<br/>[index.html]"]
  node_color_tools["Color suggestions<br/>[index.html]"]
  node_button_setup["Button colors<br/>[index.html]"]
  node_preview_3d["3D preview<br/>[index.html]"]
  node_print_export["Print package<br/>[index.html]"]
  node_video_export["Turntable video<br/>[index.html]"]
  node_order_summary["Order summary<br/>[index.html]"]
end

subgraph group_local["Local project data"]
  node_project_files["Project files<br/>[index.html]"]
  node_browser_db[("IndexedDB<br/>[index.html]")]
end

subgraph group_assets["3D model assets"]
  node_blender_models["Blender models"]
  node_model_previews["Model renders"]
  node_new_model["New PRO XL model"]
  node_older_models["Earlier versions"]
end

node_designer(("Designer"))
node_web_libraries["Web libraries and fonts"]

node_designer -->|"opens"| node_editor_app
node_editor_app -->|"offers"| node_model_layout
node_editor_app -->|"offers"| node_artwork
node_editor_app -->|"offers"| node_text_logo
node_editor_app -->|"offers"| node_color_tools
node_editor_app -->|"offers"| node_button_setup
node_editor_app -->|"shows"| node_preview_3d
node_editor_app -->|"exports"| node_print_export
node_editor_app -->|"exports"| node_video_export
node_editor_app -->|"copies"| node_order_summary
node_editor_app -->|"saves and opens"| node_project_files
node_editor_app -->|"stores artwork in"| node_browser_db
node_editor_app -->|"loads"| node_web_libraries

click node_editor_app "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_model_layout "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_artwork "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_text_logo "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_color_tools "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_button_setup "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_preview_3d "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_print_export "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_video_export "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_order_summary "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_project_files "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_browser_db "https://github.com/ladislaulopes/arcade-builder/blob/main/index.html"
click node_blender_models "https://github.com/ladislaulopes/arcade-builder/tree/main/modelos/blender"
click node_model_previews "https://github.com/ladislaulopes/arcade-builder/tree/main/modelos/previas"
click node_new_model "https://github.com/ladislaulopes/arcade-builder/tree/main/modelo-novo/final"
click node_older_models "https://github.com/ladislaulopes/arcade-builder/tree/main/modelo-novo/versoes-anteriores"

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_editor_app,node_model_layout,node_artwork,node_text_logo,node_color_tools,node_button_setup,node_preview_3d,node_print_export,node_video_export,node_order_summary toneBlue
class node_project_files,node_browser_db toneAmber
class node_blender_models,node_model_previews,node_new_model,node_older_models toneMint
class node_designer,node_web_libraries toneIndigo
```

## Components

### Browser editor

- [Ateliê editor](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Model and layout](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Artwork placement](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Text and logos](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Color suggestions](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Button colors](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [3D preview](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Print package](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Turntable video](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [Order summary](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`

### Local project data

- [Project files](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`
- [IndexedDB](https://github.com/ladislaulopes/arcade-builder/blob/main/index.html): `index.html`

### 3D model assets

- [Blender models](https://github.com/ladislaulopes/arcade-builder/tree/main/modelos/blender): `modelos/blender`
- [Model renders](https://github.com/ladislaulopes/arcade-builder/tree/main/modelos/previas): `modelos/previas`
- [New PRO XL model](https://github.com/ladislaulopes/arcade-builder/tree/main/modelo-novo/final): `modelo-novo/final`
- [Earlier versions](https://github.com/ladislaulopes/arcade-builder/tree/main/modelo-novo/versoes-anteriores): `modelo-novo/versoes-anteriores`

### Other components

- **Designer**
- **Web libraries and fonts**

## Connections

- Designer → Ateliê editor: opens (evidence: `README.md`)
- Ateliê editor → Model and layout: offers (evidence: `README.md`)
- Ateliê editor → Artwork placement: offers (evidence: `README.md`)
- Ateliê editor → Text and logos: offers (evidence: `README.md`)
- Ateliê editor → Color suggestions: offers (evidence: `README.md`)
- Ateliê editor → Button colors: offers (evidence: `README.md`)
- Ateliê editor → 3D preview: shows (evidence: `README.md`)
- Ateliê editor → Print package: exports (evidence: `README.md`)
- Ateliê editor → Turntable video: exports (evidence: `README.md`)
- Ateliê editor → Order summary: copies (evidence: `README.md`)
- Ateliê editor → Project files: saves and opens (evidence: `README.md`)
- Ateliê editor → IndexedDB: stores artwork in (evidence: `README.md`)
- Ateliê editor → Web libraries and fonts: loads (evidence: `README.md`)