Mermaid Class Diagram Syntax: Classes, Members, Relationships, and Generics

Example

classDiagram
    class Diagram {
        +String id
        +String code
        +String r2_key
        +Int view_count
        +save()
        +share() String
    }
    class User {
        +String id
        +String email
        +String plan
        +getDiagrams() Diagram[]
    }
    User "1" --> "many" Diagram : owns

Syntax

classDiagram
    class Order {
        +String id
        -Money total
        #List~Item~ items
        +addItem(Item item) void
        +total() Money
    }

classDiagram
    Animal <|-- Dog : inheritance
    Car *-- Engine : composition
    Team o-- Player : aggregation
    Client --> Server : association
    Client ..> Logger : dependency
    Shape <|.. Circle : realization

classDiagram
    Customer "1" --> "0..*" Order : places
    Order "1" *-- "1..*" LineItem

classDiagram
    class Repository {
        <<interface>>
        +find(id) Entity
    }
    class Status {
        <<enumeration>>
        ACTIVE
        ARCHIVED
    }

Common mistakes

These are the parse errors that come up most, including in code written by ChatGPT and Claude. Paste any failing diagram into the editor and it marks the offending line.

• Angle brackets for generics: List<Item> items.

  Fix: Mermaid uses tildes: List~Item~ items. Angle brackets collide with the arrow tokens.

• Method parameters with spaces and no parentheses on the return type: +save(Order order): void.

  Fix: Return type goes after the closing parenthesis with a space, no colon: +save(Order order) void.

• Relationship arrow drawn in the wrong direction, e.g. Dog <|-- Animal.

  Fix: The open triangle sits on the parent: Animal <|-- Dog. Read the arrow as "Animal is extended by Dog".

Real-world examples

Complete, copy-ready class diagrams for common situations. Each one opens in the editor with a click.

• MVC Pattern Class Diagram: Model, View, Controller

  Mermaid class diagram of the Model-View-Controller pattern for a task list app: fields, methods, generics, and association, dependency, and aggregation arrows.

• Observer Pattern Class Diagram with Interfaces

  Mermaid class diagram of the Observer pattern: Subject and Observer interfaces, a concrete StockTicker subject, two concrete observers, and realization arrows.

FAQ