マーメイド#10 クラス図２

ひとりマーメイド10日目
クラス図２

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではクラス図の記法を紹介します！

↓↓前回の記事はこちら

まーめいど！くらすず！

前回の記事ではクラスの定義と関係について紹介しました。

今日は引き続きクラス図についてです！

ラベル

矢印にラベルを付与することができます。
: LabelText

mermaid

classDiagram
    classA --|> classB: LabelText

双方向

矢印の向きを双方向に設定することができます。

mermaid

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

多重度

多重度とは他のクラス1つにリンクできるリンクの数を表します。1対1,1対多みたいなやつです。

記述	数
1	1
0..1	0 ~ 1
1..*	1以上
*	複数
n	n
0..n	0~n
1..n	1~n

ここで n は n > 1 です。

それぞれのクラスの対応数を矢印の前後に記述します。
CLASS "1" --|> "n" CLASS

mermaid

classDiagram
    classA "1"      --|> "0..1" classB
    classC "1..*"   --|> "*"    classD
    classE "n"      --|> "0..n" classF
    classG "1..n"   --|> "n"    clasH

アノテーション

アノテーションを挿入してクラスの性質を示すことができます。
<<ANNOTATION>> CLASS_NAME

例

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

クラス定義と同様に2つの記法があります。

mermaid

classDiagram
    class Penguin
    <<Interface>> Penguin
    Penguin: is_Linux
    Penguin: swim()

↓↓古いバージョンのエディタではレンダリングできない場合があります。

mermaid

classDiagram
class Penguin{
    <<interface>>
    is_Linux
    swim()
}

ダイアグラムの向き

ダイアグラムの向きを指定したい場合は、フローチャートと同様にdirectionを使用します。
direction RL

mermaid

classDiagram
    direction RL
    classA --|> classB

記述	向き
TB	↓
TD	↓
BT	↑
DT	↑
LR	→
RL	←

補足

クラス図の場合directionで指定しているのは矢印の向きではなく、クラスの描画方向であるという点に注意してください。

以下の記述ではdirection RL（右から左）を指定しています。

mermaid

classDiagram
    direction RL
    classA <|-- classB

しかし矢印の向きは左から右を指しています。これはクラスを定義した順番（classA, classB）で、右から左へと描画がされているからです。

描画の順番について番号を振ると以下のようになります。クラスが右から左へと描画された後に矢印を配置していることがわかります。

矢印はあくまで後付けであるということを意識してください。

イベントの埋め込み

クラスにクリックイベントを埋め込むことができます。

URLの埋め込み
いくつか記法があります。

• click CLASS_NAME href "URL"
• link CLASS_NAME "URL"

mermaid

classDiagram
    MyAcount --|> Qiita
    click Qiita href "https://qiita.com/"
    link  MyAcount "https://qiita.com/hirokiwa"

↓↓クリックすると実際に遷移します。

イベント
スクリプトを追加して関数を実行することができます。

いくつか記法があります。

• click CLASS_NAME call FUNCTION()
• callback CLASS_NAME call FUNCTION()

mermaid

classDiagram
    classA --|> classB
    click classA call MakeClassA()
    callback classB "MakeClassB"

mermaid.js

const MakeClassA = function () {
    console.log("classA")
};
const MakeClassB = function () {
    console.log("classB")
};

↓↓クリックはできますが、ここではscriptを接続していないので何も起きません。

スタイリング

ノードのスタイルを自由に変更することができます。HTML/cssと同様に、classで定義したcssをノードに適用する方式です。

style.css

.styleA > rect {
    fill: #00ff00;
    stroke: #FF22FF;
    stroke-width: 4px;
}

2通りの記法でノードにclassを付与することができます。

CLASS_NAME NODE CLASS_NAME

mermaid

classDiagram
    class classA
    styleA classA styleA

class NODE:::CLASS_NAME

mermaid

classDiagram
    class classA:::styleA

まとめ

クラス図の記述について紹介しました！

↓↓次回の記事はこちら!!

参考