Ein Blockdiagramm ist ein strukturierter Layout-Engine, der verwendet wird, um komplexe Softwarearchitekturen, Hardwareplattformen oder Organisationsmodelle darzustellen. Eingeführt native in Mermaid.js, die blockEngine behandelt die Layout-Leinwand als absoluten mathematischen Rastermatrix. Dies bietet präzise Kontrolle über Spaltenausrichtungen, isolierte Layout-Einbettungsgrenzen, strukturelle Abstandsbereiche und explizite Kantenport-Verknüpfungskonfigurationen.
Verständnis der Raster-Matrix-Strategie
Im Gegensatz zu standardmäßigen freiformigen Flussdiagrammen, die Layoutspuren dynamisch erraten, basiert ein Blockdiagramm auf einem starren linearen Koordinatengittersystem:
- Die Spaltenschwelle: Sie legen eine strenge horizontale Obergrenze mit dem
columnsModifier fest. Wenn das Raster mit Blöcken gefüllt ist, werden zusätzliche Elemente sauber auf die nächste Zeile automatisch umgebrochen. - Größenanpassung durch Rasterfelder: Standardmäßig nimmt jeder Block einen einzelnen Koordinatslot ($1 times 1$) ein. Sie können dieses Verhalten ändern, indem Sie explizite Spaltenbreiten zuweisen, um Elemente perfekt über mehrere Spuren hinweg zu verteilen.
Grundlegende Syntaxstruktur
Jedes Layout beginnt mit dem blockDeklarationskopf. Danach wird die Zeilenbreitenkapazität mit dem columnsSchlüsselwort festgelegt, und die Deklaration von Blöcken in aufeinanderfolgenden Zeilen.
block
columns 3
componentA["Erster Block"]
componentB["Mittlerer Block"]
componentC["Rechter Block"]
Syntax-Referenz
Die Tabelle unten zerlegt die grundlegenden Datenparameter, benutzerdefinierte Stil-Schlüsselwörter und strukturelle Container, die vom Block-Interpreter native erkannt werden.
| Syntax-Komponente | Typ-Anforderung | Beschreibung & visuelle Layout-Regeln |
|---|---|---|
| Deklaration | Schlüsselwort-Bezeichner | Initialisiert die Matrix-Raster-Block-Leinwand. Muss genau den Block Kopfzeilenzeichenfolge. |
| Spaltensatz | Schlüsselwort + Ganzzahl | Definiert die Gesamtanzahl horizontaler Felder vor dem Umbruch der Zeilen (z. B. Spalten 4). |
| Standardblock | ID + optionales Label | Erstellt eine Standard-Datenbox: id["Beschriftungstext"]. Formdekoratoren entsprechen der Flussdiagrammsyntax (z. B. (()) für Kreise, [()] für Datenbanken). |
| Blockabmessungsüberschreibung | Doppelpunktparameterblock | Überschreibt den Standard-$1 times 1$-Layout-Skalenraster-Fußabdruck, indem maßgeschneiderte Spaltenbreitenblöcke explizit zugewiesen werden: id:Breite. |
| Platzhalterelement | Reserviertes Schlüsselwort | Fügt ein unsichtbares, strukturelles $1 times 1$-leeres Abstandselement in die aktive Zeile ein, wobei das genaue PlatzSchlüsselwort verwendet wird. Sie können Breitenbereiche inline wie folgt multiplizieren: Platz:2. |
| Blockpfeil | Spezialisierte Entitäts-ID | Rendert eine dicke, strukturierte Übergangs-Pfeil-Box innerhalb eines Rasterslots: arrowId<["Beschriftung"]>(Richtung). Richtungen umfassen nach oben, nach unten, nach links, nach rechts. |
| Verbund-Wrapper | Block / Endcontainer | Integriert eine eigenständige, isolierte Untergittermatrix direkt innerhalb eines übergeordneten Block-Slots: block:UnterID ... end. Untergitter können ihre eigenen unabhängigen Spaltenbegrenzungen deklarieren. |
Erweiterte Funktion: Explizite Blockabmessungen und Platzmodifikatoren
Für asymmetrische Layouts können Sie explizite horizontale Größenmetriken direkt auf Standardblöcke oder Platz-Trennlinien mit einem Doppelpunkt-Trennzeichen (:Breite). Dadurch werden Elemente gezwungen, sauber über mehrere Gitterpositionen zu reichen.
block
Spalten 4
breiterKomponente["Breiter Dashboard-Kopfzeile"]:4
linkesFeld["Sidebar"] Platz:2 rechtesFeld["Hauptfenster"]
Erweiterte Funktion: Kantenarten, Richtungen und Verbindungsoptionen
Verbindungen innerhalb des Block engine sind in standardmäßige semantische Linien und strukturelle Layout-Block-Pfeile unterteilt. Standardverbindungsleitungen unterstützen die Angabe expliziter Richtungsbeschränkungen, um festzulegen, wie Linien um Elemente herumgehen.
1. Standard-Linienverbindungen
Blockverbindungen verwenden die standardmäßigen Verbindungsoperatoren (-->, --, <-->). Sie können die Routing-Steuerung jedoch durch Anhängen von Richtungen oder Modifikatoren innerhalb von Klammern steuern:
A --> B: Zeichnet eine standardmäßige gerichtete Linie von Element A zu Element B.A -- x B: Zeichnet einen Verbindungsverlauf, der mit einem „X“-Zeichen endet, das einen blockierten Pfad anzeigt.A -- o B: Zeichnet einen Verbindungsverlauf, der mit einem offenen Kreisverbindungs-Punkt endet.
2. Dynamische Layout-Blockpfeile
Blockpfeile werden als echte Layoutkomponenten behandelt, die einen echten Koordinatenindexblock in Ihrer Zeilenbudget-Matrix einnehmen. Sie verwenden Greater-than- und Less-than-Syntaxeigenschaften, um physische Flusspfade abzubilden:
block
columns 3
producer["Datenproduzent"]
midArrow<["Verkehr transformieren"]>(rechts)
consumer["Datenverbraucher"]
Erweiterte Funktion: Sub-Block-Matrix-Verkettung (zusammengesetzte Gruppierung)
Die block:idWrapper fungiert als isolierter Layout-Box-Kontextumgebung. Ein Anwendungsgruppencontainer kann innerhalb eines Unterblocks seine eigene eindeutige horizontale Spaltenanzahl festlegen, wodurch komplexe Komponenten eng gruppiert werden können, ohne die Abstände des globalen übergeordneten Canvas-Vorlagenrasters zu beeinflussen.
block
columns 2
rootGateway["Globales Gateway"]
block:microserviceCluster
columns 3
auth["Auth-Knoten"]
api["Kern-API"]
worker["Arbeitserzeuger-Engine"]
end
Realitätsnahe Bauplanung: Mehrschichtige Infrastruktur mit Cache
Dieser umfassende, mehrzeilige Bauplan zeigt eine saubere Infrastruktur-Setup für Produktionsumgebung. Er legt ein 3-Spalten-Verarbeitungsnetzlayout fest und verwendet strukturellePlatzElemente, um eine Datenbank-Ebene zu isolieren, und ordnet einen dicken nach unten gerichtetenblockPfeil, und isoliert einen separaten internen Unter-System-Container mit einer verschachtelten block:id ... end zusammengesetzte Hülle.
block
columns 3
%% Zeile 1: Eingangsdienste
dnsClient(("Web-Client"))
loadBalancer["Edge-Lastverteiler"]
space
%% Zeile 2: Verbindungsfluss nach unten zu Microservices
space
downRoute<["Verkehr weiterleiten"]>(down)
space
%% Zeile 3: Zusammengesetzter Anwendungs-Umgebung-Cluster
block:appCluster
columns 2
authService["Authentifizierung"]
apiEngine["Kern-API-Arbeiter"]
end
space
database[("PostgreSQL-Datenbank")]
%% Klare Ausrichtung der Strukturverbindungen zwischen Matrizen herstellen
loadBalancer --> appCluster
appCluster --> database
Häufige Syntax-Fehler & Systembeschränkungen
Beim Erstellen präziser Gitter-Matrix-Karten sollten diese Überprüfungen berücksichtigt werden, um Parsing-Fehler zu vermeiden:
- Einhaltung des Spaltenbudgets:Achten Sie sorgfältig auf Ihre Spaltenanzahl. Wenn Sie
columns 3und 4 aufeinanderfolgende Blöcke in einer Zeile schreiben, wird der vierte Block automatisch in Zeile 2 verschoben, was die vorgesehenen Verbindungswege von links nach rechts stören kann. - Reihenfolge der zusammengesetzten Verschachtelung: Beim Erstellen innerer Container mit
block:id, müssen Sie den Untergitter-Arbeitsbereich immer mit demendSchlüsselwort in einer isolierten Zeile verschließen, bevor nachfolgende Elemente deklariert werden. Wenn der Block nicht geschlossen wird, wird die Diagrammerstellung angehalten. - Einschränkungen für Block-Pfeil-Ziele: Die Richtungseigenschaft in Klammern nach einem Block-Pfeil (z. B.
(up),(down)) muss ein Kleinbuchstaben-Literal sein, das die System-Schlüsselwörter exakt trifft. Großschreibung der Richtung führt zu Verarbeitungsfehlern. - Beschriftungsgrenzüberschneidungen: Standard-Flowchart-Formdekoratoren (wie Klammern
()für runde Felder oder geschweifte Klammern{}für Diamanten) werden vollständig unterstützt. Stellen Sie sicher, dass alle Anzeigetextbeschriftungen innerhalb von Formen saubere doppelte Anführungszeichen verwenden, um das Löschen von Zeichen zu vermeiden.