| 6dd74de | | | 1 | <html> |
| 6dd74de | | | 2 | <head> |
| 6dd74de | | | 3 | <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> |
| 6dd74de | | | 4 | <link |
| 6dd74de | | | 5 | rel="stylesheet" |
| 6dd74de | | | 6 | href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" |
| 6dd74de | | | 7 | /> |
| 6dd74de | | | 8 | <link |
| 6dd74de | | | 9 | href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" |
| 6dd74de | | | 10 | rel="stylesheet" |
| 6dd74de | | | 11 | /> |
| 6dd74de | | | 12 | <style> |
| 6dd74de | | | 13 | body { |
| 6dd74de | | | 14 | background: rgb(221, 208, 208); |
| 6dd74de | | | 15 | font-family: 'Arial'; |
| 6dd74de | | | 16 | } |
| 6dd74de | | | 17 | h1 { |
| 6dd74de | | | 18 | color: white; |
| 6dd74de | | | 19 | } |
| 6dd74de | | | 20 | .mermaid2 { |
| 6dd74de | | | 21 | display: none; |
| 6dd74de | | | 22 | } |
| 6dd74de | | | 23 | .customCss > rect, |
| 6dd74de | | | 24 | .customCss { |
| 6dd74de | | | 25 | fill: #ff0000 !important; |
| 6dd74de | | | 26 | stroke: #ffff00 !important; |
| 6dd74de | | | 27 | stroke-width: 4px !important; |
| 6dd74de | | | 28 | } |
| 6dd74de | | | 29 | </style> |
| 6dd74de | | | 30 | </head> |
| 6dd74de | | | 31 | <body> |
| 6dd74de | | | 32 | <h1>info below</h1> |
| 6dd74de | | | 33 | <pre class="mermaid" style="width: 100%; height: 20%"> |
| 6dd74de | | | 34 | %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% |
| 6dd74de | | | 35 | classDiagram |
| 6dd74de | | | 36 | class BankAccount{ |
| 6dd74de | | | 37 | +String owner |
| 6dd74de | | | 38 | +BigDecimal balance |
| 6dd74de | | | 39 | +deposit(amount) bool |
| 6dd74de | | | 40 | +withdrawal(amount) int |
| 6dd74de | | | 41 | } |
| 6dd74de | | | 42 | cssClass "BankAccount" customCss |
| 6dd74de | | | 43 | |
| 6dd74de | | | 44 | </pre> |
| 6dd74de | | | 45 | <pre class="mermaid" style="width: 100%; height: 20%"> |
| 6dd74de | | | 46 | %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% |
| 6dd74de | | | 47 | classDiagram-v2 |
| 6dd74de | | | 48 | classA <|-- classB : implements |
| 6dd74de | | | 49 | classC *-- classD : composition |
| 6dd74de | | | 50 | classE o-- classF : aggregation |
| 6dd74de | | | 51 | </pre> |
| 6dd74de | | | 52 | <pre class="mermaid2" style="width: 100%; height: 20%"> |
| 6dd74de | | | 53 | %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% |
| 6dd74de | | | 54 | classDiagram |
| 6dd74de | | | 55 | class BankAccount{ |
| 6dd74de | | | 56 | +String owner |
| 6dd74de | | | 57 | +BigDecimal balance |
| 6dd74de | | | 58 | +deposit(amount) bool |
| 6dd74de | | | 59 | +withdrawal(amount) int |
| 6dd74de | | | 60 | } |
| 6dd74de | | | 61 | Class01~T~ <|-- AveryLongClass : Cool |
| 6dd74de | | | 62 | Class03~T~ *-- Class04~T~ |
| 6dd74de | | | 63 | Class01 : size() |
| 6dd74de | | | 64 | Class01 : int chimp |
| 6dd74de | | | 65 | Class01 : int gorilla |
| 6dd74de | | | 66 | Class08 <--> C2: Cool label |
| 6dd74de | | | 67 | class Class10~T~ { |
| 6dd74de | | | 68 | <<service>> |
| 6dd74de | | | 69 | int id |
| 6dd74de | | | 70 | test() |
| 6dd74de | | | 71 | } |
| 6dd74de | | | 72 | callback Class01 "callback" "A Tooltip" |
| 6dd74de | | | 73 | |
| 6dd74de | | | 74 | </pre> |
| 6dd74de | | | 75 | <pre class="mermaid2" style="width: 100%; height: 20%"> |
| 6dd74de | | | 76 | flowchart TB |
| 6dd74de | | | 77 | a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a |
| 6dd74de | | | 78 | a_a --> c --> d_d --> c_c |
| 6dd74de | | | 79 | classDef apa fill:#f9f,stroke:#333,stroke-width:4px; |
| 6dd74de | | | 80 | class a_a apa; |
| 6dd74de | | | 81 | click a_a "https://www.aftonbladet.se" "apa" |
| 6dd74de | | | 82 | |
| 6dd74de | | | 83 | </pre> |
| 6dd74de | | | 84 | |
| 6dd74de | | | 85 | <pre class="mermaid2" style="width: 100%; height: 20%"> |
| 6dd74de | | | 86 | classDiagram-v2 |
| 6dd74de | | | 87 | |
| 6dd74de | | | 88 | classA -- classB : Inheritance |
| 6dd74de | | | 89 | classA -- classC : link |
| 6dd74de | | | 90 | classC -- classD : link |
| 6dd74de | | | 91 | classB -- classD |
| 6dd74de | | | 92 | classA --|> classB : Inheritance |
| 6dd74de | | | 93 | classC --* classD : Composition |
| 6dd74de | | | 94 | classE --o classF : Aggregation |
| 6dd74de | | | 95 | classG --> classH : Association |
| 6dd74de | | | 96 | classI -- classJ : Link(Solid) |
| 6dd74de | | | 97 | classK ..> classL : Dependency |
| 6dd74de | | | 98 | classM ..|> classN : Realization |
| 6dd74de | | | 99 | classO .. classP : Link(Dashed) |
| 6dd74de | | | 100 | classA : +attr1 |
| 6dd74de | | | 101 | classA : attr2 |
| 6dd74de | | | 102 | classA : method1() |
| 6dd74de | | | 103 | <<interface>> classB |
| 6dd74de | | | 104 | classB : method2() int |
| 6dd74de | | | 105 | |
| 6dd74de | | | 106 | Customer "1" --> "*" Ticket |
| 6dd74de | | | 107 | Student "1" --> "1..*" Course |
| 6dd74de | | | 108 | Galaxy --> "many" Star : Contains |
| 6dd74de | | | 109 | <<interface>> Customer |
| 6dd74de | | | 110 | |
| 6dd74de | | | 111 | class Shape |
| 6dd74de | | | 112 | callback Shape "callbackFunction" "This is a tooltip for a callback" |
| 6dd74de | | | 113 | |
| 6dd74de | | | 114 | </pre> |
| 6dd74de | | | 115 | <script type="module"> |
| 6dd74de | | | 116 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 117 | mermaid.parseError = function (err, hash) { |
| 6dd74de | | | 118 | // console.error('Mermaid error: ', err); |
| 6dd74de | | | 119 | }; |
| 6dd74de | | | 120 | mermaid.initialize({ |
| 6dd74de | | | 121 | theme: 'default', |
| 6dd74de | | | 122 | logLevel: 0, |
| 6dd74de | | | 123 | flowchart: { curve: 'linear', htmlLabels: true }, |
| 6dd74de | | | 124 | sequence: { actorMargin: 50, showSequenceNumbers: true }, |
| 6dd74de | | | 125 | curve: 'linear', |
| 6dd74de | | | 126 | securityLevel: 'loose', |
| 6dd74de | | | 127 | }); |
| 6dd74de | | | 128 | function callback() { |
| 6dd74de | | | 129 | alert('It worked'); |
| 6dd74de | | | 130 | } |
| 6dd74de | | | 131 | </script> |
| 6dd74de | | | 132 | </body> |
| 6dd74de | | | 133 | </html> |