Mermaid Class Diagram Cheat Sheet

Types, their members, and how they relate.

Every picture on this page was drawn by

Mernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

Defining a class

Members are prefixed with a visibility marker: + public, - private.

classDiagram
  class Animal {
    +String name
    +int age
    +isMammal() bool
  }

Six relations, each with its own arrowhead. The left two are UML classics.

classDiagram
  Animal <|-- Duck
  Car *-- Wheel
  Team o-- Member
  User --> Order
  Order ..> Invoice

A colon after the relation is the verb between the two types.

classDiagram
  Keeper "1" --> "*" Animal : feeds
  Animal "1" --> "0..*" Leg : has

Quoted numbers before each end say how many of that type are involved.

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

Angle brackets inside the class body label its kind.

classDiagram
  class Shape {
    <<interface>>
    +draw() void
  }
  Circle ..|> Shape

Same keyword as flowcharts. Default is top to bottom.

classDiagram
  direction LR
  Animal <|-- Duck
  Animal <|-- Fish