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

概要

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 -->> 教師: おはようございます
```