# Systeemdiagrammaker

URL: https://discuvr.org/system-diagram/?hl=nl
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Teken architectuur- en stroomdiagrammen door A -> B te typen. Automatische lay-out, inklapbare groepen, genummerde stappen, PNG- en SVG-export.

Op een whiteboard teken je elk blok en elke pijl en lijn je alles met de hand uit. Hier typ je wat met wat praat, één regel per pijl, en de opmaak gebeurt vanzelf. Zet verwante diensten in een groep en klap die in tot één blok voor het overzicht; open hem weer voor de details.

## Wat het doet

- Automatische opmaak, van links naar rechts of van boven naar beneden, die meebeweegt terwijl je typt.
- Vormen op basis van de naam: DB wordt een database, Kafka een wachtrij, User een persoon, een naam die op ? eindigt een beslissing.
- Groepen die inklappen tot één blok, zodat één diagram zowel overzicht als detail toont.
- Blokken ook op het canvas slepen, verbinden, hernoemen en toevoegen; elke wijziging gaat terug naar de tekst.
- Genummerde stappen, handgetekende stijl, PNG- en SVG-export en deellinks. Er wordt niets geüpload.

## Hoe het werkt

1. Typ regels als User -> Web App -> Orders DB of begin met een sjabloon.
2. Voeg groepen toe met Naam { ... }, labels na een dubbele punt en --> voor asynchrone aanroepen.
3. Wissel tussen Overzicht en Details, schik blokken door te slepen en exporteer of kopieer een link.

## Vragen

**Wat is het verschil met Excalidraw?**

Excalidraw is een vrij whiteboard: je plaatst zelf elke vorm en pijl. Hier is de tekst het diagram en is de opmaak automatisch, dus een dienst toevoegen is één regel in plaats van blokken tekenen en opnieuw uitlijnen. Voor een losse schets past Excalidraw beter.

**Hoe toon ik zowel overzicht als detail?**

Zet verwante blokken in een groep met Naam { ... }. Overzicht klapt elke groep in tot één blok en voegt de pijlen samen; Details opent ze weer. Je kunt ook één groep tegelijk inklappen via de kop.

**Wordt mijn diagram ergens opgeslagen?**

Nee. Het wordt in je browser getekend en in de lokale opslag bewaard. Een deellink draagt het diagram in de link zelf, na het teken #, dat browsers nooit naar de server sturen.

**Kan ik een Mermaid-stroomdiagram plakken?**

Niet rechtstreeks; er is geen Mermaid-import. Gewone regels zoals A -> B werken, maar drie dingen verschillen. Verwijder de kopregel graph TD, anders wordt die een vak, en schrijf in plaats daarvan direction: down. Haal Mermaid-labels tussen vierkante haken weg, want tekst tussen [ ] wordt hier gelezen als vorm- en kleurtags. En --> tekent hier een gestippelde pijl voor een asynchrone aanroep, terwijl het in Mermaid een gewone pijl is; gebruik -> voor een doorgetrokken pijl.

**Wat kan ik schrijven naast A -> B?**

A -> B: tekst zet een label op de pijl, A --> B tekent een gestippelde pijl, A <-> B een pijl in twee richtingen en A <- B wijst achteruit. Naam [db, blue] stelt een vorm en kleur in; de vormen zijn service, db, cache, queue, actor, client, storage, external, decision, terminal en note. title: geeft het diagram een naam, direction: down zet het van boven naar beneden, en een regel die begint met # of // is commentaar. Een diagram bevat maximaal 300 vakken, 600 pijlen en 20.000 tekens tekst.

**Wat gebeurt er met de pijlen als ik een groep inklap?**

Pijlen tussen vakken binnen de ingeklapte groep worden verborgen, en pijlen die de rand ervan kruisen beginnen of eindigen nu bij het groepsvak. Meerdere pijlen tussen dezelfde twee vakken worden samengevoegd tot een dikkere pijl die het eerste label houdt en een aantal toevoegt. Voorbeeld: met Payments API en Ledger in Payments { ... } worden de regels Checkout -> Payments API en Checkout -> Ledger in Overzicht een enkele pijl Checkout -> Payments x2. Een groep binnen een ingeklapte groep klapt mee in, en met Stappen aan volgen de nummers de pijlen die nog zichtbaar zijn, in de volgorde waarin ze geschreven zijn.

## Meer in Ontwikkelaarstools

- [JSON-formatter](https://discuvr.org/json-formatter/?hl=nl)
- [Python Formatter](https://discuvr.org/python-formatter/?hl=nl)
- [HTML Viewer](https://discuvr.org/html-viewer/?hl=nl)
- [IP-Subnetcalculator](https://discuvr.org/ip-subnet-calculator/?hl=nl)

## Vaak gebruikt met

- [Tekst vergelijken](https://discuvr.org/text-diff/?hl=nl)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.