How yuxuan1/draw-studio works
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: scopeStore.tsx Project state · App.tsx App shell · ScopePanels.tsx Editor panels · ScopeCanvas.tsx Scope canvas
Components 16
Editor interface
- App shell
src/App.tsx - Editor panels
src/components/ScopePanels.tsx - Scope canvas
src/components/ScopeCanvas.tsx
Process flow
- Flow editing
src/components/ScopeCanvas.tsx - Process outline
src/components/ScopePanels.tsx - Scope projection
src/lib/domain.ts
State machines
- State-machine editor
src/lib/core.ts - Transition labels
src/lib/core.ts
Whiteboard
- Whiteboard editor
src/components
Project runtime
- Project state
src/store/scopeStore.tsx - Domain model
src/lib/domain.ts - Undo history
src/lib/command.ts - Shared model and labels
src/lib/core.ts - Local persistence
src/store/scopeStore.tsx - SVG and PNG export
src/components
Other components
- Designer
Connections 19
- Designer → App shell: opens editor
README.md - App shell → Project state: provides state
src/App.tsx - App shell → Editor panels: renders
src/App.tsx - App shell → Scope canvas: renders
src/App.tsx - Editor panels → Project state: reads and updates
src/components/ScopePanels.tsx - Scope canvas → Project state: reads and updates
src/components/ScopeCanvas.tsx - Project state → Domain model: projects process
src/store/scopeStore.tsx - Project state → Undo history: executes commands
src/store/scopeStore.tsx - Project state → Local persistence: loads and saves
README.md - Scope canvas → Scope projection: lays out preview
src/components/ScopeCanvas.tsx - Editor panels → Process outline: builds outline
src/components/ScopePanels.tsx - Domain model → Scope projection: builds projection
src/store/scopeStore.tsx - Designer → Flow editing: edits flows
README.md - Designer → State-machine editor: models states
README.md - State-machine editor → Transition labels: uses label syntax
README.md - Designer → Whiteboard editor: annotates board
README.md - Designer → SVG and PNG export: exports artwork
README.md - Shared model and labels → Transition labels: parses labels
src/lib/core.ts - Domain model → Shared model and labels: models flow data