# jbraunsmajr/system-design architecture

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

- Interactive diagram: https://gitdiagram.com/jbraunsmajr/system-design
- Repository: https://github.com/jbraunsmajr/system-design

## Overview

System Design Editor is a browser-based collaborative tool for diagrams, requirements, PI planning, and scenario presentations. The user opens a document in the app, edits diagram or planning content, and may collaborate with peers; documents can also be saved locally or handled by the separately deployable store service. The README documents the peer-to-peer model and relay’s handshake-only role. Sampled files support app initialization, document management, capacity calculation, and store assembly; unsampled subsystem wiring is shown only where documented or evident from module responsibilities.

Main entry points: [`src/App.tsx`](https://github.com/jbraunsmajr/system-design/blob/main/src/App.tsx) (Application), [`src/collab/transport.ts`](https://github.com/jbraunsmajr/system-design/blob/main/src/collab/transport.ts) (Peer transport), [`store/src/main.ts`](https://github.com/jbraunsmajr/system-design/blob/main/store/src/main.ts) (Store process), [`src/components/requirements/RequirementsView.tsx`](https://github.com/jbraunsmajr/system-design/blob/main/src/components/requirements/RequirementsView.tsx) (Requirements view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Diagram editor"]
  node_app["Application<br/>[App.tsx]"]
  node_canvas["Diagram canvas<br/>[Canvas.tsx]"]
  node_scenario["Scenario panels<br/>[ScenarioPanel.tsx]"]
  node_assetlibs["Shape and icon libraries"]
end

subgraph group_planning["Requirements planning"]
  node_requirements["Requirements view"]
  node_relationships["Requirement relationships"]
  node_timeline["PI timeline<br/>[TimelineView.tsx]"]
  node_reservations["Capacity reservations"]
  node_team["Team planning<br/>[TeamView.tsx]"]
end

subgraph group_collaboration["Collaboration"]
  node_sync["Workspace sync"]
  node_transport["Peer transport<br/>[transport.ts]"]
  node_relay["Signaling relay<br/>[package.json]"]
  node_storeclient["Store client<br/>[storeClient.ts]"]
end

subgraph group_browser["Browser documents"]
  node_localdoc["Local document model<br/>[localDocument.ts]"]
  node_docmanager["Document manager"]
  node_doclibrary["Document library<br/>[documentLibrary.ts]"]
  node_indexeddb[("Browser persistence")]
end

subgraph group_service["Store service"]
  node_storemain["Store process<br/>[main.ts]"]
  node_http["Store HTTP API<br/>[httpService.ts]"]
  node_postgres[("Postgres backend<br/>[postgresStore.ts]")]
end

node_user(("Editor user"))
node_peer(("Other browser peers"))
node_database[("PostgreSQL")]

node_user -->|"edits in"| node_app
node_app -->|"presents canvas"| node_canvas
node_app -->|"presents scenarios"| node_scenario
node_app -->|"manages libraries"| node_assetlibs
node_app -->|"presents requirements"| node_requirements
node_requirements -->|"manages links"| node_relationships
node_app -->|"presents planning"| node_timeline
node_timeline -->|"configures capacity"| node_reservations
node_app -->|"presents team planning"| node_team
node_app -->|"edits document"| node_localdoc
node_app -->|"manages documents"| node_docmanager
node_docmanager -->|"lists and changes"| node_doclibrary
node_doclibrary -->|"persists locally"| node_indexeddb
node_sync -->|"syncs updates"| node_transport
node_transport -->|"exchanges document data"| node_peer
node_transport -.->|"requests handshake"| node_relay
node_app -.->|"enables collaboration"| node_sync
node_app -.->|"uses remote store"| node_storeclient
node_storemain -->|"serves API"| node_http
node_storemain -->|"configures backend"| node_postgres
node_postgres -->|"reads and writes"| node_database

click node_app "https://github.com/jbraunsmajr/system-design/blob/main/src/App.tsx"
click node_canvas "https://github.com/jbraunsmajr/system-design/blob/main/src/components/Canvas.tsx"
click node_scenario "https://github.com/jbraunsmajr/system-design/blob/main/src/components/ScenarioPanel.tsx"
click node_assetlibs "https://github.com/jbraunsmajr/system-design/blob/main/src/components/LibraryManagerModal.tsx"
click node_requirements "https://github.com/jbraunsmajr/system-design/blob/main/src/components/requirements/RequirementsView.tsx"
click node_relationships "https://github.com/jbraunsmajr/system-design/blob/main/src/components/requirements/RelationshipManager.tsx"
click node_timeline "https://github.com/jbraunsmajr/system-design/blob/main/src/components/timeline/TimelineView.tsx"
click node_reservations "https://github.com/jbraunsmajr/system-design/blob/main/src/components/timeline/ManageReservationsModal.tsx"
click node_team "https://github.com/jbraunsmajr/system-design/blob/main/src/components/team/TeamView.tsx"
click node_localdoc "https://github.com/jbraunsmajr/system-design/blob/main/src/collab/localDocument.ts"
click node_docmanager "https://github.com/jbraunsmajr/system-design/blob/main/src/components/DocumentManager.tsx"
click node_doclibrary "https://github.com/jbraunsmajr/system-design/blob/main/src/collab/documentLibrary.ts"
click node_indexeddb "https://github.com/jbraunsmajr/system-design/blob/main/src/domain/indexedDbBackend.ts"
click node_sync "https://github.com/jbraunsmajr/system-design/blob/main/src/collab/useWorkspaceSync.ts"
click node_transport "https://github.com/jbraunsmajr/system-design/blob/main/src/collab/transport.ts"
click node_relay "https://github.com/jbraunsmajr/system-design/blob/main/docker/signaling/package.json"
click node_storeclient "https://github.com/jbraunsmajr/system-design/blob/main/src/collab/storeClient.ts"
click node_storemain "https://github.com/jbraunsmajr/system-design/blob/main/store/src/main.ts"
click node_http "https://github.com/jbraunsmajr/system-design/blob/main/store/src/httpService.ts"
click node_postgres "https://github.com/jbraunsmajr/system-design/blob/main/store/src/postgresStore.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_app,node_canvas,node_scenario,node_assetlibs,node_user,node_peer toneBlue
class node_requirements,node_relationships,node_timeline,node_reservations,node_team,node_database toneAmber
class node_sync,node_transport,node_relay,node_storeclient toneMint
class node_localdoc,node_docmanager,node_doclibrary,node_indexeddb toneRose
class node_storemain,node_http,node_postgres toneIndigo
```

## Components

### Diagram editor

- [Application](https://github.com/jbraunsmajr/system-design/blob/main/src/App.tsx): `src/App.tsx`
- [Diagram canvas](https://github.com/jbraunsmajr/system-design/blob/main/src/components/Canvas.tsx): `src/components/Canvas.tsx`
- [Scenario panels](https://github.com/jbraunsmajr/system-design/blob/main/src/components/ScenarioPanel.tsx): `src/components/ScenarioPanel.tsx`
- [Shape and icon libraries](https://github.com/jbraunsmajr/system-design/blob/main/src/components/LibraryManagerModal.tsx): `src/components/LibraryManagerModal.tsx`

### Requirements planning

- [Requirements view](https://github.com/jbraunsmajr/system-design/blob/main/src/components/requirements/RequirementsView.tsx): `src/components/requirements/RequirementsView.tsx`
- [Requirement relationships](https://github.com/jbraunsmajr/system-design/blob/main/src/components/requirements/RelationshipManager.tsx): `src/components/requirements/RelationshipManager.tsx`
- [PI timeline](https://github.com/jbraunsmajr/system-design/blob/main/src/components/timeline/TimelineView.tsx): `src/components/timeline/TimelineView.tsx`
- [Capacity reservations](https://github.com/jbraunsmajr/system-design/blob/main/src/components/timeline/ManageReservationsModal.tsx): `src/components/timeline/ManageReservationsModal.tsx`
- [Team planning](https://github.com/jbraunsmajr/system-design/blob/main/src/components/team/TeamView.tsx): `src/components/team/TeamView.tsx`

### Collaboration

- [Workspace sync](https://github.com/jbraunsmajr/system-design/blob/main/src/collab/useWorkspaceSync.ts): `src/collab/useWorkspaceSync.ts`
- [Peer transport](https://github.com/jbraunsmajr/system-design/blob/main/src/collab/transport.ts): `src/collab/transport.ts`
- [Signaling relay](https://github.com/jbraunsmajr/system-design/blob/main/docker/signaling/package.json): `docker/signaling/package.json`
- [Store client](https://github.com/jbraunsmajr/system-design/blob/main/src/collab/storeClient.ts): `src/collab/storeClient.ts`

### Browser documents

- [Local document model](https://github.com/jbraunsmajr/system-design/blob/main/src/collab/localDocument.ts): `src/collab/localDocument.ts`
- [Document manager](https://github.com/jbraunsmajr/system-design/blob/main/src/components/DocumentManager.tsx): `src/components/DocumentManager.tsx`
- [Document library](https://github.com/jbraunsmajr/system-design/blob/main/src/collab/documentLibrary.ts): `src/collab/documentLibrary.ts`
- [Browser persistence](https://github.com/jbraunsmajr/system-design/blob/main/src/domain/indexedDbBackend.ts): `src/domain/indexedDbBackend.ts`

### Store service

- [Store process](https://github.com/jbraunsmajr/system-design/blob/main/store/src/main.ts): `store/src/main.ts`
- [Store HTTP API](https://github.com/jbraunsmajr/system-design/blob/main/store/src/httpService.ts): `store/src/httpService.ts`
- [Postgres backend](https://github.com/jbraunsmajr/system-design/blob/main/store/src/postgresStore.ts): `store/src/postgresStore.ts`

### Other components

- **Editor user**
- **Other browser peers**
- **PostgreSQL**

## Connections

- Editor user → Application: edits in
- Application → Diagram canvas: presents canvas
- Application → Scenario panels: presents scenarios
- Application → Shape and icon libraries: manages libraries
- Application → Requirements view: presents requirements
- Requirements view → Requirement relationships: manages links
- Application → PI timeline: presents planning
- PI timeline → Capacity reservations: configures capacity
- Application → Team planning: presents team planning
- Application → Local document model: edits document
- Application → Document manager: manages documents
- Document manager → Document library: lists and changes
- Document library → Browser persistence: persists locally
- Workspace sync → Peer transport: syncs updates
- Peer transport → Other browser peers: exchanges document data
- Peer transport → Signaling relay: requests handshake
- Application → Workspace sync: enables collaboration
- Application → Store client: uses remote store
- Store process → Store HTTP API: serves API
- Store process → Postgres backend: configures backend
- Postgres backend → PostgreSQL: reads and writes