概要

Mermaid記法を利用することでマークダウン内に図を埋め込むことができます。
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
    }
```

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!
```

登場人物を定義

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

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

線の種類

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

有効化・無効化

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

```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
    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
    par 挨拶
        教師 ->> 生徒A: おはよう
    and 挨拶
        教師 ->> 生徒B: おはよう
    and 挨拶
        教師 ->> 生徒C: おはよう
    end
    生徒A -->> 教師: おはようございます
    生徒B -->> 教師: おはようございます
    生徒C -->> 教師: おはようございます
```