# haitang-hub/canvas-director architecture

> Architecture diagram of the GitHub repository haitang-hub/canvas-director, 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/haitang-hub/canvas-director
- Repository: https://github.com/haitang-hub/canvas-director

## Overview

Canvas Director is a browser-based visual-production workbench: creators plan on an infinite canvas, stage and record shots in an embedded 3D director, then use those references for AI image/video generation and continue iterating on the canvas. The README documents the major product branches and integration flows; sampled source confirms selected local-storage, plugin-management, director-control, and agent-runtime details, but does not expose most canvas or generation call sites.

Main entry points: [`web/src/components/canvas/infinite-canvas.tsx`](https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/infinite-canvas.tsx) (Infinite Canvas), [`web/src/components/canvas/canvas-node-generation.ts`](https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/canvas-node-generation.ts) (Media Generation), [`web/src/pages/canvas/index.tsx`](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/canvas/index.tsx) (Canvas Workspace), [`web/src/stores/use-config-store.ts`](https://github.com/haitang-hub/canvas-director/blob/main/web/src/stores/use-config-store.ts) (Models & Sources Config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_canvas["Canvas Workspace"]
  node_webapp["Web Application<br/>[main.tsx]"]
  node_canvaspage["Canvas Workspace<br/>[index.tsx]"]
  node_canvasview["Infinite Canvas"]
  node_canvasstate[("Canvas State")]
end

subgraph group_director["3D Director"]
  node_directorpage["Director Desk<br/>[index.tsx]"]
  node_directorscene["3D Scene Editor<br/>[DirectorCanvas.tsx]"]
  node_motion["Camera &amp; Motion<br/>[MotionStudio.tsx]"]
  node_directorstate[("Director Project State<br/>[directorStore.ts]")]
  node_directorbridge["Capture &amp; Export Bridge<br/>[captureBridge.ts]"]
end

subgraph group_creation["AI Creation"]
  node_generation["Media Generation"]
  node_imageapi["Image API<br/>[image.ts]"]
  node_videoapi["Video API<br/>[video.ts]"]
  node_audioapi["Audio API<br/>[audio.ts]"]
end

subgraph group_extensions["Agent &amp; Plugins"]
  node_plugins["Plugin Runtime<br/>[plugin-runtime.ts]"]
  node_pluginmanager["Plugin Manager"]
  node_agentui["Canvas Agent UI<br/>[agent-panel.tsx]"]
  node_agentbridge["Agent Canvas Bridge"]
  node_agentservice["Local Canvas Agent<br/>[index.ts]"]
end

subgraph group_support["Assets &amp; Settings"]
  node_promptcenter["Prompt Center<br/>[index.tsx]"]
  node_assetstore[("Local Media Assets<br/>[file-storage.ts]")]
  node_imagestore[("Local Image Assets<br/>[image-storage.ts]")]
  node_config[("Models &amp; Sources Config")]
  node_sync["WebDAV Sync<br/>[webdav-sync.ts]"]
end

node_creator(("Creator"))
node_models(("Configured AI Services"))
node_codex(("Codex CLI"))
node_webdav(("WebDAV Server"))

node_creator -->|"opens"| node_webapp
node_webapp -->|"routes to"| node_canvaspage
node_canvaspage -->|"renders"| node_canvasview
node_canvasview -->|"updates"| node_canvasstate
node_canvaspage -->|"opens embedded"| node_directorpage
node_directorpage -->|"renders"| node_directorscene
node_directorscene -->|"edits"| node_directorstate
node_motion -->|"records motion"| node_directorstate
node_directorpage -->|"requests exports"| node_directorbridge
node_directorbridge -->|"returns references"| node_canvaspage
node_canvasview -->|"starts generation"| node_generation
node_generation -->|"requests images"| node_imageapi
node_generation -->|"requests videos"| node_videoapi
node_generation -->|"requests audio"| node_audioapi
node_imageapi -->|"sends requests"| node_models
node_videoapi -->|"sends requests"| node_models
node_audioapi -->|"sends requests"| node_models
node_generation -->|"writes results"| node_canvasstate
node_canvasview -->|"renders plugin nodes"| node_plugins
node_pluginmanager -->|"installs and manages"| node_plugins
node_creator -->|"manages plugins"| node_pluginmanager
node_agentui -->|"exchanges canvas context"| node_agentbridge
node_agentbridge -->|"dispatches MCP requests"| node_agentservice
node_agentservice -->|"runs CLI"| node_codex
node_agentservice -->|"streams events"| node_agentbridge
node_creator -->|"searches prompts"| node_promptcenter
node_promptcenter -->|"inserts prompts"| node_canvasview
node_canvasview -->|"stores media"| node_assetstore
node_canvasview -->|"stores images"| node_imagestore
node_config -->|"provides settings"| node_imageapi
node_config -->|"provides settings"| node_videoapi
node_config -->|"provides settings"| node_audioapi
node_sync -.->|"syncs projects"| node_canvasstate
node_sync -.->|"syncs assets"| node_assetstore
node_sync -.->|"transfers data"| node_webdav

click node_webapp "https://github.com/haitang-hub/canvas-director/blob/main/web/src/main.tsx"
click node_canvaspage "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/canvas/index.tsx"
click node_canvasview "https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/infinite-canvas.tsx"
click node_canvasstate "https://github.com/haitang-hub/canvas-director/blob/main/web/src/stores/canvas/use-canvas-store.ts"
click node_directorpage "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/index.tsx"
click node_directorscene "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/canvas/DirectorCanvas.tsx"
click node_motion "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/motion/MotionStudio.tsx"
click node_directorstate "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/store/directorStore.ts"
click node_directorbridge "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/io/captureBridge.ts"
click node_generation "https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/canvas-node-generation.ts"
click node_imageapi "https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/api/image.ts"
click node_videoapi "https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/api/video.ts"
click node_audioapi "https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/api/audio.ts"
click node_plugins "https://github.com/haitang-hub/canvas-director/blob/main/web/src/lib/canvas/plugin-runtime.ts"
click node_pluginmanager "https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/canvas-plugin-manager-modal.tsx"
click node_agentui "https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/agent/agent-panel.tsx"
click node_agentbridge "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/canvas/hooks/use-agent-bridge.ts"
click node_agentservice "https://github.com/haitang-hub/canvas-director/blob/main/canvas-agent/src/index.ts"
click node_promptcenter "https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/prompts/index.tsx"
click node_assetstore "https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/file-storage.ts"
click node_imagestore "https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/image-storage.ts"
click node_config "https://github.com/haitang-hub/canvas-director/blob/main/web/src/stores/use-config-store.ts"
click node_sync "https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/webdav-sync.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_webapp,node_canvaspage,node_canvasview,node_canvasstate toneBlue
class node_directorpage,node_directorscene,node_motion,node_directorstate,node_directorbridge toneAmber
class node_generation,node_imageapi,node_videoapi,node_audioapi,node_webdav toneMint
class node_plugins,node_pluginmanager,node_agentui,node_agentbridge,node_agentservice toneRose
class node_promptcenter,node_assetstore,node_imagestore,node_config,node_sync,node_creator,node_models,node_codex toneIndigo
```

## Components

### Canvas Workspace

- [Web Application](https://github.com/haitang-hub/canvas-director/blob/main/web/src/main.tsx): `web/src/main.tsx`
- [Canvas Workspace](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/canvas/index.tsx): `web/src/pages/canvas/index.tsx`
- [Infinite Canvas](https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/infinite-canvas.tsx): `web/src/components/canvas/infinite-canvas.tsx`
- [Canvas State](https://github.com/haitang-hub/canvas-director/blob/main/web/src/stores/canvas/use-canvas-store.ts): `web/src/stores/canvas/use-canvas-store.ts`

### 3D Director

- [Director Desk](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/index.tsx): `web/src/pages/director/index.tsx`
- [3D Scene Editor](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/canvas/DirectorCanvas.tsx): `web/src/pages/director/editor/canvas/DirectorCanvas.tsx`
- [Camera & Motion](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/motion/MotionStudio.tsx): `web/src/pages/director/editor/motion/MotionStudio.tsx`
- [Director Project State](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/store/directorStore.ts): `web/src/pages/director/editor/store/directorStore.ts`
- [Capture & Export Bridge](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/director/editor/io/captureBridge.ts): `web/src/pages/director/editor/io/captureBridge.ts`

### AI Creation

- [Media Generation](https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/canvas-node-generation.ts): `web/src/components/canvas/canvas-node-generation.ts`
- [Image API](https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/api/image.ts): `web/src/services/api/image.ts`
- [Video API](https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/api/video.ts): `web/src/services/api/video.ts`
- [Audio API](https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/api/audio.ts): `web/src/services/api/audio.ts`

### Agent & Plugins

- [Plugin Runtime](https://github.com/haitang-hub/canvas-director/blob/main/web/src/lib/canvas/plugin-runtime.ts): `web/src/lib/canvas/plugin-runtime.ts`
- [Plugin Manager](https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/canvas/canvas-plugin-manager-modal.tsx): `web/src/components/canvas/canvas-plugin-manager-modal.tsx`
- [Canvas Agent UI](https://github.com/haitang-hub/canvas-director/blob/main/web/src/components/agent/agent-panel.tsx): `web/src/components/agent/agent-panel.tsx`
- [Agent Canvas Bridge](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/canvas/hooks/use-agent-bridge.ts): `web/src/pages/canvas/hooks/use-agent-bridge.ts`
- [Local Canvas Agent](https://github.com/haitang-hub/canvas-director/blob/main/canvas-agent/src/index.ts): `canvas-agent/src/index.ts`

### Assets & Settings

- [Prompt Center](https://github.com/haitang-hub/canvas-director/blob/main/web/src/pages/prompts/index.tsx): `web/src/pages/prompts/index.tsx`
- [Local Media Assets](https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/file-storage.ts): `web/src/services/file-storage.ts`
- [Local Image Assets](https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/image-storage.ts): `web/src/services/image-storage.ts`
- [Models & Sources Config](https://github.com/haitang-hub/canvas-director/blob/main/web/src/stores/use-config-store.ts): `web/src/stores/use-config-store.ts`
- [WebDAV Sync](https://github.com/haitang-hub/canvas-director/blob/main/web/src/services/webdav-sync.ts): `web/src/services/webdav-sync.ts`

### Other components

- **Creator**
- **Configured AI Services**
- **Codex CLI**
- **WebDAV Server**

## Connections

- Creator → Web Application: opens
- Web Application → Canvas Workspace: routes to
- Canvas Workspace → Infinite Canvas: renders
- Infinite Canvas → Canvas State: updates
- Canvas Workspace → Director Desk: opens embedded
- Director Desk → 3D Scene Editor: renders
- 3D Scene Editor → Director Project State: edits
- Camera & Motion → Director Project State: records motion
- Director Desk → Capture & Export Bridge: requests exports
- Capture & Export Bridge → Canvas Workspace: returns references
- Infinite Canvas → Media Generation: starts generation
- Media Generation → Image API: requests images
- Media Generation → Video API: requests videos
- Media Generation → Audio API: requests audio
- Image API → Configured AI Services: sends requests
- Video API → Configured AI Services: sends requests
- Audio API → Configured AI Services: sends requests
- Media Generation → Canvas State: writes results
- Infinite Canvas → Plugin Runtime: renders plugin nodes
- Plugin Manager → Plugin Runtime: installs and manages
- Creator → Plugin Manager: manages plugins
- Canvas Agent UI → Agent Canvas Bridge: exchanges canvas context
- Agent Canvas Bridge → Local Canvas Agent: dispatches MCP requests
- Local Canvas Agent → Codex CLI: runs CLI
- Local Canvas Agent → Agent Canvas Bridge: streams events
- Creator → Prompt Center: searches prompts
- Prompt Center → Infinite Canvas: inserts prompts
- Infinite Canvas → Local Media Assets: stores media
- Infinite Canvas → Local Image Assets: stores images
- Models & Sources Config → Image API: provides settings
- Models & Sources Config → Video API: provides settings
- Models & Sources Config → Audio API: provides settings
- WebDAV Sync → Canvas State: syncs projects
- WebDAV Sync → Local Media Assets: syncs assets
- WebDAV Sync → WebDAV Server: transfers data