🧩 Mermaid

Klassediagram

Modelleer je domein en objectstructuur

Open dit voorbeeld in de editor Genereer er een met AI

Wat is een Klassediagram?

Een klassediagram beschrijft de typen in een systeem — hun attributen, methoden en relaties: overerving, compositie, associatie. Het is de UML-klassieker voor domeinmodellering en softwareontwerp.

Klassediagrammen komen het best tot hun recht in ontwerpreviews en bij onboarding, waar een nieuwe collega de vorm van het domein nodig heeft vóór de code. Ze tonen wat er bestaat, wat het bezit en waarvan het afhangt — de koppeling die een mappenstructuur verbergt. Over runtime zeggen ze niets: geen aanroepvolgorde, geen levenscyclus, geen volumes. En een diagram dat vandaag klopt, klopt na de volgende refactor niet meer tenzij iemand het bijhoudt. Gedeelde typen worden opnieuw getekend in elk diagram dat ze nodig heeft.

Live voorbeeld

Mermaid-code

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

Live voorbeeld

Wanneer gebruik je het

Een domein modelleren voordat je code schrijft (DDD, OOP-ontwerp)

Bestaande codebases documenteren voor onboarding

Database-objectmappings en API-resourcemodellen ontwerpen

Veelgemaakte fouten

Overervingspijlen wijzen naar de ouder

Animal <|-- Dog betekent dat Dog van Animal erft: de open driehoek staat bij de basisklasse. Dog <|-- Animal parseert probleemloos en draait je hiërarchie stilletjes om, wat reviewers bijna nooit opmerken. Lees eerst de kant met de driehoek: die benoemt altijd de ouder.

Punthaken slokken generics op

Een lid geschreven als +List<Item> lines rendert als +List lines, omdat de browser <Item> als een HTML-tag behandelt. Mermaid gebruikt tildes: +List~Item~ lines, en class Cart~Item~ voor een generieke klasse.

Zonder haakjes wordt een methode een veld

+save komt in het attributenvak terecht en +save() in het methodenvak. Alleen de haakjes bepalen dat, niet het retourtype. Het diagram rendert gewoon, dus de fout overleeft de review — zet de haakjes er ook bij als de methode geen argumenten heeft.

Basissyntaxis

.mmd

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

class Invoice { -String id +total(Money vat) Money }
Zet vóór elk lid + public, - private, # protected of ~ package. Een type na de haakjes is het retourtype; zonder haakjes is de regel een attribuut.
Customer "1" o-- "0..*" Invoice : owns
Kardinaliteiten staan aan beide kanten tussen aanhalingstekens en het label na de dubbele punt benoemt de relatie. Lees hem in de richting waarin de lijn geschreven is.
class Gateway { <<interface>> }
Een stereotype tussen dubbele punthaken markeert een interface, abstracte klasse, enumeratie of service. Het rendert op een eigen regel boven de naam van de klasse.
namespace Billing { class Invoice }
Een namespace groepeert klassen in een gelabeld kader, wat een groot diagram leesbaar houdt en de package- of modulegrenzen uit de codebase weerspiegelt.

Vragen over dit diagram

Welke relaties ondersteunt Mermaid?

Overerving (<|--), compositie (*--), aggregatie (o--), associatie (-->), afhankelijkheid (..>) en realisatie (..|>), elk met optionele kardinaliteiten en labels.

Kan ik een klassediagram genereren uit code?

Plak je klassen of beschrijf je domein en de AI extraheert entiteiten, attributen en relaties tot een strak klassediagram.

Renderen klassediagrammen in Notion of Confluence?

Notion rendert Mermaid in een codeblok. Confluence heeft geen native ondersteuning: gebruik een macro uit de Marketplace of plak een geëxporteerde SVG, die bij elke zoom scherp blijft en ter plekke te vervangen is als het model verandert.

Kan ik bepalen waar Mermaid de klassen plaatst?

Niet rechtstreeks. De lay-out is automatisch; je enige knoppen zijn direction LR of TB, klassen groeperen in namespaces, en de volgorde van je relatiedeclaraties. Voor een vaste lay-out exporteer je de SVG en pas je die aan in een vectoreditor.

Kan ik een klasse aan zijn bronbestand koppelen?

Ja. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" maakt van het blok een link en voegt een tooltip toe. Het anker zit in de SVG zelf, dus het overleeft een SVG-export en verdwijnt zodra je naar PNG exporteert.

Kan Mermaid abstracte of statische leden tonen?

Ja. Een asterisk aan het eind maakt een lid abstract en een dollarteken maakt het statisch — +area()* float, +unit()$ Shape. Ze renderen zoals UML het verwacht: cursief voor abstract, onderstreept voor statisch. Een hele klasse krijgt het stereotype <<abstract>> in de body.

Klassediagram of een ander diagramtype?

Klassediagram of entiteit-relatiediagram?

Dezelfde blokken, een ander publiek. Een ER-diagram beschrijft tabellen, kolommen en sleutels zoals ze in de database bestaan; een klassediagram beschrijft typen, gedrag en overerving zoals ze in de code bestaan. Hebben de blokken methoden, dan is het een klassediagram.

Klassediagram of toestandsdiagram?

Ze modelleren hetzelfde object vanuit twee hoeken. Het klassediagram zegt wat een Order ís — velden, relaties, methoden. Het toestandsdiagram zegt wat een Order doormaakt: concept, betaald, verzonden, en de gebeurtenissen daartussen. Rijke domeinen hebben beide nodig.

Verken de andere diagramtypen

🔀 Flowchart 💬 Sequentiediagram 🗄️ Entiteit-relatiediagram 🔄 Toestandsdiagram 📅 Gantt-grafiek 🥧 Cirkeldiagram 🧠 Mindmap 🌿 Git-graaf 🕰️ Tijdlijn 🚶 User journey 🎯 Kwadrantgrafiek

Maak nu je Klassediagram

Beschrijf het in gewone taal — de AI schrijft de Mermaid-code voor je.

Mermaid Studio openen