Skip to content

UML Diagrams

Unified Modeling Language (UML) Diagrams are used throughout the book to help describe the patterns.

Below are some example self-describing UML diagrams.

The left part of the diagram shows the basic concept, and the right side shows a potential example usage.

A Basic Class

Basic Class

Note that I am using the word field as the class properties in the middle left square. Both terms are interchangeable. Other terms used to describe fields and properties can also be attributes.

Note

In the bottom left square, I also have a protected method which is indicated by the # symbol. In UML, protected members are indicated using the # symbol which can cause confusion if indicating private fields/properties/variables in modern JavaScript and TypeScript.

Directed Association

A filled arrow with a line.

ClassA uses ClassB or an object of ClassB.

ClassA calls a static class method, a static abstract method or a method/property/field from an object of type ClassB. e.g., The Person starts the Car engine.

Directed Association

A Class That Extends/Inherits A Class

An unfilled arrow, with a line pointing to the class that is being extended/inherited.

ClassA extends ClassB.

The extended class contains all of the attributes/fields and methods of the inherited class, including its own extra methods, attributes/fields, overrides and overloads.

A Class That Inherits

A Class That Implements an Interface

An unfilled arrow, with a dashed line pointing to the interface that is being implemented.

ClassA implements ClassB.

A class that implements an interface must implement all of the methods declared in the interface.

A Class That Implements

Aggregates

An unfilled diamond with a line and arrow head.

ClassA aggregates ClassB.

Library aggregates Books. Books and Library can exist independently of each other. Books can exist without the Library.

Aggregate

Composition

A filled diamond with a line and arrow head.

ClassA is composed of ClassB

Aeroplane can be composed of Wings and other parts. But an aero plane is no longer really an aero plane without its wings.

Composition

Pseudocode Annotation

A box with a dashed line and a circle placed near a class method.

Pseudocode is a plain language description of the steps in an algorithm and used to portray a concept without needing to write long lines of code.

Pseudocode Annotation