# Mermaid Klassendiagramm-Spickzettel

Typen, ihre Mitglieder und wie sie zueinander stehen.

## Eine Klasse definieren

Mitglieder tragen einen Sichtbarkeitsmarker: + öffentlich, - privat.

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

![Eine Klassenbox namens „Animal“ mit drei Mitgliedern: name, age und einer Methode isMammal.](/diagrams/class/definition.svg)

## Beziehungsarten

Sechs Beziehungen, jede mit eigener Pfeilspitze. Die beiden linken sind UML-Klassiker.

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

![Fünf Klassenboxen mit unterschiedlichen Pfeilspitzen verbunden: ein hohles Dreieck für Vererbung, eine gefüllte Raute für Komposition, eine hohle Raute für Aggregation, ein einfacher Pfeil und ein gestrichelter Pfeil.](/diagrams/class/relations.svg)

## Eine Beziehung beschriften

Ein Doppelpunkt nach der Beziehung ist das Verb zwischen den beiden Typen.

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

![Zwei Klassenboxen, verbunden durch einen Pfeil mit der Beschriftung „feeds“, mit einer 1 neben der ersten Box und einer Mehrfachangabe neben der zweiten.](/diagrams/class/labels.svg)

## Kardinalität

Zitierte Zahlen vor jedem Ende sagen, wie viele davon beteiligt sind.

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

![Drei Klassenboxen: Customer zu Order mit einer 1 und einer Mehrfachangabe, Order zu LineItem mit einer 1 und einer 1-zu-vielen-Angabe.](/diagrams/class/cardinality.svg)

## Annotationen

Spitze Klammern im Klassenrumpf bezeichnen seine Art.

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

![Eine Klassenbox namens „Shape“, als Interface markiert, mit einer Methode draw, über ein gestricheltes Dreieck mit einer anderen Klassenbox verbunden.](/diagrams/class/annotation.svg)

## Richtung

Dasselbe Schlüsselwort wie im Flussdiagramm. Standard ist von oben nach unten.

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

![Zwei Klassenboxen nebeneinander, beide über hohle Dreiecke mit einer dritten Klassenbox darüber verbunden.](/diagrams/class/direction.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.