Klassendiagramme

„In der Softwareentwicklung ist ein Klassendiagramm in der Unified Modeling Language (UML) eine Art statisches Strukturdiagramm, das die Struktur eines Systems beschreibt, indem es die Klassen des Systems, ihre Attribute, Operationen (oder Methoden) und die Beziehungen zwischen Objekten zeigt.“

-Wikipedia

Das Klassendiagramm ist der wichtigste Baustein der objektorientierten Modellierung. Es wird für die allgemeine konzeptionelle Modellierung der Struktur der Anwendung und für die detaillierte Modellierung verwendet, um die Modelle in Programmcode zu übersetzen. Klassendiagramme können auch für die Datenmodellierung verwendet werden. Die Klassen in einem Klassendiagramm repräsentieren sowohl die Hauptelemente und Interaktionen in der Anwendung als auch die zu programmierenden Klassen.

Mermaid kann Klassendiagramme rendern.

Code:

Syntax

Klasse

UML bietet Mechanismen zur Darstellung von Klassenmitgliedern wie Attributen und Methoden sowie zusätzliche Informationen darüber. Eine einzelne Instanz einer Klasse im Diagramm enthält drei Bereiche:

• Der obere Bereich enthält den Namen der Klasse. Er wird fett und zentriert gedruckt, und der erste Buchstabe wird großgeschrieben. Er kann auch optionalen Anmerkungstext enthalten, der die Art der Klasse beschreibt.
• Der mittlere Bereich enthält die Attribute der Klasse. Sie sind linksbündig ausgerichtet und der erste Buchstabe wird klein geschrieben.
• Der untere Bereich enthält die Operationen, die die Klasse ausführen kann. Sie sind auch linksbündig ausgerichtet und der erste Buchstabe wird klein geschrieben.

Code:

Klasse definieren

Es gibt zwei Möglichkeiten, eine Klasse zu definieren:

• Explizit mit dem Schlüsselwort class wie class Animal, das die Klasse Animal definiert.
• Über eine Beziehung, die zwei Klassen gleichzeitig zusammen mit ihrer Beziehung definiert. Zum Beispiel: Vehicle <|-- Car.

Code:

Benennungskonvention: Ein Klassennamen sollte nur aus alphanumerischen Zeichen (einschließlich Unicode), Unterstrichen und Bindestrichen (-) bestehen.

Klassenbeschriftungen

Falls Sie eine Beschriftung für eine Klasse angeben müssen, können Sie die folgende Syntax verwenden:

Code:

Sie können auch Backticks verwenden, um Sonderzeichen in der Beschriftung zu maskieren:

Code:

Mitglieder einer Klasse definieren

UML bietet Mechanismen zur Darstellung von Klassenmitgliedern wie Attributen und Methoden sowie zusätzliche Informationen darüber.

Mermaid unterscheidet zwischen Attributen und Funktionen/Methoden, je nachdem, ob die Klammern () vorhanden sind oder nicht. Diejenigen mit () werden als Funktionen/Methoden behandelt, alle anderen als Attribute.

Es gibt zwei Möglichkeiten, die Mitglieder einer Klasse zu definieren, und unabhängig davon, welche Syntax verwendet wird, um die Mitglieder zu definieren, wird die Ausgabe immer noch dieselbe sein. Die zwei verschiedenen Möglichkeiten sind:

• Ein Mitglied einer Klasse mit : (Doppelpunkt) gefolgt vom Mitgliedsnamen zuordnen, nützlich, um ein Mitglied gleichzeitig zu definieren. Zum Beispiel:

Code:

• Mitglieder einer Klasse mit {}-Klammern zuordnen, wobei die Mitglieder innerhalb von geschweiften Klammern gruppiert sind. Geeignet, um mehrere Mitglieder gleichzeitig zu definieren. Zum Beispiel:

Code:

Rückgabetyp

Optional können Sie eine Methoden-/Funktionsdefinition mit dem Datentyp beenden, der zurückgegeben wird (Hinweis: Es muss ein Leerzeichen zwischen der letzten ) und dem Rückgabetyp geben). Ein Beispiel:

Code:

Generische Typen

Generika können als Teil einer Klassendefinition und für Klassenmitglieder/Rückgabetypen dargestellt werden. Um ein Element als generisch zu kennzeichnen, schließen Sie diesen Typ in ~ (Tilde) ein. Geschachtelte Typdeklarationen wie List<List<int>> werden unterstützt, obwohl Generika, die ein Komma enthalten, derzeit nicht unterstützt werden (z. B. List<List<K, V>>).

Hinweis Wenn ein generischer Typ innerhalb einer Klassendefinition verwendet wird, wird der generische Typ NICHT als Teil des Klassennamens betrachtet. d.h.: Für jede Syntax, die es erfordert, auf den Klassennamen zu verweisen, müssen Sie den Typteil der Definition weglassen. Dies bedeutet auch, dass Mermaid derzeit nicht unterstützt, zwei Klassen mit demselben Namen, aber unterschiedlichen generischen Typen zu haben.

Code:

Sichtbarkeit

