クラス図

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

-Wikipedia

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

Mermaidはクラス図をレンダリングできます。

構文

クラス

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

• 一番上のコンパートメントには、クラスの名前が含まれています。太字で中央揃えで表示され、最初の文字は大文字です。クラスの性質を説明するオプションの注釈テキストを含めることもできます。
• 真ん中のコンパートメントには、クラスの属性が含まれています。左寄せで、最初の文字は小文字です。
• 一番下のコンパートメントには、クラスが実行できる操作が含まれています。これも左寄せで、最初の文字は小文字です。

クラスの定義

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

• class Animalのように、キーワード**class**を明示的に使用して、Animalクラスを定義します。
• **関係**を使用して、2つのクラスとその関係を同時に定義します。たとえば、Vehicle <|-- Car。

命名規則：クラス名は、英数字（Unicodeを含む）、アンダースコア、およびダッシュ（-）のみで構成する必要があります。

クラスラベル

クラスのラベルを指定する必要がある場合は、次の構文を使用します。

バッククォートを使用して、ラベル内の特殊文字をエスケープすることもできます。

クラスメンバの定義

UMLは、属性やメソッドなどのクラスメンバとその追加情報を表現するメカニズムを提供します。

Mermaidは、**括弧**()があるかどうかによって、属性と関数/メソッドを区別します。()のあるものは関数/メソッドとして処理され、それ以外のものは属性として処理されます。

クラスのメンバを定義するには2つの方法があり、どちらの構文を使用してメンバを定義しても、出力は同じになります。2つの異なる方法は次のとおりです。

• **:**（コロン）を使用してクラスメンバを関連付け、メンバ名を続けます。一度に1つのメンバを定義するのに役立ちます。例：

• **{}** 括弧を使用してクラスメンバを関連付けます。メンバは中括弧でグループ化されます。複数のメンバを一度に定義するのに適しています。例：

戻り値の型

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

ジェネリック型

ジェネリックは、クラス定義の一部として、およびクラスメンバ/戻り値の型として表すことができます。アイテムをジェネリックとして示すには、その型を~（**チルダ**）で囲みます。List<List<int>>などの**ネストされた**型宣言はサポートされていますが、現在、コンマを含むジェネリック（List<List<K, V>>など）はサポートされていません。

注記 ジェネリックがクラス定義内で使用されている場合、ジェネリック型はクラス名の一部とは見なされません。つまり、クラス名を参照する必要がある構文では、定義の型部分を削除する必要があります。これは、Mermaidが現在、同じ名前だがジェネリック型が異なる2つのクラスをサポートしていないことも意味します。

可視性

クラスの一部である属性またはメソッド/関数の可視性（またはカプセル化）を記述するには、そのメンバ名の前にオプションの表記を置くことができます。

• + パブリック
• - プライベート
• # プロテクテッド
• ~ パッケージ/内部

注記 メソッド定義に追加の分類子を含めることもできます。メソッドの終わり（つまり、()の後または戻り値の型の後）に次の表記を追加します。

• * 抽象 例：someAbstractMethod()* または someAbstractMethod() int*
• $ 静的 例：someStaticMethod()$ または someStaticMethod() String$

注記 フィールド定義に追加の分類子を含めることもできます。一番最後に次の表記を追加します。

• $ 静的 例：String someField$

関係の定義

関係とは、クラス図とオブジェクト図に見られる特定の種類の論理的接続を網羅する一般的な用語です。

[classA][Arrow][ClassB]

UMLでクラスに定義されている8種類の関係が現在サポートされています。

種類	説明
<|--	継承
*--	合成
o--	集約
-->	関連付け
--	リンク（実線）
..>	依存関係
..|>	実現関係
..	リンク（破線）

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

関係のラベル

関係にラベルテキストを追加できます。

[classA][Arrow][ClassB]:LabelText

双方向関係

関係は、論理的にN：M関連付けを表すことができます。

構文は次のとおりです。

[Relation Type][Link][Relation Type]

ここで、関係の種類は次のいずれかになります。

種類	説明
<|	継承
\*	合成
o	集約
>	関連付け
<	関連付け
|>	実現関係

そして、リンクは次のいずれかになります。

種類	説明
--	実線
..	破線

ロリポップインターフェース

クラスには、クラスにロリポップインターフェースを定義する特別な関係の種類を与えることもできます。ロリポップインターフェースは、次の構文を使用して定義されます。

• bar ()-- foo
• foo --() bar

ロリポップ付きのインターフェース（bar）は、クラス（foo）に接続されます。

注：定義された各インターフェースは一意であり、クラス間で共有したり、複数のエッジを接続したりすることは意図されていません。

名前空間の定義

名前空間はクラスをグループ化します。

関係のカーディナリティ/多重度

クラス図の多重度またはカーディナリティは、あるクラスのインスタンスが別のクラスのインスタンスにリンクできるインスタンスの数を示します。たとえば、各会社には1人以上の従業員（0人ではない）がおり、各従業員は現在、0社または1社の会社で働いています。

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

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

• 1 1つのみ
• 0..1 0個または1個
• 1..* 1個以上
• * 複数
• n n（n>1の場合）
• 0..n 0からn（n>1の場合）
• 1..n 1からn（n>1の場合）

カーディナリティは、特定の矢印の前または後にテキストオプションを"で囲んで簡単に定義できます。例：

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

クラスへの注釈

クラスにマーカーを付加して、クラスに関する追加のメタデータを提供できます。これにより、クラスの性質をより明確に示すことができます。一般的な注釈には、次のようなものがあります。

• <<Interface>> インターフェースクラスを表す
• <<Abstract>> 抽象クラスを表す
• <<Service>> サービスクラスを表す
• <<Enumeration>> enumを表す

アノテーションは開始タグ<<と終了タグ>>で定義されます。クラスにアノテーションを追加するには2つの方法があり、どちらの方法でも出力は同じになります。

• クラス定義の**後、別行**で

• クラス定義と同時に**ネスト構造**で

コメント

クラス図内にコメントを入力できます。パーサーはコメントを無視します。コメントはそれぞれ独立した行に記述する必要があり、%%（パーセント記号2つ）を先頭に付ける必要があります。次の改行文字まで、クラス図構文を含め、すべてのテキストがコメントとして扱われます。

図の方向の設定

クラス図では、directionステートメントを使用して図のレンダリング方向を設定できます。

インタラクション

ノードにクリックイベントをバインドできます。クリックは、JavaScriptコールバック、または新しいブラウザタブで開かれるリンクのいずれかを呼び出すことができます。**注意**: この機能はsecurityLevel='strict'を使用する場合は無効になり、securityLevel='loose'を使用する場合は有効になります。

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

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

• action は、呼び出すインタラクションの種類に応じてlinkまたはcallbackのいずれかになります。
• className は、アクションが関連付けられるノードのIDです。
• reference は、URLリンクまたはコールバックの関数名です。
• (オプション) tooltipは、要素にホバーしたときに表示される文字列です（注：tooltipのスタイルはクラス.mermaidTooltipによって設定されます）。
• 注：コールバック関数は、nodeIdをパラメータとして呼び出されます。

注釈

note "line1\nline2"を使用して図に注釈を追加できます。特定のクラスに注釈を追加するには、note for <CLASS NAME> "line1\nline2"を使用します。

例

URLリンク

コールバック

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

**成功** ツールチップ機能とURLへのリンク機能は、バージョン0.5.2から利用可能です。

初心者向けヒント—インタラクティブなリンクを使用したHTMLページの完全な例

<body>
  <pre 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"
  </pre>

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

スタイル設定

ノードのスタイル設定

styleキーワードを使用して、太い境界線や異なる背景色など、特定のスタイルを個々のノードに適用できます。

注釈と名前空間は個別にスタイル設定できませんが、テーマはサポートすることに注意してください。

クラス

毎回スタイルを定義するよりも便利な方法は、スタイルのクラスを定義し、異なる外観にする必要があるノードにこのクラスを添付することです。

クラス定義は次の例のようになります。

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

また、1つのステートメントで複数のクラスにスタイルを定義することもできます。

classDef firstClassName,secondClassName font-size:12pt;

ノードへのクラスの添付は、下記のように行います。

cssClass "nodeId1" className;

1つのステートメントで複数のノードのリストにクラスを添付することもできます。

cssClass "nodeId1,nodeId2" className;

クラスを追加するより短い形式は、:::演算子を使用してクラス名をノードに添付することです。

または

デフォルトクラス

クラス名がdefaultの場合、すべてのノードに適用されます。特定のスタイルとクラスは、適用されたデフォルトのスタイル設定を上書きするために、後で定義する必要があります。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

CSSクラス

下記の例のように、グラフ定義から適用できるCSSスタイルでクラスを事前に定義することもできます。

スタイルの例

<style>
  .styleClass > * > g {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

定義例

cssClassesは、この簡略化された方法では、関係ステートメントと同時に追加できません。

設定

メンバボックス

クラスノードの空のメンバボックスを非表示にすることができます。

これは、クラス図の設定の**hideEmptyMembersBox**値を変更することで行います。Mermaid設定の編集方法の詳細については、設定ページを参照してください。