"line1\nline2"`.
### Examples
```mermaid-example
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
```
```mermaid
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
```
_URL Link:_
```mermaid-example
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
```
```mermaid
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
```
_Callback:_
```mermaid-example
classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"
```
```mermaid
classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"
```
```html
```
```mermaid-example
classDiagram
class Class01
class Class02
callback Class01 "callbackFunction" "Callback tooltip"
link Class02 "https://www.github.com" "This is a link"
class Class03
class Class04
click Class03 call callbackFunction() "Callback tooltip"
click Class04 href "https://www.github.com" "This is a link"
```
```mermaid
classDiagram
class Class01
class Class02
callback Class01 "callbackFunction" "Callback tooltip"
link Class02 "https://www.github.com" "This is a link"
class Class03
class Class04
click Class03 call callbackFunction() "Callback tooltip"
click Class04 href "https://www.github.com" "This is a link"
```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
Beginner's tip—a full example using interactive links in an HTML page:
```html
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
callback Duck "callback" "Tooltip"
link Zebra "https://www.github.com" "This is a link"
```
## Styling
### Styling a node
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.
Note that notes and namespaces cannot be styled individually but do support themes.
```mermaid-example
classDiagram
class Animal
class Mineral
style Animal fill:#f9f,stroke:#333,stroke-width:4px
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
classDiagram
class Animal
class Mineral
style Animal fill:#f9f,stroke:#333,stroke-width:4px
style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
#### Classes
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
should have a different look.
A class definition looks like the example below:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
```
Also, it is possible to define style to multiple classes in one statement:
```
classDef firstClassName,secondClassName font-size:12pt;
```
Attachment of a class to a node is done as per below:
```
cssClass "nodeId1" className;
```
It is also possible to attach a class to a list of nodes in one statement:
```
cssClass "nodeId1,nodeId2" className;
```
A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
```mermaid-example
classDiagram
class Animal:::someclass
classDef someclass fill:#f96
```
```mermaid
classDiagram
class Animal:::someclass
classDef someclass fill:#f96
```
Or:
```mermaid-example
classDiagram
class Animal:::someclass {
-int sizeInFeet
-canEat()
}
classDef someclass fill:#f96
```
```mermaid
classDiagram
class Animal:::someclass {
-int sizeInFeet
-canEat()
}
classDef someclass fill:#f96
```
### Default class
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.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
```mermaid-example
classDiagram
class Animal:::pink
class Mineral
classDef default fill:#f96,color:red
classDef pink color:#f9f
```
```mermaid
classDiagram
class Animal:::pink
class Mineral
classDef default fill:#f96,color:red
classDef pink color:#f9f
```
### CSS Classes
It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
below:
**Example style**
```html
```
**Example definition**
```mermaid-example
classDiagram
class Animal:::styleClass
```
```mermaid
classDiagram
class Animal:::styleClass
```
> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
## Configuration
### Members Box
It is possible to hide the empty members box of a class node.
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)
```mermaid-example
---
config:
class:
hideEmptyMembersBox: true
---
classDiagram
class Duck
```
```mermaid
---
config:
class:
hideEmptyMembersBox: true
---
classDiagram
class Duck
```