PlantUML - mermaid UML 比較（シーケンス図）

## Qiita での UML 記述

Qiita で PlantUML および mermaid が使用できるようになったということで軽く比較したいと思います。
それぞれの正式な書式については公式サイトをご確認ください。

cf. [PlantUML](https://plantuml.com/ja/sequence-diagram)
cf. [mermaid](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)

## Pros/Cons

先に PlantUML と mermaid について個人的な見解を述べさせていただきます。

### _PlantUML シーケンス図_ 

#### Pros
- 図表が画像で表示される
- 描画パーツを細かく指定できる

#### Cons
- 対応しているサービス以外、ローカルのエディタ（VS code など）で図表化するためには Java の設定が必要となる
- ちょっと図表が古めかしい

### _mermaid シーケンス図_

#### Pros
- 図表の文字がテキストとして認識できるためコピペがしやすい
- ローカルのエディタで拡張機能を設定するだけで図表化される
- PlantUML よりモダンな図表
- GitHub で採用されている！

#### Cons
- 図表を画像化するのに一手間かかる


全体的な書きやすさなどは慣れの部分が大きく、極端に有利不利があるようには思えません。
ただ、やはり GitHub に採用されたという点が今後いちばん界隈に影響しそうなので、PlantUML の資産がなく、新規に始めるのであれば mermaid の方が無難な気がします。

### _PlantUML.1_

<code>```plantuml</code>で開始するだけで、`@startuml` および <code>@enduml</code> は不要となっています。

終了も<code>```</code>で閉じるだけとなります。

~~~text
```plantuml
Alice -> Bob: Authentication RequestBob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```
~~~

本文中に上記コードを記述すると以下のように表示されます。

```plantuml
Alice -> Bob: Hello Bob, how are you?
Bob --> Alice: Great!

Alice -> Bob: See you later!

```

### _mermaid.1_

こちらも同様に<code>```mermaid</code>で開始しますが１行目に図表の種別を記述する必要があります。シーケンス図の場合は `sequenceDiagram` となります。

終了は<code>```</code>で閉じるだけとなります。

~~~text
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Great!
    Alice-)Bob: See you later!
```
~~~

```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Great!
    Alice-)Bob: See you later!
```

Qiita での mermaid の注意事項として、`mermaid` という単語を「見出し」として使用できないという制限があるため注意しましょう。

cf. [「mermaid」を見出しに使用できない](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#mermaid%E3%82%92%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%AB%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)

同じシーケンス図の内容ですが、出力された図をマウスで触っていただくと、PlantUML は画像となっており、mermaid はテキストが選択できることが分かると思います。
これは Qiita 上だけではなく、VS Code で拡張機能を使用して生成した場合でも同様になります。


### _PlantUML.2_

エイリアスやアクターなども問題なく対応されています。

~~~text
```plantuml
actor Alice as A
participant Bob as B

A->>B: Hello Bob, how are you?
B->>A: Great!
```
~~~

```plantuml
actor Alice as A
participant Bob as B

A->>B: Hello Bob, how are you?
B->>A: Great!
```

### _mermaid.2_

~~~text
```mermaid
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A->>B: Hello Bob, how are you?
    B->>A: Great!
```
~~~

```mermaid
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A->>B: Hello Bob, how are you?
    B->>A: Great!
```


### _PlantUML.3_

Qiita 上でも並列 `par`、分岐 `alt`、条件 `opt`、繰り返し `loop`、中断 `break` が記述できます。

~~~text
```plantuml
par Alice to Bob
    Alice->>Bob: Hello guys, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
else Alice to John
    Alice->>John: Hello guys, how are you?
    opt Extra response
        John->>Alice: Thanks for asking
    end
    loop Additional response
        Alice->>John: You're welcome.
        break 3 times
            John->>Alice: Don’t mention it.
        end
    end
end
```
~~~

```plantuml
par Alice to Bob
    Alice->>Bob: Hello guys, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
else Alice to John
    Alice->>John: Hello guys, how are you?
    opt Extra response
        John->>Alice: Thanks for asking
    end
    loop Additional response
        Alice->>John: You're welcome.
        break 3 times
            John->>Alice: Don’t mention it.
        end
    end
