# Mermaid Class Diagram Cheat Sheet

Types, their members, and how they relate.

## Defining a class

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

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

![A class box named Animal listing three members: name, age and an isMammal method.](/diagrams/class/definition.svg)

## Relation types

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

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

![Five class boxes joined by different arrowheads: a hollow triangle for inheritance, a filled diamond for composition, a hollow diamond for aggregation, a plain arrow and a dashed arrow.](/diagrams/class/relations.svg)

## Labelling a relation

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

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

![Two class boxes joined by an arrow labelled feeds, with a one beside the first box and a many beside the second.](/diagrams/class/labels.svg)

## Cardinality

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

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

![Three class boxes: Customer to Order with a one and a many, Order to LineItem with a one and a one-to-many.](/diagrams/class/cardinality.svg)

## Annotations

Angle brackets inside the class body label its kind.

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

![A class box named Shape marked as an interface with a draw method, connected by a dashed triangle to another class box.](/diagrams/class/annotation.svg)

## Direction

Same keyword as flowcharts. Default is top to bottom.

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

![Two class boxes side by side, both connected to a third class box above them by hollow triangles.](/diagrams/class/direction.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.