Mermaid Class Diagram Syntax

What a Mermaid class diagram is for

A class diagram shows classes with their fields and methods and the relationships between them: inheritance, composition, aggregation and plain associations. Use it to document a domain model or the shape of an object-oriented codebase.

Class Diagram syntax

Basic example

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

Open this example in the Mermaid editor

More class diagram examples

Order domain model

Composition for line items (they don’t exist without the order), association with cardinality for the customer.

classDiagram
    class Customer {
        +UUID id
        +String email
        +placeOrder(cart) Order
    }
    class Order {
        +UUID id
        +OrderStatus status
        +total() Money
    }
    class LineItem {
        +String sku
        +int quantity
        +Money price
    }
    class OrderStatus {
        <<enumeration>>
        PENDING
        PAID
        SHIPPED
    }
    Customer "1" --> "*" Order : places
    Order *-- "1..*" LineItem
    Order --> OrderStatus

Open “Order domain model” in the editor

Interface and implementations

..|> shows that a class implements an interface; generics use tildes.

classDiagram
    class Repository~T~ {
        <<interface>>
        +find(id) T
        +save(entity T) void
    }
    class SqlUserRepository {
        -DataSource ds
        +find(id) User
        +save(entity User) void
    }
    class InMemoryUserRepository {
        -Map~UUID, User~ store
        +find(id) User
        +save(entity User) void
    }
    SqlUserRepository ..|> Repository
    InMemoryUserRepository ..|> Repository

Open “Interface and implementations” in the editor

Common mistakes

• Generics use tildes, not angle brackets: List~String~, because < and > are part of the arrow syntax.
• The arrowhead goes on the parent side: Animal <|-- Dog reads “Dog inherits from Animal”.
• Members can also be added one per line outside the block: User : +String email.

Use it in Markdown

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.

Other Mermaid diagrams

• Mermaid flowchart syntax
• Mermaid sequence diagram syntax
• Mermaid state diagram syntax
• Mermaid er diagram syntax
• Mermaid gantt chart syntax
• Mermaid pie chart syntax
• Mermaid mindmap syntax
• Mermaid timeline syntax
• Mermaid git graph syntax
• Mermaid user journey syntax
• Mermaid quadrant chart syntax
• Mermaid xy chart syntax

Sources

• Mermaid docs: Class Diagram

Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.

Frequently asked questions