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