How to Draw Class Diagrams in Mermaid

2026-03-04 · MermZen Tutorial

Class diagrams describe object-oriented systems by showing classes, their attributes, methods, and relationships between classes.

Declaring Classes

classDiagram
    class User {
        +int id
        +String name
        +String email
        +login() bool
        +logout() void
    }

• + - Public
• - - Private
• # - Protected
• ~ - Package-private

Relationships

classDiagram
    Animal <|-- Dog : Inheritance
    Dog *-- Paw : Composition
    Dog o-- Toy : Aggregation
    Dog --> Food : Association
    User ..> Logger : Dependency

Multiplicity

classDiagram
    User "1" --> "0..*" Order : Places
    Order "1" *-- "1..*" OrderItem : Contains

Example: E-commerce Order System

classDiagram
    class User {
        +int id
        +String name
        +placeOrder() Order
    }

    class Order {
        +int id
        +Date createdAt
        +calcTotal() float
    }

    class OrderItem {
        +int quantity
        +float unitPrice
        +getSubtotal() float
    }

    class Product {
        +int id
        +String name
        +float price
    }

    User "1" --> "0..*" Order
    Order "1" *-- "1..*" OrderItem
    OrderItem "*" --> "1" Product

To try the above code in MermZen, click Open Editor and paste the code there.