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