Mermaid UML Class Diagram Specification

Written based on Mermaid class diagram specification: Mermaid: Class diagrams

“In software engineering, a class diagram in Unified Modeling Language (UML) is a static structural diagram that shows the classes in a system and their properties and operations (or methods) plus the relationships between the classes. Describe the structure of a system." Wikipedia

Class diagrams are the primary building blocks of object-oriented modeling. It can be used for conceptual modeling of the general structure of an application, as well as detailed modeling by converting the model into programming language code. Class diagrams can also be used for data modeling. The classes in a class diagram represent the main elements, interactions, and classes to be programmed in the application.

Mermaid can render class diagrams.

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal: +int Age
Animal: +String Gender
Animal: +IsMammal()
Animal: +Mate()
class Duck {
    +String BeakColor
    +Swim()
    +Quack()
}
class Fish {
    -int SizeInFeet
    -CanEat()
}
class Zebra {
    +bool IsWild
    +Run()
}

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal: +int Age
Animal: +String Gender
Animal: +IsMammal()
Animal: +Mate()
class Duck {
    +String BeakColor
    +Swim()
    +Quack()
}
class Fish {
    -int SizeInFeet
    -CanEat()
}
class Zebra {
    +bool IsWild
    +Run()
}

grammar

class

UML provides mechanisms for representing class members, properties and methods, as well as other information about them. Each class contains three partitions:

• The top section contains class names. It is shown in bold and centered. It may also contain annotation text describing the nature of the class.
• The middle partition contains class attributes. They are left aligned.
• The bottom partition contains class operations. They are also left aligned.

classDiagram
class BankAccount
BankAccount : +String Owner
BankAccount : +Bigdecimal Balance
BankAccount : +Deposit(Amount)
BankAccount : +Withdrawl(Amount)

classDiagram
class BankAccount
BankAccount : +String Owner
BankAccount : +Bigdecimal Balance
BankAccount : +Deposit(Amount)
BankAccount : +Withdrawl(Amount)

Define class

There are two ways to define a class:

• Use the keyword class, such as class Animal to define the animal class.
• Define two classes through the relationship between them. Vehicle <|– Car defines two types of vehicles and their relationship.

classDiagram
class Animal
Vehicle <|-- Car

classDiagram
class Animal
Vehicle <|-- Car

Define class members

UML provides mechanisms for representing class members, such as properties and methods, and other information about them.
Mermaid differentiates between properties and operations based on the presence or absence of parentheses. Those with parentheses are considered operations, while others are considered properties.
There are two ways to define class members, and the display is the same regardless of which syntax is used to define the member. The two different ways are:

• Use colons to connect members and class names to define one member at a time, for example:

class BankAccount
BankAccount : +String Owner
BankAccount : +BigDecimal Balance
BankAccount : +Deposit(Amount)
BankAccount : +Withdrawal(Amount)

classDiagram
class BankAccount
BankAccount : +String Owner
BankAccount : +BigDecimal Balance
BankAccount : +Deposit(Amount)
BankAccount : +Withdrawal(Amount)

• Wrap the members in curly brackets. The members all belong to a class, which is suitable for defining multiple members, for example:

class BankAccount {
    +String Owner
    +BigDecimal Balance
    +Deposit(Amount)
    +Withdrawl(Amount)
}

classDiagram
class BankAccount {
    +String Owner
    +BigDecimal Balance
    +Deposit(Amount)
    +Withdrawl(Amount)
}

return value

Optionally, you can end the definition of the operation with the type of the return data (note: there must be a space between the signature and the return value type).

class BankAccount {
    +String Owner
    +BigDecimal Balance
    +Deposit(Amount) bool
    +Withdrawl(Amount) int
}

classDiagram
class BankAccount {
    +String Owner
    +BigDecimal Balance
    +Deposit(Amount) bool
    +Withdrawl(Amount) int
}

Generic type

You can use generic types to define members. For template parameters, we use ~ to wrap them (note: currently Mermaid does not support nested template types).

class Square~Shape~{
    int Id
    List~int~ Position
    SetPoints(List~int~ Points)
    GetPoints() List~int~
}

Square : -List~String~ Messages
Square : +SetMessages(List~String~ Messages)
Square : +GetMessages() List~String~

classDiagram
class Square~Shape~{
    int Id
    List~int~ Position
    SetPoints(List~int~ Points)
    GetPoints() List~int~
}

Square : -List~String~ Messages
Square : +SetMessages(List~String~ Messages)
Square : +GetMessages() List~String~

Modify

These tokens can be placed before the member name to specify access permissions for class members, but they are optional:

You can also place these symbols after the member definition:

Define relationships

Relationships are specific logical connections found on classes and objects.

[类A][箭头][类B]:标签

Currently supported relationships between different types:

classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH

classDiagram
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

We can use labels to describe the nature of the relationship between two classes. Additionally, arrows can also be used in the opposite direction:

classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association

classDiagram
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

Summary of class diagram relationships

cardinality of relationship

Cardinality in a class diagram represents the number of instances associated with instances of another class.
For example, a company will have multiple employees, but each employee will only work for one company.
The different base options are:

You can add the above symbol between the arrow and the two classes being related.

[类A] "基数1" [箭头] "基数2" [类B]:标签

Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains

classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains

Class annotation

A class can be annotated with a specific tag that acts like metadata for the class and clearly states its nature.
Some common annotation examples might be:

Class annotations are defined between << and >>. There are two ways to add annotations to a class:

• on a separate line after defining the class. For example:

class Shape
<<interface>> Shape

• Defined in a nested structure. For example:

class Shape {
    <<Interface>>
    NoOfVertices
    Draw()
}
class Color {
    <<Enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

Unfortunately my site doesn't seem to support class annotations

Comment

Just like comments in the program, they will be ignored by Mermaid, and lines starting with %% are recognized as comments.

%% 这一行是 Shape 类的评论
class Shape {
    <<Interface>>
    NoOfVertices
    Draw()
}