# xuanyustudio/localminidrama architecture

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

- Interactive diagram: https://gitdiagram.com/xuanyustudio/localminidrama
- Repository: https://github.com/xuanyustudio/localminidrama

## Overview

LocalMiniDrama is a local-first AI short-drama and comic-drama creator. A creator develops a drama from story and episodes through character, scene, and prop assets, then storyboards, generated images/video, and episode assembly. The README also documents list and canvas editing, batch workflows, shared asset libraries, imports/exports, and configurable AI providers. Source excerpts support the app setup, task polling, and local storage details; several feature connections are based on documented capabilities and the repository’s route/service layout.

Main entry points: [`backend-node/src/routes/index.js`](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/routes/index.js) (API routes), [`frontweb/src/api/generation.js`](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/api/generation.js) (Frontend API clients), [`frontweb/src/views/DramaDetail.vue`](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/views/DramaDetail.vue) (Drama views), [`backend-node/src/services/storageLayout.js`](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storageLayout.js) (Local media storage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Drama authoring"]
  node_web["Vue application<br/>[main.js]"]
  node_drama_views["Drama views<br/>[DramaDetail.vue]"]
  node_canvas["Canvas workflow<br/>[DramaCanvas.vue]"]
  node_story_ui["Story generation"]
  node_asset_ui["Asset editing<br/>[useCharacters.js]"]
  node_storyboard_ui["Storyboard editing<br/>[storyboards.js]"]
  node_task_state["Generation task state"]
  node_api["Frontend API clients<br/>[generation.js]"]
end

subgraph group_production["Media production"]
  node_image_service["Image generation<br/>[imageService.js]"]
  node_video_service["Video generation<br/>[videoService.js]"]
  node_merge_service["Episode assembly"]
  node_ai{{"AI providers"}}
end

subgraph group_backend["Backend domain"]
  node_api_router["API routes<br/>[index.js]"]
  node_story_service["Story and drama"]
  node_asset_services["Character scene prop"]
  node_storyboard_service["Storyboard generation"]
end

subgraph group_runtime["Local runtime"]
  node_database[("SQLite database<br/>[index.js]")]
  node_storage[("Local media storage<br/>[storageLayout.js]")]
  node_app["Express application<br/>[app.js]"]
end

node_creator(("Creator"))

node_creator -->|"uses"| node_web
node_web -->|"opens"| node_drama_views
node_web -->|"opens"| node_canvas
node_drama_views -->|"starts story"| node_story_ui
node_drama_views -->|"edits assets"| node_asset_ui
node_drama_views -->|"edits boards"| node_storyboard_ui
node_canvas -->|"orchestrates boards"| node_storyboard_ui
node_story_ui -->|"requests generation"| node_api
node_asset_ui -->|"requests assets"| node_api
node_storyboard_ui -->|"requests boards"| node_api
node_canvas -->|"tracks tasks"| node_task_state
node_task_state -->|"polls tasks"| node_api
node_api -->|"sends requests"| node_app
node_app -->|"mounts routes"| node_api_router
node_api_router -->|"dispatches"| node_story_service
node_api_router -->|"dispatches"| node_asset_services
node_api_router -->|"dispatches"| node_storyboard_service
node_story_service -->|"stores drama"| node_database
node_asset_services -->|"generates assets"| node_ai
node_storyboard_service -->|"generates boards"| node_ai
node_storyboard_service -->|"stores boards"| node_database
node_api_router -->|"dispatches"| node_image_service
node_api_router -->|"dispatches"| node_video_service
node_api_router -->|"dispatches"| node_merge_service
node_image_service -->|"generates images"| node_ai
node_video_service -->|"generates clips"| node_ai
node_image_service -->|"writes media"| node_storage
node_video_service -->|"writes media"| node_storage
node_merge_service -->|"writes episode"| node_storage
node_app -->|"serves static media"| node_storage

click node_web "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/main.js"
click node_drama_views "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/views/DramaDetail.vue"
click node_canvas "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/views/DramaCanvas.vue"
click node_story_ui "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/composables/useStoryGeneration.js"
click node_asset_ui "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/composables/filmCreate/useCharacters.js"
click node_storyboard_ui "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/api/storyboards.js"
click node_task_state "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/stores/generationTaskStore.js"
click node_api "https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/api/generation.js"
click node_api_router "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/routes/index.js"
click node_story_service "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storyGenerationService.js"
click node_asset_services "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/characterGenerationService.js"
click node_storyboard_service "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storyboardService.js"
click node_image_service "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/imageService.js"
click node_video_service "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/videoService.js"
click node_merge_service "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/videoMergeService.js"
click node_database "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/db/index.js"
click node_storage "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storageLayout.js"
click node_app "https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/app.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_web,node_drama_views,node_canvas,node_story_ui,node_asset_ui,node_storyboard_ui,node_task_state,node_api toneBlue
class node_image_service,node_video_service,node_merge_service,node_ai toneAmber
class node_api_router,node_story_service,node_asset_services,node_storyboard_service toneMint
class node_database,node_storage,node_app toneRose
class node_creator toneIndigo
```

## Components

### Drama authoring

- [Vue application](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/main.js): `frontweb/src/main.js`
- [Drama views](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/views/DramaDetail.vue): `frontweb/src/views/DramaDetail.vue`
- [Canvas workflow](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/views/DramaCanvas.vue): `frontweb/src/views/DramaCanvas.vue`
- [Story generation](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/composables/useStoryGeneration.js): `frontweb/src/composables/useStoryGeneration.js`
- [Asset editing](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/composables/filmCreate/useCharacters.js): `frontweb/src/composables/filmCreate/useCharacters.js`
- [Storyboard editing](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/api/storyboards.js): `frontweb/src/api/storyboards.js`
- [Generation task state](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/stores/generationTaskStore.js): `frontweb/src/stores/generationTaskStore.js`
- [Frontend API clients](https://github.com/xuanyustudio/localminidrama/blob/main/frontweb/src/api/generation.js): `frontweb/src/api/generation.js`

### Media production

- [Image generation](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/imageService.js): `backend-node/src/services/imageService.js`
- [Video generation](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/videoService.js): `backend-node/src/services/videoService.js`
- [Episode assembly](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/videoMergeService.js): `backend-node/src/services/videoMergeService.js`
- **AI providers**

### Backend domain

- [API routes](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/routes/index.js): `backend-node/src/routes/index.js`
- [Story and drama](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storyGenerationService.js): `backend-node/src/services/storyGenerationService.js`
- [Character scene prop](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/characterGenerationService.js): `backend-node/src/services/characterGenerationService.js`
- [Storyboard generation](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storyboardService.js): `backend-node/src/services/storyboardService.js`

### Local runtime

- [SQLite database](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/db/index.js): `backend-node/src/db/index.js`
- [Local media storage](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/services/storageLayout.js): `backend-node/src/services/storageLayout.js`
- [Express application](https://github.com/xuanyustudio/localminidrama/blob/main/backend-node/src/app.js): `backend-node/src/app.js`

### Other components

- **Creator**

## Connections

- Creator → Vue application: uses
- Vue application → Drama views: opens
- Vue application → Canvas workflow: opens
- Drama views → Story generation: starts story
- Drama views → Asset editing: edits assets
- Drama views → Storyboard editing: edits boards
- Canvas workflow → Storyboard editing: orchestrates boards
- Story generation → Frontend API clients: requests generation
- Asset editing → Frontend API clients: requests assets
- Storyboard editing → Frontend API clients: requests boards
- Canvas workflow → Generation task state: tracks tasks
- Generation task state → Frontend API clients: polls tasks
- Frontend API clients → Express application: sends requests
- Express application → API routes: mounts routes
- API routes → Story and drama: dispatches
- API routes → Character scene prop: dispatches
- API routes → Storyboard generation: dispatches
- Story and drama → SQLite database: stores drama
- Character scene prop → AI providers: generates assets
- Storyboard generation → AI providers: generates boards
- Storyboard generation → SQLite database: stores boards
- API routes → Image generation: dispatches
- API routes → Video generation: dispatches
- API routes → Episode assembly: dispatches
- Image generation → AI providers: generates images
- Video generation → AI providers: generates clips
- Image generation → Local media storage: writes media
- Video generation → Local media storage: writes media
- Episode assembly → Local media storage: writes episode
- Express application → Local media storage: serves static media