Klassendiagramm
Modellieren Sie Ihre Domäne und Objektstruktur
Was ist ein Klassendiagramm?
Ein Klassendiagramm beschreibt die Typen eines Systems — ihre Attribute, Methoden und Beziehungen: Vererbung, Komposition, Assoziation. Es ist der UML-Klassiker für Domänenmodellierung und Software-Design.
Klassendiagramme leisten ihre beste Arbeit in Design-Reviews und im Onboarding, wo neue Kolleginnen und Kollegen die Form der Domäne brauchen, bevor sie den Code lesen. Sie zeigen, was existiert, was wem gehört und was wovon abhängt — die Kopplung, die ein Ordnerbaum verbirgt. Über die Laufzeit sagen sie nichts: keine Aufrufreihenfolge, kein Lebenszyklus, keine Mengen. Und ein heute korrektes Diagramm ist nach dem nächsten Refactoring falsch, wenn es niemand pflegt. Gemeinsam genutzte Typen werden in jedem Diagramm, das sie braucht, erneut gezeichnet.
Live-Beispiel
classDiagram
class Order {
+String id
+Date createdAt
+total() Money
}
class Customer {
+String name
+String email
}
class OrderLine {
+int quantity
}
Customer "1" --> "*" Order
Order "1" *-- "*" OrderLineWann einsetzen
Häufige Fehler
Vererbungspfeile zeigen auf die Oberklasse
Animal <|-- Dog bedeutet, dass Dog von Animal erbt: Das hohle Dreieck sitzt an der Basisklasse. Dog <|-- Animal parst sauber und dreht Ihre Hierarchie stillschweigend um — im Review fällt das fast nie auf. Lesen Sie zuerst das Dreiecksende: Dort steht immer die Oberklasse.
Spitze Klammern verschlucken Generics
Ein Member +List<Item> lines wird als +List lines gerendert, weil der Browser <Item> als HTML-Tag behandelt und stillschweigend verschluckt. Mermaid nutzt stattdessen Tilden: +List~Item~ lines, und class Cart~Item~ für eine generische Klasse.
Fehlende Klammern machen Methoden zu Feldern
+save landet im Attributfach, +save() im Methodenfach. Allein die Klammern entscheiden darüber, nicht der Rückgabetyp. Das Diagramm rendert trotzdem, deshalb übersteht der Fehler jedes Review — setzen Sie die Klammern auch dann, wenn die Methode keine Argumente nimmt.
Grundlegende Syntax
classDiagram
class Animal {
+String name
+makeSound() void
}
Animal <|-- Dog : inheritanceclass Invoice { -String id +total(Money vat) Money }+ steht für public, - für private, # für protected und ~ für package. Ein Typ nach den runden Klammern ist der Rückgabetyp; ohne Klammern ist die Zeile ein Attribut.
Customer "1" o-- "0..*" Invoice : ownsKardinalitäten stehen auf beiden Seiten in Anführungszeichen, die Beschriftung nach dem Doppelpunkt benennt die Beziehung. Gelesen wird sie in der Richtung, in der die Linie geschrieben ist.
class Gateway { <<interface>> }Ein Stereotyp in doppelten spitzen Klammern kennzeichnet eine Schnittstelle, abstrakte Klasse, Aufzählung oder einen Service. Es wird in einer eigenen Zeile über dem Klassennamen gerendert.
namespace Billing { class Invoice }Ein namespace fasst Klassen in einem beschrifteten Kasten zusammen. Das hält ein großes Diagramm lesbar und spiegelt die Paket- oder Modulgrenzen wider, die im Code ohnehin schon gelten.
Fragen zu diesem Diagramm
Welche Beziehungen unterstützt Mermaid?
Vererbung (<|--), Komposition (*--), Aggregation (o--), Assoziation (-->), Abhängigkeit (..>) und Realisierung (..|>), jeweils mit optionalen Kardinalitäten und Beschriftungen.
Kann ich ein Klassendiagramm aus Code generieren?
Fügen Sie Ihre Klassen ein oder beschreiben Sie Ihre Domäne — die KI extrahiert Entitäten, Attribute und Beziehungen in ein sauberes Klassendiagramm.
Werden Klassendiagramme in Notion oder Confluence gerendert?
Notion rendert Mermaid in einem Codeblock. Confluence hat keine native Unterstützung; nutzen Sie ein Makro aus dem Marketplace oder fügen Sie ein exportiertes SVG ein, das in jeder Zoomstufe scharf bleibt und sich bei Modelländerungen an Ort und Stelle ersetzen lässt.
Kann ich bestimmen, wo Mermaid die Klassen platziert?
Nicht direkt. Das Layout ist automatisch; Ihre einzigen Hebel sind direction LR oder TB, das Gruppieren von Klassen in Namespaces und die Reihenfolge der Beziehungsdeklarationen. Für ein festes Layout exportieren Sie das SVG und passen es im Vektorprogramm an.
Kann ich eine Klasse mit ihrer Quelldatei verknüpfen?
Ja. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" macht aus dem Kasten einen Link und ergänzt einen Tooltip. Der Anker steckt im SVG selbst, übersteht den SVG-Export also — und geht in dem Moment verloren, in dem Sie ein PNG exportieren.
Kann Mermaid abstrakte oder statische Member darstellen?
Ja. Ein angehängter Stern kennzeichnet ein Member als abstrakt, ein angehängtes Dollarzeichen als statisch — +area()* float, +unit()$ Shape. Gerendert wird es so, wie UML es erwartet: kursiv für abstrakt, unterstrichen für statisch. Eine ganze Klasse kennzeichnen Sie mit dem Stereotyp <<abstract>> in ihrem Rumpf.
Klassendiagramm oder ein anderer Diagrammtyp?
Klassendiagramm oder Entity-Relationship-Diagramm?
Dieselben Kästen, ein anderes Publikum. Ein ER-Diagramm beschreibt Tabellen, Spalten und Schlüssel so, wie sie in der Datenbank existieren; ein Klassendiagramm beschreibt Typen, Verhalten und Vererbung so, wie sie im Code existieren. Haben die Kästen Methoden, ist es ein Klassendiagramm.
Klassendiagramm oder Zustandsdiagramm?
Sie modellieren dasselbe Objekt aus zwei Blickwinkeln. Das Klassendiagramm sagt, was eine Bestellung ist — ihre Felder, ihre Beziehungen, ihre Methoden. Das Zustandsdiagramm sagt, was eine Bestellung durchläuft: Entwurf, bezahlt, versandt, und die Ereignisse dazwischen. Reiche Domänen brauchen am Ende beides.
Erstellen Sie jetzt Ihr Klassendiagramm
Beschreiben Sie es in natürlicher Sprache — die KI schreibt den Mermaid-Code für Sie.
Mermaid Studio öffnen