webdevcody/sketchlab.app

How webdevcody/sketchlab.app works

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: editor.ts Editor shell · scene.ts Pixi scene · actions.ts Board mutations · main.ts App routing

Components 26

App and UI

App routing src/main.ts
Editor shell src/ui/editor.ts
AI generation panel src/ui/aiGeneratePanel.ts
Diagram generator src/ai/openaiDiagram.ts
Editor panels src/ui

Editing and input

Input controller src/interaction/controller.ts
Camera controls src/interaction/camera.ts
Text editing src/interaction/textEditor.ts
Icon palette src/interaction/iconPalette.ts

Board state

Generated graph import src/state/generatedGraph.ts
Board mutations src/state/actions.ts
Board and UI state src/state/store.ts
Auto layout src/state/autoLayout.ts
Undo and redo src/state/history.ts

Canvas rendering

Pixi scene src/render/scene.ts
Shape rendering src/render/shapeView.ts
Connector rendering src/render/edgeView.ts
Perspective projection src/render/projection.ts
Geometry and snapping src/render/geometry.ts
Board layers src/render/boardLayers.ts

Persistence and sharing

Autosave src/persistence/autosave.ts
Local board storage src/persistence/db.ts
URL sharing src/persistence/share.ts

Other components

Diagram author
Browser storage
AI service

Connections 32

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

Drawn by GitDiagram on November 10, 2026 from the repository's file tree, README and source files. Read as Markdown ·