🧩 Mermaid

Diagram klas

Modeluj swoją domenę i strukturę obiektów

Otwórz ten przykład w edytorze Wygeneruj własny z AI

Czym jest Diagram klas?

Diagram klas opisuje typy w systemie — ich atrybuty, metody i relacje: dziedziczenie, kompozycję, asocjację. To klasyka UML do modelowania domeny i projektowania kodu.

Diagramy klas najlepiej sprawdzają się w przeglądach projektowych i przy onboardingu, gdy nowa osoba potrzebuje kształtu domeny, zanim wejdzie w kod. Pokazują, co istnieje, co do czego należy i od czego zależy — sprzężenia, które drzewo katalogów ukrywa. Nic nie mówią o działaniu w czasie: żadnej kolejności wywołań, żadnego cyklu życia, żadnych wolumenów. A ten poprawny dzisiaj będzie błędny po najbliższym refaktorze, jeśli nikt go nie utrzyma. Typy współdzielone trzeba przerysowywać w każdym diagramie, który ich potrzebuje.

Żywy przykład

Kod Mermaid

classDiagram
    class Order {
      +String id
      +Date createdAt
      +total() Money
    }
    class Customer {
      +String name
      +String email
    }
    class OrderLine {
      +int quantity
    }
    Customer "1" --> "*" Order
    Order "1" *-- "*" OrderLine

Żywy przykład

Kiedy go używać

Modelowanie domeny przed pisaniem kodu (DDD, projektowanie obiektowe)

Dokumentowanie istniejących baz kodu na potrzeby onboardingu

Projektowanie mapowań obiektów bazodanowych i modeli zasobów API

Częste błędy

Strzałka dziedziczenia wskazuje rodzica

Animal <|-- Dog znaczy, że Dog dziedziczy po Animal: pusty trójkąt stoi przy klasie bazowej. Zapis Dog <|-- Animal parsuje się bez błędu i po cichu odwraca hierarchię, czego recenzenci prawie nigdy nie wyłapują. Czytaj najpierw od strony trójkąta: zawsze wskazuje on rodzica.

Nawiasy kątowe połykają typy generyczne

Składowa zapisana jako +List<Item> lines renderuje się jako +List lines, bo przeglądarka traktuje <Item> jak znacznik HTML. Mermaid używa tyld: +List~Item~ lines, a dla klasy generycznej class Cart~Item~.

Brak nawiasów zamienia metody w pola

Zapis +save trafia do przegródki atrybutów, a +save() do przegródki metod. Rozstrzygają o tym same nawiasy, a nie typ zwracany. Diagram nadal się renderuje, więc pomyłka przechodzi przez przegląd — dopisuj nawiasy nawet wtedy, gdy metoda nie przyjmuje argumentów.

Podstawowa składnia

.mmd

classDiagram
    class Animal {
      +String name
      +makeSound() void
    }
    Animal <|-- Dog : inheritance

class Invoice { -String id +total(Money vat) Money }
Poprzedzaj składowe znakami: + publiczna, - prywatna, # chroniona, ~ pakietowa. Typ zapisany po nawiasach to typ zwracany; bez nawiasów linia jest atrybutem.
Customer "1" o-- "0..*" Invoice : owns
Liczności zapisuje się w cudzysłowach po obu stronach, a etykieta po dwukropku nazywa relację. Czytaj ją w kierunku, w którym zapisano linię.
class Gateway { <<interface>> }
Stereotyp w podwójnych nawiasach kątowych oznacza interfejs, klasę abstrakcyjną, wyliczenie albo usługę. Renderuje się we własnej linii nad nazwą klasy.
namespace Billing { class Invoice }
Przestrzeń nazw grupuje klasy w opisanej ramce, co utrzymuje czytelność dużego diagramu i odwzorowuje granice pakietów lub modułów obecne już w kodzie.

Pytania o ten diagram

Jakie relacje obsługuje Mermaid?

Dziedziczenie (<|--), kompozycja (*--), agregacja (o--), asocjacja (-->), zależność (..>) i realizacja (..|>), każda z opcjonalnymi licznościami i etykietami.

Czy mogę wygenerować diagram klas z kodu?

Wklej swoje klasy lub opisz domenę, a AI wydobędzie encje, atrybuty i relacje, tworząc czytelny diagram klas.

Czy diagramy klas renderują się w Notion albo Confluence?

Notion renderuje Mermaid wewnątrz bloku kodu. Confluence nie ma natywnego wsparcia, więc użyj makra z Marketplace albo wklej wyeksportowany SVG, który pozostaje ostry przy każdym powiększeniu i da się podmienić w miejscu.

Czy mogę decydować, gdzie Mermaid umieści klasy?

Nie wprost. Układ jest automatyczny; jedyne dźwignie to direction LR albo TB, grupowanie klas w przestrzenie nazw i przestawianie deklaracji relacji. Stały układ uzyskasz, eksportując SVG i poprawiając go w edytorze wektorowym.

Czy mogę podlinkować klasę do jej pliku źródłowego?

Tak. Zapis click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" zamienia prostokąt w odnośnik i dodaje dymek. Kotwica żyje wewnątrz SVG, więc przetrwa eksport do SVG i ginie w chwili, gdy wyeksportujesz PNG.

Czy Mermaid pokazuje składowe abstrakcyjne i statyczne?

Tak. Gwiazdka na końcu oznacza składową abstrakcyjną, a znak dolara — statyczną: +area()* float, +unit()$ Shape. Renderują się zgodnie z konwencją UML: kursywa dla abstrakcyjnych, podkreślenie dla statycznych. Całą klasę oznacza stereotyp <<abstract>> w jej ciele.

Diagram klas czy inny typ diagramu?

Diagram klas czy diagram związków encji?

Te same prostokąty, inny odbiorca. Diagram związków encji opisuje tabele, kolumny i klucze tak, jak istnieją w bazie danych; diagram klas opisuje typy, zachowanie i dziedziczenie tak, jak istnieją w kodzie. Jeśli prostokąty mają metody, to diagram klas.

Diagram klas czy diagram stanów?

Modelują ten sam obiekt z dwóch stron. Diagram klas mówi, czym jest zamówienie — jego pola, relacje i metody. Diagram stanów mówi, przez co zamówienie przechodzi: szkic, opłacone, wysłane, i zdarzenia pomiędzy. Bogate domeny potrzebują obu.

Poznaj pozostałe typy diagramów

🔀 Schemat blokowy 💬 Diagram sekwencji 🗄️ Diagram związków encji 🔄 Diagram stanów 📅 Wykres Gantta 🥧 Wykres kołowy 🧠 Mapa myśli 🌿 Graf Git 🕰️ Oś czasu 🚶 Podróż użytkownika 🎯 Wykres ćwiartkowy

Stwórz swój Diagram klas już teraz

Opisz go naturalnym językiem — AI napisze kod Mermaid za Ciebie.

Otwórz Mermaid Studio