UML Class Diagram¶

a## UML Class Diagrammen in p5.js-projecten

Doel¶

Je leert hoe je UML Class Diagrammen kunt gebruiken om de structuur van je code te documenteren en visualiseren. Zo kun je de relaties tussen objecten en classes helder weergeven voordat of nadat je code schrijft.

1. Wat is een UML Class Diagram?¶

Een UML (Unified Modeling Language) Class Diagram is een schema dat laat zien:

welke classes er bestaan,
welke eigenschappen (data) en methoden (functies) ze hebben,
en hoe deze classes zich tot elkaar verhouden.

Het helpt je om:

overzicht te krijgen bij grotere projecten,
met anderen over je ontwerp te communiceren,
bugs en duplicatie in je code te voorkomen.

2. De basisstructuur van een class in UML¶

Een class wordt meestal als een rechthoek met drie vakken weergegeven:

De naam van de class
De eigenschappen (properties)
De methoden (functions)

classDiagram
class Ball {
  +x: number
  +y: number
  +speed: number
  +color: string
  +move(): void
  +show(): void
}

Het + teken betekent dat een eigenschap of methode public is (dus overal toegankelijk).
In JavaScript gebruik je dit niet letterlijk, maar het helpt om te begrijpen wie toegang heeft tot wat.

3. De heeft-een relatie (composition / aggregation)¶

Een class kan andere objecten bevatten. Dit heet een “heeft-een” relatie. Bijvoorbeeld: een Game heeft ballen.

classDiagram
direction LR
class Game {
  +balls: Ball[]
  +update(): void
  +draw(): void
}
class Ball {
  +x: number
  +y: number
  +speed: number
  +move(): void
  +show(): void
}
Game --> Ball : "heeft-een"

De pijl --> geeft aan dat Game een verzameling Ball-objecten bevat.
In code betekent dit vaak dat Game een array met ballen heeft:

class Game {
  constructor() {
    this.balls = [new Ball(50, 100, 2, 'red'), new Ball(100, 130, 1.5, 'blue')];
  }
  update() {
    for (let b of this.balls) b.move();
  }
  draw() {
    for (let b of this.balls) b.show();
  }
}

Tip

Een heeft-een-relatie gebruik je om aan te geven dat één class afhankelijk is van een ander type object, maar dat ze niet hetzelfde zijn.

4. De is-een relatie (inheritance)¶

Soms is een class een speciale vorm van een andere class. Dan gebruik je de “is-een” relatie.

classDiagram
direction LR
class Ball {
  +x: number
  +y: number
  +speed: number
  +move(): void
  +show(): void
}
class GravityBall {
  +gravity: number
  +move(): void
}
Ball <|-- GravityBall : "is-een"

De pijl <|-- betekent dat GravityBall erft van Ball.
In code gebruik je hiervoor extends en super():

class GravityBall extends Ball {
  constructor(x, y, speed, color, gravity) {
    super(x, y, speed, color);
    this.gravity = gravity;
  }
  move() {
    this.y += this.gravity;
    super.move();
  }
}

Note

Een is-een-relatie betekent dat de subclass alle eigenschappen van de parent-class overneemt, maar ook extra gedrag kan toevoegen of veranderen.

5. Relaties combineren¶

In grotere projecten zie je vaak beide soorten relaties gecombineerd.

classDiagram
direction LR
class Game {
  +balls: Ball[]
  +update(): void
  +draw(): void
}
class Ball {
  +x: number
  +y: number
  +speed: number
  +move(): void
  +show(): void
}
class GravityBall {
  +gravity: number
  +move(): void
}
Game --> Ball : heeft-een
Ball <|-- GravityBall : is-een

Game heeft ballen.
GravityBall is een speciaal type Ball.

Deze manier van denken helpt je om de structuur van je code beter te plannen voordat je begint met programmeren.

6. Oefeningen¶

Mini-opdracht 1: Maak een UML-diagram van jouw Studiekiezers-project. Denk na: welke onderdelen heeft een Student? En waarvan is een Student een soort?

Mini-opdracht 2: Teken in Mermaid een diagram van je eigen p5-animatie met minstens één is-een en één heeft-een relatie.

classDiagram
class Student {
  +naam: string
  +interesses: string[]
}
class Opleiding {
  +naam: string
  +niveau: string
}
class Vraag {
  +tekst: string
  +opties: string[]
}
Student --> Opleiding : heeft-interesse-in
Student --> Vraag : beantwoordt

7. Reflectie¶

Waarom UML gebruiken?

Het dwingt je om vooraf na te denken over de structuur van je code.
Het helpt bij teamwerk: iedereen begrijpt de opzet.
Het maakt documentatie visueel en concreet.

Tip

Gebruik Mermaid in MkDocs om UML-diagrammen direct naast je uitleg te tonen. Zo blijft je documentatie actueel en begrijpelijk.

Begrippen¶

UML (Unified Modeling Language): gestandaardiseerde manier om softwareontwerpen te tekenen.
Class Diagram: schema dat classes, eigenschappen en relaties toont.
is-een (inheritance): een class bouwt voort op een andere class.
heeft-een (composition/aggregation): een class bevat objecten van een ander type.
super(): roept de constructor van de parent-class aan.