Um die Sichtbarkeit (oder Kapselung) eines Attributs oder einer Methode/Funktion zu beschreiben, die Teil einer Klasse ist (d. h. ein Klassenmitglied), kann eine optionale Notation vor den Namen dieses Mitglieds gesetzt werden:

• + Öffentlich
• - Privat
• # Geschützt
• ~ Paket/Intern

Hinweis Sie können einer Methodendefinition auch zusätzliche Klassifikatoren hinzufügen, indem Sie die folgende Notation am Ende der Methode hinzufügen, d. h.: nach der () oder nach dem Rückgabetyp:

• * Abstrakt z.B.: someAbstractMethod()* oder someAbstractMethod() int*
• $ Statisch z.B.: someStaticMethod()$ oder someStaticMethod() String$

Hinweis Sie können auch zusätzlichen Klassifikatoren zu einer Felddefinition hinzufügen, indem Sie die folgende Notation ganz am Ende hinzufügen:

• $ Statisch z.B.: String someField$

Beziehung definieren

Eine Beziehung ist ein allgemeiner Begriff, der die spezifischen Arten von logischen Verbindungen umfasst, die in Klassen- und Objektdiagrammen zu finden sind.

[classA][Arrow][ClassB]

Es gibt acht verschiedene Beziehungstypen, die für Klassen unter UML definiert sind und derzeit unterstützt werden:

Typ	Beschreibung
<|--	Vererbung
*--	Komposition
o--	Aggregation
-->	Assoziation
--	Verbindung (durchgezogen)
..>	Abhängigkeit
..|>	Realisierung
..	Verbindung (gestrichelt)

Code:

Wir können die Beschriftungen verwenden, um die Art der Beziehung zwischen zwei Klassen zu beschreiben. Pfeilspitzen können auch in die entgegengesetzte Richtung verwendet werden:

Code:

Beschriftungen für Beziehungen

Es ist möglich, einer Beziehung Beschriftungstext hinzuzufügen:

[classA][Arrow][ClassB]:LabelText

Code:

Zweiwegbeziehungen

Beziehungen können logisch eine N:M-Assoziation darstellen:

Hier ist die Syntax:

[Relation Type][Link][Relation Type]

Wobei Relation Type einer der folgenden sein kann:

Typ	Beschreibung
<|	Vererbung
\*	Komposition
o	Aggregation
>	Assoziation
<	Assoziation
|>	Realisierung

Und Link kann einer der folgenden sein:

Typ	Beschreibung
--	Durchgezogen
..	Gestrichelt

Lollipop-Schnittstellen

Klassen können auch einen speziellen Beziehungstyp erhalten, der eine Lollipop-Schnittstelle für die Klasse definiert. Eine Lollipop-Schnittstelle wird mit der folgenden Syntax definiert:

• bar ()-- foo
• foo --() bar

Die Schnittstelle (bar) mit dem Lollipop verbindet sich mit der Klasse (foo).

Hinweis: Jede definierte Schnittstelle ist eindeutig und soll nicht zwischen Klassen geteilt werden/mehrere Kanten haben, die zu ihr führen.

Code:

Code:

Namensraum definieren

Ein Namensraum gruppiert Klassen.

Code:

Kardinalität/Multiplizität bei Beziehungen

Multiplizität oder Kardinalität in Klassendiagrammen gibt die Anzahl der Instanzen einer Klasse an, die mit einer Instanz der anderen Klasse verknüpft werden können. Beispielsweise hat jedes Unternehmen einen oder mehrere Mitarbeiter (nicht null), und jeder Mitarbeiter arbeitet derzeit für null oder ein Unternehmen.

Multiplizitätsnotationen werden in der Nähe des Endes einer Assoziation platziert.

Die verschiedenen Kardinalitätsoptionen sind:

• 1 Nur 1
• 0..1 Null oder Eins
• 1..* Eins oder mehr
• * Viele
• n n (wobei n>1)
• 0..n null bis n (wobei n>1)
• 1..n eins bis n (wobei n>1)

Die Kardinalität kann einfach definiert werden, indem die Textoption in Anführungszeichen " vor oder nach einem gegebenen Pfeil platziert wird. Zum Beispiel:

