Mermaid Diagram Editor

Mermaid Klassendiagramm: UML Klassendiagramme Erstellen

Erstelle UML Klassendiagramme mit Mermaid Syntax. Klassen, Interfaces, Vererbung, Komposition und Sichtbarkeitsmodifikatoren. Live Vorschau.

100% clientseitig. Deine Daten verlassen niemals deinen Browser.

Vorlagen:

Editor wird geladen...

Diagrammvorschau erscheint hier...

Verwandte Werkzeuge

Mermaid Klassendiagramm Syntax

Klassendiagramme zeigen die Struktur eines Systems, indem sie Klassen, ihre Attribute und Methoden sowie die Beziehungen zwischen ihnen abbilden. Sie sind das Standard UML Diagramm zur Dokumentation von objektorientierten Designs, API Client Bibliotheken und Domänenmodellen. Mermaid rendert sie aus einer textuellen Definition, die wie eine vereinfachte Version des Codes selbst liest.

Klassen Definieren

classDiagram
    class UserService {
        -UserRepository repo
        -Logger logger
        +getUser(id) User
        +createUser(data) User
        +deleteUser(id) void
        -validate(data) bool
    }

Jede Zeile innerhalb des Klassenblocks definiert einen Member. Das Format ist sichtbarkeit name typ für Felder und sichtbarkeit name(parameter) rückgabetyp für Methoden.

Sichtbarkeitsmodifikatoren

SymbolBedeutungUML Begriff
+ÖffentlichVon überall zugänglich
-PrivatNur innerhalb der Klasse
#GeschütztKlasse und Unterklassen
~PaketGleiches Paket/Modul

Beziehungen

Beziehungen werden zwischen Klassen mit Pfeilsyntax gezeichnet:

classDiagram
    Animal <|-- Dog : extends
    Animal <|-- Cat : extends
    Dog *-- Leg : has
    Owner o-- Pet : owns
    Kennel --> Dog : houses
    Animal ..> Food : depends on

Beziehungstypen

SyntaxTypBedeutung
`A <— B`Vererbung
`A <.. B`Realisierung
A *-- BKompositionB ist Teil von A, gebundener Lebenszyklus
A o-- BAggregationB gehört zu A, kann allein existieren
A --> BAssoziationA referenziert B
A ..> BAbhängigkeitA verwendet B temporär

Kardinalität

Füge Multiplizitätsbeschriftungen zu Beziehungen hinzu:

    Customer "1" --> "*" Order : places
    Order "1" *-- "*" OrderItem : contains

Kardinalitäten werden in Anführungszeichen auf die entsprechende Seite der Beziehung gesetzt. Notiere die Multiplizität in der Nähe der Klasse, auf die sie sich bezieht.

Annotationen

Füge Stereotype mit der Doppelwinkelsyntax hinzu:

classDiagram
    class PaymentService {
        <<interface>>
        +processPayment(amount) bool
        +refundPayment(id) bool
    }
    class PayPalService {
        <<service>>
    }
    class TransactionStatus {
        <<enumeration>>
        PENDING
        COMPLETED
        FAILED
    }
    PayPalService ..|> PaymentService

Namespaces

Gruppiere zusammengehörige Klassen in Namespaces:

classDiagram
    namespace Models {
        class User
        class Order
        class Product
    }
    namespace Services {
        class AuthService
        class PaymentService
    }

Namespaces rendern als visuelle Gruppierungen um die enthaltenen Klassen.

Erstelle andere Diagrammtypen? Sieh dir den Mermaid Editor an, der alle Diagrammtypen unterstützt, oder den Mermaid Flowchart Generator für Prozessabläufe.