docs: Update classdiagram docs

This commit is contained in:
Sidharth Vinod
2023-02-14 00:56:40 +05:30
parent ef4fbd8bb3
commit bcfefefbd4
2 changed files with 68 additions and 14 deletions

View File

@@ -130,6 +130,40 @@ classDiagram
Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
### Class labels
In case you need to provide a label for a class, you can use the following syntax:
```mermaid-example
classDiagram
class Animal["Animal with a label"]
class Car["Car with *! symbols"]
Animal --> Car
```
```mermaid
classDiagram
class Animal["Animal with a label"]
class Car["Car with *! symbols"]
Animal --> Car
```
You can also use backticks to escape special characters in the label:
```mermaid-example
classDiagram
class `Animal Class!`
class `Car Class`
`Animal Class!` --> `Car Class`
```
```mermaid
classDiagram
class `Animal Class!`
class `Car Class`
`Animal Class!` --> `Car Class`
```
## Defining Members of a class
UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.
@@ -692,11 +726,11 @@ Beginner's tip—a full example using interactive links in an HTML page:
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition:
It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
```html
<style>
.cssClass > rect {
.styleClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
@@ -706,29 +740,29 @@ It is possible to apply specific styles such as a thicker border or a different
Then attaching that class to a specific node:
cssClass "nodeId1" cssClass;
cssClass "nodeId1" styleClass;
It is also possible to attach a class to a list of nodes in one statement:
cssClass "nodeId1,nodeId2" cssClass;
cssClass "nodeId1,nodeId2" styleClass;
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
```mermaid-example
classDiagram
class Animal:::cssClass
class Animal:::styleClass
```
```mermaid
classDiagram
class Animal:::cssClass
class Animal:::styleClass
```
Or:
```mermaid-example
classDiagram
class Animal:::cssClass {
class Animal:::styleClass {
-int sizeInFeet
-canEat()
}
@@ -736,7 +770,7 @@ classDiagram
```mermaid
classDiagram
class Animal:::cssClass {
class Animal:::styleClass {
-int sizeInFeet
-canEat()
}