end
```

### _mermaid.3_

mermaid の場合、Qiita 上では並列 `par`、分岐 `alt`、条件 `opt`、繰り返し `loop` は記述できますが、中断 `break` はエラーとなるようです。

~~~text
```mermaid
sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
    and Alice to John
        Alice->>John: Hello guys, how are you?
        opt Extra response
            John->>Alice: Thanks for asking
        end
    end
```
~~~

```mermaid
sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
    and Alice to John
        Alice->>John: Hello guys, how are you?
        opt Extra response
            John->>Alice: Thanks for asking
        end
        loop Additional response
            Alice->>John: You're welcome.
        end
    end
```


### _PlantUML.4_

背景色も標準の方法で対応できます。

~~~text
```plantuml
par Alice to Bob
    Alice->>Bob: Hello guys, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
else Alice to John
    Alice->>John: Hello guys, how are you?
    opt Extra response
        John->>Alice: Thanks for asking
    end
    loop Additional response
        Alice->>John: You're welcome.
        break 3 times
            John->>Alice: Don’t mention it.
        end
    end
end
```
~~~

```plantuml
par#Gold #LightBlue  Alice to Bob
    Alice->>Bob: Hello guys, how are you?
    alt#Gold #LightGreen is sick
        Bob->>Alice: Not so good :(
    else #Teal is well
        Bob->>Alice: Feeling fresh like a daisy
    end
else #LightPink Alice to John
    Alice->>John: Hello guys, how are you?
    opt#Gold #SandyBrown Extra response
        John->>Alice: Thanks for asking
    end
    loop#Gold #Plum Additional response
        Alice->>John: You're welcome.
        break#Gold #Khaki 3 times
            John->>Alice: Don’t mention it.
        end
    end
end
```

### _mermaid.4_

mermaid でも背景色を設定することができますが PlantUML のように枠全体を塗るようにはなりません。

~~~text
```mermaid
sequenceDiagram
    par Alice to Bob
        rect rgb(173,216,230)
            Alice->>Bob: Hello guys, how are you?
            alt is sick
                rect rgb(140, 230, 140)
                    Bob->>Alice: Not so good :(
                end
            else is well
                rect rgb(0, 128, 128)
                    Bob->>Alice: Feeling fresh like a daisy
                end
            end
        end
    and Alice to John
        rect rgb(255,182,193)
            Alice->>John: Hello guys, how are you?
            opt Extra response
                rect rgb(244, 164, 96)
                    John->>Alice: Thanks for asking
                end
            end
            loop Additional response
                rect rgb(221, 160, 221)
                    Alice->>John: You're welcome.
                end
            end
        end
    end
```
~~~

```mermaid
sequenceDiagram
    par Alice to Bob
        rect rgb(173,216,230)
            Alice->>Bob: Hello guys, how are you?
            alt is sick
                rect rgb(140, 230, 140)
                    Bob->>Alice: Not so good :(
                end
            else is well
                rect rgb(0, 128, 128)
                    Bob->>Alice: Feeling fresh like a daisy
                end
            end
        end
    and Alice to John
        rect rgb(255,182,193)
            Alice->>John: Hello guys, how are you?
            opt Extra response
                rect rgb(244, 164, 96)
                    John->>Alice: Thanks for asking
                end
            end
            loop Additional response
                rect rgb(221, 160, 221)
                    Alice->>John: You're welcome.
                end
            end
        end
    end
```

## まとめ

以上、ごく簡単になりますが Qiita で PlantUML と mermaid のシーケンス図を記述比較をしてみました。

出力結果だけを見るとやはり mermaid の方がモダンな印象を受けますが、細かい記述をしたい場合は PlantUML に一日の長があるように思われます。

ただ、Qiita 独自ではありますが、`break` のように使えない機能もあるようなので、詳細まで使い込んでいった場合にどこかで引っ掛かる可能性もあるため、ツールやエディタなど環境次第によって選択肢が変わるかもしれません。

シンプルにまとめたい場合は mermaid、本格的に描き込みたい場合は PlantUML というように用途に合わせて変えるのもありかもしれませんが、資産を活かせなくなりそうなので微妙でしょうか。