Mermaid Class Diagrams for Object-Oriented Design

Class Diagrams in Mermaid

Class diagrams are a UML standard for visualizing the structure of object-oriented systems. They show classes, their attributes and methods, and the relationships between them. Mermaid implements a subset of UML class diagram notation that covers most practical use cases.

Defining a Class

A class is defined with its name followed by attributes and methods inside curly braces:

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
        +move(distance: int) void
    }

Visibility Modifiers

Mermaid uses the standard UML visibility prefixes:

Symbol	Meaning
+	Public
-	Private
#	Protected
~	Package / Internal

Relationships

Class relationships are drawn using different arrow notations:

classDiagram
    Animal <|-- Dog : inherits
    Animal <|-- Cat : inherits
    Dog *-- Leg : composition
    Dog o-- Toy : aggregation
    Dog --> Collar : association
    Dog ..> Food : dependency

Syntax	Relationship
<|--	Inheritance
*--	Composition (strong ownership)
o--	Aggregation (weak ownership)
-->	Association
..>	Dependency
..|>	Realization / implements

Cardinality

Add multiplicity labels to relationships:

classDiagram
    Customer "1" --> "*" Order : places
    Order "1" *-- "1..*" OrderItem : contains
    OrderItem "*" --> "1" Product : references

A Complete Example

classDiagram
    class Shape {
        <<abstract>>
        +float area()
        +float perimeter()
    }
    class Circle {
        -float radius
        +Circle(radius: float)
        +float area()
        +float perimeter()
    }
    class Rectangle {
        -float width
        -float height
        +Rectangle(w: float, h: float)
        +float area()
        +float perimeter()
    }
    Shape <|-- Circle
    Shape <|-- Rectangle

The <<abstract>> annotation marks Shape as an abstract class, clearly communicating that it cannot be instantiated directly.