# yuxuan1/draw-studio architecture

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

- Interactive diagram: https://gitdiagram.com/yuxuan1/draw-studio
- Repository: https://github.com/yuxuan1/draw-studio

## Overview

StateFlow Studio is a browser-based visual modeling editor. Users create or open a page, edit its model through the panels and canvas, and save or export the result. The sampled runtime chiefly demonstrates a scoped process-flow editor: the app shell hosts the canvas and panels, the store manages project state and navigation, and domain and command modules provide projections and undo/redo. The README also documents state-machine and whiteboard modes, persistence, and export; their detailed runtime wiring was not sampled, so those links are marked unverified.

Main entry points: [`src/store/scopeStore.tsx`](https://github.com/yuxuan1/draw-studio/blob/main/src/store/scopeStore.tsx) (Project state), [`src/App.tsx`](https://github.com/yuxuan1/draw-studio/blob/main/src/App.tsx) (App shell), [`src/components/ScopePanels.tsx`](https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopePanels.tsx) (Editor panels), [`src/components/ScopeCanvas.tsx`](https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopeCanvas.tsx) (Scope canvas)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Editor interface"]
  node_app["App shell<br/>[App.tsx]"]
  node_panels["Editor panels<br/>[ScopePanels.tsx]"]
  node_canvas["Scope canvas<br/>[ScopeCanvas.tsx]"]
end

subgraph group_flow["Process flow"]
  node_flowedit["Flow editing<br/>[ScopeCanvas.tsx]"]
  node_hierarchy["Process outline<br/>[ScopePanels.tsx]"]
  node_projection["Scope projection<br/>[domain.ts]"]
end

subgraph group_state["State machines"]
  node_stateedit["State-machine editor<br/>[core.ts]"]
  node_tagengine["Transition labels<br/>[core.ts]"]
end

subgraph group_board["Whiteboard"]
  node_boardedit["Whiteboard editor"]
end

subgraph group_runtime["Project runtime"]
  node_scope["Project state<br/>[scopeStore.tsx]"]
  node_domain["Domain model<br/>[domain.ts]"]
  node_history["Undo history<br/>[command.ts]"]
  node_core["Shared model and labels<br/>[core.ts]"]
  node_persistence[("Local persistence<br/>[scopeStore.tsx]")]
  node_export["SVG and PNG export"]
end

node_user(("Designer"))

node_user -->|"opens editor"| node_app
node_app -->|"provides state"| node_scope
node_app -->|"renders"| node_panels
node_app -->|"renders"| node_canvas
node_panels -->|"reads and updates"| node_scope
node_canvas -->|"reads and updates"| node_scope
node_scope -->|"projects process"| node_domain
node_scope -->|"executes commands"| node_history
node_scope -.->|"loads and saves"| node_persistence
node_canvas -->|"lays out preview"| node_projection
node_panels -->|"builds outline"| node_hierarchy
node_domain -->|"builds projection"| node_projection
node_user -->|"edits flows"| node_flowedit
node_user -.->|"models states"| node_stateedit
node_stateedit -.->|"uses label syntax"| node_tagengine
node_user -.->|"annotates board"| node_boardedit
node_user -.->|"exports artwork"| node_export
node_core -->|"parses labels"| node_tagengine
node_domain -.->|"models flow data"| node_core

click node_app "https://github.com/yuxuan1/draw-studio/blob/main/src/App.tsx"
click node_panels "https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopePanels.tsx"
click node_canvas "https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopeCanvas.tsx"
click node_scope "https://github.com/yuxuan1/draw-studio/blob/main/src/store/scopeStore.tsx"
click node_domain "https://github.com/yuxuan1/draw-studio/blob/main/src/lib/domain.ts"
click node_history "https://github.com/yuxuan1/draw-studio/blob/main/src/lib/command.ts"
click node_core "https://github.com/yuxuan1/draw-studio/blob/main/src/lib/core.ts"
click node_flowedit "https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopeCanvas.tsx"
click node_hierarchy "https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopePanels.tsx"
click node_projection "https://github.com/yuxuan1/draw-studio/blob/main/src/lib/domain.ts"
click node_stateedit "https://github.com/yuxuan1/draw-studio/blob/main/src/lib/core.ts"
click node_tagengine "https://github.com/yuxuan1/draw-studio/blob/main/src/lib/core.ts"
click node_boardedit "https://github.com/yuxuan1/draw-studio/tree/main/src/components"
click node_persistence "https://github.com/yuxuan1/draw-studio/blob/main/src/store/scopeStore.tsx"
click node_export "https://github.com/yuxuan1/draw-studio/tree/main/src/components"

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_app,node_panels,node_canvas toneBlue
class node_flowedit,node_hierarchy,node_projection toneAmber
class node_stateedit,node_tagengine toneMint
class node_boardedit toneRose
class node_scope,node_domain,node_history,node_core,node_persistence,node_export,node_user toneIndigo
```

## Components

### Editor interface

- [App shell](https://github.com/yuxuan1/draw-studio/blob/main/src/App.tsx): `src/App.tsx`
- [Editor panels](https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopePanels.tsx): `src/components/ScopePanels.tsx`
- [Scope canvas](https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopeCanvas.tsx): `src/components/ScopeCanvas.tsx`

### Process flow

- [Flow editing](https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopeCanvas.tsx): `src/components/ScopeCanvas.tsx`
- [Process outline](https://github.com/yuxuan1/draw-studio/blob/main/src/components/ScopePanels.tsx): `src/components/ScopePanels.tsx`
- [Scope projection](https://github.com/yuxuan1/draw-studio/blob/main/src/lib/domain.ts): `src/lib/domain.ts`

### State machines

- [State-machine editor](https://github.com/yuxuan1/draw-studio/blob/main/src/lib/core.ts): `src/lib/core.ts`
- [Transition labels](https://github.com/yuxuan1/draw-studio/blob/main/src/lib/core.ts): `src/lib/core.ts`

### Whiteboard

- [Whiteboard editor](https://github.com/yuxuan1/draw-studio/tree/main/src/components): `src/components`

### Project runtime

- [Project state](https://github.com/yuxuan1/draw-studio/blob/main/src/store/scopeStore.tsx): `src/store/scopeStore.tsx`
- [Domain model](https://github.com/yuxuan1/draw-studio/blob/main/src/lib/domain.ts): `src/lib/domain.ts`
- [Undo history](https://github.com/yuxuan1/draw-studio/blob/main/src/lib/command.ts): `src/lib/command.ts`
- [Shared model and labels](https://github.com/yuxuan1/draw-studio/blob/main/src/lib/core.ts): `src/lib/core.ts`
- [Local persistence](https://github.com/yuxuan1/draw-studio/blob/main/src/store/scopeStore.tsx): `src/store/scopeStore.tsx`
- [SVG and PNG export](https://github.com/yuxuan1/draw-studio/tree/main/src/components): `src/components`

### Other components

- **Designer**

## Connections

- Designer → App shell: opens editor (evidence: `README.md`)
- App shell → Project state: provides state (evidence: `src/App.tsx`)
- App shell → Editor panels: renders (evidence: `src/App.tsx`)
- App shell → Scope canvas: renders (evidence: `src/App.tsx`)
- Editor panels → Project state: reads and updates (evidence: `src/components/ScopePanels.tsx`)
- Scope canvas → Project state: reads and updates (evidence: `src/components/ScopeCanvas.tsx`)
- Project state → Domain model: projects process (evidence: `src/store/scopeStore.tsx`)
- Project state → Undo history: executes commands (evidence: `src/store/scopeStore.tsx`)
- Project state → Local persistence: loads and saves (evidence: `README.md`)
- Scope canvas → Scope projection: lays out preview (evidence: `src/components/ScopeCanvas.tsx`)
- Editor panels → Process outline: builds outline (evidence: `src/components/ScopePanels.tsx`)
- Domain model → Scope projection: builds projection (evidence: `src/store/scopeStore.tsx`)
- Designer → Flow editing: edits flows (evidence: `README.md`)
- Designer → State-machine editor: models states (evidence: `README.md`)
- State-machine editor → Transition labels: uses label syntax (evidence: `README.md`)
- Designer → Whiteboard editor: annotates board (evidence: `README.md`)
- Designer → SVG and PNG export: exports artwork (evidence: `README.md`)
- Shared model and labels → Transition labels: parses labels (evidence: `src/lib/core.ts`)
- Domain model → Shared model and labels: models flow data