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

Practice

1. What is the main purpose of an activity diagram in system design?

easy

A. To visually show the flow of tasks and decisions in a process

B. To list all database tables and their relationships

C. To define the hardware requirements for a system

D. To write the detailed code for each function

Solution

1. Step 1: Understand activity diagram purpose

   Activity diagrams are used to show how tasks flow and decisions are made in a process.

2. Step 2: Compare with other options

   Options B, C, and D describe database design, hardware planning, and coding, which are not the role of activity diagrams.

3. Final Answer:

   To visually show the flow of tasks and decisions in a process -> Option A

4. Quick Check:

   Activity diagram = task flow visualization [OK]

Hint: Activity diagrams map task flows, not data or code [OK]

Common Mistakes:

• Confusing activity diagrams with database diagrams
• Thinking activity diagrams show code details
• Mixing hardware design with activity flow

2. Which of the following is the correct symbol for a decision point in an activity diagram?

easy

A. A rectangle with rounded corners

B. A circle with a thick border

C. A diamond shape

D. A parallelogram

Solution

1. Step 1: Recall activity diagram symbols

   Decision points in activity diagrams are shown as diamond shapes to represent branching.

2. Step 2: Identify other symbols

   Rectangles with rounded corners are actions, circles with thick borders are start/end nodes, and parallelograms are not standard in activity diagrams.

3. Final Answer:

   A diamond shape -> Option C

4. Quick Check:

   Decision symbol = diamond [OK]

Hint: Decision points always use diamond shapes [OK]

Common Mistakes:

• Confusing decision diamonds with action rectangles
• Using circles for decisions
• Mixing input/output symbols with decisions

3. Consider this activity diagram snippet:

Start -> Action A -> Decision (Yes/No)
Yes -> Action B -> End
No -> Action C -> End

What is the correct flow if the decision is 'No'?

medium

A. Start -> Action A -> Action B -> End

B. Start -> Action A -> End

C. Start -> Action A -> Decision -> Action B -> Action C -> End

D. Start -> Action A -> Action C -> End

Solution

1. Step 1: Trace the flow for 'No' decision

   From the decision node, if the answer is 'No', the flow goes to Action C, then to End.

2. Step 2: Verify other options

   Start -> Action A -> Action B -> End follows 'Yes' path, Start -> Action A -> Decision -> Action B -> Action C -> End incorrectly chains both actions, Start -> Action A -> End skips actions after decision.

3. Final Answer:

   Start -> Action A -> Action C -> End -> Option D

4. Quick Check:

   'No' decision leads to Action C [OK]

Hint: Follow arrows from decision to correct action [OK]

Common Mistakes:

• Mixing 'Yes' and 'No' paths
• Skipping actions after decision
• Assuming both paths run together

4. In an activity diagram, a developer mistakenly connects two actions with a double arrow instead of a single arrow. What is the likely issue?

medium

A. There is no difference; arrows can be single or double

B. The flow will be interpreted as parallel execution, causing confusion

C. The double arrow means the process loops infinitely

D. The diagram will show a syntax error and not render

Solution

1. Step 1: Understand arrow meaning in activity diagrams

   Single arrows show normal flow; double arrows often indicate parallel or concurrent flows.

2. Step 2: Analyze impact of double arrow misuse

   Using double arrows between two actions may confuse readers into thinking tasks run in parallel, which is incorrect if not intended.

3. Final Answer:

   The flow will be interpreted as parallel execution, causing confusion -> Option B

4. Quick Check:

   Double arrow = parallel flow confusion [OK]

Hint: Single arrow = flow; double arrow = parallel flow [OK]

Common Mistakes:

• Assuming double arrows cause syntax errors
• Thinking double arrows mean loops
• Ignoring arrow style importance

5. You need to design an activity diagram for a user login process that includes entering credentials, validating them, and either granting access or showing an error. Which sequence correctly represents this flow?

hard

A. Start -> Enter Credentials -> Validate -> Decision (Valid?) -> Access Granted / Show Error -> End

B. Start -> Validate -> Enter Credentials -> Decision (Valid?) -> Access Granted / Show Error -> End

C. Start -> Enter Credentials -> Decision (Valid?) -> Validate -> Access Granted / Show Error -> End

D. Start -> Enter Credentials -> Access Granted -> Validate -> Show Error -> End

Solution

1. Step 1: Identify correct logical order

   User must first enter credentials, then system validates them before deciding validity.

2. Step 2: Check each option's sequence

   Start -> Enter Credentials -> Validate -> Decision (Valid?) -> Access Granted / Show Error -> End follows logical order: enter -> validate -> decision -> outcome. Others have steps out of order.

3. Final Answer:

   Start -> Enter Credentials -> Validate -> Decision (Valid?) -> Access Granted / Show Error -> End -> Option A

4. Quick Check:

   Login flow = enter -> validate -> decide -> outcome [OK]

Hint: Follow real process order: input, check, decide, respond [OK]

Common Mistakes:

• Placing validation before input
• Skipping decision step
• Mixing outcome order