| 6dd74de | | | 1 | <!doctype html> |
| 6dd74de | | | 2 | <html lang="en" xmlns="http://www.w3.org/1999/html"> |
| 6dd74de | | | 3 | <head> |
| 6dd74de | | | 4 | <meta charset="utf-8" /> |
| 6dd74de | | | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6dd74de | | | 6 | <title>States Mermaid Quick Test Page</title> |
| 6dd74de | | | 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> |
| 6dd74de | | | 8 | <style> |
| 6dd74de | | | 9 | div.mermaid { |
| 6dd74de | | | 10 | /* font-family: 'trebuchet ms', verdana, arial; */ |
| 6dd74de | | | 11 | font-family: 'Courier New', Courier, monospace !important; |
| 6dd74de | | | 12 | } |
| 6dd74de | | | 13 | </style> |
| 6dd74de | | | 14 | </head> |
| 6dd74de | | | 15 | |
| 6dd74de | | | 16 | <body> |
| 6dd74de | | | 17 | <h1>State diagram demos</h1> |
| 6dd74de | | | 18 | <h2>Very simple showing change from State1 to State2</h2> |
| 6dd74de | | | 19 | <pre class="mermaid"> |
| 6dd74de | | | 20 | --- |
| 6dd74de | | | 21 | title: Very simple diagram |
| 6dd74de | | | 22 | --- |
| 6dd74de | | | 23 | stateDiagram |
| 6dd74de | | | 24 | accTitle: This is the accessible title |
| 6dd74de | | | 25 | accDescr:This is an accessible description |
| 6dd74de | | | 26 | State1 --> State2 |
| 6dd74de | | | 27 | </pre> |
| 6dd74de | | | 28 | |
| 6dd74de | | | 29 | <hr /> |
| 6dd74de | | | 30 | |
| 6dd74de | | | 31 | <h2>This has classDef statements to apply style classes to specific states</h2> |
| 6dd74de | | | 32 | <h4>Here are the <code>classDef</code> statements:</h4> |
| 6dd74de | | | 33 | <p> |
| 6dd74de | | | 34 | <code> |
| 6dd74de | | | 35 | classDef notMoving fill:white<br /> |
| 6dd74de | | | 36 | classDef movement font-style:italic<br /> |
| 6dd74de | | | 37 | classDef badBadEvent |
| 6dd74de | | | 38 | fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br /> |
| 6dd74de | | | 39 | </code> |
| 6dd74de | | | 40 | </p> |
| 6dd74de | | | 41 | <h4>And these are how they are applied:</h4> |
| 6dd74de | | | 42 | <p> |
| 6dd74de | | | 43 | <code> |
| 6dd74de | | | 44 | class Still notMoving<br /> |
| 6dd74de | | | 45 | class Moving, Crash movement<br /> |
| 6dd74de | | | 46 | class Crash badBadEvent<br /> |
| 6dd74de | | | 47 | </code> |
| 6dd74de | | | 48 | </p> |
| 6dd74de | | | 49 | <pre class="mermaid"> |
| 6dd74de | | | 50 | --- |
| 6dd74de | | | 51 | title: Very simple diagram |
| 6dd74de | | | 52 | --- |
| 6dd74de | | | 53 | stateDiagram |
| 6dd74de | | | 54 | direction TB |
| 6dd74de | | | 55 | |
| 6dd74de | | | 56 | accTitle: This is the accessible title |
| 6dd74de | | | 57 | accDescr: This is an accessible description |
| 6dd74de | | | 58 | |
| 6dd74de | | | 59 | classDef notMoving fill:white |
| 6dd74de | | | 60 | classDef movement font-style:italic |
| 6dd74de | | | 61 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 62 | |
| 6dd74de | | | 63 | [*]--> Still |
| 6dd74de | | | 64 | Still --> [*] |
| 6dd74de | | | 65 | Still --> Moving |
| 6dd74de | | | 66 | Moving --> Still |
| 6dd74de | | | 67 | Moving --> Crash |
| 6dd74de | | | 68 | Crash --> [*] |
| 6dd74de | | | 69 | |
| 6dd74de | | | 70 | class Still notMoving |
| 6dd74de | | | 71 | class Moving, Crash movement |
| 6dd74de | | | 72 | class Crash badBadEvent |
| 6dd74de | | | 73 | class end badBadEvent |
| 6dd74de | | | 74 | </pre> |
| 6dd74de | | | 75 | |
| 6dd74de | | | 76 | <hr /> |
| 6dd74de | | | 77 | |
| 6dd74de | | | 78 | <h2>Here is a diagram that uses the ::: operator to apply styles to states</h2> |
| 6dd74de | | | 79 | <h4>Here are the <code>classDef</code> statements:</h4> |
| 6dd74de | | | 80 | <p> |
| 6dd74de | | | 81 | <code> |
| 6dd74de | | | 82 | classDef notMoving fill:white<br /> |
| 6dd74de | | | 83 | classDef movement font-style:italic<br /> |
| 6dd74de | | | 84 | classDef badBadEvent |
| 6dd74de | | | 85 | fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br /> |
| 6dd74de | | | 86 | </code> |
| 6dd74de | | | 87 | </p> |
| 6dd74de | | | 88 | <h4>And these are how they are applied:</h4> |
| 6dd74de | | | 89 | <p> |
| 6dd74de | | | 90 | <code> |
| 6dd74de | | | 91 | [*] --> Still:::notMoving<br /> |
| 6dd74de | | | 92 | ...<br /> |
| 6dd74de | | | 93 | Still --> Moving:::movement<br /> |
| 6dd74de | | | 94 | ...<br /> |
| 6dd74de | | | 95 | Moving --> Crash:::movement<br /> |
| 6dd74de | | | 96 | Crash:::badBadEvent --> [*]<br /> |
| 6dd74de | | | 97 | </code> |
| 6dd74de | | | 98 | </p> |
| 6dd74de | | | 99 | <p> |
| 6dd74de | | | 100 | Note that both the starting state and the end state have styles applied:<br /> |
| 6dd74de | | | 101 | The start state has the <i>start</i> classDef style<br />and the end state has the |
| 6dd74de | | | 102 | <i>stop</i> classDef style applied. |
| 6dd74de | | | 103 | </p> |
| 6dd74de | | | 104 | <pre class="mermaid"> |
| 6dd74de | | | 105 | stateDiagram |
| 6dd74de | | | 106 | direction TB |
| 6dd74de | | | 107 | |
| 6dd74de | | | 108 | accTitle: This is the accessible title |
| 6dd74de | | | 109 | accDescr: This is an accessible description |
| 6dd74de | | | 110 | |
| 6dd74de | | | 111 | classDef notMoving fill:white |
| 6dd74de | | | 112 | classDef movement font-style:italic |
| 6dd74de | | | 113 | classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow |
| 6dd74de | | | 114 | |
| 6dd74de | | | 115 | [*] --> Still:::notMoving |
| 6dd74de | | | 116 | Still --> [*] |
| 6dd74de | | | 117 | Still --> Moving:::movement |
| 6dd74de | | | 118 | Moving --> Still |
| 6dd74de | | | 119 | Moving --> Crash:::movement |
| 6dd74de | | | 120 | Crash:::badBadEvent --> [*] |
| 6dd74de | | | 121 | </pre> |
| 6dd74de | | | 122 | <hr /> |
| 6dd74de | | | 123 | |
| 6dd74de | | | 124 | <pre class="mermaid"> |
| 6dd74de | | | 125 | stateDiagram-v2 |
| 6dd74de | | | 126 | accTitle: very very simple state |
| 6dd74de | | | 127 | accDescr: This is a state diagram showing one state |
| 6dd74de | | | 128 | State1 |
| 6dd74de | | | 129 | </pre> |
| 6dd74de | | | 130 | <hr /> |
| 6dd74de | | | 131 | |
| 6dd74de | | | 132 | <h2>States with spaces in them</h2> |
| 6dd74de | | | 133 | <pre class="mermaid"> |
| 6dd74de | | | 134 | stateDiagram |
| 6dd74de | | | 135 | classDef yourState font-style:italic,font-weight:bold,fill:white |
| 6dd74de | | | 136 | |
| 6dd74de | | | 137 | yswsii: Your state with spaces in it |
| 6dd74de | | | 138 | [*] --> yswsii:::yourState |
| 6dd74de | | | 139 | [*] --> SomeOtherState |
| 6dd74de | | | 140 | SomeOtherState --> YetAnotherState |
| 6dd74de | | | 141 | yswsii --> YetAnotherState |
| 6dd74de | | | 142 | YetAnotherState --> [*] |
| 6dd74de | | | 143 | </pre> |
| 6dd74de | | | 144 | <hr /> |
| 6dd74de | | | 145 | |
| 6dd74de | | | 146 | <h2>You can label the relationships</h2> |
| 6dd74de | | | 147 | <pre class="mermaid"> |
| 6dd74de | | | 148 | stateDiagram-v2 |
| 6dd74de | | | 149 | [*] --> State1 |
| 6dd74de | | | 150 | State1 --> State2 : Transition 1 |
| 6dd74de | | | 151 | State1 --> State3 : Transition 2 |
| 6dd74de | | | 152 | State1 --> State4 : Transition 3 |
| 6dd74de | | | 153 | State1 --> [*] |
| 6dd74de | | | 154 | </pre> |
| 6dd74de | | | 155 | <hr /> |
| 6dd74de | | | 156 | |
| 6dd74de | | | 157 | <h2>This shows Composite states</h2> |
| 6dd74de | | | 158 | <pre class="mermaid"> |
| 6dd74de | | | 159 | stateDiagram-v2 |
| 6dd74de | | | 160 | [*] --> First |
| 6dd74de | | | 161 | First --> Second |
| 6dd74de | | | 162 | First --> Third |
| 6dd74de | | | 163 | |
| 6dd74de | | | 164 | state "the first composite" as First { |
| 6dd74de | | | 165 | [*] --> 1st |
| 6dd74de | | | 166 | state innerFirst { |
| 6dd74de | | | 167 | state "1 in innerFirst" as 1st1st |
| 6dd74de | | | 168 | 1st2nd: 2 in innerFirst |
| 6dd74de | | | 169 | [*] --> 1st1st |
| 6dd74de | | | 170 | 1st1st --> 1st2nd |
| 6dd74de | | | 171 | %% 1st2nd --> 1st |
| 6dd74de | | | 172 | } |
| 6dd74de | | | 173 | 1st --> innerFirst |
| 6dd74de | | | 174 | innerFirst --> 2nd |
| 6dd74de | | | 175 | } |
| 6dd74de | | | 176 | state Second { |
| 6dd74de | | | 177 | 2nd --> [*] |
| 6dd74de | | | 178 | } |
| 6dd74de | | | 179 | state Third { |
| 6dd74de | | | 180 | [*] --> 3rd |
| 6dd74de | | | 181 | 3rd --> [*] |
| 6dd74de | | | 182 | } |
| 6dd74de | | | 183 | </pre> |
| 6dd74de | | | 184 | <hr /> |
| 6dd74de | | | 185 | |
| 6dd74de | | | 186 | <h2>Composite states can link to themselves</h2> |
| 6dd74de | | | 187 | <pre class="mermaid"> |
| 6dd74de | | | 188 | stateDiagram-v2 |
| 6dd74de | | | 189 | state Active { |
| 6dd74de | | | 190 | Idle |
| 6dd74de | | | 191 | } |
| 6dd74de | | | 192 | Inactive --> Idle: ACT |
| 6dd74de | | | 193 | Active --> Active: LOG |
| 6dd74de | | | 194 | </pre> |
| 6dd74de | | | 195 | <hr /> |
| 6dd74de | | | 196 | |
| 6dd74de | | | 197 | <h2>transition labels can span multiple lines using "br" tags or \n</h2> |
| 6dd74de | | | 198 | <pre class="mermaid"> |
| 6dd74de | | | 199 | stateDiagram-v2 |
| 6dd74de | | | 200 | [*] --> S1 |
| 6dd74de | | | 201 | S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines. |
| 6dd74de | | | 202 | S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines. |
| 6dd74de | | | 203 | |
| 6dd74de | | | 204 | </pre> |
| 6dd74de | | | 205 | <hr /> |
| 6dd74de | | | 206 | |
| 6dd74de | | | 207 | <h2>You can add Notes</h2> |
| 6dd74de | | | 208 | <pre class="mermaid"> |
| 6dd74de | | | 209 | stateDiagram-v2 |
| 6dd74de | | | 210 | direction LR |
| 6dd74de | | | 211 | State1: A state with a note |
| 6dd74de | | | 212 | note right of State1 |
| 6dd74de | | | 213 | Important information!<br />You can write notes.<br />And\nthey\ncan\nbe\nmulti-\nline. |
| 6dd74de | | | 214 | end note |
| 6dd74de | | | 215 | State1 --> State2 |
| 6dd74de | | | 216 | note left of State2 : Notes can be to the left of a state\n(like this one). |
| 6dd74de | | | 217 | note right of State2 : Notes can be to the right of a state\n(like this one). |
| 6dd74de | | | 218 | </pre> |
| 6dd74de | | | 219 | <hr /> |
| 6dd74de | | | 220 | |
| 6dd74de | | | 221 | <script type="module"> |
| 6dd74de | | | 222 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 223 | mermaid.initialize({ |
| 6dd74de | | | 224 | theme: 'default', |
| 6dd74de | | | 225 | // themeCSS: '.node rect { fill: red; }', |
| 6dd74de | | | 226 | logLevel: 3, |
| 6dd74de | | | 227 | securityLevel: 'loose', |
| 6dd74de | | | 228 | flowchart: { curve: 'basis' }, |
| 6dd74de | | | 229 | gantt: { axisFormat: '%m/%d/%Y' }, |
| 6dd74de | | | 230 | sequence: { actorMargin: 50 }, |
| 6dd74de | | | 231 | // sequenceDiagram: { actorMargin: 300 } // deprecated |
| 6dd74de | | | 232 | }); |
| 6dd74de | | | 233 | </script> |
| 6dd74de | | | 234 | </body> |
| 6dd74de | | | 235 | </html> |