How to Read Class & Sequence Diagrams

You open an unfamiliar codebase, and the whiteboard already holds three boxes joined by arrows. Everyone else keeps talking while you are still decoding the marks. Unified Modeling Language (UML) is a shared visual notation for turning those marks into a design you can read together.

A class is a box in three parts

A class diagram is a snapshot of the types in a design and the relationships between them. Each class is a type that groups data with the operations that work on that data—the code equivalent of a blueprint.

UML draws a class as a rectangle with three compartments:

1. The class name identifies the type.
2. A field is a piece of data stored by the class. Fields sit in the middle compartment.
3. A method is an operation the class can perform. Methods sit in the bottom compartment.

Visibility means who may access a field or method. A minus sign (−) means private, available only inside the class. A plus sign (+) means public, available to code outside the class.

The «interface» label marks Statement as an interface, a contract that lists operations another class promises to provide. A hollow triangle is an unfilled triangular arrowhead that points toward that contract or toward the more general type. The line attached to it tells you which relationship you are reading:

• An implements relationship uses a dashed line: Account promises to provide the operations required by Statement.
• An extends relationship uses a solid line: SavingsAccount receives the public behavior of Account through inheritance, where a child class builds on a parent class, the type it inherits from.

Move through the steps and watch those ideas join the design.

The arrow points to the more general type. That direction matters when a diagram grows: it tells you where a contract is defined and where shared behavior comes from. Here, you can expect any Account to render a statement, while SavingsAccount adds interest behavior on top of the account behavior.

The same design has a direct TypeScript reading:

interface Statement {
  render(): string;
}
 
class Account implements Statement {
  private balance = 0;
  private owner = "Ada";
 
  public deposit(amt: number): void {
    this.balance += amt;
  }
 
  public withdraw(amt: number): void {
    this.balance -= amt;
  }
 
  public render(): string {
    return `${this.owner}: ${this.balance}`;
  }
}
 
class SavingsAccount extends Account {
  private rate = 0.03;
 
  public addInterest(): void {
    // The interest policy would update the balance here.
  }
}

Read the declarations as the arrows: Account implements Statement; SavingsAccount extends Account. The diagram removes method bodies so the relationships stay visible.

Do not confuse a hollow triangle with a filled diamond, the marker for composition—a strong whole-part relationship where one object owns another part. A filled diamond answers “who owns this part?”, not “which parent or contract does this type follow?”

A sequence diagram reads like a timeline

A class diagram shows what exists. A sequence diagram shows how people and objects interact during one flow, like a call transcript arranged from top to bottom.

The names across the top are participants, the people or objects involved in the interaction. Customer is an actor, an external person or system. :Account and :Statement are unnamed object instances, concrete objects made from their classes.

A lifeline is the vertical dashed line below each participant, showing that participant across time. A message is a horizontal arrow from one lifeline to another. Read from top to bottom: vertical position represents time, not importance.

A synchronous call uses a solid line and a solid arrowhead, a filled tip that says the caller waits while the receiver works. A return message uses a dashed line and an open arrowhead, an unfilled tip that carries control or a value back.

Now follow one withdrawal into a printed statement.

The call to checkBalance() is a self-message, a participant sending a message to its own lifeline. After the account returns ok, the customer requests a statement. The account delegates render() to the statement object, and the final dashed arrow carries the printout back.

A dashed line does not mean “weaker.” In a class diagram, a dashed line ending in a hollow triangle means implements. In this sequence diagram, a dashed line with an open arrowhead means return. Diagram type and arrowhead give the line its meaning.

When not to reach for a diagram

You can now translate boxes and arrows into types, relationships, and a request moving through the design. Next, you will see the anatomy of an LLD interview: what to clarify, what to draw, and what the interviewer is grading.