Collaborative diagram editor with real time multi user collaboration

Key Features

• Real-Time collaboration
• CRUD operations
• Keyboard shortcuts
  • Undo, Delete
• File persistence
  • Save new diagrams to be accessed later
  • Load diagrams that were previously created
• Websocket communication
  • Live synchronization between clients across multiple devices

Tech Stack

• Frontend
  • React, TypeScript
    • UI Components and state management
• Backend
  • Node.js, websocket
    • Relay
• Diagram editor
  • ReactFlow
    • Interactive node/edge editor
• Real time sync
  • Yjs, y-websocket
    • Collaborative editing
• Storage
  • File System, JSON
    • Diagram Persistence across devices
• Deployment
  • Railway, Vercel
    • Server and client hosting

Key API endpoints

• GET /api/diagrams - Lists all diagrams
• POST /api/diagrams - Creates a new diagram
• GET /api/diagrams/:id - Gets a specific diagram
• DELETE /api/diagrams/:id - Deletes a specific diagram

Core Components

1. DiagramYjs Responsibilities:

• Main diagram editor
• ReactFlow integration
• Node and Edge selection
• Keyboard shortcuts

2. useYjsDiagram Responsibilities:

• Yjs document management
• websocket connection handling
• real time sync
• CRUD operations for nodes and edges

3. DiagramManager Responsibilities:

• Diagram list management
• Save and load operations

4. DiagramService Responsibilities:

• HTTPS API communication
• error handling

Data Flow

1. Diagram Creation: User Action → ReactFlow → useYjsDiagram → Yjs Document → WebSocket → Other Clients
2. Diagram Persistence: User Save → DiagramService → HTTP POST → Server → JSON File Storage
3. Real time sync: User Edit → Yjs Document → WebSocket → Server → Other Clients → Yjs Document

Deployment

1. Client -> Vercel
2. Server -> Railway

Current Limitations

• Single Collaboration Space
• Save/Load is easily overwritten by collaborators
• Undo history lost on load
• Single node/edge type
• No visual styling options
• No node lookup
• No auto save
• New nodes are added to the diagram in a disorganized manner
• Multiple saves can overwrite each other

Future Enhancements

1. Visual Features:

• Multi Select for Nodes and Edges
• Copy Paste Sections of a diagram
• Node Resizing
• Diagram templates

2. Node & Edge Features:

• Multiple node/edge types
• Node/Edge Styling (Colors, Backgrounds, etc...)
• Search for Specific node

3. File Operations

• Diagram Export functionality
• Auto Save

4. Collaboration

• Visual cursor tracking for all clients
• Collaboration indicators
• Room switching

5. Database Migration

• Swap from File Storage to something like supabase or firebase
• Data backup

6. Architectural Improvements

• Dynamic room management
• Conflict resolution between save and load

7. Security/Performance could be improved upon