| 6dd74de | | | 1 | <!doctype html> |
| 6dd74de | | | 2 | <html lang="en"> |
| 6dd74de | | | 3 | <head> |
| 6dd74de | | | 4 | <meta charset="utf-8" /> |
| 6dd74de | | | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6dd74de | | | 6 | <title>Class diagrams Mermaid Quick Test Page</title> |
| 6dd74de | | | 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> |
| 6dd74de | | | 8 | <style> |
| 6dd74de | | | 9 | div.mermaid { |
| 6dd74de | | | 10 | /* font-family: 'trebuchet ms', verdana, arial; */ |
| 6dd74de | | | 11 | font-family: 'Courier New', Courier, monospace !important; |
| 6dd74de | | | 12 | } |
| 6dd74de | | | 13 | </style> |
| 6dd74de | | | 14 | </head> |
| 6dd74de | | | 15 | |
| 6dd74de | | | 16 | <body> |
| 6dd74de | | | 17 | <h1>Class diagram demos</h1> |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | <pre class="mermaid"> |
| 6dd74de | | | 20 | --- |
| 6dd74de | | | 21 | title: Demo Class Diagram |
| 6dd74de | | | 22 | --- |
| 6dd74de | | | 23 | classDiagram |
| 6dd74de | | | 24 | accTitle: Demo Class Diagram |
| 6dd74de | | | 25 | accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra. |
| 6dd74de | | | 26 | |
| 6dd74de | | | 27 | Animal <|-- Duck |
| 6dd74de | | | 28 | Animal <|-- Fish |
| 6dd74de | | | 29 | Animal <|-- Zebra |
| 6dd74de | | | 30 | Animal : +int age |
| 6dd74de | | | 31 | Animal : +String gender |
| 6dd74de | | | 32 | Animal: +isMammal() |
| 6dd74de | | | 33 | Animal: +mate() |
| 6dd74de | | | 34 | |
| 6dd74de | | | 35 | class Duck{ |
| 6dd74de | | | 36 | +String beakColor |
| 6dd74de | | | 37 | +swim() |
| 6dd74de | | | 38 | +quack() |
| 6dd74de | | | 39 | } |
| 6dd74de | | | 40 | class Fish{ |
| 6dd74de | | | 41 | -Listint sizeInFeet |
| 6dd74de | | | 42 | -canEat() |
| 6dd74de | | | 43 | } |
| 6dd74de | | | 44 | class Zebra{ |
| 6dd74de | | | 45 | +bool is_wild |
| 6dd74de | | | 46 | +run(List~T~, List~OT~) |
| 6dd74de | | | 47 | %% +run-composite(List~T, K~) |
| 6dd74de | | | 48 | +run-nested(List~List~OT~~) |
| 6dd74de | | | 49 | } |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | </pre> |
| 6dd74de | | | 52 | <hr /> |
| 6dd74de | | | 53 | |
| 6dd74de | | | 54 | <pre class="mermaid"> |
| 6dd74de | | | 55 | classDiagram |
| 6dd74de | | | 56 | Class01 <|-- AveryLongClass : Cool |
| 6dd74de | | | 57 | |
| 6dd74de | | | 58 | <<interface>> Class01 |
| 6dd74de | | | 59 | Class03 "0" *-- "0..n" Class04 |
| 6dd74de | | | 60 | Class05 "1" o-- "many" Class06 |
| 6dd74de | | | 61 | Class07 .. Class08 |
| 6dd74de | | | 62 | Class09 "many" --> "1" C2 : Where am i? |
| 6dd74de | | | 63 | Class09 "0" --* "1..n" C3 |
| 6dd74de | | | 64 | Class09 --|> Class07 |
| 6dd74de | | | 65 | Class07 : equals() |
| 6dd74de | | | 66 | Class07 : Object[] elementData |
| 6dd74de | | | 67 | Class01 : #size() |
| 6dd74de | | | 68 | Class01 : -int chimp |
| 6dd74de | | | 69 | Class01 : +int gorilla |
| 6dd74de | | | 70 | Class08 <--> C2: Cool label |
| 6dd74de | | | 71 | class Class10 { |
| 6dd74de | | | 72 | <<service>> |
| 6dd74de | | | 73 | int id |
| 6dd74de | | | 74 | size() |
| 6dd74de | | | 75 | } |
| 6dd74de | | | 76 | </pre> |
| 6dd74de | | | 77 | <hr /> |
| 6dd74de | | | 78 | |
| 6dd74de | | | 79 | <pre class="mermaid"> |
| 6dd74de | | | 80 | classDiagram |
| 6dd74de | | | 81 | class Class01~T~ |
| 6dd74de | | | 82 | Class01 : #size() |
| 6dd74de | | | 83 | Class01 : -int chimp |
| 6dd74de | | | 84 | Class01 : +int gorilla |
| 6dd74de | | | 85 | Class01 : +abstractAttribute string* |
| 6dd74de | | | 86 | class Class10~T~ { |
| 6dd74de | | | 87 | <<service>> |
| 6dd74de | | | 88 | int id |
| 6dd74de | | | 89 | size() |
| 6dd74de | | | 90 | } |
| 6dd74de | | | 91 | </pre> |
| 6dd74de | | | 92 | <hr /> |
| 6dd74de | | | 93 | |
| 6dd74de | | | 94 | <pre class="mermaid"> |
| 6dd74de | | | 95 | classDiagram |
| 6dd74de | | | 96 | Class01~T~ <|-- AveryLongClass : Cool |
| 6dd74de | | | 97 | <<interface>> Class01 |
| 6dd74de | | | 98 | Class03~T~ "0" *-- "0..n" Class04 |
| 6dd74de | | | 99 | Class05 "1" o-- "many" Class06 |
| 6dd74de | | | 100 | Class07~T~ .. Class08 |
| 6dd74de | | | 101 | Class09 "many" --> "1" C2 : Where am i? |
| 6dd74de | | | 102 | Class09 "0" --* "1..n" C3 |
| 6dd74de | | | 103 | Class09 --|> Class07 |
| 6dd74de | | | 104 | Class07 : equals() |
| 6dd74de | | | 105 | Class07 : Object[] elementData |
| 6dd74de | | | 106 | Class01 : #size() |
| 6dd74de | | | 107 | Class01 : -int chimp |
| 6dd74de | | | 108 | Class01 : +int gorilla |
| 6dd74de | | | 109 | Class08 <--> C2: Cool label |
| 6dd74de | | | 110 | class Class10 { |
| 6dd74de | | | 111 | <<service>> |
| 6dd74de | | | 112 | int id |
| 6dd74de | | | 113 | size() |
| 6dd74de | | | 114 | } |
| 6dd74de | | | 115 | </pre> |
| 6dd74de | | | 116 | <hr /> |
| 6dd74de | | | 117 | |
| 6dd74de | | | 118 | <pre class="mermaid"> |
| 6dd74de | | | 119 | classDiagram |
| 6dd74de | | | 120 | Interface1 ()-- Interface1Impl |
| 6dd74de | | | 121 | </pre> |
| 6dd74de | | | 122 | <hr /> |
| 6dd74de | | | 123 | |
| 6dd74de | | | 124 | <pre class="mermaid"> |
| 6dd74de | | | 125 | classDiagram |
| 6dd74de | | | 126 | direction LR |
| 6dd74de | | | 127 | Animal ()-- Dog |
| 6dd74de | | | 128 | Animal ()-- Cat |
| 6dd74de | | | 129 | note for Cat "should have no members area" |
| 6dd74de | | | 130 | Dog : bark() |
| 6dd74de | | | 131 | Dog : species() |
| 6dd74de | | | 132 | </pre> |
| 6dd74de | | | 133 | <hr /> |
| 6dd74de | | | 134 | |
| 6dd74de | | | 135 | <pre class="mermaid"> |
| 6dd74de | | | 136 | classDiagram |
| 6dd74de | | | 137 | direction RL |
| 6dd74de | | | 138 | Fruit ()-- Apple |
| 6dd74de | | | 139 | Apple : color() |
| 6dd74de | | | 140 | Apple : -int leafCount() |
| 6dd74de | | | 141 | Fruit ()-- Pineapple |
| 6dd74de | | | 142 | Pineapple : color() |
| 6dd74de | | | 143 | Pineapple : -int leafCount() |
| 6dd74de | | | 144 | Pineapple : -int spikeCount() |
| 6dd74de | | | 145 | </pre> |
| 6dd74de | | | 146 | <hr /> |
| 6dd74de | | | 147 | |
| 6dd74de | | | 148 | <pre class="mermaid"> |
| 6dd74de | | | 149 | classDiagram |
| 6dd74de | | | 150 | class Person { |
| 6dd74de | | | 151 | +ID : Guid |
| 6dd74de | | | 152 | +FirstName : string |
| 6dd74de | | | 153 | +LastName : string |
| 6dd74de | | | 154 | -privateProperty : string |
| 6dd74de | | | 155 | #ProtectedProperty : string |
| 6dd74de | | | 156 | ~InternalProperty : string |
| 6dd74de | | | 157 | ~AnotherInternalProperty : List~List~string~~ |
| 6dd74de | | | 158 | } |
| 6dd74de | | | 159 | class People List~List~Person~~ |
| 6dd74de | | | 160 | </pre> |
| 6dd74de | | | 161 | <hr /> |
| 6dd74de | | | 162 | <pre class="mermaid"> |
| 6dd74de | | | 163 | classDiagram |
| 6dd74de | | | 164 | namespace Company.Project.Module { |
| 6dd74de | | | 165 | class GenericClass~T~ { |
| 6dd74de | | | 166 | +addItem(item: T) |
| 6dd74de | | | 167 | +getItem() T |
| 6dd74de | | | 168 | } |
| 6dd74de | | | 169 | } |
| 6dd74de | | | 170 | </pre> |
| 6dd74de | | | 171 | <hr /> |
| 6dd74de | | | 172 | <pre class="mermaid"> |
| 6dd74de | | | 173 | classDiagram |
| 6dd74de | | | 174 | namespace Company.Project.Module.SubModule { |
| 6dd74de | | | 175 | class Report { |
| 6dd74de | | | 176 | +generatePDF(data: List) |
| 6dd74de | | | 177 | +generateCSV(data: List) |
| 6dd74de | | | 178 | } |
| 6dd74de | | | 179 | } |
| 6dd74de | | | 180 | namespace Company.Project.Module { |
| 6dd74de | | | 181 | class Admin { |
| 6dd74de | | | 182 | +generateReport() |
| 6dd74de | | | 183 | } |
| 6dd74de | | | 184 | } |
| 6dd74de | | | 185 | Admin --> Report : generates |
| 6dd74de | | | 186 | </pre> |
| 6dd74de | | | 187 | <hr /> |
| 6dd74de | | | 188 | <pre class="mermaid"> |
| 6dd74de | | | 189 | classDiagram |
| 6dd74de | | | 190 | namespace Company.Project.Module { |
| 6dd74de | | | 191 | class User { |
| 6dd74de | | | 192 | +login(username: String, password: String) |
| 6dd74de | | | 193 | +logout() |
| 6dd74de | | | 194 | } |
| 6dd74de | | | 195 | class Admin { |
| 6dd74de | | | 196 | +addUser(user: User) |
| 6dd74de | | | 197 | +removeUser(user: User) |
| 6dd74de | | | 198 | +generateReport() |
| 6dd74de | | | 199 | } |
| 6dd74de | | | 200 | class Report { |
| 6dd74de | | | 201 | +generatePDF(reportData: List) |
| 6dd74de | | | 202 | +generateCSV(reportData: List) |
| 6dd74de | | | 203 | } |
| 6dd74de | | | 204 | } |
| 6dd74de | | | 205 | Admin --> User : manages |
| 6dd74de | | | 206 | Admin --> Report : generates |
| 6dd74de | | | 207 | </pre> |
| 6dd74de | | | 208 | <hr /> |
| 6dd74de | | | 209 | <pre class="mermaid"> |
| 6dd74de | | | 210 | classDiagram |
| 6dd74de | | | 211 | namespace Shapes { |
| 6dd74de | | | 212 | class Shape { |
| 6dd74de | | | 213 | +calculateArea() double |
| 6dd74de | | | 214 | } |
| 6dd74de | | | 215 | class Circle { |
| 6dd74de | | | 216 | +double radius |
| 6dd74de | | | 217 | } |
| 6dd74de | | | 218 | class Square { |
| 6dd74de | | | 219 | +double side |
| 6dd74de | | | 220 | } |
| 6dd74de | | | 221 | } |
| 6dd74de | | | 222 | |
| 6dd74de | | | 223 | Shape <|-- Circle |
| 6dd74de | | | 224 | Shape <|-- Square |
| 6dd74de | | | 225 | |
| 6dd74de | | | 226 | namespace Vehicles { |
| 6dd74de | | | 227 | class Vehicle { |
| 6dd74de | | | 228 | +String brand |
| 6dd74de | | | 229 | } |
| 6dd74de | | | 230 | class Car { |
| 6dd74de | | | 231 | +int horsepower |
| 6dd74de | | | 232 | } |
| 6dd74de | | | 233 | class Bike { |
| 6dd74de | | | 234 | +boolean hasGears |
| 6dd74de | | | 235 | } |
| 6dd74de | | | 236 | } |
| 6dd74de | | | 237 | |
| 6dd74de | | | 238 | Vehicle <|-- Car |
| 6dd74de | | | 239 | Vehicle <|-- Bike |
| 6dd74de | | | 240 | Car --> Circle : "Logo Shape" |
| 6dd74de | | | 241 | Bike --> Square : "Logo Shape" |
| 6dd74de | | | 242 | |
| 6dd74de | | | 243 | </pre> |
| 6dd74de | | | 244 | <hr /> |
| 6dd74de | | | 245 | <pre class="mermaid"> |
| 6dd74de | | | 246 | classDiagram |
| 6dd74de | | | 247 | note "This is a outer note" |
| 6dd74de | | | 248 | note for Class1 "This is a outer note for Class1" |
| 6dd74de | | | 249 | namespace ns { |
| 6dd74de | | | 250 | note "This is a inner note" |
| 6dd74de | | | 251 | note for Class1 "This is a inner note for Class1" |
| 6dd74de | | | 252 | class Class1 |
| 6dd74de | | | 253 | class Class2 |
| 6dd74de | | | 254 | } |
| 6dd74de | | | 255 | </pre> |
| 6dd74de | | | 256 | <hr /> |
| 6dd74de | | | 257 | |
| 6dd74de | | | 258 | <script type="module"> |
| 6dd74de | | | 259 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 260 | mermaid.initialize({ |
| 6dd74de | | | 261 | theme: 'default', |
| 6dd74de | | | 262 | // themeCSS: '.node rect { fill: red; }', |
| 6dd74de | | | 263 | logLevel: 3, |
| 6dd74de | | | 264 | securityLevel: 'loose', |
| 6dd74de | | | 265 | flowchart: { curve: 'basis' }, |
| 6dd74de | | | 266 | gantt: { axisFormat: '%m/%d/%Y' }, |
| 6dd74de | | | 267 | sequence: { actorMargin: 50 }, |
| 6dd74de | | | 268 | // sequenceDiagram: { actorMargin: 300 } // deprecated |
| 6dd74de | | | 269 | }); |
| 6dd74de | | | 270 | </script> |
| 6dd74de | | | 271 | </body> |
| 6dd74de | | | 272 | </html> |