diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md index db612fb4f..69144ef39 100644 --- a/docs/syntax/classDiagram.md +++ b/docs/syntax/classDiagram.md @@ -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