| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Class diagrams |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." |
| 6dd74de | | | 10 | > |
| 6dd74de | | | 11 | > -Wikipedia |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | Mermaid can render class diagrams. |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | ```mermaid-example |
| 6dd74de | | | 18 | --- |
| 6dd74de | | | 19 | title: Animal example |
| 6dd74de | | | 20 | --- |
| 6dd74de | | | 21 | classDiagram |
| 6dd74de | | | 22 | note "From Duck till Zebra" |
| 6dd74de | | | 23 | Animal <|-- Duck |
| 6dd74de | | | 24 | note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging" |
| 6dd74de | | | 25 | Animal <|-- Fish |
| 6dd74de | | | 26 | Animal <|-- Zebra |
| 6dd74de | | | 27 | Animal : +int age |
| 6dd74de | | | 28 | Animal : +String gender |
| 6dd74de | | | 29 | Animal: +isMammal() |
| 6dd74de | | | 30 | Animal: +mate() |
| 6dd74de | | | 31 | class Duck{ |
| 6dd74de | | | 32 | +String beakColor |
| 6dd74de | | | 33 | +swim() |
| 6dd74de | | | 34 | +quack() |
| 6dd74de | | | 35 | } |
| 6dd74de | | | 36 | class Fish{ |
| 6dd74de | | | 37 | -int sizeInFeet |
| 6dd74de | | | 38 | -canEat() |
| 6dd74de | | | 39 | } |
| 6dd74de | | | 40 | class Zebra{ |
| 6dd74de | | | 41 | +bool is_wild |
| 6dd74de | | | 42 | +run() |
| 6dd74de | | | 43 | } |
| 6dd74de | | | 44 | ``` |
| 6dd74de | | | 45 | |
| 6dd74de | | | 46 | ```mermaid |
| 6dd74de | | | 47 | --- |
| 6dd74de | | | 48 | title: Animal example |
| 6dd74de | | | 49 | --- |
| 6dd74de | | | 50 | classDiagram |
| 6dd74de | | | 51 | note "From Duck till Zebra" |
| 6dd74de | | | 52 | Animal <|-- Duck |
| 6dd74de | | | 53 | note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging" |
| 6dd74de | | | 54 | Animal <|-- Fish |
| 6dd74de | | | 55 | Animal <|-- Zebra |
| 6dd74de | | | 56 | Animal : +int age |
| 6dd74de | | | 57 | Animal : +String gender |
| 6dd74de | | | 58 | Animal: +isMammal() |
| 6dd74de | | | 59 | Animal: +mate() |
| 6dd74de | | | 60 | class Duck{ |
| 6dd74de | | | 61 | +String beakColor |
| 6dd74de | | | 62 | +swim() |
| 6dd74de | | | 63 | +quack() |
| 6dd74de | | | 64 | } |
| 6dd74de | | | 65 | class Fish{ |
| 6dd74de | | | 66 | -int sizeInFeet |
| 6dd74de | | | 67 | -canEat() |
| 6dd74de | | | 68 | } |
| 6dd74de | | | 69 | class Zebra{ |
| 6dd74de | | | 70 | +bool is_wild |
| 6dd74de | | | 71 | +run() |
| 6dd74de | | | 72 | } |
| 6dd74de | | | 73 | ``` |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | ## Syntax |
| 6dd74de | | | 76 | |
| 6dd74de | | | 77 | ### Class |
| 6dd74de | | | 78 | |
| 6dd74de | | | 79 | UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. |
| 6dd74de | | | 80 | A single instance of a class in the diagram contains three compartments: |
| 6dd74de | | | 81 | |
| 6dd74de | | | 82 | - The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class. |
| 6dd74de | | | 83 | - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. |
| 6dd74de | | | 84 | - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. |
| 6dd74de | | | 85 | |
| 6dd74de | | | 86 | ```mermaid-example |
| 6dd74de | | | 87 | --- |
| 6dd74de | | | 88 | title: Bank example |
| 6dd74de | | | 89 | --- |
| 6dd74de | | | 90 | classDiagram |
| 6dd74de | | | 91 | class BankAccount |
| 6dd74de | | | 92 | BankAccount : +String owner |
| 6dd74de | | | 93 | BankAccount : +Bigdecimal balance |
| 6dd74de | | | 94 | BankAccount : +deposit(amount) |
| 6dd74de | | | 95 | BankAccount : +withdrawal(amount) |
| 6dd74de | | | 96 | |
| 6dd74de | | | 97 | ``` |
| 6dd74de | | | 98 | |
| 6dd74de | | | 99 | ```mermaid |
| 6dd74de | | | 100 | --- |
| 6dd74de | | | 101 | title: Bank example |
| 6dd74de | | | 102 | --- |
| 6dd74de | | | 103 | classDiagram |
| 6dd74de | | | 104 | class BankAccount |
| 6dd74de | | | 105 | BankAccount : +String owner |
| 6dd74de | | | 106 | BankAccount : +Bigdecimal balance |
| 6dd74de | | | 107 | BankAccount : +deposit(amount) |
| 6dd74de | | | 108 | BankAccount : +withdrawal(amount) |
| 6dd74de | | | 109 | |
| 6dd74de | | | 110 | ``` |
| 6dd74de | | | 111 | |
| 6dd74de | | | 112 | ## Define a class |
| 6dd74de | | | 113 | |
| 6dd74de | | | 114 | There are two ways to define a class: |
| 6dd74de | | | 115 | |
| 6dd74de | | | 116 | - Explicitly using keyword **class** like `class Animal` which would define the Animal class. |
| 6dd74de | | | 117 | - Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`. |
| 6dd74de | | | 118 | |
| 6dd74de | | | 119 | ```mermaid-example |
| 6dd74de | | | 120 | classDiagram |
| 6dd74de | | | 121 | class Animal |
| 6dd74de | | | 122 | Vehicle <|-- Car |
| 6dd74de | | | 123 | ``` |
| 6dd74de | | | 124 | |
| 6dd74de | | | 125 | ```mermaid |
| 6dd74de | | | 126 | classDiagram |
| 6dd74de | | | 127 | class Animal |
| 6dd74de | | | 128 | Vehicle <|-- Car |
| 6dd74de | | | 129 | ``` |
| 6dd74de | | | 130 | |
| 6dd74de | | | 131 | Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-). |
| 6dd74de | | | 132 | |
| 6dd74de | | | 133 | ### Class labels |
| 6dd74de | | | 134 | |
| 6dd74de | | | 135 | In case you need to provide a label for a class, you can use the following syntax: |
| 6dd74de | | | 136 | |
| 6dd74de | | | 137 | ```mermaid-example |
| 6dd74de | | | 138 | classDiagram |
| 6dd74de | | | 139 | class Animal["Animal with a label"] |
| 6dd74de | | | 140 | class Car["Car with *! symbols"] |
| 6dd74de | | | 141 | Animal --> Car |
| 6dd74de | | | 142 | ``` |
| 6dd74de | | | 143 | |
| 6dd74de | | | 144 | ```mermaid |
| 6dd74de | | | 145 | classDiagram |
| 6dd74de | | | 146 | class Animal["Animal with a label"] |
| 6dd74de | | | 147 | class Car["Car with *! symbols"] |
| 6dd74de | | | 148 | Animal --> Car |
| 6dd74de | | | 149 | ``` |
| 6dd74de | | | 150 | |
| 6dd74de | | | 151 | You can also use backticks to escape special characters in the label: |
| 6dd74de | | | 152 | |
| 6dd74de | | | 153 | ```mermaid-example |
| 6dd74de | | | 154 | classDiagram |
| 6dd74de | | | 155 | class `Animal Class!` |
| 6dd74de | | | 156 | class `Car Class` |
| 6dd74de | | | 157 | `Animal Class!` --> `Car Class` |
| 6dd74de | | | 158 | ``` |
| 6dd74de | | | 159 | |
| 6dd74de | | | 160 | ```mermaid |
| 6dd74de | | | 161 | classDiagram |
| 6dd74de | | | 162 | class `Animal Class!` |
| 6dd74de | | | 163 | class `Car Class` |
| 6dd74de | | | 164 | `Animal Class!` --> `Car Class` |
| 6dd74de | | | 165 | ``` |
| 6dd74de | | | 166 | |
| 6dd74de | | | 167 | ## Defining Members of a class |
| 6dd74de | | | 168 | |
| 6dd74de | | | 169 | UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them. |
| 6dd74de | | | 170 | |
| 6dd74de | | | 171 | Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes. |
| 6dd74de | | | 172 | |
| 6dd74de | | | 173 | There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are : |
| 6dd74de | | | 174 | |
| 6dd74de | | | 175 | - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: |
| 6dd74de | | | 176 | |
| 6dd74de | | | 177 | ```mermaid-example |
| 6dd74de | | | 178 | classDiagram |
| 6dd74de | | | 179 | class BankAccount |
| 6dd74de | | | 180 | BankAccount : +String owner |
| 6dd74de | | | 181 | BankAccount : +BigDecimal balance |
| 6dd74de | | | 182 | BankAccount : +deposit(amount) |
| 6dd74de | | | 183 | BankAccount : +withdrawal(amount) |
| 6dd74de | | | 184 | ``` |
| 6dd74de | | | 185 | |
| 6dd74de | | | 186 | ```mermaid |
| 6dd74de | | | 187 | classDiagram |
| 6dd74de | | | 188 | class BankAccount |
| 6dd74de | | | 189 | BankAccount : +String owner |
| 6dd74de | | | 190 | BankAccount : +BigDecimal balance |
| 6dd74de | | | 191 | BankAccount : +deposit(amount) |
| 6dd74de | | | 192 | BankAccount : +withdrawal(amount) |
| 6dd74de | | | 193 | ``` |
| 6dd74de | | | 194 | |
| 6dd74de | | | 195 | - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: |
| 6dd74de | | | 196 | |
| 6dd74de | | | 197 | ```mermaid-example |
| 6dd74de | | | 198 | classDiagram |
| 6dd74de | | | 199 | class BankAccount{ |
| 6dd74de | | | 200 | +String owner |
| 6dd74de | | | 201 | +BigDecimal balance |
| 6dd74de | | | 202 | +deposit(amount) |
| 6dd74de | | | 203 | +withdrawal(amount) |
| 6dd74de | | | 204 | } |
| 6dd74de | | | 205 | ``` |
| 6dd74de | | | 206 | |
| 6dd74de | | | 207 | ```mermaid |
| 6dd74de | | | 208 | classDiagram |
| 6dd74de | | | 209 | class BankAccount{ |
| 6dd74de | | | 210 | +String owner |
| 6dd74de | | | 211 | +BigDecimal balance |
| 6dd74de | | | 212 | +deposit(amount) |
| 6dd74de | | | 213 | +withdrawal(amount) |
| 6dd74de | | | 214 | } |
| 6dd74de | | | 215 | ``` |
| 6dd74de | | | 216 | |
| 6dd74de | | | 217 | #### Return Type |
| 6dd74de | | | 218 | |
| 6dd74de | | | 219 | Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example: |
| 6dd74de | | | 220 | |
| 6dd74de | | | 221 | ```mermaid-example |
| 6dd74de | | | 222 | classDiagram |
| 6dd74de | | | 223 | class BankAccount{ |
| 6dd74de | | | 224 | +String owner |
| 6dd74de | | | 225 | +BigDecimal balance |
| 6dd74de | | | 226 | +deposit(amount) bool |
| 6dd74de | | | 227 | +withdrawal(amount) int |
| 6dd74de | | | 228 | } |
| 6dd74de | | | 229 | ``` |
| 6dd74de | | | 230 | |
| 6dd74de | | | 231 | ```mermaid |
| 6dd74de | | | 232 | classDiagram |
| 6dd74de | | | 233 | class BankAccount{ |
| 6dd74de | | | 234 | +String owner |
| 6dd74de | | | 235 | +BigDecimal balance |
| 6dd74de | | | 236 | +deposit(amount) bool |
| 6dd74de | | | 237 | +withdrawal(amount) int |
| 6dd74de | | | 238 | } |
| 6dd74de | | | 239 | ``` |
| 6dd74de | | | 240 | |
| 6dd74de | | | 241 | #### Generic Types |
| 6dd74de | | | 242 | |
| 6dd74de | | | 243 | Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`) |
| 6dd74de | | | 244 | |
| 6dd74de | | | 245 | > _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types. |
| 6dd74de | | | 246 | |
| 6dd74de | | | 247 | ```mermaid-example |
| 6dd74de | | | 248 | classDiagram |
| 6dd74de | | | 249 | class Square~Shape~{ |
| 6dd74de | | | 250 | int id |
| 6dd74de | | | 251 | List~int~ position |
| 6dd74de | | | 252 | setPoints(List~int~ points) |
| 6dd74de | | | 253 | getPoints() List~int~ |
| 6dd74de | | | 254 | } |
| 6dd74de | | | 255 | |
| 6dd74de | | | 256 | Square : -List~string~ messages |
| 6dd74de | | | 257 | Square : +setMessages(List~string~ messages) |
| 6dd74de | | | 258 | Square : +getMessages() List~string~ |
| 6dd74de | | | 259 | Square : +getDistanceMatrix() List~List~int~~ |
| 6dd74de | | | 260 | ``` |
| 6dd74de | | | 261 | |
| 6dd74de | | | 262 | ```mermaid |
| 6dd74de | | | 263 | classDiagram |
| 6dd74de | | | 264 | class Square~Shape~{ |
| 6dd74de | | | 265 | int id |
| 6dd74de | | | 266 | List~int~ position |
| 6dd74de | | | 267 | setPoints(List~int~ points) |
| 6dd74de | | | 268 | getPoints() List~int~ |
| 6dd74de | | | 269 | } |
| 6dd74de | | | 270 | |
| 6dd74de | | | 271 | Square : -List~string~ messages |
| 6dd74de | | | 272 | Square : +setMessages(List~string~ messages) |
| 6dd74de | | | 273 | Square : +getMessages() List~string~ |
| 6dd74de | | | 274 | Square : +getDistanceMatrix() List~List~int~~ |
| 6dd74de | | | 275 | ``` |
| 6dd74de | | | 276 | |
| 6dd74de | | | 277 | #### Visibility |
| 6dd74de | | | 278 | |
| 6dd74de | | | 279 | To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name: |
| 6dd74de | | | 280 | |
| 6dd74de | | | 281 | - `+` Public |
| 6dd74de | | | 282 | - `-` Private |
| 6dd74de | | | 283 | - `#` Protected |
| 6dd74de | | | 284 | - `~` Package/Internal |
| 6dd74de | | | 285 | |
| 6dd74de | | | 286 | > _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type: |
| 6dd74de | | | 287 | > |
| 6dd74de | | | 288 | > - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*` |
| 6dd74de | | | 289 | > - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$` |
| 6dd74de | | | 290 | |
| 6dd74de | | | 291 | > _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end: |
| 6dd74de | | | 292 | > |
| 6dd74de | | | 293 | > - `$` Static e.g.: `String someField$` |
| 6dd74de | | | 294 | |
| 6dd74de | | | 295 | ## Defining Relationship |
| 6dd74de | | | 296 | |
| 6dd74de | | | 297 | A relationship is a general term covering the specific types of logical connections found on class and object diagrams. |
| 6dd74de | | | 298 | |
| 6dd74de | | | 299 | ``` |
| 6dd74de | | | 300 | [classA][Arrow][ClassB] |
| 6dd74de | | | 301 | ``` |
| 6dd74de | | | 302 | |
| 6dd74de | | | 303 | There are eight different types of relations defined for classes under UML which are currently supported: |
| 6dd74de | | | 304 | |
| 6dd74de | | | 305 | | Type | Description | |
| 6dd74de | | | 306 | | ------- | ------------- | |
| 6dd74de | | | 307 | | `<\|--` | Inheritance | |
| 6dd74de | | | 308 | | `*--` | Composition | |
| 6dd74de | | | 309 | | `o--` | Aggregation | |
| 6dd74de | | | 310 | | `-->` | Association | |
| 6dd74de | | | 311 | | `--` | Link (Solid) | |
| 6dd74de | | | 312 | | `..>` | Dependency | |
| 6dd74de | | | 313 | | `..\|>` | Realization | |
| 6dd74de | | | 314 | | `..` | Link (Dashed) | |
| 6dd74de | | | 315 | |
| 6dd74de | | | 316 | ```mermaid-example |
| 6dd74de | | | 317 | classDiagram |
| 6dd74de | | | 318 | classA <|-- classB |
| 6dd74de | | | 319 | classC *-- classD |
| 6dd74de | | | 320 | classE o-- classF |
| 6dd74de | | | 321 | classG <-- classH |
| 6dd74de | | | 322 | classI -- classJ |
| 6dd74de | | | 323 | classK <.. classL |
| 6dd74de | | | 324 | classM <|.. classN |
| 6dd74de | | | 325 | classO .. classP |
| 6dd74de | | | 326 | |
| 6dd74de | | | 327 | ``` |
| 6dd74de | | | 328 | |
| 6dd74de | | | 329 | ```mermaid |
| 6dd74de | | | 330 | classDiagram |
| 6dd74de | | | 331 | classA <|-- classB |
| 6dd74de | | | 332 | classC *-- classD |
| 6dd74de | | | 333 | classE o-- classF |
| 6dd74de | | | 334 | classG <-- classH |
| 6dd74de | | | 335 | classI -- classJ |
| 6dd74de | | | 336 | classK <.. classL |
| 6dd74de | | | 337 | classM <|.. classN |
| 6dd74de | | | 338 | classO .. classP |
| 6dd74de | | | 339 | |
| 6dd74de | | | 340 | ``` |
| 6dd74de | | | 341 | |
| 6dd74de | | | 342 | We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well: |
| 6dd74de | | | 343 | |
| 6dd74de | | | 344 | ```mermaid-example |
| 6dd74de | | | 345 | classDiagram |
| 6dd74de | | | 346 | classA --|> classB : Inheritance |
| 6dd74de | | | 347 | classC --* classD : Composition |
| 6dd74de | | | 348 | classE --o classF : Aggregation |
| 6dd74de | | | 349 | classG --> classH : Association |
| 6dd74de | | | 350 | classI -- classJ : Link(Solid) |
| 6dd74de | | | 351 | classK ..> classL : Dependency |
| 6dd74de | | | 352 | classM ..|> classN : Realization |
| 6dd74de | | | 353 | classO .. classP : Link(Dashed) |
| 6dd74de | | | 354 | |
| 6dd74de | | | 355 | ``` |
| 6dd74de | | | 356 | |
| 6dd74de | | | 357 | ```mermaid |
| 6dd74de | | | 358 | classDiagram |
| 6dd74de | | | 359 | classA --|> classB : Inheritance |
| 6dd74de | | | 360 | classC --* classD : Composition |
| 6dd74de | | | 361 | classE --o classF : Aggregation |
| 6dd74de | | | 362 | classG --> classH : Association |
| 6dd74de | | | 363 | classI -- classJ : Link(Solid) |
| 6dd74de | | | 364 | classK ..> classL : Dependency |
| 6dd74de | | | 365 | classM ..|> classN : Realization |
| 6dd74de | | | 366 | classO .. classP : Link(Dashed) |
| 6dd74de | | | 367 | |
| 6dd74de | | | 368 | ``` |
| 6dd74de | | | 369 | |
| 6dd74de | | | 370 | ### Labels on Relations |
| 6dd74de | | | 371 | |
| 6dd74de | | | 372 | It is possible to add label text to a relation: |
| 6dd74de | | | 373 | |
| 6dd74de | | | 374 | ``` |
| 6dd74de | | | 375 | [classA][Arrow][ClassB]:LabelText |
| 6dd74de | | | 376 | ``` |
| 6dd74de | | | 377 | |
| 6dd74de | | | 378 | ```mermaid-example |
| 6dd74de | | | 379 | classDiagram |
| 6dd74de | | | 380 | classA <|-- classB : implements |
| 6dd74de | | | 381 | classC *-- classD : composition |
| 6dd74de | | | 382 | classE o-- classF : aggregation |
| 6dd74de | | | 383 | ``` |
| 6dd74de | | | 384 | |
| 6dd74de | | | 385 | ```mermaid |
| 6dd74de | | | 386 | classDiagram |
| 6dd74de | | | 387 | classA <|-- classB : implements |
| 6dd74de | | | 388 | classC *-- classD : composition |
| 6dd74de | | | 389 | classE o-- classF : aggregation |
| 6dd74de | | | 390 | ``` |
| 6dd74de | | | 391 | |
| 6dd74de | | | 392 | ### Two-way relations |
| 6dd74de | | | 393 | |
| 6dd74de | | | 394 | Relations can logically represent an N:M association: |
| 6dd74de | | | 395 | |
| 6dd74de | | | 396 | ```mermaid-example |
| 6dd74de | | | 397 | classDiagram |
| 6dd74de | | | 398 | Animal <|--|> Zebra |
| 6dd74de | | | 399 | ``` |
| 6dd74de | | | 400 | |
| 6dd74de | | | 401 | ```mermaid |
| 6dd74de | | | 402 | classDiagram |
| 6dd74de | | | 403 | Animal <|--|> Zebra |
| 6dd74de | | | 404 | ``` |
| 6dd74de | | | 405 | |
| 6dd74de | | | 406 | Here is the syntax: |
| 6dd74de | | | 407 | |
| 6dd74de | | | 408 | ``` |
| 6dd74de | | | 409 | [Relation Type][Link][Relation Type] |
| 6dd74de | | | 410 | ``` |
| 6dd74de | | | 411 | |
| 6dd74de | | | 412 | Where `Relation Type` can be one of: |
| 6dd74de | | | 413 | |
| 6dd74de | | | 414 | | Type | Description | |
| 6dd74de | | | 415 | | ----- | ----------- | |
| 6dd74de | | | 416 | | `<\|` | Inheritance | |
| 6dd74de | | | 417 | | `\*` | Composition | |
| 6dd74de | | | 418 | | `o` | Aggregation | |
| 6dd74de | | | 419 | | `>` | Association | |
| 6dd74de | | | 420 | | `<` | Association | |
| 6dd74de | | | 421 | | `\|>` | Realization | |
| 6dd74de | | | 422 | |
| 6dd74de | | | 423 | And `Link` can be one of: |
| 6dd74de | | | 424 | |
| 6dd74de | | | 425 | | Type | Description | |
| 6dd74de | | | 426 | | ---- | ----------- | |
| 6dd74de | | | 427 | | -- | Solid | |
| 6dd74de | | | 428 | | .. | Dashed | |
| 6dd74de | | | 429 | |
| 6dd74de | | | 430 | ### Lollipop Interfaces |
| 6dd74de | | | 431 | |
| 6dd74de | | | 432 | Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax: |
| 6dd74de | | | 433 | |
| 6dd74de | | | 434 | - `bar ()-- foo` |
| 6dd74de | | | 435 | - `foo --() bar` |
| 6dd74de | | | 436 | |
| 6dd74de | | | 437 | The interface (bar) with the lollipop connects to the class (foo). |
| 6dd74de | | | 438 | |
| 6dd74de | | | 439 | Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it. |
| 6dd74de | | | 440 | |
| 6dd74de | | | 441 | ```mermaid-example |
| 6dd74de | | | 442 | classDiagram |
| 6dd74de | | | 443 | bar ()-- foo |
| 6dd74de | | | 444 | ``` |
| 6dd74de | | | 445 | |
| 6dd74de | | | 446 | ```mermaid |
| 6dd74de | | | 447 | classDiagram |
| 6dd74de | | | 448 | bar ()-- foo |
| 6dd74de | | | 449 | ``` |
| 6dd74de | | | 450 | |
| 6dd74de | | | 451 | ```mermaid-example |
| 6dd74de | | | 452 | classDiagram |
| 6dd74de | | | 453 | class Class01 { |
| 6dd74de | | | 454 | int amount |
| 6dd74de | | | 455 | draw() |
| 6dd74de | | | 456 | } |
| 6dd74de | | | 457 | Class01 --() bar |
| 6dd74de | | | 458 | Class02 --() bar |
| 6dd74de | | | 459 | |
| 6dd74de | | | 460 | foo ()-- Class01 |
| 6dd74de | | | 461 | ``` |
| 6dd74de | | | 462 | |
| 6dd74de | | | 463 | ```mermaid |
| 6dd74de | | | 464 | classDiagram |
| 6dd74de | | | 465 | class Class01 { |
| 6dd74de | | | 466 | int amount |
| 6dd74de | | | 467 | draw() |
| 6dd74de | | | 468 | } |
| 6dd74de | | | 469 | Class01 --() bar |
| 6dd74de | | | 470 | Class02 --() bar |
| 6dd74de | | | 471 | |
| 6dd74de | | | 472 | foo ()-- Class01 |
| 6dd74de | | | 473 | ``` |
| 6dd74de | | | 474 | |
| 6dd74de | | | 475 | ## Define Namespace |
| 6dd74de | | | 476 | |
| 6dd74de | | | 477 | A namespace groups classes. |
| 6dd74de | | | 478 | |
| 6dd74de | | | 479 | ```mermaid-example |
| 6dd74de | | | 480 | classDiagram |
| 6dd74de | | | 481 | namespace BaseShapes { |
| 6dd74de | | | 482 | class Triangle |
| 6dd74de | | | 483 | class Rectangle { |
| 6dd74de | | | 484 | double width |
| 6dd74de | | | 485 | double height |
| 6dd74de | | | 486 | } |
| 6dd74de | | | 487 | } |
| 6dd74de | | | 488 | ``` |
| 6dd74de | | | 489 | |
| 6dd74de | | | 490 | ```mermaid |
| 6dd74de | | | 491 | classDiagram |
| 6dd74de | | | 492 | namespace BaseShapes { |
| 6dd74de | | | 493 | class Triangle |
| 6dd74de | | | 494 | class Rectangle { |
| 6dd74de | | | 495 | double width |
| 6dd74de | | | 496 | double height |
| 6dd74de | | | 497 | } |
| 6dd74de | | | 498 | } |
| 6dd74de | | | 499 | ``` |
| 6dd74de | | | 500 | |
| 6dd74de | | | 501 | ## Cardinality / Multiplicity on relations |
| 6dd74de | | | 502 | |
| 6dd74de | | | 503 | Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies. |
| 6dd74de | | | 504 | |
| 6dd74de | | | 505 | Multiplicity notations are placed near the end of an association. |
| 6dd74de | | | 506 | |
| 6dd74de | | | 507 | The different cardinality options are : |
| 6dd74de | | | 508 | |
| 6dd74de | | | 509 | - `1` Only 1 |
| 6dd74de | | | 510 | - `0..1` Zero or One |
| 6dd74de | | | 511 | - `1..*` One or more |
| 6dd74de | | | 512 | - `*` Many |
| 6dd74de | | | 513 | - `n` n (where n>1) |
| 6dd74de | | | 514 | - `0..n` zero to n (where n>1) |
| 6dd74de | | | 515 | - `1..n` one to n (where n>1) |
| 6dd74de | | | 516 | |
| 6dd74de | | | 517 | Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example: |
| 6dd74de | | | 518 | |
| 6dd74de | | | 519 | ``` |
| 6dd74de | | | 520 | [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText |
| 6dd74de | | | 521 | ``` |
| 6dd74de | | | 522 | |
| 6dd74de | | | 523 | ```mermaid-example |
| 6dd74de | | | 524 | classDiagram |
| 6dd74de | | | 525 | Customer "1" --> "*" Ticket |
| 6dd74de | | | 526 | Student "1" --> "1..*" Course |
| 6dd74de | | | 527 | Galaxy --> "many" Star : Contains |
| 6dd74de | | | 528 | ``` |
| 6dd74de | | | 529 | |
| 6dd74de | | | 530 | ```mermaid |
| 6dd74de | | | 531 | classDiagram |
| 6dd74de | | | 532 | Customer "1" --> "*" Ticket |
| 6dd74de | | | 533 | Student "1" --> "1..*" Course |
| 6dd74de | | | 534 | Galaxy --> "many" Star : Contains |
| 6dd74de | | | 535 | ``` |
| 6dd74de | | | 536 | |
| 6dd74de | | | 537 | ## Annotations on classes |
| 6dd74de | | | 538 | |
| 6dd74de | | | 539 | It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include: |
| 6dd74de | | | 540 | |
| 6dd74de | | | 541 | - `<<Interface>>` To represent an Interface class |
| 6dd74de | | | 542 | - `<<Abstract>>` To represent an abstract class |
| 6dd74de | | | 543 | - `<<Service>>` To represent a service class |
| 6dd74de | | | 544 | - `<<Enumeration>>` To represent an enum |
| 6dd74de | | | 545 | |
| 6dd74de | | | 546 | Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same: |
| 6dd74de | | | 547 | |
| 6dd74de | | | 548 | > **Tip:**\ |
| 6dd74de | | | 549 | > In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways: |
| 6dd74de | | | 550 | > |
| 6dd74de | | | 551 | > - **Inline with the class definition** (Recommended for consistency): |
| 6dd74de | | | 552 | > |
| 6dd74de | | | 553 | > ```mermaid-example |
| 6dd74de | | | 554 | > classDiagram |
| 6dd74de | | | 555 | > class Shape <<interface>> |
| 6dd74de | | | 556 | > ``` |
| 6dd74de | | | 557 | > |
| 6dd74de | | | 558 | > ```mermaid |
| 6dd74de | | | 559 | > classDiagram |
| 6dd74de | | | 560 | > class Shape <<interface>> |
| 6dd74de | | | 561 | > ``` |
| 6dd74de | | | 562 | > |
| 6dd74de | | | 563 | > - **Separate line after the class definition**: |
| 6dd74de | | | 564 | > |
| 6dd74de | | | 565 | > ```mermaid-example |
| 6dd74de | | | 566 | > classDiagram |
| 6dd74de | | | 567 | > class Shape |
| 6dd74de | | | 568 | > <<interface>> Shape |
| 6dd74de | | | 569 | > ``` |
| 6dd74de | | | 570 | > |
| 6dd74de | | | 571 | > ```mermaid |
| 6dd74de | | | 572 | > classDiagram |
| 6dd74de | | | 573 | > class Shape |
| 6dd74de | | | 574 | > <<interface>> Shape |
| 6dd74de | | | 575 | > ``` |
| 6dd74de | | | 576 | > |
| 6dd74de | | | 577 | > Both methods are fully supported and produce identical diagrams.\ |
| 6dd74de | | | 578 | > However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams. |
| 6dd74de | | | 579 | |
| 6dd74de | | | 580 | - In a **_separate line_** after a class is defined: |
| 6dd74de | | | 581 | |
| 6dd74de | | | 582 | ```mermaid-example |
| 6dd74de | | | 583 | classDiagram |
| 6dd74de | | | 584 | class Shape |
| 6dd74de | | | 585 | <<interface>> Shape |
| 6dd74de | | | 586 | Shape : noOfVertices |
| 6dd74de | | | 587 | Shape : draw() |
| 6dd74de | | | 588 | ``` |
| 6dd74de | | | 589 | |
| 6dd74de | | | 590 | ```mermaid |
| 6dd74de | | | 591 | classDiagram |
| 6dd74de | | | 592 | class Shape |
| 6dd74de | | | 593 | <<interface>> Shape |
| 6dd74de | | | 594 | Shape : noOfVertices |
| 6dd74de | | | 595 | Shape : draw() |
| 6dd74de | | | 596 | ``` |
| 6dd74de | | | 597 | |
| 6dd74de | | | 598 | - In a **_nested structure_** along with the class definition: |
| 6dd74de | | | 599 | |
| 6dd74de | | | 600 | ```mermaid-example |
| 6dd74de | | | 601 | classDiagram |
| 6dd74de | | | 602 | class Shape{ |
| 6dd74de | | | 603 | <<interface>> |
| 6dd74de | | | 604 | noOfVertices |
| 6dd74de | | | 605 | draw() |
| 6dd74de | | | 606 | } |
| 6dd74de | | | 607 | class Color{ |
| 6dd74de | | | 608 | <<enumeration>> |
| 6dd74de | | | 609 | RED |
| 6dd74de | | | 610 | BLUE |
| 6dd74de | | | 611 | GREEN |
| 6dd74de | | | 612 | WHITE |
| 6dd74de | | | 613 | BLACK |
| 6dd74de | | | 614 | } |
| 6dd74de | | | 615 | |
| 6dd74de | | | 616 | ``` |
| 6dd74de | | | 617 | |
| 6dd74de | | | 618 | ```mermaid |
| 6dd74de | | | 619 | classDiagram |
| 6dd74de | | | 620 | class Shape{ |
| 6dd74de | | | 621 | <<interface>> |
| 6dd74de | | | 622 | noOfVertices |
| 6dd74de | | | 623 | draw() |
| 6dd74de | | | 624 | } |
| 6dd74de | | | 625 | class Color{ |
| 6dd74de | | | 626 | <<enumeration>> |
| 6dd74de | | | 627 | RED |
| 6dd74de | | | 628 | BLUE |
| 6dd74de | | | 629 | GREEN |
| 6dd74de | | | 630 | WHITE |
| 6dd74de | | | 631 | BLACK |
| 6dd74de | | | 632 | } |
| 6dd74de | | | 633 | |
| 6dd74de | | | 634 | ``` |
| 6dd74de | | | 635 | |
| 6dd74de | | | 636 | ## Comments |
| 6dd74de | | | 637 | |
| 6dd74de | | | 638 | Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax. |
| 6dd74de | | | 639 | |
| 6dd74de | | | 640 | ```mermaid-example |
| 6dd74de | | | 641 | classDiagram |
| 6dd74de | | | 642 | %% This whole line is a comment classDiagram class Shape <<interface>> |
| 6dd74de | | | 643 | class Shape{ |
| 6dd74de | | | 644 | <<interface>> |
| 6dd74de | | | 645 | noOfVertices |
| 6dd74de | | | 646 | draw() |
| 6dd74de | | | 647 | } |
| 6dd74de | | | 648 | ``` |
| 6dd74de | | | 649 | |
| 6dd74de | | | 650 | ```mermaid |
| 6dd74de | | | 651 | classDiagram |
| 6dd74de | | | 652 | %% This whole line is a comment classDiagram class Shape <<interface>> |
| 6dd74de | | | 653 | class Shape{ |
| 6dd74de | | | 654 | <<interface>> |
| 6dd74de | | | 655 | noOfVertices |
| 6dd74de | | | 656 | draw() |
| 6dd74de | | | 657 | } |
| 6dd74de | | | 658 | ``` |
| 6dd74de | | | 659 | |
| 6dd74de | | | 660 | ## Setting the direction of the diagram |
| 6dd74de | | | 661 | |
| 6dd74de | | | 662 | With class diagrams you can use the direction statement to set the direction in which the diagram will render: |
| 6dd74de | | | 663 | |
| 6dd74de | | | 664 | ```mermaid-example |
| 6dd74de | | | 665 | classDiagram |
| 6dd74de | | | 666 | direction RL |
| 6dd74de | | | 667 | class Student { |
| 6dd74de | | | 668 | -idCard : IdCard |
| 6dd74de | | | 669 | } |
| 6dd74de | | | 670 | class IdCard{ |
| 6dd74de | | | 671 | -id : int |
| 6dd74de | | | 672 | -name : string |
| 6dd74de | | | 673 | } |
| 6dd74de | | | 674 | class Bike{ |
| 6dd74de | | | 675 | -id : int |
| 6dd74de | | | 676 | -name : string |
| 6dd74de | | | 677 | } |
| 6dd74de | | | 678 | Student "1" --o "1" IdCard : carries |
| 6dd74de | | | 679 | Student "1" --o "1" Bike : rides |
| 6dd74de | | | 680 | ``` |
| 6dd74de | | | 681 | |
| 6dd74de | | | 682 | ```mermaid |
| 6dd74de | | | 683 | classDiagram |
| 6dd74de | | | 684 | direction RL |
| 6dd74de | | | 685 | class Student { |
| 6dd74de | | | 686 | -idCard : IdCard |
| 6dd74de | | | 687 | } |
| 6dd74de | | | 688 | class IdCard{ |
| 6dd74de | | | 689 | -id : int |
| 6dd74de | | | 690 | -name : string |
| 6dd74de | | | 691 | } |
| 6dd74de | | | 692 | class Bike{ |
| 6dd74de | | | 693 | -id : int |
| 6dd74de | | | 694 | -name : string |
| 6dd74de | | | 695 | } |
| 6dd74de | | | 696 | Student "1" --o "1" IdCard : carries |
| 6dd74de | | | 697 | Student "1" --o "1" Bike : rides |
| 6dd74de | | | 698 | ``` |
| 6dd74de | | | 699 | |
| 6dd74de | | | 700 | ## Interaction |
| 6dd74de | | | 701 | |
| 6dd74de | | | 702 | It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. |
| 6dd74de | | | 703 | |
| 6dd74de | | | 704 | You would define these actions on a separate line after all classes have been declared. |
| 6dd74de | | | 705 | |
| 6dd74de | | | 706 | ``` |
| 6dd74de | | | 707 | action className "reference" "tooltip" |
| 6dd74de | | | 708 | click className call callback() "tooltip" |
| 6dd74de | | | 709 | click className href "url" "tooltip" |
| 6dd74de | | | 710 | ``` |
| 6dd74de | | | 711 | |
| 6dd74de | | | 712 | - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called |
| 6dd74de | | | 713 | - _className_ is the id of the node that the action will be associated with |
| 6dd74de | | | 714 | - _reference_ is either the url link, or the function name for callback. |
| 6dd74de | | | 715 | - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) |
| 6dd74de | | | 716 | - note: callback function will be called with the nodeId as parameter. |
| 6dd74de | | | 717 | |
| 6dd74de | | | 718 | ## Notes |
| 6dd74de | | | 719 | |
| 6dd74de | | | 720 | It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`. |
| 6dd74de | | | 721 | |
| 6dd74de | | | 722 | ### Examples |
| 6dd74de | | | 723 | |
| 6dd74de | | | 724 | ```mermaid-example |
| 6dd74de | | | 725 | classDiagram |
| 6dd74de | | | 726 | note "This is a general note" |
| 6dd74de | | | 727 | note for MyClass "This is a note for a class" |
| 6dd74de | | | 728 | class MyClass{ |
| 6dd74de | | | 729 | } |
| 6dd74de | | | 730 | ``` |
| 6dd74de | | | 731 | |
| 6dd74de | | | 732 | ```mermaid |
| 6dd74de | | | 733 | classDiagram |
| 6dd74de | | | 734 | note "This is a general note" |
| 6dd74de | | | 735 | note for MyClass "This is a note for a class" |
| 6dd74de | | | 736 | class MyClass{ |
| 6dd74de | | | 737 | } |
| 6dd74de | | | 738 | ``` |
| 6dd74de | | | 739 | |
| 6dd74de | | | 740 | _URL Link:_ |
| 6dd74de | | | 741 | |
| 6dd74de | | | 742 | ```mermaid-example |
| 6dd74de | | | 743 | classDiagram |
| 6dd74de | | | 744 | class Shape |
| 6dd74de | | | 745 | link Shape "https://www.github.com" "This is a tooltip for a link" |
| 6dd74de | | | 746 | class Shape2 |
| 6dd74de | | | 747 | click Shape2 href "https://www.github.com" "This is a tooltip for a link" |
| 6dd74de | | | 748 | ``` |
| 6dd74de | | | 749 | |
| 6dd74de | | | 750 | ```mermaid |
| 6dd74de | | | 751 | classDiagram |
| 6dd74de | | | 752 | class Shape |
| 6dd74de | | | 753 | link Shape "https://www.github.com" "This is a tooltip for a link" |
| 6dd74de | | | 754 | class Shape2 |
| 6dd74de | | | 755 | click Shape2 href "https://www.github.com" "This is a tooltip for a link" |
| 6dd74de | | | 756 | ``` |
| 6dd74de | | | 757 | |
| 6dd74de | | | 758 | _Callback:_ |
| 6dd74de | | | 759 | |
| 6dd74de | | | 760 | ```mermaid-example |
| 6dd74de | | | 761 | classDiagram |
| 6dd74de | | | 762 | class Shape |
| 6dd74de | | | 763 | callback Shape "callbackFunction" "This is a tooltip for a callback" |
| 6dd74de | | | 764 | class Shape2 |
| 6dd74de | | | 765 | click Shape2 call callbackFunction() "This is a tooltip for a callback" |
| 6dd74de | | | 766 | ``` |
| 6dd74de | | | 767 | |
| 6dd74de | | | 768 | ```mermaid |
| 6dd74de | | | 769 | classDiagram |
| 6dd74de | | | 770 | class Shape |
| 6dd74de | | | 771 | callback Shape "callbackFunction" "This is a tooltip for a callback" |
| 6dd74de | | | 772 | class Shape2 |
| 6dd74de | | | 773 | click Shape2 call callbackFunction() "This is a tooltip for a callback" |
| 6dd74de | | | 774 | ``` |
| 6dd74de | | | 775 | |
| 6dd74de | | | 776 | ```html |
| 6dd74de | | | 777 | <script> |
| 6dd74de | | | 778 | const callbackFunction = function () { |
| 6dd74de | | | 779 | alert('A callback was triggered'); |
| 6dd74de | | | 780 | }; |
| 6dd74de | | | 781 | </script> |
| 6dd74de | | | 782 | ``` |
| 6dd74de | | | 783 | |
| 6dd74de | | | 784 | ```mermaid-example |
| 6dd74de | | | 785 | classDiagram |
| 6dd74de | | | 786 | class Class01 |
| 6dd74de | | | 787 | class Class02 |
| 6dd74de | | | 788 | callback Class01 "callbackFunction" "Callback tooltip" |
| 6dd74de | | | 789 | link Class02 "https://www.github.com" "This is a link" |
| 6dd74de | | | 790 | class Class03 |
| 6dd74de | | | 791 | class Class04 |
| 6dd74de | | | 792 | click Class03 call callbackFunction() "Callback tooltip" |
| 6dd74de | | | 793 | click Class04 href "https://www.github.com" "This is a link" |
| 6dd74de | | | 794 | ``` |
| 6dd74de | | | 795 | |
| 6dd74de | | | 796 | ```mermaid |
| 6dd74de | | | 797 | classDiagram |
| 6dd74de | | | 798 | class Class01 |
| 6dd74de | | | 799 | class Class02 |
| 6dd74de | | | 800 | callback Class01 "callbackFunction" "Callback tooltip" |
| 6dd74de | | | 801 | link Class02 "https://www.github.com" "This is a link" |
| 6dd74de | | | 802 | class Class03 |
| 6dd74de | | | 803 | class Class04 |
| 6dd74de | | | 804 | click Class03 call callbackFunction() "Callback tooltip" |
| 6dd74de | | | 805 | click Class04 href "https://www.github.com" "This is a link" |
| 6dd74de | | | 806 | ``` |
| 6dd74de | | | 807 | |
| 6dd74de | | | 808 | > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. |
| 6dd74de | | | 809 | |
| 6dd74de | | | 810 | Beginner's tip—a full example using interactive links in an HTML page: |
| 6dd74de | | | 811 | |
| 6dd74de | | | 812 | ```html |
| 6dd74de | | | 813 | <body> |
| 6dd74de | | | 814 | <pre class="mermaid"> |
| 6dd74de | | | 815 | classDiagram |
| 6dd74de | | | 816 | Animal <|-- Duck |
| 6dd74de | | | 817 | Animal <|-- Fish |
| 6dd74de | | | 818 | Animal <|-- Zebra |
| 6dd74de | | | 819 | Animal : +int age |
| 6dd74de | | | 820 | Animal : +String gender |
| 6dd74de | | | 821 | Animal: +isMammal() |
| 6dd74de | | | 822 | Animal: +mate() |
| 6dd74de | | | 823 | class Duck{ |
| 6dd74de | | | 824 | +String beakColor |
| 6dd74de | | | 825 | +swim() |
| 6dd74de | | | 826 | +quack() |
| 6dd74de | | | 827 | } |
| 6dd74de | | | 828 | class Fish{ |
| 6dd74de | | | 829 | -int sizeInFeet |
| 6dd74de | | | 830 | -canEat() |
| 6dd74de | | | 831 | } |
| 6dd74de | | | 832 | class Zebra{ |
| 6dd74de | | | 833 | +bool is_wild |
| 6dd74de | | | 834 | +run() |
| 6dd74de | | | 835 | } |
| 6dd74de | | | 836 | |
| 6dd74de | | | 837 | callback Duck "callback" "Tooltip" |
| 6dd74de | | | 838 | link Zebra "https://www.github.com" "This is a link" |
| 6dd74de | | | 839 | </pre> |
| 6dd74de | | | 840 | |
| 6dd74de | | | 841 | <script> |
| 6dd74de | | | 842 | const callback = function () { |
| 6dd74de | | | 843 | alert('A callback was triggered'); |
| 6dd74de | | | 844 | }; |
| 6dd74de | | | 845 | const config = { |
| 6dd74de | | | 846 | startOnLoad: true, |
| 6dd74de | | | 847 | securityLevel: 'loose', |
| 6dd74de | | | 848 | }; |
| 6dd74de | | | 849 | mermaid.initialize(config); |
| 6dd74de | | | 850 | </script> |
| 6dd74de | | | 851 | </body> |
| 6dd74de | | | 852 | ``` |
| 6dd74de | | | 853 | |
| 6dd74de | | | 854 | ## Styling |
| 6dd74de | | | 855 | |
| 6dd74de | | | 856 | ### Styling a node |
| 6dd74de | | | 857 | |
| 6dd74de | | | 858 | It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword. |
| 6dd74de | | | 859 | |
| 6dd74de | | | 860 | Note that notes and namespaces cannot be styled individually but do support themes. |
| 6dd74de | | | 861 | |
| 6dd74de | | | 862 | ```mermaid-example |
| 6dd74de | | | 863 | classDiagram |
| 6dd74de | | | 864 | class Animal |
| 6dd74de | | | 865 | class Mineral |
| 6dd74de | | | 866 | style Animal fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 867 | style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 |
| 6dd74de | | | 868 | ``` |
| 6dd74de | | | 869 | |
| 6dd74de | | | 870 | ```mermaid |
| 6dd74de | | | 871 | classDiagram |
| 6dd74de | | | 872 | class Animal |
| 6dd74de | | | 873 | class Mineral |
| 6dd74de | | | 874 | style Animal fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 875 | style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 |
| 6dd74de | | | 876 | ``` |
| 6dd74de | | | 877 | |
| 6dd74de | | | 878 | #### Classes |
| 6dd74de | | | 879 | |
| 6dd74de | | | 880 | More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that |
| 6dd74de | | | 881 | should have a different look. |
| 6dd74de | | | 882 | |
| 6dd74de | | | 883 | A class definition looks like the example below: |
| 6dd74de | | | 884 | |
| 6dd74de | | | 885 | ``` |
| 6dd74de | | | 886 | classDef className fill:#f9f,stroke:#333,stroke-width:4px; |
| 6dd74de | | | 887 | ``` |
| 6dd74de | | | 888 | |
| 6dd74de | | | 889 | Also, it is possible to define style to multiple classes in one statement: |
| 6dd74de | | | 890 | |
| 6dd74de | | | 891 | ``` |
| 6dd74de | | | 892 | classDef firstClassName,secondClassName font-size:12pt; |
| 6dd74de | | | 893 | ``` |
| 6dd74de | | | 894 | |
| 6dd74de | | | 895 | Attachment of a class to a node is done as per below: |
| 6dd74de | | | 896 | |
| 6dd74de | | | 897 | ``` |
| 6dd74de | | | 898 | cssClass "nodeId1" className; |
| 6dd74de | | | 899 | ``` |
| 6dd74de | | | 900 | |
| 6dd74de | | | 901 | It is also possible to attach a class to a list of nodes in one statement: |
| 6dd74de | | | 902 | |
| 6dd74de | | | 903 | ``` |
| 6dd74de | | | 904 | cssClass "nodeId1,nodeId2" className; |
| 6dd74de | | | 905 | ``` |
| 6dd74de | | | 906 | |
| 6dd74de | | | 907 | A shorter form of adding a class is to attach the classname to the node using the `:::` operator: |
| 6dd74de | | | 908 | |
| 6dd74de | | | 909 | ```mermaid-example |
| 6dd74de | | | 910 | classDiagram |
| 6dd74de | | | 911 | class Animal:::someclass |
| 6dd74de | | | 912 | classDef someclass fill:#f96 |
| 6dd74de | | | 913 | ``` |
| 6dd74de | | | 914 | |
| 6dd74de | | | 915 | ```mermaid |
| 6dd74de | | | 916 | classDiagram |
| 6dd74de | | | 917 | class Animal:::someclass |
| 6dd74de | | | 918 | classDef someclass fill:#f96 |
| 6dd74de | | | 919 | ``` |
| 6dd74de | | | 920 | |
| 6dd74de | | | 921 | Or: |
| 6dd74de | | | 922 | |
| 6dd74de | | | 923 | ```mermaid-example |
| 6dd74de | | | 924 | classDiagram |
| 6dd74de | | | 925 | class Animal:::someclass { |
| 6dd74de | | | 926 | -int sizeInFeet |
| 6dd74de | | | 927 | -canEat() |
| 6dd74de | | | 928 | } |
| 6dd74de | | | 929 | classDef someclass fill:#f96 |
| 6dd74de | | | 930 | ``` |
| 6dd74de | | | 931 | |
| 6dd74de | | | 932 | ```mermaid |
| 6dd74de | | | 933 | classDiagram |
| 6dd74de | | | 934 | class Animal:::someclass { |
| 6dd74de | | | 935 | -int sizeInFeet |
| 6dd74de | | | 936 | -canEat() |
| 6dd74de | | | 937 | } |
| 6dd74de | | | 938 | classDef someclass fill:#f96 |
| 6dd74de | | | 939 | ``` |
| 6dd74de | | | 940 | |
| 6dd74de | | | 941 | ### Default class |
| 6dd74de | | | 942 | |
| 6dd74de | | | 943 | If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling. |
| 6dd74de | | | 944 | |
| 6dd74de | | | 945 | ``` |
| 6dd74de | | | 946 | classDef default fill:#f9f,stroke:#333,stroke-width:4px; |
| 6dd74de | | | 947 | ``` |
| 6dd74de | | | 948 | |
| 6dd74de | | | 949 | ```mermaid-example |
| 6dd74de | | | 950 | classDiagram |
| 6dd74de | | | 951 | class Animal:::pink |
| 6dd74de | | | 952 | class Mineral |
| 6dd74de | | | 953 | |
| 6dd74de | | | 954 | classDef default fill:#f96,color:red |
| 6dd74de | | | 955 | classDef pink color:#f9f |
| 6dd74de | | | 956 | ``` |
| 6dd74de | | | 957 | |
| 6dd74de | | | 958 | ```mermaid |
| 6dd74de | | | 959 | classDiagram |
| 6dd74de | | | 960 | class Animal:::pink |
| 6dd74de | | | 961 | class Mineral |
| 6dd74de | | | 962 | |
| 6dd74de | | | 963 | classDef default fill:#f96,color:red |
| 6dd74de | | | 964 | classDef pink color:#f9f |
| 6dd74de | | | 965 | ``` |
| 6dd74de | | | 966 | |
| 6dd74de | | | 967 | ### CSS Classes |
| 6dd74de | | | 968 | |
| 6dd74de | | | 969 | It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example |
| 6dd74de | | | 970 | below: |
| 6dd74de | | | 971 | |
| 6dd74de | | | 972 | **Example style** |
| 6dd74de | | | 973 | |
| 6dd74de | | | 974 | ```html |
| 6dd74de | | | 975 | <style> |
| 6dd74de | | | 976 | .styleClass > * > g { |
| 6dd74de | | | 977 | fill: #ff0000; |
| 6dd74de | | | 978 | stroke: #ffff00; |
| 6dd74de | | | 979 | stroke-width: 4px; |
| 6dd74de | | | 980 | } |
| 6dd74de | | | 981 | </style> |
| 6dd74de | | | 982 | ``` |
| 6dd74de | | | 983 | |
| 6dd74de | | | 984 | **Example definition** |
| 6dd74de | | | 985 | |
| 6dd74de | | | 986 | ```mermaid-example |
| 6dd74de | | | 987 | classDiagram |
| 6dd74de | | | 988 | class Animal:::styleClass |
| 6dd74de | | | 989 | ``` |
| 6dd74de | | | 990 | |
| 6dd74de | | | 991 | ```mermaid |
| 6dd74de | | | 992 | classDiagram |
| 6dd74de | | | 993 | class Animal:::styleClass |
| 6dd74de | | | 994 | ``` |
| 6dd74de | | | 995 | |
| 6dd74de | | | 996 | > cssClasses cannot be added using this shorthand method at the same time as a relation statement. |
| 6dd74de | | | 997 | |
| 6dd74de | | | 998 | ## Configuration |
| 6dd74de | | | 999 | |
| 6dd74de | | | 1000 | ### Members Box |
| 6dd74de | | | 1001 | |
| 6dd74de | | | 1002 | It is possible to hide the empty members box of a class node. |
| 6dd74de | | | 1003 | |
| 6dd74de | | | 1004 | This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html) |
| 6dd74de | | | 1005 | |
| 6dd74de | | | 1006 | ```mermaid-example |
| 6dd74de | | | 1007 | --- |
| 6dd74de | | | 1008 | config: |
| 6dd74de | | | 1009 | class: |
| 6dd74de | | | 1010 | hideEmptyMembersBox: true |
| 6dd74de | | | 1011 | --- |
| 6dd74de | | | 1012 | classDiagram |
| 6dd74de | | | 1013 | class Duck |
| 6dd74de | | | 1014 | ``` |
| 6dd74de | | | 1015 | |
| 6dd74de | | | 1016 | ```mermaid |
| 6dd74de | | | 1017 | --- |
| 6dd74de | | | 1018 | config: |
| 6dd74de | | | 1019 | class: |
| 6dd74de | | | 1020 | hideEmptyMembersBox: true |
| 6dd74de | | | 1021 | --- |
| 6dd74de | | | 1022 | classDiagram |
| 6dd74de | | | 1023 | class Duck |
| 6dd74de | | | 1024 | ``` |