DevBento logoDevBento
Werkzeuge/Mermaid Diagramm Editor/Mermaid Klassendiagramm

Mermaid Klassendiagramm

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

Vorlagen:

Editor wird geladen...

Diagrammvorschau erscheint hier...

Verwandte Werkzeuge
.mdMarkdown Vorschau: Markdown in HTML Konvertieren
Konvertiere Markdown in Echtzeit zu HTML mit GFM-Unterstützung für Tabellen, Aufgabenlisten und formatierte Codeblöcke. Kopiere HTML-Ausgabe mit einem Klick.
</>SQL / CSS / HTML Formatierer
Formatiere und minifiziere SQL-Abfragen, CSS-Stylesheets und HTML-Markup mit Syntaxhervorhebung. Rücke Code im Browser ein, verschönere oder komprimiere ihn.
{}JSON Formatierer und Validator
Werkzeug zum Formatieren, Minifizieren und Validieren von JSON Daten mit Syntaxhervorhebung und interaktiver Baumansicht. Erkennt Fehler sofort im Browser.
+/-Textvergleich
Vergleiche zwei Textblöcke in Side-by-Side- oder Inline-Ansicht mit Zeichen-für-Zeichen-Hervorhebung. Finde sofort Hinzufügungen, Löschungen und Änderungen.
SVG Viewer & Optimizer
Export diagram as SVG

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

Symbol Bedeutung UML Begriff
+ Öffentlich Von überall zugänglich
- Privat Nur innerhalb der Klasse
# Geschützt Klasse und Unterklassen
~ Paket Gleiches 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

Syntax Typ Bedeutung
`A < – B` Vererbung
`A < .. B` Realisierung
A *-- B Komposition B ist Teil von A, gebundener Lebenszyklus
A o-- B Aggregation B gehört zu A, kann allein existieren
A --> B Assoziation A referenziert B
A ..> B Abhängigkeit A 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.

🔒

Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.

© 2026 devbento.dev · lokal entwickeltChangelog