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

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

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

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

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/1a490c75961efd1e1487

## まーめいど！くらすず！
前回の記事ではクラスの定義と関係について紹介しました。

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

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

```:mermaid
classDiagram
    classA --|> classB: 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
```
```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
```

```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>> Penguin
    Penguin: is_Linux
    Penguin: swim()
```

↓↓古いバージョンのエディタではレンダリングできない場合があります。
```:mermaid
classDiagram
class Penguin{
    <<interface>>
    is_Linux
    swim()
}
```
[![](https://mermaid.ink/img/pako:eNo9T8tqwzAQ_JWwpxaEsaxHYhFy6rGFQm9FUIS9SUUjKehBkxr_e1U7dC-7M-zM7E4whBFBwXA2KT1Zc4rGab-gzSv6U7F-0n5Ta7-3PmM8mgEPh5Wy6ePZ-nJdUfq27uFR-xkIOIzO2LEaL2oN-RMdalB1HE380rDumZLD280PoI7mnJBAuYwm4_2Qf_ZiPKgJrqAYlU3H6K7f8b4TnEkCN1Cia7hg24q5EFvZiZnATwjVoG2EoEK2vKU9laJlPQEcbQ7x5f74X1sS3hdBjgXnXxkgVgQ?type=png)](https://mermaid.live/edit#pako:eNo9T8tqwzAQ_JWwpxaEsaxHYhFy6rGFQm9FUIS9SUUjKehBkxr_e1U7dC-7M-zM7E4whBFBwXA2KT1Zc4rGab-gzSv6U7F-0n5Ta7-3PmM8mgEPh5Wy6ePZ-nJdUfq27uFR-xkIOIzO2LEaL2oN-RMdalB1HE380rDumZLD280PoI7mnJBAuYwm4_2Qf_ZiPKgJrqAYlU3H6K7f8b4TnEkCN1Cia7hg24q5EFvZiZnATwjVoG2EoEK2vKU9laJlPQEcbQ7x5f74X1sS3hdBjgXnXxkgVgQ)

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

```:mermaid
classDiagram
    direction RL
    classA --|> classB
```

```mermaid
classDiagram
    direction RL
    classA --|> classB
```

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


```mermaid
classDiagram
    direction TB
    classA --|> classB: direction_TB
```

```mermaid
classDiagram
    direction BT
    classA --|> classB: direction_BT
```

```mermaid
classDiagram
    direction LR
    classA --|> classB: direction_LR
```

```mermaid
classDiagram
    direction RL
    classA --|> classB: direction_RL
```

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

以下の記述では`direction RL`（右から左）を指定しています。
```:mermaid
classDiagram
    direction RL
    classA <|-- classB
```

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

描画の順番について番号を振ると以下のようになります。クラスが`右から左`へと描画された後に矢印を配置していることがわかります。
```mermaid
classDiagram
    direction RL
    classA <|-- classB: 3
    <<1>>classA
    <<2>>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"
```
↓↓クリックすると実際に遷移します。
```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"
```
```js:mermaid.js
const MakeClassA = function () {
    console.log("classA")
};
const MakeClassB = function () {
    console.log("classB")
};
```
↓↓クリックはできますが、ここではscriptを接続していないので何も起きません。
```mermaid
classDiagram
    classA --|> classB
    click classA call MakeClassA()
    callback classB "MakeClassB"
```

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

```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
```
```mermaid
classDiagram
    class classA
    styleA classA styleA
```

`class NODE:::CLASS_NAME`
```:mermaid
classDiagram
    class classA:::styleA
```
```mermaid
classDiagram
    class classA:::styleA
```

## まとめ

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

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

https://qiita.com/hirokiwa/private/fd4296e8ae087d67ad43

## 参考

https://mermaid-js.github.io/mermaid/#/