Blokdiagram
Een blokdiagram bestaat uit blokken en verbindingslijnen om complexe systemen, processen of architecturen visueel weer te geven. Blokken vertegenwoordigen basiscomponenten of -functies, en verbindingslijnen tonen de relaties of stromen tussen deze componenten; blokdiagrammen zijn essentieel in diverse vakgebieden zoals techniek, softwareontwikkeling en procesbeheer.
Kopiëren
Insluiten
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
Toepassingen van blokdiagrammen
Het hoofddoel van een blokdiagram is een overzicht op hoog niveau van een systeem te bieden, zodat mensen het gemakkelijk kunnen begrijpen en analyseren zonder de complexe details van elke component te hoeven kennen. Dit maakt blokdiagrammen bijzonder nuttig voor het vereenvoudigen van complexe systemen en het uitleggen van de algemene structuur en interactie van de componenten binnen een systeem.
Gebruiksscenario's
Blokdiagrammen vinden brede toepassing in allerlei sectoren en disciplines, met name:
- Softwarearchitectuur: in softwareontwikkeling kunnen blokdiagrammen worden gebruikt om de architectuur van softwaretoepassingen te illustreren. Dit omvat het tonen van hoe afzonderlijke modules of services met elkaar interacteren, gegevensstromen en de interactie tussen componenten op hoog niveau.
- Netwerktopologie: blokdiagrammen zijn zeer geschikt voor het weergeven van netwerkarchitecturen in IT en telecommunicatie. Ze kunnen tonen hoe verschillende netwerkapparaten en -services met elkaar zijn verbonden, waaronder routers, switches, firewalls en de gegevensstroom door het netwerk.
- Processtroomdiagram: in het bedrijfsleven en de maakindustrie kunnen blokdiagrammen worden gebruikt om processtroomdiagrammen te maken. Deze processtroomdiagrammen vertegenwoordigen de verschillende fasen van een bedrijfs- of productieproces en helpen bij het visualiseren van de volgorde van stappen, beslissingspunten en procesbeheer.
- Elektrisch systeem: ingenieurs gebruiken blokdiagrammen om elektrische systemen en circuits weer te geven. Ze kunnen de structuur van een elektrisch systeem op hoog niveau, de interactie tussen verschillende elektrische componenten en de stroom van elektrische stroom illustreren.
- Onderwijsdoeleinden: blokdiagrammen worden ook veel gebruikt in onderwijsmateriaal om complexe concepten en systemen op een vereenvoudigde manier uit te leggen. Blokdiagrammen helpen bij het opsplitsen en visualiseren van wetenschappelijke theorieën, engineeringprincipes en technische systemen.
Vervolgens gaan we dieper in op het gebruik van Mermaid voor het maken en bewerken van blokdiagrammen, van de basissyntaxis tot geavanceerde configuratie en stijlen.
Eenvoudig blokdiagram
Basisstructuur
Een blokdiagram bestaat uit blokken die verschillende entiteiten of componenten vertegenwoordigen; in Mermaid kunnen blokken eenvoudig worden gemaakt met eenvoudige tekstlabels. De meest basale vorm van een blokdiagram kan een reeks blokken zonder enige verbindingslijnen zijn.
Voorbeeld van een eenvoudig blokdiagram: om een eenvoudig blokdiagram met drie blokken met de labels a, b en c te maken, is de syntaxis als volgt:
Kopiëren
Insluiten
block-beta
a b c
Deze code genereert drie horizontaal gerangschikte blokken; elk blok wordt automatisch van afstand en uitlijning voorzien voor optimale leesbaarheid.
Het aantal te gebruiken kolommen definiëren
Meerkolomsdiagram
Hoewel een eenvoudig blokdiagram lineair en eenvoudig is, kunnen complexere systemen een gestructureerde lay-out vereisen. Mermaid staat toe om blokken in meerdere kolommen te organiseren, wat helpt bij het maken van complexere en gedetailleerdere diagrammen.
Voorbeeld van een meerkolomsdiagram: wanneer blokken over meerdere kolommen moeten worden verdeeld, kun je het aantal kolommen opgeven en de blokken dienovereenkomstig rangschikken. Hier is hoe je een blokdiagram met drie kolommen en vier blokken maakt, waarbij het vierde blok op de tweede regel verschijnt:
Kopiëren
Insluiten
block-beta
columns 3
a b c d
Met deze syntaxis rangschikt Mermaid de blokken a, b, c en d in drie kolommen en breekt waar nodig af naar de volgende regel. Deze functie is bijzonder nuttig voor het weergeven van gelaagde of meerlaagse systemen.
Geavanceerde blokconfiguratie
De geavanceerde syntaxis van Mermaid biedt meer flexibiliteit en complexiteit bij het ontwerpen van diagrammen en kan een breder scala aan use-cases en scenario's aan
De breedte van blokken aanpassen
Meerdere kolommen overspannen
In complexere diagrammen heb je mogelijk blokken nodig die meerdere kolommen overspannen, om bepaalde componenten te benadrukken of grotere entiteiten weer te geven. Mermaid staat toe om de breedte van blokken aan te passen zodat ze meerdere kolommen beslaan, wat de leesbaarheid en structuur van het diagram verbetert.
Voorbeeld: om een blok te maken dat twee kolommen overspant, kun je voor elk blok de gewenste breedte opgeven:
Kopiëren
Insluiten
block-beta
columns 3
a["A label"] b:2 c:2 d
In dit voorbeeld beslaat het blok met het label A één kolom, terwijl de blokken b en c 2 kolommen overspannen en d aan zijn eigen kolom wordt toegewezen. Deze flexibiliteit in blokgrootte is essentieel om systemen met componenten van verschillend belang of formaat nauwkeurig weer te geven.
Samengestelde blokken maken
Geneste blokken
Samengestelde blokken maken het mogelijk om geneste of gelaagde systemen weer te geven, waarbij één component meerdere subcomponenten bevat.
Voorbeeld: het maken van een samengesteld blok houdt in dat je een bovenliggend blok definieert en daar vervolgens onderliggende blokken in nestelt. Hier is hoe je de syntaxis van een samengesteld blok met geneste elementen definieert:
Kopiëren
Insluiten
block-beta
block
D
end
A["A: I am a wide one"]
In deze syntaxis is D een subblok dat is genest in een groter bovenliggend blok. Deze functie is bijzonder nuttig voor het beschrijven van complexe structuren, zoals een server met meerdere services of een afdeling binnen een groter organisatorisch kader.
Automatische kolombreedte
Breedte aanpassen
Mermaid staat toe om de kolombreedte dynamisch aan te passen op basis van de inhoud van de blokken. De breedte van een kolom wordt bepaald door het breedste blok in de kolom, zodat het diagram in balans en leesbaar blijft.
Voorbeeld: in een diagram met blokken van verschillende grootte past Mermaid de kolombreedte automatisch aan op het grootste blok in elke kolom.
Kopiëren
Insluiten
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
Hier wordt gedemonstreerd hoe Mermaid de breedte van kolommen dynamisch aanpast op het breedste blok.
Blokken horizontaal samenvoegen: wanneer blokken horizontaal moeten worden gestapeld, kan dit met de kolombreedte worden gedaan. Hier is de syntaxis voor het maken van een blokdiagram met 4 blokken die op elkaar zijn gestapeld:
Kopiëren
Insluiten
block-beta
block
columns 1
a["A label"] b c d
end
In dit voorbeeld wordt de breedte van het samengevoegde blok automatisch aangepast aan de breedte van het grootste subblok.
Soorten en vormen van blokken
Mermaid-blokdiagrammen zijn niet beperkt tot de standaard rechthoekige vorm. Mermaid biedt meerdere blokvormen, waardoor verschillende soorten informatie of entiteiten gedetailleerder en persoonlijker kunnen worden weergegeven.
Standaard blokvormen
Afgeronde rechthoek
Maak een blok in de vorm van een afgeronde rechthoek, bruikbaar om een zachtere of flexibelere component weer te geven:
Kopiëren
Insluiten
block-beta
id1("This is the text in the box")
Stadionvorm
Een blok in de vorm van een stadion kan worden gebruikt om een procesgerichte component weer te geven:
Kopiëren
Insluiten
block-beta
id1(["This is the text in the box"])
Subprocesvorm
Voor het weergeven van een subproces of een ingesloten proces, weergegeven met een rechthoekig blok met dubbele verticale lijnen:
Kopiëren
Insluiten
block-beta
id1[["This is the text in the box"]]
Cilindervorm
De cilindervorm is zeer geschikt voor het weergeven van databases of opslagcomponenten:
Kopiëren
Insluiten
block-beta
id1[("Database")]
Cirkel
De cirkelvorm kan worden gebruikt om gecentraliseerde of kritieke componenten weer te geven:
Kopiëren
Insluiten
block-beta
id1(("This is the text in the circle"))
Asymmetrische vorm, ruit en zeshoek
Gebruik een ruit voor beslissingen; voor unieke of gespecialiseerde processen kun je een asymmetrische vorm en een zeshoek gebruiken:
Asymmetrische vorm
Kopiëren
Insluiten
block-beta
id1>"This is the text in the box"]
Kopiëren
Insluiten
block-beta
id1{"This is the text in the box"}
Kopiëren
Insluiten
block-beta
id1{{"This is the text in the box"}}
Parallellogram en trapezium
Parallellogrammen en trapeziums zijn zeer geschikt voor invoer/uitvoer- en overgangsprocessen
Kopiëren
Insluiten
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Dubbele cirkel
Om kritieke of componenten met hoge prioriteit te markeren, is het gebruik van een dubbele cirkel zeer effectief:
Kopiëren
Insluiten
block-beta
id1((("This is the text in the circle")))
Pijlblokken en lege blokken
Pijlblok
Een pijlblok kan de richting of stroom binnen een proces visueel weergeven:
Kopiëren
Insluiten
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Leeg blok
Lege blokken kunnen worden gebruikt om witruimte te creëren, wat nuttig is voor de lay-out en leesbaarheid:
Kopiëren
Insluiten
block-beta
columns 3
a space b
c d e
Kopiëren
Insluiten
block-beta
ida space:3 idb idc
Let op: je kunt met het cijferteken space:num het aantal kolommen instellen dat een leeg blok inneemt, waarbij num de kolombreedte aangeeft. Je kunt ook space gebruiken, met standaard één kolom.
De standaardvormen en speciale vormen in Mermaid versterken de uitdrukkingskracht van blokdiagrammen, waardoor een nauwkeurigere en contextrijkere weergave mogelijk wordt.
Blokken met lijnen verbinden
Een belangrijk kenmerk van Mermaid-blokdiagrammen is de mogelijkheid om de afzonderlijke blokken met verschillende soorten lijnen of links te verbinden.
Basisverbindingen en pijltypen
Om blokken te verbinden zijn pijlen of lijnen nodig. Deze verbindingslijnen beschrijven de relaties of informatiestromen tussen blokken. Mermaid biedt een reeks pijltypen om aan verschillende diagrambehoeften te voldoen.
Basislinks
Maak een eenvoudige link met een pijl die de richting of stroom van het ene blok naar het andere toont:
Kopiëren
Insluiten
block-beta
A space B
A-->B
Dit voorbeeld illustreert de directe verbinding van blok A naar blok B.
Tekst op links
Naast het verbinden van blokken is het vaak nodig om relaties te beschrijven of te labelen. Mermaid staat toe om tekst aan een link toe te voegen, wat context aan de link geeft.
Om tekst aan een link toe te voegen, neem je de tekst op in de linkdefinitie:
Kopiëren
Insluiten
block-beta
A space:2 B
A-- "X" -->B
Kopiëren
Insluiten
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
Stijlen en aanpassingen
Naast de structuur en lay-out van blokdiagrammen biedt Mermaid ook talrijke stijlopties; deze aanpassingsmogelijkheden maken het mogelijk om visueel aantrekkelijkere en informatievere diagrammen te maken.
Stijl van afzonderlijke blokken
Mermaid kan afzonderlijke blokken gedetailleerd vormgeven; je kunt diverse CSS-eigenschappen toepassen, zoals kleur, lijn en randdikte.
De stijl van een afzonderlijk blok aanpassen
Om een aangepaste stijl op een blok toe te passen, kun je de syntaxis style gebruiken, gevolgd door de blokidentificatie en de gewenste CSS-eigenschappen:
Kopiëren
Insluiten
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Klassestijl
Mermaid ondersteunt het toepassen van stijlen op klassen. Als je een bepaalde set stijlen op meerdere elementen wilt toepassen, is het gemakkelijker om stijlen te gebruiken, omdat je deze elementen dan alleen aan een klasse hoeft te koppelen.
Een stijl voor een enkele klasse instellen
Kopiëren
Insluiten
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Hier wordt een klasse met de naam blue gedefinieerd en toegepast op blok A, terwijl blok B een afzonderlijke stijl krijgt.
Use cases
Wanneer de modulaire diagrammen van Mermaid-blokdiagrammen in de praktijk worden toegepast, komt hun veelzijdigheid volledig tot uiting.
Gedetailleerde voorbeelden van diverse functies
Met structuur-, link- en stijlelementen kunnen we Mermaid-blokdiagrammen maken die in verschillende contexten een specifieke rol vervullen.
Systeemarchitectuur
Hieronder volgt een eenvoudige software-systeemarchitectuur met onderling verbonden componenten:
Kopiëren
Insluiten
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
Dit voorbeeld toont een basisarchitectuur met een frontend, backend en database, waarbij de afzonderlijke blokken er verschillend uitzien om verschillende componenttypen te onderscheiden.
Bedrijfsproces
Hieronder volgt een bedrijfsproces met beslissingspunten en meerdere fasen:
Kopiëren
Insluiten
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
Deze praktijkvoorbeelden benadrukken de praktische waarde van Mermaid-blokdiagrammen bij het vereenvoudigen van complexe informatie en het realiseren van effectieve communicatie op verschillende gebieden.
Probleemoplossing
Het maken van complexe blokdiagrammen met de Mermaid-syntaxis kan soms uitdagend zijn; hier worden veelvoorkomende syntaxisfouten opgesomd en tips gegeven voor het beheren van complexere diagramstructuren.
Veelvoorkomende syntaxisfouten
Het vermijden van veelvoorkomende syntaxisfouten is de sleutel tot het soepel gebruiken van Mermaid-blokdiagrammen.
Linkfout
Het gebruik van een onjuiste linksyntaxis kan leiden tot onverwachte resultaten of een beschadigd diagram:
Kopiëren
Insluiten
block-beta
A - B
Correctie: zorg ervoor dat je pijlen (--> of ---) correct gebruikt om de blokken te verbinden, om de richting en het type van de verbinding te definiëren. Bovendien is een van de basisprincipes van blokdiagrammen dat de auteur volledige controle heeft over de positie van de blokken, dus in het bovenstaande geval moeten spaties tussen de blokken worden toegevoegd:
Kopiëren
Insluiten
block-beta
A space B
A --> B
Stijlverschuiving
Het toepassen van stijlen in de verkeerde context of met een onjuiste syntaxis kan ertoe leiden dat de stijl niet werkt zoals verwacht:
Kopiëren
Insluiten
block-beta
A
style A fillpink;
Correctie: zorg ervoor dat stijleigenschappen correct met komma's worden gescheiden en gebruik de juiste CSS-eigenschapnotatie om de syntaxis te corrigeren:
Kopiëren
Insluiten
block-beta
A
style A fill:pink,stroke:#333;
