Inserting a classdiagram into markdown

Refer to the website ：https://mermaid-js.github.io/mermaid/#/classDiagram

Class diagram

“ In software engineering , Unified modeling language （Unified Modeling Language：UML） The class diagram in is a static structure diagram , By showing the classes of the system , Its properties , operation （ Or method ） And the relationship between objects to describe the structure of the system .

Class diagram is the main building block of object-oriented modeling . It is used for general conceptual modeling of application structure , And the detailed modeling of transforming the model into programming code . Class diagrams can also be used for data modeling . The classes in the class diagram represent the main elements 、 The interaction in the application and the classes to be programmed .

mermaid Class diagrams can be rendered .

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()
    }

grammar

class

UML Provides representation class members （ Such as properties and methods ） The mechanism of , And other information about them . A single instance of the class in the figure contains three columns ：

• The top box contains the name of the class . It prints in bold and centered , The first letter is capitalized . It may also contain optional comment text that describes the nature of the class .
• The middle box contains the attributes of the class . They are left aligned , The first letter is lowercase .
• The bottom box contains the operations that the class can perform . They are also left aligned , The first letter is lowercase .

classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawl(amount)

Defining classes

There are two ways to define classes ：

• Use keywords class（ Such as class Animal ） Explicitly define class . This defines animals
• adopt The relationship between them is defined Two classes Vehicle <|-- Car. This defines two classes of vehicles and cars and their relationships .

classDiagram
    class Animal
    Vehicle <|-- Car

Naming conventions ： The class name should consist of alphanumeric and underscore characters .

Define the members of a class

UML Provides representation class members （ Such as properties and methods ） The mechanism of , And other information about them .

mermaid According to whether there is Brackets () To distinguish between properties and functions / Method . those () Is treated as a function / Method , Others are considered attributes .

There are two ways to define the members of a class , No matter what syntax is used to define members , The output will remain the same . The two different ways are ：

• Use **：**（ The colon ） Associate the members of the class with the member name , This is useful for defining members one at a time . for example ：

classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)

• Use {} Parentheses are associated with associate members of a class , Where members are grouped in braces . It is applicable to defining multiple members at one time . for example ：

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawl(amount)
}

Return type

（ Optional ） You can do this by / The end of the function definition indicates the data type to be returned （ Be careful ： The end of the method ） There must be a space between and return type )：

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount) bool
    +withdrawl(amount) int
}

The generic type

You can use generic types to define members , for example , By enclosing the type in （ The waves, ） To define fields 、 Parameters and return types . Be careful ： Currently not supported nesting Type declaration （ Such as List<int>``~``List<List<int>> ）

This can be done as part of any class definition method ：

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~

Return type

（ Optional ） You can put the returned data type in the method / After the function definition .

visibility

To specify class members （ That is, any property or method ） The visibility of , You can put these representations before the member name , But it's optional ：

• + Public
• - Private
• # Protected
• ~ Package/Internal

Be careful , You can also add the following representation at the end of the method Law （ namely ： stay ：() after

• * Abstract e.g.: someAbstractMethod()*
• $ Static e.g.: someStaticMethod()$

notes You can also add the following notation to the end of the field name , Include other... In the field definition classifier ：

• $ Static e.g.: String someField$

Defining relations

Relationship is a general term , Covers specific types of logical connections found on class and object diagrams .

[classA][Arrow][ClassB]

The current support is UML Classes under define different types of relationships ：

type	describe
<|--	Inherit Inheritance
*--	form Composition
o--	Aggregate Aggregation
-->	relation Association
--	link （ Solid ）Link (Solid)
..>	rely on Dependency
..|>	Realization Realization
..	link （ Dotted line ）Link (Dashed)

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

We can use tags to describe the nature of the relationship between two classes . Besides , Arrows can also be used in the opposite direction ：

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 relationships

You can add label text to the relationship ：

[classA][Arrow][ClassB]:LabelText

classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation

Two way relationship

Relationships can be made in many ways ：

classDiagram
    Animal <|--|> Zebra

The grammar is as follows ：

[Relation Type][Link][Relation Type]

among Relation Type It can be one of the following ：

