{"id":2110,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-state-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-state-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","title":{"rendered":"Mermaid.js Zustandsdiagramm-Syntaxanleitung"},"content":{"rendered":"<h2>Was ist ein Zustandsdiagramm?<\/h2>\n<p>Ein <strong>Zustandsdiagramm<\/strong> (auch bekannt als Statechart) ist ein Verhaltens-<strong>UML-Diagramm<\/strong> das den endlichen Lebenszyklus eines einzelnen Objekts oder einer Untereinheit modelliert. Als Kern-<strong>UML-Diagrammtyp<\/strong>, zeigt es die diskreten Zust\u00e4nde, die eine Entit\u00e4t annehmen kann, die externen Ereignisse oder Ausl\u00f6ser, die einen Wechsel zwischen diesen Zust\u00e4nden erzwingen (\u00dcberg\u00e4nge), sowie die bedingten Regelverzweigungen, die die Ausf\u00fchrungswege ver\u00e4ndern. Diese Abbildung ist entscheidend f\u00fcr die Verfolgung komplexer Objekt-Lebenszyklen, wie beispielsweise die Fortschrittsverfolgung einer Bestellung von der Erf\u00fcllung bis zur Lieferung, eine Benutzersitzungs-Timeout-Sequenz oder eine eingebettete Hardware-Schleife.<\/p>\n<p>Mit <strong>Mermaid.js<\/strong>, k\u00f6nnen Sie Ihre reaktiven Zustandsmaschinen mit einem deklarativen, textbasierten Schema definieren. Der Parser berechnet automatisch den optimalen Layout-Abstand, verarbeitet rekursive Schleifenpfeile und skaliert die Grenzen der Zustandscontainer reibungslos.<\/p>\n<h2>Grundlagen der Syntaxanleitung: Elemente und Konstrukte<\/h2>\n<p>Um ein genaues, standardskonformes UML-Zustandsdiagramm in Mermaid zu gestalten, m\u00fcssen Sie Ein- und Ausgangsmarker, \u00dcbergangss\u00e4tze, zusammengesetzte Verschachtelungen und bedingte Auswahlbl\u00f6cke beherrschen.<\/p>\n<h3>1. Definition von Eingangs-, Ausgangs- und Standardzust\u00e4nden<\/h3>\n<p>Sie initialisieren eine Zustandsfl\u00e4che in Zeile eins mit dem Befehl <code>stateDiagram-v2<\/code> Schl\u00fcsselwort. Lebenszyklen erfordern explizite Start- und Endpunkte, die durch ein festes Kreissymbol (<code>[*]<\/code>):<\/p>\n<ul>\n<li><strong>Anfangszustand (Eingang):<\/strong> <code>[*] --&gt; Zustandsname<\/code> (Markiert, wo der Lebenszyklus beginnt).<\/li>\n<li><strong>Endzustand (Ausgang):<\/strong> <code>Zustandsname --&gt; [*]<\/code> (Markiert, wo der Lebenszyklus endet).<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFz5ScVIgIiAUWAkoBAHu\/DUo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFn9TUopzE0jSIKIwHlgIqAQALiBCu\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">stateDiagram-v2\r\n    [*] --&gt; Leerlauf\r\n    Leerlauf --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFn9TUopzE0jSIKIwHlgIqAQALiBCu\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFz5ScVIgIiAUWAkoBAHu\/DUo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"SiHpwMe\"><img alt=\"\" class=\"alignnone size-full wp-image-634\" decoding=\"async\" height=\"184\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png\" width=\"60\"\/><\/p>\n<h3>2. Konfigurieren von \u00dcbergangsausl\u00f6sern und Ereignisbezeichnungen<\/h3>\n<p>Um eine Zustands\u00e4nderung darzustellen, verbinden Sie Ihre definierten Zustands-Tokens mit einer standardm\u00e4\u00dfigen Pfeillinie (&#8220;<code>--&gt;<\/code>). Um das genaue Ereignis, die API-Antwort oder die Mausklick-Aktion zu dokumentieren, die diesen \u00dcbergang ausl\u00f6st, f\u00fcgen Sie einen Doppelpunkt (&#8220;<code>:<\/code>) gefolgt von Ihrem beschreibenden Text:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAAsfkksyyVAVdXTuF4NLigtS8lNQUBSuFgMTK3NS8ErfEzJzUFIhKhDRIMVSflYJnXll+ZnJqcGpJCVApAEGuIFE=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAAsfskswyBV1dO4Xg0uKC1LyU1BQFK4WoxIyc0rx0t9SMnPTU4uSMnMT01DyIBoQykCaIdiuFoNTkjDygDqfUKqDWEgBM4CM\/\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">stateDiagram-v2\r\n    Aktiv --&gt; Suspended : ZahlungFehlgeschlagen\r\n    Suspended --&gt; Aktiv : RechnungBezahlt<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAAsfskswyBV1dO4Xg0uKC1LyU1BQFK4WoxIyc0rx0t9SMnPTU4uSMnMT01DyIBoQykCaIdiuFoNTkjDygDqfUKqDWEgBM4CM\/\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAAsfkksyyVAVdXTuF4NLigtS8lNQUBSuFgMTK3NS8ErfEzJzUFIhKhDRIMVSflYJnXll+ZnJqcGpJCVApAEGuIFE=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"djvhsUF\"><img alt=\"\" class=\"alignnone size-full wp-image-635\" decoding=\"async\" height=\"170\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904116de63.png\" width=\"245\"\/><\/p>\n<h3>3. Implementieren von bedingten Auswahlbl\u00f6cken<\/h3>\n<p>Um verzweigte Bewertungsschleifen zu behandeln, verwenden Sie die<code>&lt;&lt;choice&gt;&gt;<\/code>Stereotyp. Dies erzeugt eine klare Raute auf der Zeichenfl\u00e4che, die einen einzelnen eingehenden \u00dcbergangspfad basierend auf Laufzeit-Logikpr\u00fcfungen in mehrere unterschiedliche ausgehende Pfade aufteilt:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUohM00hKTEnMS85VcHOVsHQwACHruCSxLyUxKIUTG02IF0A7rQ5Ow==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUqhPDUvT8E7P68kH6gkL0XBzlbB0MAAh9ZgkJLEohQcem1AWgGC9j3L\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">stateDiagram-v2\r\n    state check_status &lt;&lt;choice&gt;&gt;\r\n    [*] --&gt; check_status\r\n    check_status --&gt; PremiumUser : wenn Kontostand &gt;= 100\r\n    check_status --&gt; StandardUser : wenn Kontostand &lt; 100<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUqhPDUvT8E7P68kH6gkL0XBzlbB0MAAh9ZgkJLEohQcem1AWgGC9j3L\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJKAoNTezNDe0OLVIwUohM00hKTEnMS85VcHOVsHQwACHruCSxLyUxKIUTG02IF0A7rQ5Ow==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"HypodAD\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-636\" decoding=\"async\" fetchpriority=\"high\" height=\"222\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904161772d.png\" width=\"298\"\/><\/p>\n<h3>4. Strukturieren von zusammengesetzten (verschachtelten) Zust\u00e4nden<\/h3>\n<p>Beim Modellieren eines komplexen Systems kann ein einzelner Hoch-Level-Zustand seinen eigenen unabh\u00e4ngigen inneren Lebenszyklus enthalten. Sie k\u00f6nnen eine verschachtelte Unterzustandsstruktur erstellen, indem Sie einen \u00fcbergeordneten Zustand definieren, gefolgt von einem Block in geschweiften Klammern:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UAhKTsxPTgZIIKbgQWIFPYlJqDly+FgAmQR80\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UwlKLChKTs0vz0hFyCDGwEteSzOzUkpLM1CK4qloALu4inA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">stateDiagram-v2\r\n    state OrderProcessing {\r\n        [*] --&gt; Verpackung\r\n        Verpackung --&gt; Etikettierung\r\n    }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UwlKLChKTs0vz0hFyCDGwEteSzOzUkpLM1CK4qloALu4inA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoIJ\/UUpqUUBRfnJqcXFmXrpCNUQSBKK1YhV0de0UAhKTsxPTgZIIKbgQWIFPYlJqDly+FgAmQR80\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"GxeUbLP\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-637\" decoding=\"async\" height=\"335\" loading=\"lazy\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190419d2120.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190419d2120.png 174w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190419d2120-156x300.png 156w\" width=\"174\"\/><\/p>\n<h2>Best Practices f\u00fcr saubere Zustandsmaschinen-Layouts<\/h2>\n<ul>\n<li><strong>Halten Sie Zustands-Tokens kurz:<\/strong>Verwenden Sie kurze CamelCase-Textzeichenfolgen f\u00fcr Ihre internen Zustands-Tokens (z.\u202fB. <code>WartendAufRueckzahlung<\/code>). Wenn Sie einen langen beschreibenden Titel auf der Zeichenfl\u00e4che ben\u00f6tigen, verwenden Sie die<code>state \"Beschreibender Textblock\" als Token<\/code> Syntax zum Erstellen eines expliziten Alias.<\/li>\n<li><strong>Einen einzigen Einstiegspunkt durchsetzen:<\/strong> Beginnen Sie Ihr Diagramm immer mit einem einzigen <code>[*]<\/code> Knoten. Mehrere Ausgangspunkte k\u00f6nnen Benutzer verwirren, die den Ursprungspfad der Systeminitialisierung verfolgen m\u00f6chten.<\/li>\n<li><strong>Verwenden Sie immer stateDiagram-v2:<\/strong> W\u00e4hlen Sie immer den <code>stateDiagram-v2<\/code> Schl\u00fcsselwort anstelle des veralteten <code>stateDiagram<\/code> Flag. Der v2-Rendering-Engine wird ein aktualisierter Layout-Algorithmus verwendet, der eine sauberere Linienf\u00fchrung und bessere Verschachtelungsausrichtungen bietet.<\/li>\n<\/ul>\n<h2>Realit\u00e4tsnahe Beispiele f\u00fcr Mermaid.js-Zustandsdiagramme<\/h2>\n<h3>Beispiel 1: Lebenszyklus einer digitalen Wallet-Transaktion (Auswahlzweige und Fehler-Schleifen)<\/h3>\n<p>Dieser funktionale Entwurf modelliert den Lebenszyklus einer digitalen Zahlungstransaktion und zeigt, wie eine Transaktion von einem ersten Einreichungspunkt \u00fcber einen Betrugspr\u00fcfungs-Zweig in endg\u00fcltige Buchungsst\u00e4nde \u00fcbergeht.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9kT9PwzAQxfdK\/Q6ekbIwVlWkQstUBMLdEEKHfbhW\/CeyzwG+PU5C3UBQPXi4e+\/9zudIQLjVoALYqrteLlg+sS+y9wBJvoojioat1+LotcC6Xi5GzfPVC6uqmh0CuMjTm9VEKMfe79ogm4at2O4TRSJ80rHZxIgxWnR0Sp5KC2HTtsF3OWzFehfjwgdke\/9xwXNnQKm\/lp3BDsqkk3lP6v+Q9+ASmHyDwvDQYQha4iXvFoXRbvDy\/NSg6eugLfpEM27B9GaORAb7bTyik9qpHHDrbV7kHmVmj765qoCzuDVIA\/kGXHOW8iRE3vSMX0btM\/KvTlrnsJ\/eN93zsSs=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9kbFOwzAQhvdKfQfPSFkYqypSoTCBhAgTCCHHudqnOE5kn1vEs\/AcTGx5Mc4NDYGierBOvv\/\/7tc5kCRYo9ReNtn2fD4TfB5jIOkqsfEyVi\/KgKrFcqlMiwryfD4bVE9nzyLLcvHgpQtFLBskgmro\/X7by6awhbh6BRUJ7jHUqxAghAYcHchT6Thh1XW+3TJsIdiFdbsDT8IhVB71Cd+1lVr\/tYE3\/YehwTaJfBD\/N\/VWugjWQiqkBp\/17yX4QBDBR6dPUdagLLo9pUDO5w0ghTe++s\/EUMZzPUImqHF+YhVAZCFt6g5chU4z7waqlOWybXjXg\/FYNgZhWWeB9kkupKtluUNVW57MK9m0VnMOZY5SjPkTiP990vohfve+AC3dwlE=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">stateDiagram-v2\r\n    Zustand fraud_check &lt;&lt;choice&gt;&gt;\r\n\r\n    [*] --&gt; TransSubmitted\r\n    TransSubmitted --&gt; fraud_check : ExecuteRiskAssessment\r\n\r\n    fraud_check --&gt; TransApproved : Risikowert niedrig\r\n    fraud_check --&gt; TransFlagged : Risikowert erh\u00f6ht\r\n    \r\n    TransFlagged --&gt; TransApproved : Manuelle Manager-\u00dcbersteuerung\r\n    TransFlagged --&gt; TransDeclined : Sicherheitszeit\u00fcberschreitung\r\n    \r\n    TransApproved --&gt; SettlementPending : Ledger-Commit\r\n    SettlementPending --&gt; TransCompleted : Bankabwicklung erfolgreich\r\n    \r\n    TransDeclined --&gt; [*]\r\n    TransCompleted --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9kbFOwzAQhvdKfQfPSFkYqypSoTCBhAgTCCHHudqnOE5kn1vEs\/AcTGx5Mc4NDYGierBOvv\/\/7tc5kCRYo9ReNtn2fD4TfB5jIOkqsfEyVi\/KgKrFcqlMiwryfD4bVE9nzyLLcvHgpQtFLBskgmro\/X7by6awhbh6BRUJ7jHUqxAghAYcHchT6Thh1XW+3TJsIdiFdbsDT8IhVB71Cd+1lVr\/tYE3\/YehwTaJfBD\/N\/VWugjWQiqkBp\/17yX4QBDBR6dPUdagLLo9pUDO5w0ghTe++s\/EUMZzPUImqHF+YhVAZCFt6g5chU4z7waqlOWybXjXg\/FYNgZhWWeB9kkupKtluUNVW57MK9m0VnMOZY5SjPkTiP990vohfve+AC3dwlE=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9kT9PwzAQxfdK\/Q6ekbIwVlWkQstUBMLdEEKHfbhW\/CeyzwG+PU5C3UBQPXi4e+\/9zudIQLjVoALYqrteLlg+sS+y9wBJvoojioat1+LotcC6Xi5GzfPVC6uqmh0CuMjTm9VEKMfe79ogm4at2O4TRSJ80rHZxIgxWnR0Sp5KC2HTtsF3OWzFehfjwgdke\/9xwXNnQKm\/lp3BDsqkk3lP6v+Q9+ASmHyDwvDQYQha4iXvFoXRbvDy\/NSg6eugLfpEM27B9GaORAb7bTyik9qpHHDrbV7kHmVmj765qoCzuDVIA\/kGXHOW8iRE3vSMX0btM\/KvTlrnsJ\/eN93zsSs=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"FzzxFeh\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-638\" decoding=\"async\" height=\"742\" loading=\"lazy\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19041e24943.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19041e24943.png 397w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19041e24943-161x300.png 161w\" width=\"397\"\/><\/p>\n<p><strong>Syntax-Aufschl\u00fcsselung:<\/strong> Dieser Arbeitsablauf nutzt eine <code>&lt;&lt;choice&gt;&gt;<\/code> Block, um Sicherheitswerte direkt am Anfang zu bewerten. Die Transaktion wechselt entlang unterschiedlicher Pfade basierend auf diesen Werten, wobei klare Ereignisnamen (wie <code>ExecuteRiskAssessment<\/code>) direkt auf den \u00dcbergangspfeilen dokumentiert sind.<\/p>\n<h3>Beispiel 2: E-Commerce-Auftragsabwicklungspipeline (zusammengesetzte verschachtelte Systeme)<\/h3>\n<p>Dieser fortgeschrittene Unternehmensentwurf beschreibt einen vollst\u00e4ndigen Versand- und Auftragsverwaltungslebenszyklus und verwendet verschachtelte zusammengesetzte Bl\u00f6cke, um die internen Abl\u00e4ufe innerhalb der Auslieferungsphase darzustellen.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplUEtPwzAMviPxH3JG6oXjDkis02DS0II4Ig6mcVdraVo5yUSF+O\/ksWop+BBF\/l62rQOHG4IjQ1+d729vRKj3uw9RVQ\/iwApZamhQZSC\/RTvRdmbrdUta92icWAkJU\/zVMDrPS6mNcX8E3xkqg3cOe0nNiczxChbNRHr1oMlNj15RTF2Da7qIz4mxFpwoesMmzLQeviRkp5VIoARrS+E\/XhTXwEzIL2CoRevEExrksJAKLnv4RC2ZjJttfsrFlyunSToaxyS92D6DUbaDE2bFjEfuBjWdkRP74N124EtnqgfTEvfLK1\/pURyO+gvdUZF9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplUDtOAzEQ7ZG4g2ukbShTICWETwqURXRBFIM9uztar4lmxxEIcRuOQZeL4Q+rOGSKKfw+8\/xGAcElQcswVLvL8zMV5vniRVXVlVqzQa4taDQZyLt4TrSVu\/W2IWsHdKJmagOd9a5VSK7FBsJypXzjRwFn\/sk+M1ieXwkONek+2BzA4jGRHj1Yko+5NxRvL0B0F\/EpcpwjThQ9ofaMi7f3GrLTTNW8\/2li6ldM8abMcU7o0eMamAn5ARw1QaLu0CGHMk0wuxHqUUS1aNjrXrLVV9nC8e9TqI622yT\/s67uQ46xgx6zZCJE8hIt7ZATPRaK1k7h999CrZS3DuQoDfX+AhgGmMc=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">stateDiagram-v2\r\n    [*] --&gt; OrderPlaced\r\n    \r\n    OrderPlaced --&gt; InFulfillment : Zahlung eingefangen\r\n    \r\n    Zustand InFulfillment {\r\n        [*] --&gt; ItemPicking\r\n        ItemPicking --&gt; QualityAudit : BatchPicked\r\n        QualityAudit --&gt; SecureBoxPacking : Pr\u00fcfung bestanden\r\n        SecureBoxPacking --&gt; CarrierManifest Generated : Etikett gedruckt\r\n    }\r\n    \r\n    InFulfillment --&gt; Shipped : Carrier-Handshake\r\n    Shipped --&gt; Delivered : Zustellung best\u00e4tigt\r\n    \r\n    Delivered --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplUDtOAzEQ7ZG4g2ukbShTICWETwqURXRBFIM9uztar4lmxxEIcRuOQZeL4Q+rOGSKKfw+8\/xGAcElQcswVLvL8zMV5vniRVXVlVqzQa4taDQZyLt4TrSVu\/W2IWsHdKJmagOd9a5VSK7FBsJypXzjRwFn\/sk+M1ieXwkONek+2BzA4jGRHj1Yko+5NxRvL0B0F\/EpcpwjThQ9ofaMi7f3GrLTTNW8\/2li6ldM8abMcU7o0eMamAn5ARw1QaLu0CGHMk0wuxHqUUS1aNjrXrLVV9nC8e9TqI622yT\/s67uQ46xgx6zZCJE8hIt7ZATPRaK1k7h999CrZS3DuQoDfX+AhgGmMc=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplUEtPwzAMviPxH3JG6oXjDkis02DS0II4Ig6mcVdraVo5yUSF+O\/ksWop+BBF\/l62rQOHG4IjQ1+d729vRKj3uw9RVQ\/iwApZamhQZSC\/RTvRdmbrdUta92icWAkJU\/zVMDrPS6mNcX8E3xkqg3cOe0nNiczxChbNRHr1oMlNj15RTF2Da7qIz4mxFpwoesMmzLQeviRkp5VIoARrS+E\/XhTXwEzIL2CoRevEExrksJAKLnv4RC2ZjJttfsrFlyunSToaxyS92D6DUbaDE2bFjEfuBjWdkRP74N124EtnqgfTEvfLK1\/pURyO+gvdUZF9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Mermaid in VPasCode bearbeiten<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"TYltJdW\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-639\" decoding=\"async\" height=\"1083\" loading=\"lazy\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697.png 381w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697-106x300.png 106w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904232f697-360x1024.png 360w\" width=\"381\"\/><\/p>\n<p><strong>Syntax-Aufspaltung:<\/strong> Indem Sie Schritte innerhalb des <code>state InFulfillment {...}<\/code> K\u00f6rpereblock erstellen Sie eine klare strukturelle Grenze auf der Leinwand. Die Engine behandelt diesen Block als einen einzigen konsolidierten \u00fcbergeordneten Zustand, w\u00e4hrend ihre internen Arbeitsablauf-Schritte sequenziell gerendert werden, was komplexe mehrschichtige Lebenszyklen leicht navigierbar macht.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was ist ein Zustandsdiagramm? Ein Zustandsdiagramm (auch bekannt als Statechart) ist ein Verhaltens-UML-Diagramm das den endlichen Lebenszyklus eines einzelnen Objekts oder einer Untereinheit modelliert. Als Kern-UML-Diagrammtyp, zeigt es die diskreten Zust\u00e4nde, die eine Entit\u00e4t annehmen kann, die externen Ereignisse oder&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":5,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2110","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\",\"name\":\"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a19040d605c9.png\",\"datePublished\":\"2026-05-26T08:05:44+00:00\",\"description\":\"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a19040d605c9.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a19040d605c9.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Zustandsdiagramm-Syntaxanleitung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide","description":"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","og_locale":"de_DE","og_type":"article","og_title":"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","name":"Mermaid State Diagram Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png","datePublished":"2026-05-26T08:05:44+00:00","description":"Define system behavior and event triggers with Mermaid state diagrams in VPasCode, a cloud diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19040d605c9.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Zustandsdiagramm-Syntaxanleitung"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/2110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2110"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}