Mermaid Class Diagram Online: UML Class Diagrams

Mermaid Class Diagram Syntax

Class diagrams show the structure of a system by mapping out classes, their attributes and methods, and the relationships between them. They are the standard UML diagram for documenting object-oriented designs, API client libraries, and domain models. Mermaid renders them from a text definition that reads like a simplified version of the code itself.

Defining Classes

classDiagram
    class UserService {
        -UserRepository repo
        -Logger logger
        +getUser(id) User
        +createUser(data) User
        +deleteUser(id) void
        -validate(data) bool
    }

Each line inside the class block defines a member. The format is visibility name type for fields and visibility name(params) returnType for methods.

Visibility Modifiers

Relationships

Relationships are drawn between classes using arrow syntax:

classDiagram
    Animal <|-- Dog : extends
    Animal <|-- Cat : extends
    Dog *-- Leg : has
    Owner o-- Pet : owns
    Kennel --> Dog : houses
    Animal ..> Food : depends on

Relationship Types

Cardinality

Add multiplicity labels to relationships:

    Customer "1" --> "*" Order : places
    Order "1" *-- "1..*" LineItem : contains

Common cardinality values: "1", "0..1", "*", "1..*", "0..*".

Annotations

Mark classes as abstract, interface, enumeration, or any custom stereotype:

classDiagram
    class Shape {
        <<abstract>>
        +area() double
        +perimeter() double
    }
    class Drawable {
        <<interface>>
        +draw(canvas) void
    }
    class Color {
        <<enumeration>>
        RED
        GREEN
        BLUE
    }

Annotations render in guillemets above the class name.

Generics

Use tildes instead of angle brackets:

classDiagram
    class Repository~T~ {
        +findById(id) T
        +findAll() List~T~
        +save(entity T) T
        +delete(id) void
    }
    class UserRepository {
        +findByEmail(email) User
    }
    Repository~T~ <|-- UserRepository

Repository~T~ renders as Repository<T>.

Practical Patterns

Repository pattern

classDiagram
    class Repository~T~ {
        <<interface>>
        +findById(id) T
        +save(entity) T
        +delete(id) void
    }
    class UserRepository {
        <<interface>>
        +findByEmail(email) User
    }
    class PostgresUserRepository {
        -DataSource ds
        +findById(id) User
        +findByEmail(email) User
        +save(entity) User
        +delete(id) void
    }
    Repository~T~ <|.. UserRepository
    UserRepository <|.. PostgresUserRepository

Observer pattern

classDiagram
    class EventEmitter {
        -Map~String, List~Handler~~ listeners
        +on(event, handler) void
        +emit(event, data) void
        +off(event, handler) void
    }
    class Handler {
        <<interface>>
        +handle(data) void
    }
    class LogHandler {
        +handle(data) void
    }
    class MetricsHandler {
        +handle(data) void
    }
    EventEmitter o-- Handler
    Handler <|.. LogHandler
    Handler <|.. MetricsHandler

For documenting how these classes interact at runtime, use the Mermaid Sequence Diagram. For the database tables behind your domain model, try the Mermaid ER Diagram.