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