# webdevcody/sketchlab.app architecture

> Architecture diagram of the GitHub repository webdevcody/sketchlab.app, 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/webdevcody/sketchlab.app
- Repository: https://github.com/webdevcody/sketchlab.app

## Overview

Sketch Lab is a browser-based diagram editor: users create or import a board, manipulate shapes and connectors, view it through a layered perspective canvas, and save or share it without a backend. The graph highlights the editor’s interaction, document-state, rendering, and persistence stages, alongside AI-assisted and generated-graph capabilities. Relationships are grounded in the README and source-index references; unsampled modules are represented only where their subsystem is documented, and uncertain links are omitted.

Main entry points: [`src/ui/editor.ts`](https://github.com/webdevcody/sketchlab.app/blob/main/src/ui/editor.ts) (Editor shell), [`src/render/scene.ts`](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/scene.ts) (Pixi scene), [`src/state/actions.ts`](https://github.com/webdevcody/sketchlab.app/blob/main/src/state/actions.ts) (Board mutations), [`src/main.ts`](https://github.com/webdevcody/sketchlab.app/blob/main/src/main.ts) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and UI"]
  node_router["App routing<br/>[main.ts]"]
  node_editor["Editor shell<br/>[editor.ts]"]
  node_ai_panel["AI generation panel<br/>[aiGeneratePanel.ts]"]
  node_ai_generator["Diagram generator<br/>[openaiDiagram.ts]"]
  node_controls["Editor panels"]
end

subgraph group_edit["Editing and input"]
  node_controller["Input controller<br/>[controller.ts]"]
  node_camera["Camera controls<br/>[camera.ts]"]
  node_text_edit["Text editing<br/>[textEditor.ts]"]
  node_icon_palette["Icon palette<br/>[iconPalette.ts]"]
end

subgraph group_document["Board state"]
  node_graph_import["Generated graph import<br/>[generatedGraph.ts]"]
  node_actions["Board mutations<br/>[actions.ts]"]
  node_store["Board and UI state<br/>[store.ts]"]
  node_layout["Auto layout<br/>[autoLayout.ts]"]
  node_history["Undo and redo<br/>[history.ts]"]
end

subgraph group_canvas["Canvas rendering"]
  node_scene["Pixi scene<br/>[scene.ts]"]
  node_shape_view["Shape rendering<br/>[shapeView.ts]"]
  node_edge_view["Connector rendering<br/>[edgeView.ts]"]
  node_projection["Perspective projection<br/>[projection.ts]"]
  node_geometry["Geometry and snapping<br/>[geometry.ts]"]
  node_layers["Board layers<br/>[boardLayers.ts]"]
end

subgraph group_save["Persistence and sharing"]
  node_autosave["Autosave<br/>[autosave.ts]"]
  node_database[("Local board storage<br/>[db.ts]")]
  node_sharing["URL sharing<br/>[share.ts]"]
end

node_user(("Diagram author"))
node_browser[("Browser storage")]
node_ai_service(("AI service"))

node_user -->|"opens app"| node_router
node_router -->|"routes to"| node_editor
node_editor -->|"sets up input"| node_controller
node_controller -->|"dispatches edits"| node_actions
node_controller -->|"controls view"| node_camera
node_controller -->|"uses geometry"| node_geometry
node_editor -.->|"uses overlay"| node_text_edit
node_editor -.->|"offers icons"| node_icon_palette
node_editor -->|"shows panels"| node_controls
node_user -->|"requests diagram"| node_ai_panel
node_ai_panel -->|"requests generation"| node_ai_generator
node_ai_generator -.->|"generates with"| node_ai_service
node_ai_generator -->|"produces graph"| node_graph_import
node_router -->|"imports graph"| node_graph_import
node_graph_import -->|"computes layout"| node_layout
node_editor -->|"invokes mutations"| node_actions
node_actions -->|"updates state"| node_store
node_actions -->|"marks views dirty"| node_scene
node_actions -->|"uses layout"| node_layout
node_editor -->|"sets up history"| node_history
node_scene -->|"reads board state"| node_store
node_scene -->|"updates shapes"| node_shape_view
node_scene -->|"updates connectors"| node_edge_view
node_scene -->|"projects board"| node_projection
node_scene -->|"resolves edges"| node_geometry
node_scene -->|"renders floors"| node_layers
node_editor -->|"starts autosave"| node_autosave
node_autosave -->|"saves boards"| node_database
node_database -->|"stores in IndexedDB"| node_browser
node_editor -->|"encodes and opens shares"| node_sharing
node_router -->|"decodes shared board"| node_sharing
node_user -->|"shares board"| node_sharing

click node_router "https://github.com/webdevcody/sketchlab.app/blob/main/src/main.ts"
click node_editor "https://github.com/webdevcody/sketchlab.app/blob/main/src/ui/editor.ts"
click node_ai_panel "https://github.com/webdevcody/sketchlab.app/blob/main/src/ui/aiGeneratePanel.ts"
click node_ai_generator "https://github.com/webdevcody/sketchlab.app/blob/main/src/ai/openaiDiagram.ts"
click node_controls "https://github.com/webdevcody/sketchlab.app/tree/main/src/ui"
click node_controller "https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/controller.ts"
click node_camera "https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/camera.ts"
click node_text_edit "https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/textEditor.ts"
click node_icon_palette "https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/iconPalette.ts"
click node_graph_import "https://github.com/webdevcody/sketchlab.app/blob/main/src/state/generatedGraph.ts"
click node_actions "https://github.com/webdevcody/sketchlab.app/blob/main/src/state/actions.ts"
click node_store "https://github.com/webdevcody/sketchlab.app/blob/main/src/state/store.ts"
click node_layout "https://github.com/webdevcody/sketchlab.app/blob/main/src/state/autoLayout.ts"
click node_history "https://github.com/webdevcody/sketchlab.app/blob/main/src/state/history.ts"
click node_scene "https://github.com/webdevcody/sketchlab.app/blob/main/src/render/scene.ts"
click node_shape_view "https://github.com/webdevcody/sketchlab.app/blob/main/src/render/shapeView.ts"
click node_edge_view "https://github.com/webdevcody/sketchlab.app/blob/main/src/render/edgeView.ts"
click node_projection "https://github.com/webdevcody/sketchlab.app/blob/main/src/render/projection.ts"
click node_geometry "https://github.com/webdevcody/sketchlab.app/blob/main/src/render/geometry.ts"
click node_layers "https://github.com/webdevcody/sketchlab.app/blob/main/src/render/boardLayers.ts"
click node_autosave "https://github.com/webdevcody/sketchlab.app/blob/main/src/persistence/autosave.ts"
click node_database "https://github.com/webdevcody/sketchlab.app/blob/main/src/persistence/db.ts"
click node_sharing "https://github.com/webdevcody/sketchlab.app/blob/main/src/persistence/share.ts"

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_router,node_editor,node_ai_panel,node_ai_generator,node_controls toneBlue
class node_controller,node_camera,node_text_edit,node_icon_palette,node_browser toneAmber
class node_graph_import,node_actions,node_store,node_layout,node_history toneMint
class node_scene,node_shape_view,node_edge_view,node_projection,node_geometry,node_layers toneRose
class node_autosave,node_database,node_sharing,node_user,node_ai_service toneIndigo
```

## Components

### App and UI

- [App routing](https://github.com/webdevcody/sketchlab.app/blob/main/src/main.ts): `src/main.ts`
- [Editor shell](https://github.com/webdevcody/sketchlab.app/blob/main/src/ui/editor.ts): `src/ui/editor.ts`
- [AI generation panel](https://github.com/webdevcody/sketchlab.app/blob/main/src/ui/aiGeneratePanel.ts): `src/ui/aiGeneratePanel.ts`
- [Diagram generator](https://github.com/webdevcody/sketchlab.app/blob/main/src/ai/openaiDiagram.ts): `src/ai/openaiDiagram.ts`
- [Editor panels](https://github.com/webdevcody/sketchlab.app/tree/main/src/ui): `src/ui`

### Editing and input

- [Input controller](https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/controller.ts): `src/interaction/controller.ts`
- [Camera controls](https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/camera.ts): `src/interaction/camera.ts`
- [Text editing](https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/textEditor.ts): `src/interaction/textEditor.ts`
- [Icon palette](https://github.com/webdevcody/sketchlab.app/blob/main/src/interaction/iconPalette.ts): `src/interaction/iconPalette.ts`

### Board state

- [Generated graph import](https://github.com/webdevcody/sketchlab.app/blob/main/src/state/generatedGraph.ts): `src/state/generatedGraph.ts`
- [Board mutations](https://github.com/webdevcody/sketchlab.app/blob/main/src/state/actions.ts): `src/state/actions.ts`
- [Board and UI state](https://github.com/webdevcody/sketchlab.app/blob/main/src/state/store.ts): `src/state/store.ts`
- [Auto layout](https://github.com/webdevcody/sketchlab.app/blob/main/src/state/autoLayout.ts): `src/state/autoLayout.ts`
- [Undo and redo](https://github.com/webdevcody/sketchlab.app/blob/main/src/state/history.ts): `src/state/history.ts`

### Canvas rendering

- [Pixi scene](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/scene.ts): `src/render/scene.ts`
- [Shape rendering](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/shapeView.ts): `src/render/shapeView.ts`
- [Connector rendering](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/edgeView.ts): `src/render/edgeView.ts`
- [Perspective projection](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/projection.ts): `src/render/projection.ts`
- [Geometry and snapping](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/geometry.ts): `src/render/geometry.ts`
- [Board layers](https://github.com/webdevcody/sketchlab.app/blob/main/src/render/boardLayers.ts): `src/render/boardLayers.ts`

### Persistence and sharing

- [Autosave](https://github.com/webdevcody/sketchlab.app/blob/main/src/persistence/autosave.ts): `src/persistence/autosave.ts`
- [Local board storage](https://github.com/webdevcody/sketchlab.app/blob/main/src/persistence/db.ts): `src/persistence/db.ts`
- [URL sharing](https://github.com/webdevcody/sketchlab.app/blob/main/src/persistence/share.ts): `src/persistence/share.ts`

### Other components

- **Diagram author**
- **Browser storage**
- **AI service**

## Connections

- Diagram author → App routing: opens app (evidence: `README.md`)
- App routing → Editor shell: routes to (evidence: `src/main.ts`)
- Editor shell → Input controller: sets up input (evidence: `src/ui/editor.ts`)
- Input controller → Board mutations: dispatches edits (evidence: `src/interaction/controller.ts`)
- Input controller → Camera controls: controls view (evidence: `src/interaction/controller.ts`)
- Input controller → Geometry and snapping: uses geometry (evidence: `src/interaction/controller.ts`)
- Editor shell → Text editing: uses overlay
- Editor shell → Icon palette: offers icons
- Editor shell → Editor panels: shows panels (evidence: `src/ui/editor.ts`)
- Diagram author → AI generation panel: requests diagram (evidence: `README.md`)
- AI generation panel → Diagram generator: requests generation (evidence: `src/ui/aiGeneratePanel.ts`)
- Diagram generator → AI service: generates with
- Diagram generator → Generated graph import: produces graph (evidence: `src/ai/openaiDiagram.ts`)
- App routing → Generated graph import: imports graph (evidence: `src/main.ts`)
- Generated graph import → Auto layout: computes layout (evidence: `src/state/generatedGraph.ts`)
- Editor shell → Board mutations: invokes mutations (evidence: `src/ui/editor.ts`)
- Board mutations → Board and UI state: updates state (evidence: `src/state/actions.ts`)
- Board mutations → Pixi scene: marks views dirty (evidence: `src/state/actions.ts`)
- Board mutations → Auto layout: uses layout (evidence: `src/state/actions.ts`)
- Editor shell → Undo and redo: sets up history (evidence: `src/ui/editor.ts`)
- Pixi scene → Board and UI state: reads board state (evidence: `src/render/scene.ts`)
- Pixi scene → Shape rendering: updates shapes (evidence: `src/render/scene.ts`)
- Pixi scene → Connector rendering: updates connectors (evidence: `src/render/scene.ts`)
- Pixi scene → Perspective projection: projects board (evidence: `src/render/scene.ts`)
- Pixi scene → Geometry and snapping: resolves edges (evidence: `src/render/scene.ts`)
- Pixi scene → Board layers: renders floors (evidence: `src/render/scene.ts`)
- Editor shell → Autosave: starts autosave (evidence: `src/ui/editor.ts`)
- Autosave → Local board storage: saves boards (evidence: `src/persistence/autosave.ts`)
- Local board storage → Browser storage: stores in IndexedDB (evidence: `README.md`)
- Editor shell → URL sharing: encodes and opens shares (evidence: `src/ui/editor.ts`)
- App routing → URL sharing: decodes shared board (evidence: `src/main.ts`)
- Diagram author → URL sharing: shares board (evidence: `README.md`)