UML-Diagramm erstellen
Dokumentieren Sie Objektmodelle als Text. Schreiben Sie Mermaid-Klassendiagramme — Felder, Methoden, Vererbung, Schnittstellen und Komposition — und sehen Sie sie live dargestellt. Alles bleibt auf Ihrem Gerät.
One step per line. Indent two spaces to branch beneath the line above.
Modellieren Sie das Design, nicht die Pixel
Ein Klassendiagramm erfasst die Form Ihres Codes: welche Klassen existieren, was sie besitzen und wie sie in Beziehung stehen. Mermaids Notation wird direkt auf OOP-Konzepte abgebildet — "<|--" für Vererbung, "<|.." für Implementierung einer Schnittstelle, "*--" für Komposition und "o--" für Aggregation — daher liest sich das Diagramm wie die Designdiskussion, die es produziert hat.
Da es als Text ist, überlebt es Refactorings: wenn Sie eine Klasse umbenennen, bearbeiten Sie eine Zeile, anstatt eine Leinwand neu zu zeichnen.
Großartig für Onboarding und RFCs
Legen Sie ein Klassendiagramm in eine Design-RFC, um die vorgeschlagene Struktur zu zeigen, oder in die Dokumentation eines Repositories, um neuen Mitwirkenden beim Navigieren zu helfen. Sichtbarkeitsmarker (+/-) und Stereotypen wie «interface» kommunizieren Absicht ohne eine Wand von Prosa.
Häufig gestellte Fragen
Wie erstelle ich ein UML-Klassendiagramm aus Text?
Beginnen Sie mit "classDiagram", definieren Sie jede Klasse mit ihren Feldern und Methoden in Klammern, dann fügen Sie Beziehungen wie "Animal <|-- Dog" hinzu. Es wird live dargestellt und exportiert zu SVG oder PNG.
Wie zeige ich Vererbung vs. Schnittstellen?
Verwenden Sie "A <|-- B", wenn B Klasse A erweitert, und "A <|.. B", wenn B Schnittstelle A implementiert. Markieren Sie Schnittstellen mit dem "<<interface>>" Stereotyp in der Klasse.
Wie markiere ich öffentliche und private Member?
Stellen Sie einem Member "+ " für öffentlich oder "-" für privat voran, zum Beispiel "+charge(amount) bool" oder "-PaymentMethod method".
Unterstützt Mermaid andere UML-Diagramme?
Ja — neben Klassendiagrammen stellt es Sequenz- und Zustandsdiagramme dar, die zusammen die meisten alltäglichen UML-Anforderungen abdecken. Diese Seite konzentriert sich auf Klassendiagramme.
Wird etwas hochgeladen?
Nein. Das Diagramm wird in Ihrem Browser generiert, daher bleiben Ihre Klassen- und Methodennamen auf Ihrem Gerät.