Mermaid Klassendiagramm-Spickzettel

Typen, ihre Mitglieder und wie sie zueinander stehen.

Jedes Bild auf dieser Seite wurde gezeichnet von

Mernyx, dem nativen Mermaid-Editor für macOS. Nicht von einem Browser mit Mermaid.js, sondern vom Renderer, den die App für ihr Canvas nutzt.

Eine Klasse definieren

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

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

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

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

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

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

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

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

Spitze Klammern im Klassenrumpf bezeichnen seine Art.

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

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

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