16.7 KB668 lines
Blame
1<html>
2 <body>
3 <h1 class="header">Class Nodes</h1>
4 <div class="node-showcase">
5 <div class="test">
6 <h2>Basic Class</h2>
7 <pre class="mermaid">
8 ---
9 config:
10 htmlLabels: false
11 ---
12 classDiagram
13 class _Duck_ {
14 +String beakColor
15 _+_swim_()a_
16 __+quack() test__
17 }
18 </pre>
19 </div>
20 <div class="test">
21 <h2>Basic Class</h2>
22 <pre class="mermaid">
23 ---
24 config:
25 htmlLabels: false
26 ---
27 classDiagram
28 class Class10:::exClass2 {
29 int[] id
30 List~int~ ids
31 test(List~int~ ids) List~bool~
32 testArray() bool[]
33 }
34 </pre>
35 </div>
36 <div class="test">
37 <h2>Basic Class</h2>
38 <pre class="mermaid">
39 flowchart TD
40 Start --> Stop
41 </pre>
42 </div>
43 <div class="test">
44 <h2>Complex Class</h2>
45 <pre class="mermaid">
46 classDiagram
47 class Square~Shape~{
48 int id
49 List~int~ position
50 setPoints(List~int~ points)
51 getPoints() List~int~
52 }
53
54 Square : -List~string~ messages
55 Square : +setMessages(List~string~ messages)
56 Square : +getMessages() List~string~
57 Square : +getDistanceMatrix() List~List~int~~
58 </pre
59 >
60 </div>
61 <div class="test">
62 <h2>No Attributes</h2>
63 <pre class="mermaid">
64 classDiagram
65 class Duck {
66 +swim()
67 +quack()
68 }
69 </pre>
70 </div>
71 <div class="test">
72 <h2>No Methods</h2>
73 <pre class="mermaid">
74 classDiagram
75 class Duck {
76 +String beakColor
77 }
78 </pre>
79 </div>
80 <div class="test">
81 <h2>Only Class Name</h2>
82 <p>Empty line as attribute</p>
83 <pre class="mermaid">
84 ---
85 config:
86 class:
87 hideEmptyMembersBox: false
88 ---
89 classDiagram
90 class Duck {
91
92 }
93 </pre>
94 </div>
95 <div class="test">
96 <h2>Visibility and Types</h2>
97 <p>(Further tilde testing)</p>
98 <div class="mermaid">
99 classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~
100 -test()~~~~~~~ +deposit(amount) bool }
101 </div>
102 </div>
103 <div class="test">
104 <h2>Additional Classifiers</h2>
105 <p>(* Abstract | $ Static)</p>
106 <div class="mermaid">
107 classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~points)*
108 getPoints()* List~int~ } Square : -List~string~ messages$ Square :
109 +setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square :
110 +getDistanceMatrix() List~List~int~~$
111 </div>
112 </div>
113 <div class="test">
114 <h2>Label</h2>
115 <pre class="mermaid">
116 classDiagram
117 class Animal~test~["Animal with a label"]
118 </pre>
119 </div>
120 <div class="test">
121 <h2>Spacing</h2>
122 <p>(Fix ensures consistent spacing rules)</p>
123 <p>(No space or single space?)</p>
124 <pre class="mermaid">
125 classDiagram
126 class ClassName {
127 -attribute:type
128 - attribute : type
129 test
130
131 + GetAttribute() type
132 + GetAttribute() type
133 }
134 </pre>
135 </div>
136 <div class="test">
137 <h2>Annotation</h2>
138 <pre class="mermaid">
139 classDiagram
140 class Shape
141 &lt;&lt;interface&gt;&gt; Shape
142 Shape : noOfVertices
143 Shape : draw()
144 </pre>
145 </div>
146 <div class="test">
147 <h2>Long Class Name Text</h2>
148 <pre class="mermaid">
149 classDiagram
150 class ThisIsATestForALongClassName {
151 &lt;&lt;interface&gt;&gt;
152 noOfLetters
153 delete()
154 }
155 </pre>
156 </div>
157 <div class="test">
158 <h2>Long Annotation Text</h2>
159 <pre class="mermaid">
160 classDiagram
161 class Shape
162 &lt;&lt;superlongannotationtext&gt;&gt; Shape
163 Shape : noOfVertices
164 Shape : draw()
165 </pre>
166 </div>
167 <div class="test">
168 <h2>Long Member Text</h2>
169 <pre class="mermaid">
170 classDiagram
171 class Shape
172 &lt;&lt;interface&gt;&gt; Shape
173 Shape : noOfVertices
174 Shape : longtexttestkeepgoingandgoing
175 Shape : draw()
176 </pre>
177 </div>
178 <div class="test">
179 <h2>Link</h2>
180 <pre class="mermaid">
181 classDiagram
182 class Shape
183 link Shape "https://www.github.com" "This is a tooltip for a link"
184 </pre>
185 </div>
186 <div class="test">
187 <h2>Click</h2>
188 <pre class="mermaid">
189 classDiagram
190 class Shape
191 click Shape href "https://www.github.com" "This is a tooltip for a link"
192 </pre>
193 </div>
194 <div class="test">
195 <h2>Hand Drawn</h2>
196 <pre class="mermaid">
197 ---
198 config:
199 look: handDrawn
200 htmlLabels: true
201 ---
202 classDiagram
203 class Hand {
204 +String beakColor
205 +swim()
206 +quack()
207 }
208 style Hand fill:#f9f,stroke:#29f,stroke-width:2px
209 </pre>
210 </div>
211 <div class="test">
212 <h2>Neutral Theme</h2>
213 <pre class="mermaid">
214 ---
215 config:
216 theme: neutral
217 ---
218 classDiagram
219 class Duck {
220 +String beakColor
221 +swim()
222 +quack()
223 }
224 </pre>
225 </div>
226 <div class="test">
227 <h2>Dark Theme</h2>
228 <pre class="mermaid">
229 ---
230 config:
231 theme: dark
232 ---
233 classDiagram
234 class Duck {
235 +String beakColor
236 +swim()
237 +quack()
238 }
239 </pre>
240 </div>
241 <div class="test">
242 <h2>Forest Theme</h2>
243 <pre class="mermaid">
244 ---
245 config:
246 theme: forest
247 ---
248 classDiagram
249 class Duck {
250 +String beakColor
251 +swim()
252 +quack()
253 }
254 </pre>
255 </div>
256 <div class="test">
257 <h2>Base Theme</h2>
258 <pre class="mermaid">
259 ---
260 config:
261 theme: base
262 ---
263 classDiagram
264 class Duck {
265 +String beakColor
266 +swim()
267 +quack()
268 }
269 </pre>
270 </div>
271 <div class="test">
272 <h2>Custom Theme</h2>
273 <pre class="mermaid">
274 %%{
275 init: {
276 'theme': 'base',
277 'themeVariables': {
278 'primaryColor': '#BB2528',
279 'primaryTextColor': '#fff',
280 'primaryBorderColor': '#7C0000',
281 'lineColor': '#F83d29',
282 'secondaryColor': '#006100',
283 'tertiaryColor': '#fff'
284 }
285 }
286 }%%
287 classDiagram
288 class Duck {
289 +String beakColor
290 +swim()
291 +quack()
292 }
293 Duck--Dog
294 </pre>
295 </div>
296 <div class="test">
297 <h2>Styling within Diagram</h2>
298 <pre class="mermaid">
299 classDiagram
300 class Duck {
301 +String beakColor
302 +swim()
303 +quack()
304 }
305 style Duck fill:#f9f,stroke:#333,stroke-width:8px
306 </pre>
307 </div>
308 <div class="test">
309 <h2>Styling with classDef Statement</h2>
310 <pre class="mermaid">
311 classDiagram
312 class Duck:::bold {
313 +String beakColor
314 +swim()
315 +quack()
316 }
317
318 class Dog {
319 +int numTeeth
320 +bark()
321 }
322
323 cssClass "Duck,Dog" pink
324
325 classDef pink fill:#f9f
326 classDef default color:#f1e
327 classDef bold stroke:#333,stroke-width:6px,color:#fff
328 </pre>
329 </div>
330 <div class="test">
331 <h2>Styling with Class in Stylesheet</h2>
332 <pre class="mermaid">
333 classDiagram
334 class Duck {
335 +String beakColor
336 +swim()
337 +quack()
338 }
339 class Duck:::styleClass
340 </pre>
341 </div>
342 </div>
343 <h1 class="header">Diagram Testing</h1>
344 <div class="diagram-showcase">
345 <div class="test">
346 <h2>Class Nodes Only</h2>
347 <pre class="mermaid">
348 ---
349 title: Animal example
350 ---
351 classDiagram
352 Animal : +int age
353 Animal : +String gender
354 Animal: +isMammal()
355 Animal: +mate()
356 class Duck{
357 +String beakColor
358 +swim()
359 +quack()
360 }
361 class Fish{
362 -int sizeInFeet
363 -canEat()
364 }
365 class Zebra{
366 +bool is_wild
367 +run()
368 }
369 </pre>
370 </div>
371 <div class="test">
372 <h2>Class Nodes LR</h2>
373 <pre class="mermaid">
374 ---
375 title: Animal example
376 ---
377 classDiagram
378 direction LR
379 Animal : +int age
380 Animal : +String gender
381 Animal: +isMammal()
382 Animal: +mate()
383 class Duck{
384 +String beakColor
385 +swim()
386 +quack()
387 }
388 class Fish{
389 -int sizeInFeet
390 -canEat()
391 }
392 class Zebra{
393 +bool is_wild
394 +run()
395 }
396 </pre>
397 </div>
398 <div class="test">
399 <h2>Relations</h2>
400 <pre class="mermaid">
401 classDiagram
402 classA <|-- classB
403 classC *-- classD
404 classE o-- classF
405 classG <-- classH
406 classI -- classJ
407 classK <.. classL
408 classM <|.. classN
409 classO .. classP
410 </pre>
411 </div>
412 <div class="test">
413 <h2>Two Way Relation</h2>
414 <pre class="mermaid">
415 classDiagram
416 class Animal {
417 int size
418 walk()
419 }
420 class Zebra {
421 int size
422 walk()
423 }
424 Animal o--|> Zebra
425
426 </pre>
427 </div>
428 <div class="test">
429 <h2>Relations with Labels</h2>
430 <pre class="mermaid">
431 classDiagram
432 classA <|-- classB : implements
433 classC *-- classD : composition
434 classE o-- classF : aggregation
435 </pre>
436 </div>
437 <div class="test">
438 <h2>Cardinality / Multiplicity</h2>
439 <pre class="mermaid">
440 classDiagram
441 Customer "1" --> "*" Ticket
442 Student "1" --> "1..*" Course
443 Galaxy --> "many" Star : Contains
444 </pre>
445 </div>
446 <div class="test">
447 <h2>Complex Relations with Theme</h2>
448 <pre class="mermaid">
449 ---
450 config:
451 theme: forest
452 look: handDrawn
453 layout: elk
454 ---
455 classDiagram
456 direction RL
457 class Student {
458 -idCard : IdCard
459 }
460 class IdCard{
461 -id : int
462 -name : string
463 }
464 class Bike{
465 -id : int
466 -name : string
467 }
468 Student "1" o--o "1" IdCard : carries
469 Student "1" o--o "1" Bike : rides
470 </pre>
471 </div>
472 <div class="test">
473 <h2>Notes</h2>
474 <pre class="mermaid">
475 classDiagram
476 note "This is a general note"
477 note for MyClass "This is a note for a class"
478 class MyClass
479 </pre>
480 </div>
481 <div class="test">
482 <h2>Namespaces</h2>
483 <pre class="mermaid">
484 classDiagram
485 namespace BaseShapes {
486 class Triangle
487 class Rectangle {
488 double width
489 double height
490 }
491 }
492 </pre>
493 </div>
494 <div class="test">
495 <h2>Namespaces</h2>
496 <pre class="mermaid">
497 ---
498 config:
499 layout: elk
500 ---
501 classDiagram
502 namespace Namespace1 {
503 class C1
504 class C2
505 }
506 C1 --> C2
507 class C3
508 class C4
509 </pre>
510 </div>
511 <div class="test">
512 <h2>Full Example</h2>
513 <pre class="mermaid">
514 ---
515 title: Animal example
516 config:
517 layout: dagre
518 ---
519 classDiagram
520 note "From Duck till Zebra"
521 Animal <|--|> Duck
522 note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
523 Animal <|-- Fish
524 Animal <|--|> Zebra
525 Animal : +int age
526 Animal : +String gender
527 Animal: +isMammal()
528 Animal: +mate()
529 class Duck{
530 +String beakColor
531 +swim()
532 +quack()
533 }
534 class Fish{
535 -int sizeInFeet
536 -canEat()
537 }
538 class Zebra{
539 +bool is_wild
540 +run()
541 }
542 cssClass "Duck" test
543 classDef test fill:#f71
544 %%classDef default fill:#f93
545 </pre>
546 </div>
547 <div class="test">
548 <h2>Full Example</h2>
549 <pre class="mermaid">
550 ---
551 config:
552 theme: forest
553 look: handDrawn
554 ---
555 classDiagram
556 note for Outside "Note testing"
557 namespace Test {
558 class Outside
559 }
560 namespace BaseShapes {
561 class Triangle
562 class Rectangle {
563 double width
564 double height
565 }
566 }
567 Outside <|--|> Rectangle
568 style Triangle fill:#f9f,stroke:#333,stroke-width:4px
569 </pre>
570 </div>
571 <div class="test">
572 <pre class="mermaid">
573 ---
574 config:
575 look: handDrawn
576 layout: elk
577 ---
578 classDiagram
579 Class01 "1" <|--|> "*" AveryLongClass : Cool
580 &lt;&lt;interface&gt;&gt; Class01
581 Class03 "1" *-- "*" Class04
582 Class05 "1" o-- "many" Class06
583 Class07 "1" .. "*" Class08
584 Class09 "1" --> "*" C2 : Where am i?
585 Class09 "*" --* "*" C3
586 Class09 "1" --|> "1" Class07
587 NewClass ()--() Class04
588 Class09 <|--|> AveryLongClass
589 Class07 : equals()
590 Class07 : Object[] elementData
591 Class01 : size()
592 Class01 : int chimp
593 Class01 : int gorilla
594 Class08 "1" <--> "*" C2: Cool label
595 class Class10 {
596 &lt;&lt;service&gt;&gt;
597 int id
598 test()
599 }
600 Class10 o--o AveryLongClass
601 Class10 <--> Class07
602 </pre>
603 </div>
604 <div class="test">
605 <pre class="mermaid">
606 ---
607 config:
608 theme: dark
609 ---
610 classDiagram
611 test ()--() test2
612 </pre>
613 </div>
614 </div>
615
616 <script type="module">
617 import mermaid from './mermaid.esm.mjs';
618 import layouts from './mermaid-layout-elk.esm.mjs';
619 mermaid.registerLayoutLoaders(layouts);
620 mermaid.parseError = function (err, hash) {
621 console.error('Mermaid error: ', err);
622 };
623 mermaid.initialize();
624 mermaid.parseError = function (err, hash) {
625 console.error('In parse error:');
626 console.error(err);
627 };
628 </script>
629 </body>
630 <style>
631 .header {
632 text-decoration: underline;
633 text-align: center;
634 }
635 .node-showcase {
636 display: grid;
637 grid-template-columns: 1fr 1fr;
638 }
639 .test {
640 flex-grow: 1;
641 display: flex;
642 flex-direction: column;
643 align-items: center;
644 gap: 0.4rem;
645 }
646 .test > h2 {
647 margin: 0;
648 text-align: center;
649 }
650 .test > p {
651 margin-top: -6px;
652 color: gray;
653 }
654
655 .diagram-showcase {
656 display: grid;
657 grid-template-columns: 1fr;
658 }
659
660 .styleClass > * > path {
661 fill: #ff0000 !important;
662 stroke: #ffff00 !important;
663 stroke-width: 4px !important;
664 stroke-dasharray: 2 !important;
665 }
666 </style>
667</html>
668