Mermaid template

Class Diagram

UML classes with fields, methods, and relationships — inheritance, composition, and more.

Source

Open in editor
classDiagram
    class Shape {
        <<interface>>
        +area() float
        +perimeter() float
    }
    class Circle {
        -radius: float
        +area() float
    }
    class Rectangle {
        -width: float
        -height: float
        +area() float
    }
    Shape <|.. Circle
    Shape <|.. Rectangle
    Canvas o-- Shape : draws

Class diagrams model the static structure of a system: classes, their members, and how they relate. Mermaid supports visibility markers (+ public, - private, # protected), generics, and stereotypes like <<interface>>.

Relationship arrows distinguish inheritance (<|--), composition (*--), aggregation (o--), and plain associations, each optionally labeled with cardinality.