{"id":2085,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Mermaid.js Architekturdiagramm-Syntax und Layout-Leitfaden"},"content":{"rendered":"

Ein Architekturdiagramm bietet eine strukturierte Bauplan, die von Systemarchitekten und DevOps-Teams genutzt wird, um Infrastrukturaufbauten, Cloud-Mikroservices und strukturelle Layout-Konfigurationen zu visualisieren. Aufgebaut auf dem architecture-beta<\/code>Engine ersetzt dieses textbasierte Werkzeug manuelle Zieh-Tools durch automatisches Anordnen von strukturellen Dienstgruppen, Datenbank-Clustern, Gateways und Edge-Pfaden zu sauberen, vorhersehbaren Systemlayouts.<\/p>\n

Grundlegende Syntaxstruktur<\/h2>\n

Jedes Diagramm beginnt mit dem architecture-beta<\/code>Deklarationskopf. Sie f\u00fcllen die Leinwand aus, indem Sie einzelne Knotenelemente mit dem service<\/code>Schl\u00fcsselwort definieren und Verbindungsverl\u00e4ufe festlegen, indem Sie exakte Richtungskoordinaten-Ports (T<\/strong>op, B<\/strong>ottom, L<\/strong>eft, R<\/strong>ight) angeben, die durch Doppelpunkte und Doppelpunkte getrennt sind.<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nMermaid in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
architecture-beta\r\n  service gateway(internet)[Gateway-Bezeichnung]\r\n  service server(server)[App-Server]\r\n  \r\n  gateway:B -- T:server<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nMermaid in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Syntax-Referenz<\/h2>\n
Die Tabelle unten zeigt die prim\u00e4ren Datenkomponenten, Formatierungsschl\u00fcsselw\u00f6rter und Verbindungsattribute, die zur Erstellung einer Architekturarbeitsplatzkarte in Mermaid.js verwendet werden.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Syntaxkomponente<\/th>\nTyp-Anforderung<\/th>\nBeschreibung und Verwendungsregeln<\/th>\n<\/tr>\n<\/thead>\n
Deklaration<\/strong><\/td>\nSchl\u00fcsselwort-Bezeichner<\/td>\nInitialisiert die Arbeitsfl\u00e4che f\u00fcr die Infrastrukturabbildung. Muss genau den architektur-beta<\/code> block.<\/td>\n<\/tr>\n
Dienstknoten<\/strong><\/td>\nSchl\u00fcsselwort + Identit\u00e4tsblock<\/td>\nErkl\u00e4rt eine architektonische Entit\u00e4t. Verwendet die Syntax: dienst id(icon)[Anzeigelabel]<\/code>.<\/td>\n<\/tr>\n
Gruppenwrapper<\/strong><\/td>\nContainer-Schl\u00fcsselwort<\/td>\nGruppiert verwandte Dienste innerhalb eines sichtbaren Containers. Verwendet die Syntax: gruppe id(icon)[Gruppenbeschriftung]<\/code>.<\/td>\n<\/tr>\n
In-Schl\u00fcsselwort<\/strong><\/td>\nZuweisungsmodifikator<\/td>\nWeist einen Dienstknoten explizit an, sich innerhalb eines bestimmten, deklarierten Gruppenwrappers zu befinden: dienst id(icon)[Beschriftung] in gruppenId<\/code>.<\/td>\n<\/tr>\n
Verzweigungsknoten<\/strong><\/td>\nSchl\u00fcsselwort-Identifikator<\/td>\nLegt einen strukturellen Ausrichtungspunkt fest, der verwendet wird, um komplexe, mehrrichtungsgestaltete Verbindungswege ordentlich zu f\u00fchren: verzweigung id<\/code>.<\/td>\n<\/tr>\n
Verbindungs-Kanten<\/strong><\/td>\nPort-Richtungsoperatoren<\/td>\nKonfiguriert gerichtete Verfolgungspfade, indem die Verbindung an bestimmte Seiten des Knotens (T, B, L, R) angeheftet wird: quelle:seite -- seite:ziel<\/code>. Unterst\u00fctzt gerichtete Pfeilspitzen (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Erweiterte Gruppierung und Port-Kanten-Verlauf<\/h2>\n
Um genau zu steuern, wie Verbindungen zwischen Elementen verlaufen, ohne dass es un\u00fcbersichtlich wirkt, erfordert die Architektur-Engine explizite Port-Bindungen. Verwandte Knoten k\u00f6nnen innerhalb struktureller Gruppen organisiert werden, um Systemgrenzen zu kl\u00e4ren.<\/p>\n
1. Genauere Port-Bindungsregeln<\/h3>\n
Sie definieren, wo eine Verbindungsleitung ein Komponenten verl\u00e4sst und betritt, indem Sie einen Doppelpunkt und einen Kantenrichtungs-Flag (“T<\/code>, B<\/code>, L<\/code>, R<\/code>) an die jeweiligen Knotenbezeichnungen anh\u00e4ngen:<\/p>\n