{"id":2113,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-sequence-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-sequence-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-sequence-diagram-syntax-guide\/","title":{"rendered":"Mermaid.js Sequenzdiagramm-Syntaxanleitung"},"content":{"rendered":"

Was ist ein Sequenzdiagramm?<\/h2>\n

Ein Sequenzdiagramm<\/strong> ist ein wesentliches Verhaltens-UML-Diagramm<\/strong> , das entwickelt wurde, um den zeitlichen Ablauf von Nachrichten, Funktionsaufrufen und Datenpaketen zwischen verschiedenen Systementit\u00e4ten \u00fcber eine lineare Zeitleiste zu visualisieren. Als Kern-UML-Diagrammtyp<\/strong>, zeichnet es Laufzeitinteraktionen durch Stapeln von Systemkomponenten entlang der X-Achse als vertikale Lebenslinien und verfolgt Nachrichtenaustausche entlang der Y-Achse nach. Diese Bauplanung ist f\u00fcr Entwickler unverzichtbar, um verteilte API-Handschlag-Abst\u00fcrze, Mikroservice-Orchestrierungspfade oder Echtzeit-Authentifizierungsabl\u00e4ufe zu debuggen.<\/p>\n

Mit Mermaid.js<\/strong>, k\u00f6nnen Sie komplexe zeitliche Prozesse mit einer intuitiven Textstruktur skripten. Die Engine verarbeitet automatisch den vertikalen Abstand, verwaltet die Ausrichtung von Nachrichtenpfeilen und zeichnet Laufzeit-Aktivit\u00e4tsbl\u00f6cke sauber \u00fcber Ihre Leinwand.<\/p>\n

Grundlagen der Syntax: Elemente und Konstrukte<\/h2>\n

Um ein genaues, leicht scannbares UML-Sequenzdiagramm in Mermaid zu gestalten, m\u00fcssen Sie die Deklarationen von Teilnehmern, Varianten von Nachrichtenpfeilen, explizite Lebenslinien und bedingte Blockstrukturen beherrschen.<\/p>\n

1. Deklaration von Teilnehmern und Akteuren<\/h3>\n

Sie deklarieren eine Standard-Systementit\u00e4t mit dem Teilnehmer<\/code> -Schl\u00fcsselwort. Wenn die Entit\u00e4t einen menschlichen Endbenutzer oder einen externen Bediener darstellt, verwenden Sie das Akteur<\/code> -Schl\u00fcsselwort, um ein Standard-Stickfiguren-Symbol auf der Leinwand darzustellen:<\/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 
sequenzDiagramm\r\n    akteur Client\r\n    teilnehmer API als Gateway-Router<\/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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nMermaid in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Pro-Tipp:<\/em> Verwenden Sie das als<\/code> -Schl\u00fcsselwort, um lange Komponentennamen auf kompakte interne Aliase abzubilden, wodurch Ihre Nachrichtenskripte knapp und lesbar bleiben.<\/p>\n
2. Formatierung von Nachrichtenpfeilen<\/h3>\n
Der Typ der Linie und der Pfeilspitze, die Sie verwenden, bestimmt den Kommunikationsstil zwischen Ihren Systemteilnehmern:<\/p>\n