type	describe
<|	Inherit Inheritance
*	form Composition
o	Aggregate Aggregation
>	relation Association
<	relation Association
|>	Realization Realization

also Link It can be one of the following ：

type	describe
--	Solid line Solid
..	Dotted line Dashed

Relationship uniqueness / multiplicity

Be careful ： There will be cardinality Uniqueness , Maybe this translation is wrong

Multiplicity or uniqueness in a class diagram indicates the number of instances of a class linked to an instance of another class . for example , A company will have one or more employees , But every employee works for only one company .

The multiplicity representation is placed near the end of the Association .

The different cardinality options are ：

• 1 Only 1
• 0..1 Zero or One
• 1..* One or more
• * Many
• n n {where n>1}
• 0..n zero to n {where n>1}
• 1..n one to n {where n>1}

Uniqueness can be achieved by... Before the arrow is given （ Optional ） And after （ Optional ） The quotation of " Place cardinality text inside to easily define .

[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText

classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

Class （annotation）

Classes can be annotated with specific markup text , This text is similar to the metadata of the class , So as to clearly show its nature . Some common examples of annotations might be ：

• <<Interface>> Represents an interface class
• <<abstract>> Represents an abstract class
• <<Service>> Represents a service class
• <<enumeration>> Represents enumeration

Comments at the beginning << And the end >> In the definition of . There are two ways to add comments to a class , And regardless of the syntax used , The output will be the same . The two ways are ：

• After defining the class A separate In line . for example ：

classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()

• stay Nested structure And class definitions . for example ：

classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

notes

You can enter comments in the class diagram , The parser will ignore these comments . The comment needs to be on its own line , And it has to be %%（ Double percentage symbol ） start . Any text from the beginning of the comment to the next line break will be treated as a comment , Include any class diagram Syntax

classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
    <<interface>>
    noOfVertices
    draw()
}

Set the orientation of the logical footprint

With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example.

For class diagrams , You can use the direction statement to set the rendering direction of the graph , Just like in this example .

classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

Interaction

You can bind click events to nodes , Click to cause javascript Callback or link that will open in a new browser tab . Be careful ： Use securityLevel='strict' Disable this feature when , Use securityLevel='loose' Enable this feature when .

After declaring all classes , You can define these operations on a separate line .

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"

• action by link or callback , It depends on the type of interaction to invoke
• className Is the operation of the node to which it will be associated ID
• quote yes url The function name of the link or callback .
• ( Optional ） A tooltip is a string to display when you hover over an element （ Be careful ： The style of the tooltip is determined by the class .mermaidTooltip. Set up .
• Be careful ： The callback function will use nodeId Called as an argument .

Example

Website links ：

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 ：

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"
<script>
    var callbackFunction = function () {
      alert('A callback was triggered');
    };
</script>

success ： Tooltip functions and links to URL Feature from version 0.5.2 Start using .

Tips for beginners , stay html A complete example of using interactive links in context ：

<body>
  <div class="mermaid">
    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"
  </div>

  <script> var callback = function () {
       alert('A callback was triggered'); }; var config = {
       startOnLoad: true, securityLevel: 'loose' }; mermaid.initialize(config); </script>
</body>

style

Set node style

Specific styles can be （ For example, a thicker border or a different background color ） Apply to each node . This is done by predefined css Style , These classes can be applied from the graphic definition , As the following example shows ：

<style> .cssClass > rect{
       fill:#FF0000; stroke:#FFFF00; stroke-width:4px; } </style>

Then attach the class to a specific node , As shown below ：

    cssClass "nodeId1" cssClass;

You can also attach classes to the node list in a statement ：

    cssClass "nodeId1,nodeId2" cssClass;

The shorter form of adding a class is to use the following operator ::: Attach the class name to the node ：

classDiagram
    class Animal:::cssClass

art

classDiagram
    class Animal:::cssClass {
        -int sizeInFeet
        -canEat()
    }

cssClasses This shorthand method cannot be used at the same time to add... As a relational statement .

Due to the limitations of the existing tags of the class diagram , Currently, it is not possible to define... In the class diagram itself css class .* Soon to launch ！*