Class

Class diagrams

「ソフトウェアエンジニアリングでは、統一モデリング言語（UML）のクラス図は、システムのクラス、その属性、操作（またはメソッド）、およびそれらの間の関係を示すことによってシステムの構造を記述する一種の静的構造図です。 オブジェクト。」 ウィキペディア

クラス図は、オブジェクト指向モデリングの主要な構成要素です。 これは、アプリケーションの構造の一般的な概念モデリング、およびモデルをプログラミングコードに変換する詳細なモデリングに使用されます。 クラス図は、データモデリングにも使用できます。 クラス図のクラスは、主要な要素、アプリケーションでの相互作用、およびプログラムされるクラスの両方を表します。

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

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

Syntax

UMLは、属性やメソッドなどのクラスメンバー、およびそれらに関する追加情報を表すメカニズムを提供します。 図のクラスの1つのインスタンスには、次の3つのコンパートメントが含まれています。

• 上部のコンパートメントには、クラスの名前が含まれています。 太字で中央に印刷され、最初の文字は大文字になります。 また、クラスの性質を説明するオプションの注釈テキストが含まれる場合もあります。
• 中央のコンパートメントには、クラスの属性が含まれています。 それらは左揃えで、最初の文字は小文字です。 下部のコンパートメントには、クラスが実行できる操作が含まれています。 また、左揃えで、最初の文字は小文字です。

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

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

3. Define a class

クラスを定義するには、次の2つの方法があります。

• クラスAnimalのようなキーワードクラスを使用してクラスを明示的に定義します。 これはAnimalクラスを定義します
• それらの間の関係を介して2つのクラスを定義します。Vehicle<| -Car これは、2つのクラスVehicleとCarをそれらの関係とともに定義します。

classDiagram
    class Animal
    Vehicle <|-- Car

classDiagram
    class Animal
    Vehicle <|-- Car

命名規則：クラス名は、英数字（Unicodeを使用可能）とアンダースコア文字で構成する必要があります。

4-1. Defining Members of a class

UMLは、属性やメソッドなどのクラスメンバー、およびそれらに関する追加情報を表すメカニズムを提供します。

Mermaidは、括弧（）が存在するかどうかに基づいて、属性と関数/メソッドを区別します。 （）が付いているものは関数/メソッドとして扱われ、その他は属性として扱われます。

クラスのメンバーを定義する方法は2つあり、メンバーの定義に使用される構文に関係なく、出力は同じです。 2つの異なる方法は次のとおりです。

• :(コロン）の後にメンバー名を使用してクラスのメンバーを関連付けます。これは、一度に1つのメンバーを定義するのに役立ちます。

example

classDiagram

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

classDiagram

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

4-2. Defining Members of a class

Defining Members of a class
* {}角かっこを使用してクラスのメンバーを関連付けます。ここで、メンバーは中かっこでグループ化されます。 一度に複数のメンバーを定義するのに適しています。

classDiagram

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

classDiagram

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

4-3. Defining Members of a class Return Type

オプションで、メソッド定義と戻りタイプの例の返されるデータ型（注：最後の間にスペースが必要です）でメソッド/関数定義を終了できます。

classDiagram

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

classDiagram

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

4-4. Defining Members of a class Generic Types

メンバーは、フィールド、パラメーター、および戻り型のList などのジェネリック型を使用して、型を〜（チルダ）で囲むことによって定義できます。 注：ネストされた型宣言（List >など）は現在サポートされていません

これは、次のいずれかのクラス定義メソッドの一部として実行できます。

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~

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~

4-5. Defining Members of a class Generic Return Type

• Return Type オプションで、返されるデータ型でメソッド/関数定義を終了できます

• Visibility クラスメンバー（つまり、任意の属性またはメソッド）の可視性を指定するために、これらの表記をメンバー名の前に配置できますが、これはオプションです。

• + Public

• - Private
• # Protected
• ~ Package/Internal

メソッドの最後、つまり（）の後に次の表記を追加することで、メソッド定義に追加の分類子を含めることもできることに注意してください。

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

5-1. Defining Relationship

Relationshipとは、クラス図とオブジェクト図に見られる特定のタイプの論理接続をカバーする一般的な用語です。

[classA][Arrow][ClassB]:LabelText

現在サポートされているUMLのクラスに対して定義されているさまざまなタイプの関係があります。

Type	Description
<|--	Inheritance
*--	Composition
o--	Aggregation
-->	Association
--	Link (Solid)
..>	Dependency
..|>	Realization
..	Link (Dashed)

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

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

5-2. Defining Relationship

ラベルを使用して、2つのクラス間の関係の性質を説明できます。 また、矢印は反対方向にも使用できます。

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization

6. Labels on Relations

リレーションにラベルテキストを追加することができます。

• syntax [classA][Arrow][ClassB]:LabelText

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

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

7. Cardinality Multiplicity on relations

クラス図の多重度またはカーディナリティは、あるクラスのインスタンスが他のクラスの1つのインスタンスにリンクされている数を示します。 たとえば、1つの会社に1人以上の従業員がいますが、各従業員は1つの会社でしか働いていません。

多重度表記は、関連付けの終わり近くに配置されます。

さまざまなカーディナリティオプションは次のとおりです。

• 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}

