# victortassinari/fossflow architecture

> Architecture diagram of the GitHub repository victortassinari/fossflow, 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/victortassinari/fossflow
- Repository: https://github.com/victortassinari/fossflow

## Overview

FossFLOW is a browser-based isometric diagram editor, with a React application around the reusable Isoflow editor library and an optional server-storage backend. The main workflow is: a user edits a diagram in the editor, the app tracks the model and saves or exports it, and the user can later reopen it. The graph also reflects documented editing, icon, interaction, and offline capabilities. Some connections use documented behavior because the relevant source was not sampled; uncertain internal wiring is omitted.

Main entry points: [`packages/fossflow-lib/src/Isoflow.tsx`](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/Isoflow.tsx) (Isoflow editor), [`packages/fossflow-lib/src/hooks/useInitialDataManager.ts`](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/hooks/useInitialDataManager.ts) (Model loading), [`packages/fossflow-lib/src/interaction/useInteractionManager.ts`](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/interaction/useInteractionManager.ts) (Input handling), [`packages/fossflow-app/src/App.tsx`](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/App.tsx) (App workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App workflow<br/>[App.tsx]"]
  node_diagram_manager["Diagram manager<br/>[DiagramManager.tsx]"]
  node_storage_ui["Storage manager UI<br/>[StorageManager.tsx]"]
end

subgraph group_editor["Diagram Editor"]
  node_editor_entry["Isoflow editor<br/>[Isoflow.tsx]"]
  node_render["Scene rendering<br/>[Renderer.tsx]"]
  node_item_controls["Item controls"]
  node_transform_controls["Transform controls"]
  node_context_menu["Context actions"]
end

subgraph group_state["Model And Interaction"]
  node_interactions["Input handling"]
  node_pan["Pan controls<br/>[usePanHandlers.ts]"]
  node_initial_data["Model loading"]
  node_scene["Scene operations<br/>[useScene.ts]"]
  node_model_store["Diagram model<br/>[modelStore.tsx]"]
  node_ui_store["Editor UI state<br/>[uiStateStore.tsx]"]
  node_schemas["Model validation<br/>[model.ts]"]
end

subgraph group_storage["Persistence"]
  node_storage_service["Storage selection<br/>[storageService.ts]"]
  node_local_storage[("Browser storage")]
  node_backend["Storage API<br/>[server.js]"]
  node_filesystem[("Diagram files")]
end

node_user(("Diagram author"))

node_user -->|"edits and manages"| node_app
node_app -->|"supplies model"| node_editor_entry
node_editor_entry -->|"loads model"| node_initial_data
node_initial_data -->|"validates with"| node_schemas
node_initial_data -->|"sets model"| node_model_store
node_initial_data -->|"sets view state"| node_ui_store
node_interactions -->|"reads model"| node_model_store
node_interactions -->|"reads and updates"| node_ui_store
node_interactions -->|"uses scene"| node_scene
node_pan -->|"updates scroll"| node_ui_store
node_pan -->|"checks items"| node_scene
node_context_menu -->|"creates and reorders"| node_scene
node_context_menu -->|"reads icons"| node_model_store
node_editor_entry -->|"renders diagram"| node_render
node_editor_entry -->|"shows controls"| node_item_controls
node_editor_entry -->|"shows transforms"| node_transform_controls
node_diagram_manager -->|"loads and saves"| node_storage_service
node_app -->|"auto-saves diagrams"| node_local_storage
node_storage_ui -->|"measures and exports"| node_local_storage
node_storage_service -->|"uses session fallback"| node_local_storage
node_storage_service -.->|"checks and requests"| node_backend
node_backend -->|"reads and writes"| node_filesystem

click node_app "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/App.tsx"
click node_diagram_manager "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/components/DiagramManager.tsx"
click node_storage_ui "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/StorageManager.tsx"
click node_editor_entry "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/Isoflow.tsx"
click node_render "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/Renderer/Renderer.tsx"
click node_item_controls "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/ItemControls/ItemControlsManager.tsx"
click node_transform_controls "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/TransformControlsManager/TransformControlsManager.tsx"
click node_context_menu "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx"
click node_interactions "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/interaction/useInteractionManager.ts"
click node_pan "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/interaction/usePanHandlers.ts"
click node_initial_data "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/hooks/useInitialDataManager.ts"
click node_scene "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/hooks/useScene.ts"
click node_model_store "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/stores/modelStore.tsx"
click node_ui_store "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/stores/uiStateStore.tsx"
click node_schemas "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/schemas/model.ts"
click node_storage_service "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/services/storageService.ts"
click node_backend "https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-backend/server.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_app,node_diagram_manager,node_storage_ui toneBlue
class node_editor_entry,node_render,node_item_controls,node_transform_controls,node_context_menu toneAmber
class node_interactions,node_pan,node_initial_data,node_scene,node_model_store,node_ui_store,node_schemas toneMint
class node_storage_service,node_local_storage,node_backend,node_filesystem toneRose
class node_user toneIndigo
```

## Components

### Application

- [App workflow](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/App.tsx): `packages/fossflow-app/src/App.tsx`
- [Diagram manager](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/components/DiagramManager.tsx): `packages/fossflow-app/src/components/DiagramManager.tsx`
- [Storage manager UI](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/StorageManager.tsx): `packages/fossflow-app/src/StorageManager.tsx`

### Diagram Editor

- [Isoflow editor](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/Isoflow.tsx): `packages/fossflow-lib/src/Isoflow.tsx`
- [Scene rendering](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/Renderer/Renderer.tsx): `packages/fossflow-lib/src/components/Renderer/Renderer.tsx`
- [Item controls](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/ItemControls/ItemControlsManager.tsx): `packages/fossflow-lib/src/components/ItemControls/ItemControlsManager.tsx`
- [Transform controls](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/TransformControlsManager/TransformControlsManager.tsx): `packages/fossflow-lib/src/components/TransformControlsManager/TransformControlsManager.tsx`
- [Context actions](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx): `packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx`

### Model And Interaction

- [Input handling](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/interaction/useInteractionManager.ts): `packages/fossflow-lib/src/interaction/useInteractionManager.ts`
- [Pan controls](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/interaction/usePanHandlers.ts): `packages/fossflow-lib/src/interaction/usePanHandlers.ts`
- [Model loading](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/hooks/useInitialDataManager.ts): `packages/fossflow-lib/src/hooks/useInitialDataManager.ts`
- [Scene operations](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/hooks/useScene.ts): `packages/fossflow-lib/src/hooks/useScene.ts`
- [Diagram model](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/stores/modelStore.tsx): `packages/fossflow-lib/src/stores/modelStore.tsx`
- [Editor UI state](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/stores/uiStateStore.tsx): `packages/fossflow-lib/src/stores/uiStateStore.tsx`
- [Model validation](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-lib/src/schemas/model.ts): `packages/fossflow-lib/src/schemas/model.ts`

### Persistence

- [Storage selection](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-app/src/services/storageService.ts): `packages/fossflow-app/src/services/storageService.ts`
- **Browser storage**
- [Storage API](https://github.com/victortassinari/fossflow/blob/master/packages/fossflow-backend/server.js): `packages/fossflow-backend/server.js`
- **Diagram files**

### Other components

- **Diagram author**

## Connections

- Diagram author → App workflow: edits and manages
- App workflow → Isoflow editor: supplies model
- Isoflow editor → Model loading: loads model
- Model loading → Model validation: validates with
- Model loading → Diagram model: sets model
- Model loading → Editor UI state: sets view state
- Input handling → Diagram model: reads model
- Input handling → Editor UI state: reads and updates
- Input handling → Scene operations: uses scene
- Pan controls → Editor UI state: updates scroll
- Pan controls → Scene operations: checks items
- Context actions → Scene operations: creates and reorders
- Context actions → Diagram model: reads icons
- Isoflow editor → Scene rendering: renders diagram
- Isoflow editor → Item controls: shows controls
- Isoflow editor → Transform controls: shows transforms
- Diagram manager → Storage selection: loads and saves
- App workflow → Browser storage: auto-saves diagrams
- Storage manager UI → Browser storage: measures and exports
- Storage selection → Browser storage: uses session fallback
- Storage selection → Storage API: checks and requests
- Storage API → Diagram files: reads and writes