-
-
Notifications
You must be signed in to change notification settings - Fork 5.9k
/
state.html
164 lines (148 loc) · 4.15 KB
/
state.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>States Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>State diagram demos</h1>
<h2>Very simple showing change from State1 to State2</h2>
<pre class="mermaid">
---
title: Very simple diagram
---
stateDiagram
accTitle: This is the accessible title
accDescr:This is an accessible description
State1 --> State2
</pre>
<hr />
<h2>This has classDef statements to apply style classes to specific states</h2>
<h4>Here are the <code>classDef</code> statements:</h4>
<p>
<code>
classDef notMoving fill:white<br />
classDef movement font-style:italic;<br />
classDef badBadEvent fill:#f00,color:white,font-weight:bold<br />
</code>
</p>
<h4>And these are how they are applied:</h4>
<p>
<code>
class Still notMoving<br />
class Moving, Crash movement<br />
class Crash badBadEvent<br />
</code>
</p>
<pre class="mermaid">
---
title: Very simple diagram
---
stateDiagram-v2
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:#f00,color:white,font-weight:bold
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
</pre>
<hr />
<pre class="mermaid">
stateDiagram-v2
accTitle: very very simple state
accDescr: This is a state diagram showing one state
State1
</pre>
<hr />
<h2>You can label the relationships</h2>
<pre class="mermaid">
stateDiagram-v2
[*] --> State1
State1 --> State2 : Transition 1
State1 --> State3 : Transition 2
State1 --> State4 : Transition 3
State1 --> [*]
</pre>
<hr />
<h2>This shows Composite states</h2>
<pre class="mermaid">
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> 1st
1st --> [*]
}
state Second {
[*] --> 2nd
2nd --> [*]
}
state Third {
[*] --> 3rd
3rd --> [*]
}
</pre>
<hr />
<h2>Compsite states can link to themselves</h2>
<pre class="mermaid">
stateDiagram-v2
state Active {
Idle
}
Inactive --> Idle: ACT
Active --> Active: LOG
</pre>
<hr />
<h2>transition labels can span multiple lines using "br" tags or \n</h2>
<pre class="mermaid">
stateDiagram-v2
[*] --> S1
S1 --> S2: This long line uses a br tag<br/>to create multiple<br/>lines.
S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
</pre>
<hr />
<h2>You can add Notes</h2>
<pre class="mermaid">
stateDiagram-v2
direction LR
State1: A state with a note
note right of State1
Important information!<br />You can write notes.<br/>And\nthey\ncan\nbe\nmulti-\nline.
end note
State1 --> State2
note left of State2 : Notes can be to the left of a state\n(like this one).
note right of State2 : Notes can be to the right of a state\n(like this one).
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'default',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html>