[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText

Code:

Anmerkungen zu Klassen

Es ist möglich, Klassen mit Markern zu annotieren, um zusätzliche Metadaten über die Klasse bereitzustellen. Dies kann einen klareren Hinweis auf ihre Art geben. Einige gängige Anmerkungen sind:

• <<Interface>> Zur Darstellung einer Interface-Klasse
• <<Abstract>> Zur Darstellung einer abstrakten Klasse
• <<Service>> Zur Darstellung einer Service-Klasse
• <<Enumeration>> Zur Darstellung eines Enum

Anmerkungen werden innerhalb der öffnenden << und schließenden >> definiert. Es gibt zwei Möglichkeiten, einer Klasse eine Annotation hinzuzufügen, und in beiden Fällen ist die Ausgabe gleich:

• In einer separaten Zeile nachdem eine Klasse definiert wurde:

Code:

• In einer geschachtelten Struktur zusammen mit der Klassendefinition:

Code:

Kommentare

Kommentare können in ein Klassendiagramm eingegeben werden, die vom Parser ignoriert werden. Kommentare müssen in einer eigenen Zeile stehen und müssen mit %% (doppelte Prozentzeichen) eingeleitet werden. Jeder Text bis zur nächsten neuen Zeile wird als Kommentar behandelt, einschließlich jeder Klassendiagramm-Syntax.

Richtung des Diagramms festlegen

Bei Klassendiagrammen können Sie die Richtungsanweisung verwenden, um die Richtung festzulegen, in die das Diagramm gerendert wird:

Code:

Interaktion

Es ist möglich, ein Klickereignis an einen Knoten zu binden. Der Klick kann entweder zu einem Javascript-Callback oder zu einem Link führen, der in einer neuen Browser-Registerkarte geöffnet wird. Hinweis: Diese Funktionalität ist deaktiviert, wenn securityLevel='strict' verwendet wird, und aktiviert, wenn securityLevel='loose' verwendet wird.

Sie würden diese Aktionen in einer separaten Zeile definieren, nachdem alle Klassen deklariert wurden.

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"

• action ist entweder link oder callback, abhängig davon, welche Art von Interaktion aufgerufen werden soll
• className ist die ID des Knotens, dem die Aktion zugeordnet wird
• reference ist entweder der URL-Link oder der Funktionsname für den Callback.
• (optional) tooltip ist eine Zeichenkette, die angezeigt werden soll, wenn der Mauszeiger über dem Element schwebt (Hinweis: Die Stile des Tooltips werden durch die Klasse .mermaidTooltip festgelegt.)
• Hinweis: Die Callback-Funktion wird mit der nodeId als Parameter aufgerufen.

Notizen

Es ist möglich, Notizen zum Diagramm hinzuzufügen, indem note "line1\nline2" verwendet wird. Eine Notiz kann für eine bestimmte Klasse hinzugefügt werden, indem note for <CLASS NAME> "line1\nline2" verwendet wird.

Beispiele

URL-Link:

Callback:

<script>
  const callbackFunction = function () {
    alert('Ein Callback wurde ausgelöst');
  };
</script>

Erfolg Die Tooltip-Funktionalität und die Möglichkeit, Links zu URLs zu erstellen, sind ab Version 0.5.2 verfügbar.

Tipp für Anfänger – ein vollständiges Beispiel mit interaktiven Links auf einer HTML-Seite:

<body>
  <pre class="mermaid">
    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
      }
    class Fish{
      -int sizeInFeet
      -canEat()
      }
    class Zebra{
      +bool is_wild
      +run()
      }

      callback Duck callback "Tooltip"
      link Zebra "https://www.github.com" "Dies ist ein Link"
  </pre>

  <script>
    const callback = function () {
      alert('Ein Callback wurde ausgelöst');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

Stil

Knoten stylen

Es ist möglich, einem einzelnen Knoten bestimmte Stile wie einen dickeren Rand oder eine andere Hintergrundfarbe anzuwenden, indem das Schlüsselwort style verwendet wird.

Beachten Sie, dass Notizen und Namespaces nicht einzeln formatiert werden können, aber Themes unterstützen.

Code:

Klassen

Bequemer als die Definition des Stils jedes Mal ist die Definition einer Klasse von Stilen und die Anbindung dieser Klasse an die Knoten, die ein anderes Aussehen haben sollen.

Eine Klassendeklaration sieht wie das folgende Beispiel aus:

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

Es ist auch möglich, mehreren Klassen in einer Anweisung einen Stil zuzuweisen:

classDef firstClassName,secondClassName font-size:12pt;

Die Anbindung einer Klasse an einen Knoten erfolgt wie unten gezeigt:

cssClass "nodeId1" className;

Es ist auch möglich, einer Liste von Knoten in einer Anweisung eine Klasse anzuhängen:

cssClass "nodeId1,nodeId2" className;

Eine kürzere Form zum Hinzufügen einer Klasse besteht darin, den Klassennamen mit dem Operator ::: an den Knoten anzuhängen:

Code:

Oder:

Code:

Standardklasse

Wenn eine Klasse den Namen default hat, wird sie auf alle Knoten angewendet. Spezifische Stile und Klassen sollten später definiert werden, um die angewendeten Standardstile zu überschreiben.

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

Code:

CSS-Klassen

Es ist auch möglich, Klassen in CSS-Stilen vorzudefinieren, die aus der Graphdefinition angewendet werden können, wie im folgenden Beispiel gezeigt:

Beispielstil

<style>
  .styleClass > * > g {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

Beispieldefinition

Code:

cssClasses können nicht mit dieser Kurzschreibweise gleichzeitig mit einer Relationsanweisung hinzugefügt werden.

Konfiguration

Mitgliederfeld

Es ist möglich, das leere Mitgliederfeld eines Klassenknotens auszublenden.

Dies geschieht durch Ändern des Werts hideEmptyMembersBox der Klassendiagrammkonfiguration. Weitere Informationen zum Bearbeiten der Mermaid-Konfiguration finden Sie auf der Konfigurationsseite.

Code: