Mermaid Class Diagram
This is a test page to show which features of Mermaid work using the Mermaid plugin.
Example
classDiagram
Animal
Syntax
Class
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount)
Define a class
classDiagram
class Animal
Vehicle
Defining Members of a class
-
Associate a member of a class using : (colon) followed by member name, useful to define one member at a time. For example:
class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawal(amount) -
Associate members of a class using {} brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
class BankAccount{ +String owner +BigDecimal balance +deposit(amount) +withdrawl(amount) }
Return Type
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
Generic Types
classDiagram
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
...
Defining Relationship
classDiagram
classA
We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well :
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
Labels on Relations
classDiagram
classA
Cardinality / Multiplicity on relations
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
Annotations on classes
- In a separate line after a class is defined. For example:
classDiagram
class Shape
> Shape
- In a nested structure along with class definition. For example:
classDiagram
class Shape{
>
noOfVertices
draw()
}
class Color{
>
RED
BLUE
GREEN
WHITE
BLACK
}
Comments
classDiagram
%% This whole line is a comment classDiagram class Shape >
class Shape{
>
noOfVertices
draw()
}
Interaction
Examples
URL Link:
classDiagram
class Shape
link Shape "http://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "http://www.github.com" "This is a tooltip for a link"
Callback:
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"