{"id":2107,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","title":{"rendered":"Przewodnik po sk\u0142adni diagram\u00f3w stan\u00f3w Mermaid.js"},"content":{"rendered":"<h2>Co to jest diagram stan\u00f3w?<\/h2>\n<p>A <strong>Diagram stan\u00f3w<\/strong> (znany r\u00f3wnie\u017c jako diagram stan\u00f3w) to diagram zachowania <strong>diagram UML<\/strong> kt\u00f3ry modeluje sko\u0144czony cykl \u017cycia pojedynczego obiektu lub podsystemu. Uznawany za podstawowy <strong>typ diagramu UML<\/strong>, ilustruje dyskretne warunki (stany), kt\u00f3re jednostka mo\u017ce zajmowa\u0107, zewn\u0119trzne zdarzenia lub wyzwalacze, kt\u00f3re powoduj\u0105 przej\u015bcie mi\u0119dzy tymi warunkami (przej\u015bcia), oraz rozga\u0142\u0119zienia warunkowe, kt\u00f3re zmieniaj\u0105 \u015bcie\u017cki wykonania. To mapowanie jest kluczowe do \u015bledzenia z\u0142o\u017conych cykl\u00f3w \u017cycia obiekt\u00f3w, takich jak post\u0119p zam\u00f3wienia od realizacji do dostawy, sekwencja wyga\u015bni\u0119cia sesji u\u017cytkownika lub p\u0119tla prze\u0142\u0105cznika sprz\u0119tu wbudowanego.<\/p>\n<p>Za pomoc\u0105 <strong>Mermaid.js<\/strong>, mo\u017cesz definiowa\u0107 swoje maszyny stan\u00f3w reaktywne przy u\u017cyciu deklaratywnego, opartego na tek\u015bcie schematu. Silnik analizy automatycznie oblicza optymalne odst\u0119py uk\u0142adu, obs\u0142uguje strza\u0142ki cykliczne, a tak\u017ce p\u0142ynnie skaluje granice kontener\u00f3w stan\u00f3w.<\/p>\n<h2>Podstawowy przewodnik sk\u0142adniowy: elementy i konstrukcje<\/h2>\n<p>Aby stworzy\u0107 dok\u0142adny, zgodny z normami diagram stan\u00f3w UML w Mermaid, musisz opanowa\u0107 znaczniki wej\u015bcia\/wyj\u015bcia, ci\u0105gi przej\u015b\u0107, zagnie\u017cd\u017canie z\u0142o\u017cone, oraz bloki wyboru warunkowego.<\/p>\n<h3>1. Definiowanie stan\u00f3w wej\u015bcia, wyj\u015bcia i standardowych<\/h3>\n<p>Zainicjuj p\u0142\u00f3tno stan\u00f3w w pierwszym wierszu za pomoc\u0105 s\u0142owa kluczowego <code>stateDiagram-v2<\/code> s\u0142owo kluczowe. Cykle \u017cycia wymagaj\u0105 jasno okre\u015blonych punkt\u00f3w pocz\u0105tkowych i ko\u0144cowych, kt\u00f3re s\u0105 oznaczane symbolem pe\u0142nego k\u00f3\u0142ka (<code>[*]<\/code>):<\/p>\n<ul>\n<li><strong>Stan pocz\u0105tkowy (wej\u015bcie):<\/strong> <code>[*] --&gt; NazwaStanu<\/code> (oznacza pocz\u0105tek cyklu \u017cycia).<\/li>\n<li><strong>Stan ko\u0144cowy (wyj\u015bcie):<\/strong> <code>NazwaStanu --&gt; [*]<\/code> (oznacza zako\u0144czenie cyklu \u017cycia).<\/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>Edytuj Mermaid w VPasCode<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTuFgNLikkSIEJgJFgRKAgCh1Q5o\" \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; Pusta\r\n    Pusta --&gt; [*]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTuFgNLikkSIEJgJFgRKAgCh1Q5o\" \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>Edytuj Mermaid w VPasCode<\/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. Konfigurowanie wyzwalaczy przej\u015bcia i etykiet zdarze\u0144<\/h3>\n<p>Aby zmapowa\u0107 zmian\u0119 stanu, po\u0142\u0105cz zdefiniowane tokeny stanu za pomoc\u0105 standardowej linii strza\u0142ki (<code>--&gt;<\/code>). Aby zarejestrowa\u0107 dok\u0142adne zdarzenie, odpowied\u017a interfejsu API lub klikni\u0119cie przycisku, kt\u00f3re powoduje to przej\u015bcie, do\u0142\u0105cz dwukropek (<code>:<\/code>) a nast\u0119pnie ci\u0105g opisowy:<\/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>Edytuj Mermaid w VPasCode<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAAsfsksryvEoFXV07hfDikqKqytxEINdKISCxMjc1r8QtMTMnNQWiFkkepBym1UrBM68sPzM5NTi1pASoGAAC3SLh\" \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    Aktywny --&gt; Wstrzymany : PaymentFailed\r\n    Wstrzymany --&gt; Aktywny : InvoiceSettled<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAAsfsksryvEoFXV07hfDikqKqytxEINdKISCxMjc1r8QtMTMnNQWiFkkepBym1UrBM68sPzM5NTi1pASoGAAC3SLh\" \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>Edytuj Mermaid w VPasCode<\/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. Wdra\u017canie blok\u00f3w warunkowych wyboru<\/h3>\n<p>Aby obs\u0142u\u017cy\u0107 rozga\u0142\u0119zione p\u0119tle oceny, u\u017cyj<code>&lt;&lt;choice&gt;&gt;<\/code> stereotypu. Powoduje to stworzenie wyra\u017anej kszta\u0142tu diamentu na p\u0142\u00f3tnie, kt\u00f3ry dzieli pojedyncz\u0105 \u015bcie\u017ck\u0119 przychodz\u0105cego przej\u015bcia na wiele r\u00f3\u017cnych wyj\u015bciowych \u015bcie\u017cek na podstawie sprawdze\u0144 logiki w czasie wykonywania:<\/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>Edytuj Mermaid w VPasCode<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJPTonsqS7PzyvMzsgKLU3MzSXAUrhazUo7NzMhWKE3NS8hXsbBUMDQwIaw8uScxLSSxKyS+vRDfCBmQCACfCRQw=\" \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; U\u017cytkownikPremium : je\u015bli saldo &gt;= 100\r\n    check_status --&gt; U\u017cytkownikStandardowy : je\u015bli saldo &lt; 100<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJyRmpydjyIXVqsYGOTnJGfmZxqZwdREq0Vq6Cra4eiCCKDog2kJPTonsqS7PzyvMzsgKLU3MzSXAUrhazUo7NzMhWKE3NS8hXsbBUMDQwIaw8uScxLSSxKyS+vRDfCBmQCACfCRQw=\" \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>Edytuj Mermaid w VPasCode<\/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. Strukturyzowanie stan\u00f3w z\u0142o\u017conych (zagnie\u017cd\u017conych)<\/h3>\n<p>Podczas modelowania z\u0142o\u017conego systemu pojedynczy stan najwy\u017cszego poziomu mo\u017ce zawiera\u0107 w\u0142asny niezale\u017cny wewn\u0119trzny cykl \u017cycia. Mo\u017cesz stworzy\u0107 uk\u0142ad podstan\u00f3w zagnie\u017cd\u017conych, definiuj\u0105c stan nadrz\u0119dny, a nast\u0119pnie blok cia\u0142a otoczony klamrami:<\/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>Edytuj Mermaid w VPasCode<\/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:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJAUVVqSXliUVViXmZqVGLu4c3lmal5mYkK1RBVIBCtFaugq2unEJCYnV8OUoeQgguBFbiWVGZnppYgK6oFAMINJiQ=\" \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 PrzetwarzanieZam\u00f3wienia {\r\n        [*] --&gt; Pakowanie\r\n        Pakowanie --&gt; Etykietowanie\r\n    }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmKQoEJAUVVqSXliUVViXmZqVGLu4c3lmal5mYkK1RBVIBCtFaugq2unEJCYnV8OUoeQgguBFbiWVGZnppYgK6oFAMINJiQ=\" \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>Edytuj Mermaid w VPasCode<\/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>Najlepsze praktyki dla czystych uk\u0142ad\u00f3w maszyn stan\u00f3w<\/h2>\n<ul>\n<li><strong>Utrzymuj tokeny stan\u00f3w kr\u00f3tkie:<\/strong> U\u017cywaj kr\u00f3tkich ci\u0105g\u00f3w tekstowych w stylu CamelCase dla token\u00f3w stan\u00f3w wewn\u0119trznych (np. <code>OczekiwanieNaZwrot<\/code>). Je\u015bli potrzebujesz d\u0142ugiego opisowego tytu\u0142u na p\u0142\u00f3tnie, u\u017cyj<code>stan \"Blok opisowy\" jako Token<\/code> sk\u0142adnia do tworzenia jawnego aliasu.<\/li>\n<li><strong>Wymuszaj pojedynczy punkt wej\u015bcia:<\/strong> Zawsze zaczynaj sw\u00f3j diagram od pojedynczego <code>[*]<\/code> w\u0119z\u0142a. Posiadanie wielu punkt\u00f3w pocz\u0105tkowych mo\u017ce wprowadzi\u0107 u\u017cytkownik\u00f3w w b\u0142\u0105d, pr\u00f3buj\u0105c \u015bledzi\u0107 g\u0142\u00f3wny \u015blad inicjalizacji systemu.<\/li>\n<li><strong>Zawsze u\u017cywaj stateDiagram-v2:<\/strong> Zawsze wybieraj <code>stateDiagram-v2<\/code> s\u0142owo kluczowe zamiast starszej wersji <code>stateDiagram<\/code> flagi. Silnik renderowania v2 u\u017cywa uaktualnionego algorytmu uk\u0142adu, kt\u00f3ry zapewnia czystsze routowanie linii i lepsze wyr\u00f3wnanie zagnie\u017cd\u017conych p\u00f3l.<\/li>\n<\/ul>\n<h2>Przyk\u0142ady diagram\u00f3w stan\u00f3w Mermaid.js z rzeczywistego \u015bwiata<\/h2>\n<h3>Przyk\u0142ad 1: Cykl \u017cycia transakcji portfela cyfrowego (ga\u0142\u0119zie wyboru i p\u0119tle b\u0142\u0119d\u00f3w)<\/h3>\n<p>Ten funkcjonalny szablon modeluje cykl \u017cycia transakcji p\u0142atno\u015bci cyfrowej, pokazuj\u0105c, jak transakcja przechodzi od pocz\u0105tkowego punktu wys\u0142ania przez rozga\u0142\u0119zienie sprawdzania oszustw do ostatecznych stan\u00f3w ksi\u0119gi.<\/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>Edytuj Mermaid w VPasCode<\/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:eNp9ksFqAjEQhu+C7zDngpceRQSp7bFILRRaShmz03XIbrJksm435\/YhfJXS4\/pejVrXLYo5zv\/\/3\/wJEY+epoypw3ywuu73IB7xaODdYZm8qSUpDaORWlpWNB73e3vLy9UrDAZjeHRoZF4ucvaekr32f7azdWFDuP0gVXp6YNETERLJyfgDuWttN0yKwtlVhA3hPqYYqtqwBleHWuOF3F2GabqLPdViz+Y6nQ\/uc2tnLpDi5mvzQ4YJXLNWwRAUcRwg9qckKg4v0aakMjYtTTurgjU1qIACCwoFkwq0+RRfnXZrq2xxc\/I+o+2rzcgkbNKIfEZfMblk8w1auFmnzXofPzW3jW5sXmTkd5XmpVYk4GzIONYwjLBAo21FqT1p015li4p\/oSMdmX\/aL8CQy5w=\" \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    stan 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 : Niski wynik ryzyka\r\n    fraud_check --&gt; TransFlagged : Wysoki wynik ryzyka\r\n    \r\n    TransFlagged --&gt; TransApproved : Przeci\u0105\u017cenie r\u0119czne przez mened\u017cera\r\n    TransFlagged --&gt; TransDeclined : Przekroczony czas bezpiecze\u0144stwa\r\n    \r\n    TransApproved --&gt; SettlementPending : Zatwierd\u017a ksi\u0119g\u0119\r\n    SettlementPending --&gt; TransCompleted : Sukces rozliczenia bankowego\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:eNp9ksFqAjEQhu+C7zDngpceRQSp7bFILRRaShmz03XIbrJksm435\/YhfJXS4\/pejVrXLYo5zv\/\/3\/wJEY+epoypw3ywuu73IB7xaODdYZm8qSUpDaORWlpWNB73e3vLy9UrDAZjeHRoZF4ucvaekr32f7azdWFDuP0gVXp6YNETERLJyfgDuWttN0yKwtlVhA3hPqYYqtqwBleHWuOF3F2GabqLPdViz+Y6nQ\/uc2tnLpDi5mvzQ4YJXLNWwRAUcRwg9qckKg4v0aakMjYtTTurgjU1qIACCwoFkwq0+RRfnXZrq2xxc\/I+o+2rzcgkbNKIfEZfMblk8w1auFmnzXofPzW3jW5sXmTkd5XmpVYk4GzIONYwjLBAo21FqT1p015li4p\/oSMdmX\/aL8CQy5w=\" \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>Edytuj Mermaid w VPasCode<\/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>Analiza sk\u0142adni:<\/strong> Ten przep\u0142yw wykorzystuje blok <code>&lt;&lt;choice&gt;&gt;<\/code> do oceny wynik\u00f3w bezpiecze\u0144stwa od razu na pocz\u0105tku. Transakcja przechodzi po r\u00f3\u017cnych \u015bcie\u017ckach w zale\u017cno\u015bci od tych wynik\u00f3w, z jasnymi nazwami zdarze\u0144 (takimi jak <code>ExecuteRiskAssessment<\/code>) zapisanymi bezpo\u015brednio na strza\u0142kach przej\u015b\u0107.<\/p>\n<h3>Przyk\u0142ad 2: Przep\u0142yw realizacji zam\u00f3wienia w e-commerce (z\u0142o\u017cone zagnie\u017cd\u017cone systemy)<\/h3>\n<p>Ten zaawansowany szablon przedsi\u0119biorstwa opisuje pe\u0142ny cykl wysy\u0142ki i zarz\u0105dzania zam\u00f3wieniami, u\u017cywaj\u0105c zagnie\u017cd\u017conych blok\u00f3w z\u0142o\u017conych do pokazania wewn\u0119trznych operacji odbywaj\u0105cych si\u0119 w fazie realizacji.<\/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>Edytuj Mermaid w VPasCode<\/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:eNplkT1OxDAQhXsk7uAaKQ3lFkjAAtoCEYRoQBSz9mwY2bEj\/2xwEM2KW3Ce3As70SoJuEjh9743k2fnweOaoLJQF\/vz0xOWzuvZGyuKC\/ZgBdpSAUcxCuN3dj3YNvo2qB0pVaP2bMVeYGtBE7KmP4DXpv\/hNOedB\/0H+hyV+fCNx7okLklXkzi7HEyPART5eBkEDZO3ZCzvDGtjXgEncGHM5BPyYPHKfJQwxq1YEqNnHUjTf6cQHZkLkqPDesr5h+Wsa7CW0N6nn96h8+wONdrUq0ihNz5KQg9pJWGDNC1oGOO+5p0s6xgWfKemGSKeu8qI1GeutGMy5FnHnY6uTKxR0T5JmSmNb5NNdAPVRhf7g1y8wuTObGr9F07SopI=\" \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 : Zabranie p\u0142atno\u015bci\r\n    \r\n    stan InFulfillment {\r\n        [*] --&gt; ItemPicking\r\n        ItemPicking --&gt; QualityAudit : Zbiorczo wybrane\r\n        QualityAudit --&gt; SecureBoxPacking : Audyt zako\u0144czony sukcesem\r\n        SecureBoxPacking --&gt; CarrierManifest Generated : Etykieta wydrukowana\r\n    }\r\n    \r\n    InFulfillment --&gt; Shipped : Uzgodnienie z kurierem\r\n    Shipped --&gt; Delivered : Potwierdzenie wysy\u0142ki\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:eNplkT1OxDAQhXsk7uAaKQ3lFkjAAtoCEYRoQBSz9mwY2bEj\/2xwEM2KW3Ce3As70SoJuEjh9743k2fnweOaoLJQF\/vz0xOWzuvZGyuKC\/ZgBdpSAUcxCuN3dj3YNvo2qB0pVaP2bMVeYGtBE7KmP4DXpv\/hNOedB\/0H+hyV+fCNx7okLklXkzi7HEyPART5eBkEDZO3ZCzvDGtjXgEncGHM5BPyYPHKfJQwxq1YEqNnHUjTf6cQHZkLkqPDesr5h+Wsa7CW0N6nn96h8+wONdrUq0ihNz5KQg9pJWGDNC1oGOO+5p0s6xgWfKemGSKeu8qI1GeutGMy5FnHnY6uTKxR0T5JmSmNb5NNdAPVRhf7g1y8wuTObGr9F07SopI=\" \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>Edytuj Mermaid w VPasCode<\/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>Rozk\u0142ad sk\u0142adni:<\/strong> Owrapowanie krok\u00f3w wewn\u0105trz<code>stan InFulfillment {...}<\/code> blok cia\u0142a tworzysz wyra\u017an\u0105 strukturaln\u0105 granic\u0119 na p\u0142\u00f3tnie. Silnik traktuje ten blok jako pojedynczy skondensowany stan nadrz\u0119dny podczas renderowania jego wewn\u0119trznych krok\u00f3w przep\u0142ywu pracy kolejno, co u\u0142atwia nawigacj\u0119 po skomplikowanych wielowarstwowych cyklach \u017cycia.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Co to jest diagram stan\u00f3w? A Diagram stan\u00f3w (znany r\u00f3wnie\u017c jako diagram stan\u00f3w) to diagram zachowania diagram UML kt\u00f3ry modeluje sko\u0144czony cykl \u017cycia pojedynczego obiektu lub podsystemu. Uznawany za podstawowy typ diagramu UML, ilustruje dyskretne warunki (stany), kt\u00f3re jednostka mo\u017ce&#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-2107","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\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\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\/pl\/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=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/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\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-state-diagram-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Przewodnik po sk\u0142adni diagram\u00f3w stan\u00f3w Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/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\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","og_locale":"pl_PL","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\/pl\/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":{"Szacowany czas czytania":"4 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/","url":"https:\/\/www.vpascode.com\/pl\/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\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-state-diagram-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pl\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Przewodnik po sk\u0142adni diagram\u00f3w stan\u00f3w Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pl\/#website","url":"https:\/\/www.vpascode.com\/pl\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pl\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs\/2107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2107"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}