collab/mermaid/cypress/platform/yari.htmlblame
View source
6dd74de1<html>
6dd74de2 <body>
6dd74de3 <h1 class="header">Class Nodes</h1>
6dd74de4 <div class="node-showcase">
6dd74de5 <div class="test">
6dd74de6 <h2>Basic Class</h2>
6dd74de7 <pre class="mermaid">
6dd74de8 ---
6dd74de9 config:
6dd74de10 htmlLabels: false
6dd74de11 ---
6dd74de12 classDiagram
6dd74de13 class _Duck_ {
6dd74de14 +String beakColor
6dd74de15 _+_swim_()a_
6dd74de16 __+quack() test__
6dd74de17 }
6dd74de18 </pre>
6dd74de19 </div>
6dd74de20 <div class="test">
6dd74de21 <h2>Basic Class</h2>
6dd74de22 <pre class="mermaid">
6dd74de23 ---
6dd74de24 config:
6dd74de25 htmlLabels: false
6dd74de26 ---
6dd74de27 classDiagram
6dd74de28 class Class10:::exClass2 {
6dd74de29 int[] id
6dd74de30 List~int~ ids
6dd74de31 test(List~int~ ids) List~bool~
6dd74de32 testArray() bool[]
6dd74de33 }
6dd74de34 </pre>
6dd74de35 </div>
6dd74de36 <div class="test">
6dd74de37 <h2>Basic Class</h2>
6dd74de38 <pre class="mermaid">
6dd74de39 flowchart TD
6dd74de40 Start --> Stop
6dd74de41 </pre>
6dd74de42 </div>
6dd74de43 <div class="test">
6dd74de44 <h2>Complex Class</h2>
6dd74de45 <pre class="mermaid">
6dd74de46 classDiagram
6dd74de47 class Square~Shape~{
6dd74de48 int id
6dd74de49 List~int~ position
6dd74de50 setPoints(List~int~ points)
6dd74de51 getPoints() List~int~
6dd74de52 }
6dd74de53
6dd74de54 Square : -List~string~ messages
6dd74de55 Square : +setMessages(List~string~ messages)
6dd74de56 Square : +getMessages() List~string~
6dd74de57 Square : +getDistanceMatrix() List~List~int~~
6dd74de58 </pre
6dd74de59 >
6dd74de60 </div>
6dd74de61 <div class="test">
6dd74de62 <h2>No Attributes</h2>
6dd74de63 <pre class="mermaid">
6dd74de64 classDiagram
6dd74de65 class Duck {
6dd74de66 +swim()
6dd74de67 +quack()
6dd74de68 }
6dd74de69 </pre>
6dd74de70 </div>
6dd74de71 <div class="test">
6dd74de72 <h2>No Methods</h2>
6dd74de73 <pre class="mermaid">
6dd74de74 classDiagram
6dd74de75 class Duck {
6dd74de76 +String beakColor
6dd74de77 }
6dd74de78 </pre>
6dd74de79 </div>
6dd74de80 <div class="test">
6dd74de81 <h2>Only Class Name</h2>
6dd74de82 <p>Empty line as attribute</p>
6dd74de83 <pre class="mermaid">
6dd74de84 ---
6dd74de85 config:
6dd74de86 class:
6dd74de87 hideEmptyMembersBox: false
6dd74de88 ---
6dd74de89 classDiagram
6dd74de90 class Duck {
6dd74de91
6dd74de92 }
6dd74de93 </pre>
6dd74de94 </div>
6dd74de95 <div class="test">
6dd74de96 <h2>Visibility and Types</h2>
6dd74de97 <p>(Further tilde testing)</p>
6dd74de98 <div class="mermaid">
6dd74de99 classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~
6dd74de100 -test()~~~~~~~ +deposit(amount) bool }
6dd74de101 </div>
6dd74de102 </div>
6dd74de103 <div class="test">
6dd74de104 <h2>Additional Classifiers</h2>
6dd74de105 <p>(* Abstract | $ Static)</p>
6dd74de106 <div class="mermaid">
6dd74de107 classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~points)*
6dd74de108 getPoints()* List~int~ } Square : -List~string~ messages$ Square :
6dd74de109 +setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square :
6dd74de110 +getDistanceMatrix() List~List~int~~$
6dd74de111 </div>
6dd74de112 </div>
6dd74de113 <div class="test">
6dd74de114 <h2>Label</h2>
6dd74de115 <pre class="mermaid">
6dd74de116 classDiagram
6dd74de117 class Animal~test~["Animal with a label"]
6dd74de118 </pre>
6dd74de119 </div>
6dd74de120 <div class="test">
6dd74de121 <h2>Spacing</h2>
6dd74de122 <p>(Fix ensures consistent spacing rules)</p>
6dd74de123 <p>(No space or single space?)</p>
6dd74de124 <pre class="mermaid">
6dd74de125 classDiagram
6dd74de126 class ClassName {
6dd74de127 -attribute:type
6dd74de128 - attribute : type
6dd74de129 test
6dd74de130
6dd74de131 + GetAttribute() type
6dd74de132 + GetAttribute() type
6dd74de133 }
6dd74de134 </pre>
6dd74de135 </div>
6dd74de136 <div class="test">
6dd74de137 <h2>Annotation</h2>
6dd74de138 <pre class="mermaid">
6dd74de139 classDiagram
6dd74de140 class Shape
6dd74de141 &lt;&lt;interface&gt;&gt; Shape
6dd74de142 Shape : noOfVertices
6dd74de143 Shape : draw()
6dd74de144 </pre>
6dd74de145 </div>
6dd74de146 <div class="test">
6dd74de147 <h2>Long Class Name Text</h2>
6dd74de148 <pre class="mermaid">
6dd74de149 classDiagram
6dd74de150 class ThisIsATestForALongClassName {
6dd74de151 &lt;&lt;interface&gt;&gt;
6dd74de152 noOfLetters
6dd74de153 delete()
6dd74de154 }
6dd74de155 </pre>
6dd74de156 </div>
6dd74de157 <div class="test">
6dd74de158 <h2>Long Annotation Text</h2>
6dd74de159 <pre class="mermaid">
6dd74de160 classDiagram
6dd74de161 class Shape
6dd74de162 &lt;&lt;superlongannotationtext&gt;&gt; Shape
6dd74de163 Shape : noOfVertices
6dd74de164 Shape : draw()
6dd74de165 </pre>
6dd74de166 </div>
6dd74de167 <div class="test">
6dd74de168 <h2>Long Member Text</h2>
6dd74de169 <pre class="mermaid">
6dd74de170 classDiagram
6dd74de171 class Shape
6dd74de172 &lt;&lt;interface&gt;&gt; Shape
6dd74de173 Shape : noOfVertices
6dd74de174 Shape : longtexttestkeepgoingandgoing
6dd74de175 Shape : draw()
6dd74de176 </pre>
6dd74de177 </div>
6dd74de178 <div class="test">
6dd74de179 <h2>Link</h2>
6dd74de180 <pre class="mermaid">
6dd74de181 classDiagram
6dd74de182 class Shape
6dd74de183 link Shape "https://www.github.com" "This is a tooltip for a link"
6dd74de184 </pre>
6dd74de185 </div>
6dd74de186 <div class="test">
6dd74de187 <h2>Click</h2>
6dd74de188 <pre class="mermaid">
6dd74de189 classDiagram
6dd74de190 class Shape
6dd74de191 click Shape href "https://www.github.com" "This is a tooltip for a link"
6dd74de192 </pre>
6dd74de193 </div>
6dd74de194 <div class="test">
6dd74de195 <h2>Hand Drawn</h2>
6dd74de196 <pre class="mermaid">
6dd74de197 ---
6dd74de198 config:
6dd74de199 look: handDrawn
6dd74de200 htmlLabels: true
6dd74de201 ---
6dd74de202 classDiagram
6dd74de203 class Hand {
6dd74de204 +String beakColor
6dd74de205 +swim()
6dd74de206 +quack()
6dd74de207 }
6dd74de208 style Hand fill:#f9f,stroke:#29f,stroke-width:2px
6dd74de209 </pre>
6dd74de210 </div>
6dd74de211 <div class="test">
6dd74de212 <h2>Neutral Theme</h2>
6dd74de213 <pre class="mermaid">
6dd74de214 ---
6dd74de215 config:
6dd74de216 theme: neutral
6dd74de217 ---
6dd74de218 classDiagram
6dd74de219 class Duck {
6dd74de220 +String beakColor
6dd74de221 +swim()
6dd74de222 +quack()
6dd74de223 }
6dd74de224 </pre>
6dd74de225 </div>
6dd74de226 <div class="test">
6dd74de227 <h2>Dark Theme</h2>
6dd74de228 <pre class="mermaid">
6dd74de229 ---
6dd74de230 config:
6dd74de231 theme: dark
6dd74de232 ---
6dd74de233 classDiagram
6dd74de234 class Duck {
6dd74de235 +String beakColor
6dd74de236 +swim()
6dd74de237 +quack()
6dd74de238 }
6dd74de239 </pre>
6dd74de240 </div>
6dd74de241 <div class="test">
6dd74de242 <h2>Forest Theme</h2>
6dd74de243 <pre class="mermaid">
6dd74de244 ---
6dd74de245 config:
6dd74de246 theme: forest
6dd74de247 ---
6dd74de248 classDiagram
6dd74de249 class Duck {
6dd74de250 +String beakColor
6dd74de251 +swim()
6dd74de252 +quack()
6dd74de253 }
6dd74de254 </pre>
6dd74de255 </div>
6dd74de256 <div class="test">
6dd74de257 <h2>Base Theme</h2>
6dd74de258 <pre class="mermaid">
6dd74de259 ---
6dd74de260 config:
6dd74de261 theme: base
6dd74de262 ---
6dd74de263 classDiagram
6dd74de264 class Duck {
6dd74de265 +String beakColor
6dd74de266 +swim()
6dd74de267 +quack()
6dd74de268 }
6dd74de269 </pre>
6dd74de270 </div>
6dd74de271 <div class="test">
6dd74de272 <h2>Custom Theme</h2>
6dd74de273 <pre class="mermaid">
6dd74de274 %%{
6dd74de275 init: {
6dd74de276 'theme': 'base',
6dd74de277 'themeVariables': {
6dd74de278 'primaryColor': '#BB2528',
6dd74de279 'primaryTextColor': '#fff',
6dd74de280 'primaryBorderColor': '#7C0000',
6dd74de281 'lineColor': '#F83d29',
6dd74de282 'secondaryColor': '#006100',
6dd74de283 'tertiaryColor': '#fff'
6dd74de284 }
6dd74de285 }
6dd74de286 }%%
6dd74de287 classDiagram
6dd74de288 class Duck {
6dd74de289 +String beakColor
6dd74de290 +swim()
6dd74de291 +quack()
6dd74de292 }
6dd74de293 Duck--Dog
6dd74de294 </pre>
6dd74de295 </div>
6dd74de296 <div class="test">
6dd74de297 <h2>Styling within Diagram</h2>
6dd74de298 <pre class="mermaid">
6dd74de299 classDiagram
6dd74de300 class Duck {
6dd74de301 +String beakColor
6dd74de302 +swim()
6dd74de303 +quack()
6dd74de304 }
6dd74de305 style Duck fill:#f9f,stroke:#333,stroke-width:8px
6dd74de306 </pre>
6dd74de307 </div>
6dd74de308 <div class="test">
6dd74de309 <h2>Styling with classDef Statement</h2>
6dd74de310 <pre class="mermaid">
6dd74de311 classDiagram
6dd74de312 class Duck:::bold {
6dd74de313 +String beakColor
6dd74de314 +swim()
6dd74de315 +quack()
6dd74de316 }
6dd74de317
6dd74de318 class Dog {
6dd74de319 +int numTeeth
6dd74de320 +bark()
6dd74de321 }
6dd74de322
6dd74de323 cssClass "Duck,Dog" pink
6dd74de324
6dd74de325 classDef pink fill:#f9f
6dd74de326 classDef default color:#f1e
6dd74de327 classDef bold stroke:#333,stroke-width:6px,color:#fff
6dd74de328 </pre>
6dd74de329 </div>
6dd74de330 <div class="test">
6dd74de331 <h2>Styling with Class in Stylesheet</h2>
6dd74de332 <pre class="mermaid">
6dd74de333 classDiagram
6dd74de334 class Duck {
6dd74de335 +String beakColor
6dd74de336 +swim()
6dd74de337 +quack()
6dd74de338 }
6dd74de339 class Duck:::styleClass
6dd74de340 </pre>
6dd74de341 </div>
6dd74de342 </div>
6dd74de343 <h1 class="header">Diagram Testing</h1>
6dd74de344 <div class="diagram-showcase">
6dd74de345 <div class="test">
6dd74de346 <h2>Class Nodes Only</h2>
6dd74de347 <pre class="mermaid">
6dd74de348 ---
6dd74de349 title: Animal example
6dd74de350 ---
6dd74de351 classDiagram
6dd74de352 Animal : +int age
6dd74de353 Animal : +String gender
6dd74de354 Animal: +isMammal()
6dd74de355 Animal: +mate()
6dd74de356 class Duck{
6dd74de357 +String beakColor
6dd74de358 +swim()
6dd74de359 +quack()
6dd74de360 }
6dd74de361 class Fish{
6dd74de362 -int sizeInFeet
6dd74de363 -canEat()
6dd74de364 }
6dd74de365 class Zebra{
6dd74de366 +bool is_wild
6dd74de367 +run()
6dd74de368 }
6dd74de369 </pre>
6dd74de370 </div>
6dd74de371 <div class="test">
6dd74de372 <h2>Class Nodes LR</h2>
6dd74de373 <pre class="mermaid">
6dd74de374 ---
6dd74de375 title: Animal example
6dd74de376 ---
6dd74de377 classDiagram
6dd74de378 direction LR
6dd74de379 Animal : +int age
6dd74de380 Animal : +String gender
6dd74de381 Animal: +isMammal()
6dd74de382 Animal: +mate()
6dd74de383 class Duck{
6dd74de384 +String beakColor
6dd74de385 +swim()
6dd74de386 +quack()
6dd74de387 }
6dd74de388 class Fish{
6dd74de389 -int sizeInFeet
6dd74de390 -canEat()
6dd74de391 }
6dd74de392 class Zebra{
6dd74de393 +bool is_wild
6dd74de394 +run()
6dd74de395 }
6dd74de396 </pre>
6dd74de397 </div>
6dd74de398 <div class="test">
6dd74de399 <h2>Relations</h2>
6dd74de400 <pre class="mermaid">
6dd74de401 classDiagram
6dd74de402 classA <|-- classB
6dd74de403 classC *-- classD
6dd74de404 classE o-- classF
6dd74de405 classG <-- classH
6dd74de406 classI -- classJ
6dd74de407 classK <.. classL
6dd74de408 classM <|.. classN
6dd74de409 classO .. classP
6dd74de410 </pre>
6dd74de411 </div>
6dd74de412 <div class="test">
6dd74de413 <h2>Two Way Relation</h2>
6dd74de414 <pre class="mermaid">
6dd74de415 classDiagram
6dd74de416 class Animal {
6dd74de417 int size
6dd74de418 walk()
6dd74de419 }
6dd74de420 class Zebra {
6dd74de421 int size
6dd74de422 walk()
6dd74de423 }
6dd74de424 Animal o--|> Zebra
6dd74de425
6dd74de426 </pre>
6dd74de427 </div>
6dd74de428 <div class="test">
6dd74de429 <h2>Relations with Labels</h2>
6dd74de430 <pre class="mermaid">
6dd74de431 classDiagram
6dd74de432 classA <|-- classB : implements
6dd74de433 classC *-- classD : composition
6dd74de434 classE o-- classF : aggregation
6dd74de435 </pre>
6dd74de436 </div>
6dd74de437 <div class="test">
6dd74de438 <h2>Cardinality / Multiplicity</h2>
6dd74de439 <pre class="mermaid">
6dd74de440 classDiagram
6dd74de441 Customer "1" --> "*" Ticket
6dd74de442 Student "1" --> "1..*" Course
6dd74de443 Galaxy --> "many" Star : Contains
6dd74de444 </pre>
6dd74de445 </div>
6dd74de446 <div class="test">
6dd74de447 <h2>Complex Relations with Theme</h2>
6dd74de448 <pre class="mermaid">
6dd74de449 ---
6dd74de450 config:
6dd74de451 theme: forest
6dd74de452 look: handDrawn
6dd74de453 layout: elk
6dd74de454 ---
6dd74de455 classDiagram
6dd74de456 direction RL
6dd74de457 class Student {
6dd74de458 -idCard : IdCard
6dd74de459 }
6dd74de460 class IdCard{
6dd74de461 -id : int
6dd74de462 -name : string
6dd74de463 }
6dd74de464 class Bike{
6dd74de465 -id : int
6dd74de466 -name : string
6dd74de467 }
6dd74de468 Student "1" o--o "1" IdCard : carries
6dd74de469 Student "1" o--o "1" Bike : rides
6dd74de470 </pre>
6dd74de471 </div>
6dd74de472 <div class="test">
6dd74de473 <h2>Notes</h2>
6dd74de474 <pre class="mermaid">
6dd74de475 classDiagram
6dd74de476 note "This is a general note"
6dd74de477 note for MyClass "This is a note for a class"
6dd74de478 class MyClass
6dd74de479 </pre>
6dd74de480 </div>
6dd74de481 <div class="test">
6dd74de482 <h2>Namespaces</h2>
6dd74de483 <pre class="mermaid">
6dd74de484 classDiagram
6dd74de485 namespace BaseShapes {
6dd74de486 class Triangle
6dd74de487 class Rectangle {
6dd74de488 double width
6dd74de489 double height
6dd74de490 }
6dd74de491 }
6dd74de492 </pre>
6dd74de493 </div>
6dd74de494 <div class="test">
6dd74de495 <h2>Namespaces</h2>
6dd74de496 <pre class="mermaid">
6dd74de497 ---
6dd74de498 config:
6dd74de499 layout: elk
6dd74de500 ---
6dd74de501 classDiagram
6dd74de502 namespace Namespace1 {
6dd74de503 class C1
6dd74de504 class C2
6dd74de505 }
6dd74de506 C1 --> C2
6dd74de507 class C3
6dd74de508 class C4
6dd74de509 </pre>
6dd74de510 </div>
6dd74de511 <div class="test">
6dd74de512 <h2>Full Example</h2>
6dd74de513 <pre class="mermaid">
6dd74de514 ---
6dd74de515 title: Animal example
6dd74de516 config:
6dd74de517 layout: dagre
6dd74de518 ---
6dd74de519 classDiagram
6dd74de520 note "From Duck till Zebra"
6dd74de521 Animal <|--|> Duck
6dd74de522 note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
6dd74de523 Animal <|-- Fish
6dd74de524 Animal <|--|> Zebra
6dd74de525 Animal : +int age
6dd74de526 Animal : +String gender
6dd74de527 Animal: +isMammal()
6dd74de528 Animal: +mate()
6dd74de529 class Duck{
6dd74de530 +String beakColor
6dd74de531 +swim()
6dd74de532 +quack()
6dd74de533 }
6dd74de534 class Fish{
6dd74de535 -int sizeInFeet
6dd74de536 -canEat()
6dd74de537 }
6dd74de538 class Zebra{
6dd74de539 +bool is_wild
6dd74de540 +run()
6dd74de541 }
6dd74de542 cssClass "Duck" test
6dd74de543 classDef test fill:#f71
6dd74de544 %%classDef default fill:#f93
6dd74de545 </pre>
6dd74de546 </div>
6dd74de547 <div class="test">
6dd74de548 <h2>Full Example</h2>
6dd74de549 <pre class="mermaid">
6dd74de550 ---
6dd74de551 config:
6dd74de552 theme: forest
6dd74de553 look: handDrawn
6dd74de554 ---
6dd74de555 classDiagram
6dd74de556 note for Outside "Note testing"
6dd74de557 namespace Test {
6dd74de558 class Outside
6dd74de559 }
6dd74de560 namespace BaseShapes {
6dd74de561 class Triangle
6dd74de562 class Rectangle {
6dd74de563 double width
6dd74de564 double height
6dd74de565 }
6dd74de566 }
6dd74de567 Outside <|--|> Rectangle
6dd74de568 style Triangle fill:#f9f,stroke:#333,stroke-width:4px
6dd74de569 </pre>
6dd74de570 </div>
6dd74de571 <div class="test">
6dd74de572 <pre class="mermaid">
6dd74de573 ---
6dd74de574 config:
6dd74de575 look: handDrawn
6dd74de576 layout: elk
6dd74de577 ---
6dd74de578 classDiagram
6dd74de579 Class01 "1" <|--|> "*" AveryLongClass : Cool
6dd74de580 &lt;&lt;interface&gt;&gt; Class01
6dd74de581 Class03 "1" *-- "*" Class04
6dd74de582 Class05 "1" o-- "many" Class06
6dd74de583 Class07 "1" .. "*" Class08
6dd74de584 Class09 "1" --> "*" C2 : Where am i?
6dd74de585 Class09 "*" --* "*" C3
6dd74de586 Class09 "1" --|> "1" Class07
6dd74de587 NewClass ()--() Class04
6dd74de588 Class09 <|--|> AveryLongClass
6dd74de589 Class07 : equals()
6dd74de590 Class07 : Object[] elementData
6dd74de591 Class01 : size()
6dd74de592 Class01 : int chimp
6dd74de593 Class01 : int gorilla
6dd74de594 Class08 "1" <--> "*" C2: Cool label
6dd74de595 class Class10 {
6dd74de596 &lt;&lt;service&gt;&gt;
6dd74de597 int id
6dd74de598 test()
6dd74de599 }
6dd74de600 Class10 o--o AveryLongClass
6dd74de601 Class10 <--> Class07
6dd74de602 </pre>
6dd74de603 </div>
6dd74de604 <div class="test">
6dd74de605 <pre class="mermaid">
6dd74de606 ---
6dd74de607 config:
6dd74de608 theme: dark
6dd74de609 ---
6dd74de610 classDiagram
6dd74de611 test ()--() test2
6dd74de612 </pre>
6dd74de613 </div>
6dd74de614 </div>
6dd74de615
6dd74de616 <script type="module">
6dd74de617 import mermaid from './mermaid.esm.mjs';
6dd74de618 import layouts from './mermaid-layout-elk.esm.mjs';
6dd74de619 mermaid.registerLayoutLoaders(layouts);
6dd74de620 mermaid.parseError = function (err, hash) {
6dd74de621 console.error('Mermaid error: ', err);
6dd74de622 };
6dd74de623 mermaid.initialize();
6dd74de624 mermaid.parseError = function (err, hash) {
6dd74de625 console.error('In parse error:');
6dd74de626 console.error(err);
6dd74de627 };
6dd74de628 </script>
6dd74de629 </body>
6dd74de630 <style>
6dd74de631 .header {
6dd74de632 text-decoration: underline;
6dd74de633 text-align: center;
6dd74de634 }
6dd74de635 .node-showcase {
6dd74de636 display: grid;
6dd74de637 grid-template-columns: 1fr 1fr;
6dd74de638 }
6dd74de639 .test {
6dd74de640 flex-grow: 1;
6dd74de641 display: flex;
6dd74de642 flex-direction: column;
6dd74de643 align-items: center;
6dd74de644 gap: 0.4rem;
6dd74de645 }
6dd74de646 .test > h2 {
6dd74de647 margin: 0;
6dd74de648 text-align: center;
6dd74de649 }
6dd74de650 .test > p {
6dd74de651 margin-top: -6px;
6dd74de652 color: gray;
6dd74de653 }
6dd74de654
6dd74de655 .diagram-showcase {
6dd74de656 display: grid;
6dd74de657 grid-template-columns: 1fr;
6dd74de658 }
6dd74de659
6dd74de660 .styleClass > * > path {
6dd74de661 fill: #ff0000 !important;
6dd74de662 stroke: #ffff00 !important;
6dd74de663 stroke-width: 4px !important;
6dd74de664 stroke-dasharray: 2 !important;
6dd74de665 }
6dd74de666 </style>
6dd74de667</html>