Mermaidでマークダウン内にER図・シーケンス図を書く

# 概要

[Mermaid記法](https://mermaid.js.org/syntax/flowchart.html) を利用することでマークダウン内に図を埋め込むことができます。
README などに UML を埋め込んでおき、Github 上で見れたりするので簡単な作図をするには便利です。
ただし、現状 Qiita マークダウンに埋め込む場合は一部対応していない syntax もあるようなので注意。
ER図、シーケンス図の他、クラス図はもちろん状態遷移図や Git グラフ図なども記述できます。

私は PlantUML や draw.io と以下のような使い分けをしています。

- Mermaid
    - README などに埋め込みたい
- PlantUML
    - svg, png など画像ファイルとして出力したい
- draw.io
    - 図形の位置調整など細かく作り込みたい

# ER 図

2023/04/27 現在、Qiita では対応していない syntax

- 型の配列、桁数指定 (e.g. `string[]` や `string(99)` といった表記)
- UK、FK の指定 (PK は表記可能)

      ```mermaid
      erDiagram
          MANUFACTURER ||--o{ CAR : makes
          CAR ||--o{ NAMED-DRIVER : allows
          PERSON ||--o{ NAMED-DRIVER : is
        
          CAR {
              string registrationNumber PK
              string make
              string model
              string parts
          }
      
          PERSON {
              string driversLicense PK "The license #"
              string firstName "Only 99 characters are allowed"
              string lastName
              string phone
              int age
          }
        
          NAMED-DRIVER {
              string carRegistrationNumber PK
              string driverLicence PK
          }
      ```
    
```mermaid
erDiagram
    MANUFACTURER ||--o{ CAR : makes
    CAR ||--o{ NAMED-DRIVER : allows
    PERSON ||--o{ NAMED-DRIVER : is

    CAR {
        string registrationNumber PK
        string make
        string model
        string parts
    }

    PERSON {
        string driversLicense PK "The license #"
        string firstName "Only 99 characters are allowed"
        string lastName
        string phone
        int age
    }

    NAMED-DRIVER {
        string carRegistrationNumber PK
        string driverLicence PK
    }
```

### Entity の表記

```
Entity名 {
    型 要素名 キー制約(カンマ区切り) "備考"
}
```

### relationship の表記

構文：`ENTITY1 [表記(左)]--[表記(右)] ENTITY2 : メッセージ`

| 表記(左) | 表記(右) | 意味 |
|:-:|:-:|---|
| `\|o` | `o\|` | 0 or 1 |
| `\|\|` | `\|\|` | 1 |
| `}o` | `o{` | 0 以上 |
| `}\|` | `\|{` | 1 以上 |

# シーケンス図

    ```mermaid
    sequenceDiagram
        Alice ->>+ John: Hello John, how are you?
        Alice ->>+ John: John, can you hear me?
        Note right of John: Text in note
        John -->>- Alice: Hi Alice, I can hear you!
        John -->>- Alice: I feel great!
    ```

```mermaid
sequenceDiagram
    Alice ->>+ John: Hello John, how are you?
    Alice ->>+ John: John, can you hear me?
    Note right of John: Text in note
    John -->>- Alice: Hi Alice, I can hear you!
    John -->>- Alice: I feel great!
```

### 登場人物を定義

前述の例のように暗黙的に定義可能。
表示順を決めたい場合は `participant` で明示的に定義する。
ボックスではなく人型で表示したければ `actor` を利用する。
`as` でエイリアスを貼ることも出来る。

```
sequenceDiagram
    participant B as Bob
    actor A as Alice
    A ->> B: Hello Bob!
    B ->> A: Hi Alice!ob
```

```mermaid
sequenceDiagram
    participant B as Bob
    actor A as Alice
    A ->> B: Hello Bob!
    B ->> A: Hi Alice!
```

### 線の種類

構文：`ACTOR1 [線の種別(下図参照)] ACTOR2: メッセージ`
PlantUML とは異なり `A <<- B` のように反転した記述は出来ないので注意。

```mermaid
sequenceDiagram
    A -> B: A -> B
    B --> A: B --> A
    A ->> B: A ->> B
    B -->> A: B -->> A
    A -x B: A -x B
    B --x A: B --x A
    A -) B: A -) B
    B --) A: B --) A
```

### 有効化・無効化

アクターの有効・無効化は `activate` / `deactivate` を使用する。
線の指定直後に `+` / `-` を記述することでも切り替え可能。

    ```mermaid
    sequenceDiagram
        A ->> B: call
        activate B
        B -->> A: return
        deactivate B
    
        A ->>+ B: call
        B -->>- A: return
    ```

```mermaid
sequenceDiagram
    A ->> B: call
    activate B
    B -->> A: return
    deactivate B

    A ->>+ B: call
    B -->>- A: return
```

### メモ書き

構文：`Note [right of | left of | over] ACTOR: テキスト`

`over` の場合はカンマ区切りで 2 つのアクターに跨って表示可能。
3 つ以上は指定できないので注意 (跨って表示する左端と右端を指定する感じ)。
　OK：`Note over A, B: text` ← A から B に跨って表示される
　NG：`Note over A, B, C: text`


    ```mermaid
    sequenceDiagram
        participant A
        participant B
        participant C

        Note right of A: A の右側に表示
        Note left of A: A の左側に表示
        Note over A: A 上に表示
        Note over A, B: カンマ区切りで 2 つのアクターに跨って表示<br>brで改行も可能

        Note over A, C: アクターの表示順を制御すれば<br>両端を指定することで 3 つ以上のアクターを跨ぐ表示が可能
    ```

```mermaid
sequenceDiagram
    participant A
    participant B
    participant C

    Note right of A: A の右側に表示
    Note left of A: A の左側に表示
    Note over A: A 上に表示
    Note over A, B: カンマ区切りで 2 つのアクターに跨って表示<br>brで改行も可能

    Note over A, C: アクターの表示順を制御すれば<br>両端を指定することで 3 つ以上のアクターを跨ぐ表示が可能
```

### ループ

    ```mermaid
    sequenceDiagram
        loop 1..10
            A ->> B: call
            B -->> A: response
        end
    ```

```mermaid
sequenceDiagram
    loop 1..10
        A ->> B: call
        B -->> A: response
    end
```

### 分岐
    
    ```mermaid
    sequenceDiagram
        alt 朝
            A ->> B: おはよう
        else 昼
            A ->> B: こんにちは
        else 夜
            A ->> B: こんばんは
        end
    
        opt 知り合い
            B -->> A: あいさつ
        end
    ```

```mermaid
sequenceDiagram
    alt 朝
        A ->> B: おはよう
    else 昼
        A ->> B: こんにちは
    else 夜
        A ->> B: こんばんは
    end

    opt 知り合い
        B -->> A: あいさつ
    end
```

### 並列処理

    ```mermaid
    sequenceDiagram
        par 挨拶
            教師 ->> 生徒A: おはよう
        and 挨拶
            教師 ->> 生徒B: おはよう
        and 挨拶
            教師 ->> 生徒C: おはよう
        end
        生徒A -->> 教師: おはようございます
        生徒B -->> 教師: おはようございます
        生徒C -->> 教師: おはようございます
    ```

```mermaid
sequenceDiagram
    par 挨拶
        教師 ->> 生徒A: おはよう
    and 挨拶
        教師 ->> 生徒B: おはよう
    and 挨拶
        教師 ->> 生徒C: おはよう
    end
    生徒A -->> 教師: おはようございます
    生徒B -->> 教師: おはようございます
    生徒C -->> 教師: おはようございます
```