How jbraunsmajr/system-design works
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: App.tsx Application · transport.ts Peer transport · main.ts Store process · RequirementsView.tsx Requirements view
Components 23
Diagram editor
- Application
src/App.tsx - Diagram canvas
src/components/Canvas.tsx - Scenario panels
src/components/ScenarioPanel.tsx - Shape and icon libraries
src/components/LibraryManagerModal.tsx
Requirements planning
- Requirements view
src/components/requirements/RequirementsView.tsx - Requirement relationships
src/components/requirements/RelationshipManager.tsx - PI timeline
src/components/timeline/TimelineView.tsx - Capacity reservations
src/components/timeline/ManageReservationsModal.tsx - Team planning
src/components/team/TeamView.tsx
Collaboration
- Workspace sync
src/collab/useWorkspaceSync.ts - Peer transport
src/collab/transport.ts - Signaling relay
docker/signaling/package.json - Store client
src/collab/storeClient.ts
Browser documents
- Local document model
src/collab/localDocument.ts - Document manager
src/components/DocumentManager.tsx - Document library
src/collab/documentLibrary.ts - Browser persistence
src/domain/indexedDbBackend.ts
Store service
- Store process
store/src/main.ts - Store HTTP API
store/src/httpService.ts - Postgres backend
store/src/postgresStore.ts
Other components
- Editor user
- Other browser peers
- PostgreSQL
Connections 21
- 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