カーディナリティは、指定された矢印の前（オプション）と後（オプション）を引用符で囲むことにより、簡単に定義できます。

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

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

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

8. Annotations on classes

Annotations on classes クラスのメタデータのような特定のマーカーテキストでクラスに注釈を付けて、その性質を明確に示すことができます。 一般的な注釈の例は次のとおりです。

• \<\> To represent an Interface class
• \<\> To represent an abstract class
• \<\> To represent a service class
• \<\> To represent an enum

注釈は、開始<< and closing >>内で定義されます。 クラスに注釈を追加する方法は2つあり、使用される構文に関係なく、出力は同じになります。 2つの方法は次のとおりです。

1. クラスが定義された後の別の行。

classDiagram
class Shape
<<interface>> Shape

code

classDiagram
class Shape
<<interface>> Shape

2.クラスの注釈

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

code

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

9. Interaction

クリックイベントをノードにバインドすることができます。クリックは、javascriptコールバック、または新しいブラウザタブで開かれるリンクのいずれかにつながる可能性があります。 注：この機能は、securityLevel = 'strict'を使用すると無効になり、securityLevel = 'loose'を使用すると有効になります。

すべてのクラスが宣言された後、これらのアクションを別の行で定義します。

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

• アクションは、呼び出したいインタラクションのタイプに応じて、リンクまたはコールバックのいずれかです。
• -classNameは、アクションが関連付けられるノードのIDです。
• 参照は、URLリンク、またはコールバックの関数名のいずれかです。
• （オプション）ツールチップは、要素にカーソルを合わせたときに表示される文字列です（注：ツールチップのスタイルは、クラス.jellyTooltipによって設定されます）。
• 注：コールバック関数は、nodeIdをパラメーターとして使用して呼び出されます。

example

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"


<script>
    var callbackFunction = function(){
        alert('A callback was triggered');
    }
<script>

10. Styling

太い境界線や異なる背景色などの特定のスタイルを個々のノードに適用することができます。 これは、以下の例のように、グラフ定義から適用できるcssスタイルのクラスを事前定義することによって行われます。

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

次に、以下のように、そのクラスを特定のノードにアタッチします。

    cssClass "nodeId1" cssClass;

    cssClass "nodeId1,nodeId2" cssClass;

1つのステートメントでノードのリストにクラスをアタッチすることもできます。

classDiagram
    class Animal:::cssClass

Or:

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

cssClassesは、リレーションステートメントと同時にこの省略形メソッドを使用して追加することはできません。
クラス図の既存のマークアップには制限があるため、現在、図自体の中でcssクラスを定義することはできません。

11. Default Styles

クラス図の主なスタイル設定は、事前設定された数のcssクラスを使用して行われます。 レンダリング中に、これらのクラスはsrc / themes /class.scssにあるファイルから抽出されます。 ここで使用されるクラスについて、以下で説明します。

Class	Description
g.classGroup text	一般的なクラステキストのスタイル
classGroup .title	一般的なクラスタイトルのスタイル
g.classGroup rect	クラス図の長方形のスタイル
g.classGroup line	クラス図線のスタイル
.classLabel .box	クラスラベルボックスのスタイル
.classLabel .label	クラスラベルテキストのスタイル
composition	合成矢印の頭と矢印の線のスタイル
aggregation	集約矢印の頭と矢印の線のスタイル（破線または実線）
dependency	依存関係の矢印の頭と矢印の線のスタイル

12. Default Sample stylesheet

body {
    background: white;
}

g.classGroup text {
    fill: $nodeBorder;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
    font-family: var(--mermaid-font-family);
    font-size: 10px;

    .title {
        font-weight: bolder;
    }
}

g.classGroup rect {
    fill: $nodeBkg;
    stroke: $nodeBorder;
}

g.classGroup line {
    stroke: $nodeBorder;
    stroke-width: 1;
}

.classLabel .box {
    stroke: none;
    stroke-width: 0;
    fill: $nodeBkg;
    opacity: 0.5;
}

.classLabel .label {
    fill: $nodeBorder;
    font-size: 10px;
}

.relation {
    stroke: $nodeBorder;
    stroke-width: 1;
    fill: none;
}

@mixin composition {
    fill: $nodeBorder;
    stroke: $nodeBorder;
    stroke-width: 1;
}

#compositionStart {
    @include composition;
}

#compositionEnd {
    @include composition;
}

@mixin aggregation {
    fill: $nodeBkg;
    stroke: $nodeBorder;
    stroke-width: 1;
}

#aggregationStart {
    @include aggregation;
}

#aggregationEnd {
    @include aggregation;
}

#dependencyStart {
    @include composition;
}

#dependencyEnd {
    @include composition;
}

#extensionStart {
    @include composition;
}

#extensionEnd {
    @include composition;
}