Class diagrams

Class diagrams describe the structure of a system by showing the system’s classes, their attributes, operations (or methods), and the relationships among objects.

​

Basic example

​

Define a class

There are two ways to define a class:

​

Using the class keyword

​

Class labels

Provide custom labels for classes: Or use backticks:

​

Defining members

Mermaid distinguishes between attributes and methods based on parentheses ().

​

Using colon notation

​

Using bracket notation

​

Return types

​

Generic types

​

Visibility

Describe encapsulation of class members:

• + Public
• - Private
• # Protected
• ~ Package/Internal

Additional classifiers:

• * Abstract (after method)
• $ Static (after method or field)

​

Defining relationships

Eight different types of relationships are supported:

​

Labels on relations

​

Two-way relations

​

Lollipop interfaces

​

Namespaces

Group classes in namespaces:

​

Cardinality / Multiplicity

Indicate the number of instances:

Cardinality options

• 1 - Only 1
• 0..1 - Zero or One
• 1..* - One or more
• * - Many
• n - n (where n>1)
• 0..n - zero to n (where n>1)
• 1..n - one to n (where n>1)

​

Annotations

Annotate classes with markers:

​

Direction

Set the rendering direction:

​

Interaction

Bind click events to classes:

​

Notes

Add notes to diagrams:

​

Styling

​

Styling a node

​

Using classes

Or with bracket notation:

​

Comments

Add comments with %%: