クラス図

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

• ウィキペディア

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

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

Code:

構文

クラス

UMLは、属性やメソッドなどのクラスメンバーを表し、それらに関する追加情報を表現するためのメカニズムを提供します。 図内のクラスの単一インスタンスは、3つの区画を含みます：

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

Code:

クラスの定義

クラスを定義する方法は2つあります：

• class キーワードを使用して明示的に定義する方法、例えば class Animal はAnimalクラスを定義します。
• リレーションシップを介して、2つのクラスを同時に定義し、その関係を含める方法です。例えば Vehicle <|-- Car。

Code:

命名規則：クラス名は、英数字（ユニコードを含む）、アンダースコア、およびダッシュ（-）のみで構成されるべきです。

クラスラベル

クラスにラベルを提供する必要がある場合は、次の構文を使用できます：

Code:

ラベル内の特殊文字をエスケープするためにバックティックを使用することもできます：

Code:

クラスのメンバーの定義

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

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

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

• メンバー名の前に : (コロン) を付けてクラスのメンバーを関連付ける方法で、一度に1つのメンバーを定義するのに便利です。例えば：

Code:

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

Code:

戻り値の型

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

Code:

ジェネリック型

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

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

Code:

アクセス修飾子

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

• + 公開
• - 非公開
• # 保護された
• ~ パッケージ/内部

注意 メソッド定義の末尾に追加の 分類子 を追加することもできます。つまり、() または戻り値の型の後に以下の表記を追加することができます：

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

注意 フィールド定義の末尾に追加の 分類子 を追加することもできます：

• $ 静的 例えば：String someField$

リレーションの定義

リレーションは、クラス図やオブジェクト図に見られる論理的接続の特定のタイプを網羅する一般的な用語です。

[classA][矢印][ClassB]

UMLで現在サポートされているクラスのために定義されている8種類のリレーションタイプがあります：

タイプ	説明
<|--	継承
*--	コンポジション
o--	集約
-->	関連
--	リンク（ソリッド）
..>	依存
..|>	実現
..	リンク（ダッシュ）

Code:

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

Code:

リレーション上のラベル

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

[classA][矢印][ClassB]:ラベルテキスト

Code:

双方向リレーション

リレーションは論理的にN:Mの関連を表すことができます：

ここでの構文は：

[リレーションタイプ][リンク][リレーションタイプ]

リレーションタイプ は以下のいずれかです：

タイプ	説明
<|	継承
\*	コンポジション
o	集約
>	関連
<	関連
|>	実現

リンク は以下のいずれかです：

タイプ	説明
--	ソリッド
..	ダッシュ

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

クラスには、クラス上にロリポップインターフェースを定義する特別なリレーションタイプも付与できます。ロリポップインターフェースは、次の構文を使用して定義されます：

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

インターフェース（bar）がロリポップでクラス（foo）に接続されます。

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

Code:

Code:

名前空間の定義

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

Code:

リレーション上のカーディナリティ / 多重度

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

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

異なる多重度オプションは以下の通りです：

• 1 1のみ
• 0..1 ゼロまたは1
• 1..* 1以上
• * 多数
• n n（n>1のとき）
• 0..n ゼロからn（n>1のとき）
• 1..n 1からn（n>1のとき）

多重度は、特定の矢印の前または後にテキストオプションを引用符 " で挟んで簡単に定義できます。例えば：

[classA] "cardinality1" [矢印] "cardinality2" [ClassB]:ラベルテキスト

Code:

クラスへの注釈

クラスにマーカーで注釈を付けて、クラスに関する追加メタデータを提供できます。これにより、その性質についてより明確な指示を提供できます。一般的な注釈には以下が含まれます：

• <<インターフェース>> インターフェースクラスを表すため
• <<抽象>> 抽象クラスを表すため
• <<サービス>> サービスクラスを表すため
• <<列挙>> 列挙を表すため

注釈は、開く << と閉じる >> 内で定義されます。クラスに注釈を追加する方法は2つあり、どちらの方法でも出力は同じです：

• クラスが定義された後に 別の行 に注釈を付ける方法：

Code:

• クラス定義とともに ネスト構造 で注釈を追加する方法：

Code:

コメント

クラス図内にコメントを入力することができ、パーサーによって無視されます。コメントは独立した行にあり、%%（二重パーセント記号）で開始する必要があります。次の改行までの任意のテキストはコメントとして扱われ、クラス図の構文を含めることができます。

図の方向の設定

クラス図では、direction ステートメントを使用して、図が描画される方向を設定できます：

Code:

インタラクション

ノードにクリックイベントをバインドすることができます。クリックは、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リンクまたはコールバックの関数名のいずれかです。
• （オプション）ツールチップは、要素にホバーした際に表示される文字列です（注：ツールチップのスタイルはクラス .mermaidTooltip で設定されています）。
• 注：コールバック関数はノードIDをパラメータとして呼び出されます。

図上の注釈

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

例

リンクURL：

コールバック：

<script>
  const callbackFunction = function () {
    alert('コールバックがトリガーされました');
  };
</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 "ツールチップ"
      link Zebra "https://www.github.com" "これはリンクです"
  </pre>

  <script>
    const callback = function () {
      alert('コールバックがトリガーされました');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

スタイリング

ノードのスタイリング

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

注意：ノートと名前空間は個別にスタイルを変更することはできませんが、テーマをサポートします。

Code:

クラス

スタイルを毎回定義する代わりに、スタイルのクラスを定義し、このクラスを異なる外観を持つノードに所定できます。

クラス定義は以下のようになります：

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

複数のクラスに一度にスタイルを定義することもできます：

classDef firstClassName,secondClassName font-size:12pt;

クラスをノードにアタッチする方法は以下の通りです：

cssClass "nodeId1" className;

一度にノードのリストにクラスをアタッチすることも可能です：

cssClass "nodeId1,nodeId2" className;

クラスを追加する短い方法として、::: 演算子を使用してノードにクラス名をアタッチできます：

Code:

または：

Code:

デフォルトクラス

クラスがdefaultと名付けられている場合、すべてのノードに適用されます。特定のスタイルやクラスは、適用されたデフォルトスタイルをオーバーライドするために、その後に定義する必要があります。

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

Code:

CSSクラス

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

スタイル例

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

定義例

Code:

cssClassesは、このショートハンドメソッドを使用して同時にリレーションステートメントを追加することはできません。

設定

メンバーのボックス

クラスノードの空のメンバーのボックスを隠すことができます。

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

Code: