Activity diagrams in LLD - System Design Exercise

Design: Activity Diagram Modeling System

Focus on core activity diagram creation, editing, and visualization features. Out of scope are advanced UML features like sequence diagrams or class diagrams.

Functional Requirements

FR1: Allow users to create activity diagrams representing workflows

FR2: Support basic activity diagram elements: activities, decisions, start/end nodes, and transitions

FR3: Enable visualization of the flow of control between activities

FR4: Allow export of diagrams in common image formats

FR5: Support editing and updating existing diagrams

Non-Functional Requirements

NFR1: Handle up to 1000 concurrent users editing diagrams

NFR2: Diagram rendering latency under 300ms for typical diagrams

NFR3: Availability target of 99.5% uptime

NFR4: Support diagrams with up to 100 activities and transitions

Think Before You Design

Questions to Ask

❓ Question 1

❓ Question 2

❓ Question 3

❓ Question 4

❓ Question 5

Key Components

User interface for diagram creation and editing

Diagram rendering engine

Backend service for storing diagrams

Authentication and authorization

Export service for image generation

Design Patterns

Model-View-Controller (MVC) for UI separation

Command pattern for undo/redo functionality

Event-driven updates for real-time collaboration

Caching for fast diagram retrieval

Reference Architecture

  +-------------+       +----------------+       +--------------+
  |   Frontend  | <---> | Backend API    | <---> | Database     |
  | (UI + SVG) |       | (Diagram Logic)|       | (Diagram DB) |
  +-------------+       +----------------+       +--------------+
         |                      |
         |                      v
         |               +--------------+
         |               | Export Service|
         |               +--------------+

Components

Frontend UI

React with SVG rendering

Allow users to create, edit, and visualize activity diagrams interactively

Backend API

Node.js with Express

Handle diagram data storage, retrieval, and business logic

Database

PostgreSQL

Store diagram definitions and user metadata

Export Service

Headless browser or SVG to PNG converter

Generate image exports of activity diagrams

Authentication Service

OAuth 2.0

Manage user login and permissions

Request Flow

1. User opens frontend UI and logs in via Authentication Service

2. User creates or loads an activity diagram from Backend API

3. Frontend renders diagram using SVG elements

4. User edits diagram; changes sent to Backend API to update database

5. User requests export; Backend calls Export Service to generate image

6. Exported image returned to user for download

Database Schema

Entities: - User (id, username, email, hashed_password) - Diagram (id, user_id FK, name, created_at, updated_at) - ActivityNode (id, diagram_id FK, type [start, activity, decision, end], label, position_x, position_y) - Transition (id, diagram_id FK, from_node_id FK, to_node_id FK, condition_label) Relationships: - User 1:N Diagram - Diagram 1:N ActivityNode - Diagram 1:N Transition - Transition connects ActivityNodes within the same Diagram

Scaling Discussion

Bottlenecks

Backend API becomes slow with many concurrent diagram edits

Database performance degrades with large numbers of diagrams

Export Service slows down with complex diagrams or many export requests

Frontend rendering lags with very large diagrams

Solutions

Use load balancers and horizontally scale Backend API servers

Implement database indexing and partitioning; use caching for frequently accessed diagrams

Queue export requests and scale Export Service instances; use async processing

Optimize frontend rendering with virtual scrolling and incremental updates

Interview Tips

Time: 10 minutes for requirements and clarifications, 20 minutes for architecture and data flow, 10 minutes for scaling discussion, 5 minutes for questions

Clarify user needs and diagram features before designing

Explain choice of technologies and how they fit requirements

Describe how activity diagram elements map to data model

Discuss latency and availability targets and how architecture meets them

Address scaling challenges and solutions clearly