9.0 KB335 lines
Blame
1<html>
2 <head>
3 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
4 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
5 <link
6 rel="stylesheet"
7 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
8 />
9 <link
10 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
11 rel="stylesheet"
12 />
13 <style>
14 body {
15 /* background: rgb(221, 208, 208); */
16 background: #333;
17 font-family: 'Arial';
18 height: 100%;
19 width: 100%;
20 margin: 0;
21 padding: 0;
22 }
23 h1 {
24 color: grey;
25 }
26 .mermaid2 {
27 display: none;
28 }
29 .height {
30 min-height: 600px;
31 height: 600px;
32 }
33 .height2 {
34 min-height: 600px;
35 height: 1300px;
36 }
37 .width {
38 width: 33%;
39 border: 1px solid blue;
40 padding: 10px;
41 }
42 </style>
43 </head>
44 <body>
45 <h1>Showcases of diagrams</h1>
46 <div class="flex flex-wrap">
47 <pre class="mermaid width height">
48 %%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
49 graph TD
50 A[Christmas] -->|Get money| B(Go shopping)
51 B --> C{Let me think}
52 B --> G[/Another/]
53 C ==>|One| D[Laptop]
54 C -->|Two| E[iPhone]
55 C -->|Three| F[fa:fa-car Car]
56 subgraph section
57 C
58 D
59 E
60 F
61 G
62 end
63 </pre>
64 <pre class="mermaid width height">
65 flowchart TD
66 A[Christmas] -->|Get money| B(Go shopping)
67 B --> C{Let me think}
68 B --> G[Another]
69 C ==>|One| D[Laptop]
70 C x--x|Two| E[iPhone]
71 C o--o|Three| F[fa:fa-car Car]
72 subgraph section
73 C
74 D
75 E
76 F
77 G
78 end
79 </pre>
80 <pre class="mermaid width height">
81 sequenceDiagram
82 autonumber
83 par Action 1
84 Alice->>John: Hello John, how are you?
85 and Action 2
86 Alice->>Bob: Hello Bob, how are you?
87 end
88 Alice->>+John: Hello John, how are you?
89 Alice->>+John: John, can you hear me?
90 John-->>-Alice: Hi Alice, I can hear you!
91 Note right of John: John is perceptive
92 John-->>-Alice: I feel great!
93 loop Every minute
94 John-->Alice: Great!
95 end
96 </pre>
97 <pre class="mermaid width height">
98
99%%{init: {'theme':'dark'}}%%
100
101classDiagram
102 Animal "1" <|-- Duck
103 Animal <|-- Fish
104 Animal <--o Zebra
105 Animal : +int age
106 Animal : +String gender
107 Animal: +isMammal()
108 Animal: +mate()
109 class Duck{
110 +String beakColor
111 +swim()
112 +quack()
113 }
114 class Fish{
115 -int sizeInFeet
116 -canEat()
117 }
118 class Zebra{
119 +bool is_wild
120 +run()
121 }
122
123 </pre>
124 <pre class="mermaid width height">
125gantt
126 dateFormat :YYYY-MM-DD
127 title Adding GANTT diagram functionality to mermaid
128 excludes :excludes the named dates/days from being included in a charted task..
129 section A section
130 Completed task :done, des1, 2014-01-06,2014-01-08
131 Active task :active, des2, 2014-01-09, 3d
132 Future task : des3, after des2, 5d
133 Future task2 : des4, after des3, 5d
134
135 section Critical tasks
136 Completed task in the critical line :crit, done, 2014-01-06,24h
137 Implement parser and jison :crit, done, after des1, 2d
138 Create tests for parser :crit, active, 3d
139 Future task in critical line :crit, 5d
140 Create tests for renderer :2d
141 Add to mermaid :1d
142
143 section Documentation
144 Describe gantt syntax :active, a1, after des1, 3d
145 Add gantt diagram to demo page :after a1 , 20h
146 Add another diagram to demo page :doc1, after a1 , 48h
147
148 section Last section
149 Describe gantt syntax :after doc1, 3d
150 Add gantt diagram to demo page :20h
151 Add another diagram to demo page :48h
152 </pre>
153 <pre class="mermaid width height2">
154 stateDiagram
155 [*] --> Active
156
157 state Active {
158 [*] --> NumLockOff
159 NumLockOff --> NumLockOn : EvNumLockPressed
160 NumLockOn --> NumLockOff : EvNumLockPressed
161 --
162 [*] --> CapsLockOff
163 CapsLockOff --> CapsLockOn : EvCapsLockPressed
164 CapsLockOn --> CapsLockOff : EvCapsLockPressed
165 --
166 [*] --> ScrollLockOff
167 ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
168 ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
169 }
170 state SomethingElse {
171 A --> B
172 B --> A
173 }
174
175 Active --> SomethingElse
176 SomethingElse --> [*]
177 note right of SomethingElse : This is the note to the right.
178 </pre>
179 <pre class="mermaid width height2">
180 stateDiagram-v2
181 [*] --> Active
182
183 state Active {
184 [*] --> NumLockOff
185 NumLockOff --> NumLockOn : EvNumLockPressed
186 NumLockOn --> NumLockOff : EvNumLockPressed
187 --
188 [*] --> CapsLockOff
189 CapsLockOff --> CapsLockOn : EvCapsLockPressed
190 CapsLockOn --> CapsLockOff : EvCapsLockPressed
191 --
192 [*] --> ScrollLockOff
193 ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
194 ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
195 }
196 state SomethingElse {
197 A --> B
198 B --> A
199 }
200
201 Active --> SomethingElse2
202 SomethingElse2 --> [*]
203 note right of SomethingElse2 : This is the note to the right.
204 </pre>
205 <pre class="mermaid width height2">
206 erDiagram
207 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
208 CUSTOMER ||--o{ ORDER : places
209 CUSTOMER ||--o{ INVOICE : "liable for"
210 DELIVERY-ADDRESS ||--o{ ORDER : receives
211 INVOICE ||--|{ ORDER : covers
212 ORDER ||--|{ ORDER-ITEM : includes
213 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
214 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
215 </pre>
216 <pre class="mermaid width height">
217 journey
218 title My working day
219 section Go to work
220 Make tea: 5: Me
221 Go upstairs: 3: Me
222 Do work: 1: Me, Cat
223 section Go home
224 Go downstairs: 5: Me
225 Sit down: 5: Me
226 </pre>
227 <pre class="mermaid width height">
228requirementDiagram
229
230 requirement test_req {
231 id: 1
232 text: the test text.
233 risk: high
234 verifymethod: test
235 }
236
237 functionalRequirement test_req2 {
238 id: 1.1
239 text: the second test text.
240 risk: low
241 verifymethod: inspection
242 }
243
244 performanceRequirement test_req3 {
245 id: 1.2
246 text: the third test text.
247 risk: medium
248 verifymethod: demonstration
249 }
250
251 element test_entity {
252 type: simulation
253 }
254
255 element test_entity2 {
256 type: word doc
257 docRef: reqs/test_entity
258 }
259
260
261 test_entity - satisfies -> test_req2
262 test_req - traces -> test_req2
263 test_req - contains -> test_req3
264 test_req <- copies - test_entity2
265 </pre>
266 <pre class="mermaid" class="width height">
267gitGraph
268 commit
269 branch hotfix
270 checkout hotfix
271 commit
272 branch develop
273 checkout develop
274 commit id:"An id" tag:"A tag"
275 branch featureB
276 checkout featureB
277 commit type:HIGHLIGHT
278 checkout main
279 checkout hotfix
280 commit type:NORMAL
281 checkout develop
282 commit type:REVERSE
283 checkout featureB
284 commit
285 checkout main
286 merge hotfix
287 checkout featureB
288 commit
289 checkout develop
290 branch featureA
291 commit
292 checkout develop
293 merge hotfix
294 checkout featureA
295 commit
296 checkout featureB
297 commit
298 checkout develop
299 merge featureA
300 branch release
301 checkout release
302 commit
303 checkout main
304 commit
305 checkout release
306 merge main
307 checkout develop
308 merge release
309 </pre>
310 </div>
311 <script type="module">
312 import mermaid from './mermaid.esm.mjs';
313 mermaid.parseError = function (err, hash) {
314 // console.error('Mermaid error: ', err);
315 };
316 mermaid.initialize({
317 theme: 'dark',
318 // arrowMarkerAbsolute: true,
319 // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
320 logLevel: 0,
321 flowchart: { curve: 'cardinal', htmlLabels: true },
322 // gantt: { axisFormat: '%m/%d/%Y' },
323 sequence: { actorMargin: 50, showSequenceNumbers: true },
324 // sequenceDiagram: { actorMargin: 300 } // deprecated
325 fontFamily: '"arial", sans-serif',
326 curve: 'cardinal',
327 securityLevel: 'strict',
328 });
329 function callback() {
330 alert('It worked');
331 }
332 </script>
333 </body>
334</html>
335