はじめに
シーケンス図の記法を比べてみます。私はもともと PlantUML を使用していたため「PlantUML 使いから見ると、Mermaid では...」という書き方になりがちなのはご容赦ください。
それぞれの公式
手軽に導入
手軽に試したい場合、どちらも Visual Studio Code の拡張機能 Markdown Preview Enhanced を使えば対応します(以下「VS Code では」と書かれているのは「Visual Studio Code の Markdown Preview Enhanced を使えば」という意味だと思ってください)。したがって、両記法を併記できます。
両者とも Markdown ファイルの中にコードブロックとして記述すれば、レンダリングしてくれます。
標準で HTML への書き出しもできるので、成果物が HTML でよければ、その組み合わせだけで問題ないかと思います。図の部分は出力された HTML に SVG として埋め込まれています。図だけをイメージとして書き出したい場合や、ドキュメントを PDF やその他の形式に出力したい場合は、また別のツールを併用する必要があります。
最小基本のシーケンス図
以下、コード例と描画結果を交互に記述していきます。
```puml
@startuml
A -> B
@enduml
```
```mermaid
sequenceDiagram
A ->> B : message
```
Mermaid は: message
の部分を省略できないようです。また、矢印は ->>
と書く必要がありそうです。
PlantUML は@startuml
と@enduml
で括るのが冗長に感じますね。すでに```puml
で括っているのに。また、シーケンス図と指定しなくてもシーケンス図になってしまうのは、少々違和感が。これは PlantUML がもともとシーケンス図ツールだった(らしい)ことに起因するかも。
返り値
Mermaid は、矢印を記述する方向に制約があるようです。そのため、参加者の順序を予め記述しています。
```puml
@startuml
A <-- B
@enduml
```
```mermaid
sequenceDiagram
participant A
participant B
B -->> A : return
```
矢印をどちら向きにも書ける PlantUML の方が直感的な気がしますが、どうせメッセージラベルは行末に書くので、それはどちらの書き方にも違和感がある気がしますね。
いろいろな矢印
```puml
@startuml
A -> B : 先端のバリエーション
A ->> B
A ->X B
A -\ B
A -/ B
A ->o B
A ->>o B
A -\o B
A -/o B
B -> B
A --> B : 線のバリエーション
A -[#blue]> B
@enduml
```
```mermaid
sequenceDiagram
A ->> B : message
A -> B : message
A -->> B : message
A -X B : message
A --X B : message
A -) B : message(非同期)
A --) B : message(非同期)
```
省略しましたが、PlantUML は両端矢印も可能です。しかし Mermaid のような、両端に矢のない線は書くことができないようです(別の図と解釈されてしまう)。
参加者の活性化と破棄
ほぼ同じ書き方ですが、mermaid は 追記:PlantUML にも省略記法があることをコメント欄にて教えてくださいました。コメント欄を参照ください。+
と-
による省略記法があります。しかしこの場合の-
はB
の側に書きたい気が...。
```puml
@startuml
A -> B : instantinate
activate B
A <-- B : dispose
deactivate B
@enduml
```
```mermaid
sequenceDiagram
A ->> B : instantinate
activate B
B -->> A : dispose
deactivate B
```
```mermaid
sequenceDiagram
A ->> + B : instantinate
B -->> - A : dispose
```
注釈・コメント
どちらもいろいろと位置調整ができます。
```puml
@startuml
/'
このコメントは描画されません
'/
' この行コメントは描画されません
A -> B
note right: 注釈
@enduml
```
```mermaid
sequenceDiagram
% この行コメントは描画されません
A ->> B : message
Note right of B : 注釈
```
何故どちらもデフォルトが黄色いんだ(笑)。Post It の所為かな、やっぱり。
コメントは、複数行コメントの対応可否が別れていますね。
Mermaid の行コメントは、公式のドキュメントでは%%
となっていますが、VS Code 上では%
だけでもコメント化されました。
グループ
loop
、alt
などの図の一部をグループ化する書き方です。
```puml
@startuml
A -> B
alt 注釈
A -> B : message
else
A -> B : message
end
note over A, B
上記 alt/else の他、以下のものが同じように記述できます。
・opt
・loop
・par
・break
・critical
・group + 任意のテキスト
end note
@enduml
```
```mermaid
sequenceDiagram
A ->> B : message
alt 注釈
A ->> B : message
else
A ->> B : message
end
Note over A, B : 上記 alt/else の他、opt、loop、par が使えます。
```
配色テーマの指定
PlantUML はこちらを、Mermaid はこちらを参照ください。
PlantUML は、公開されているテーマを記述した外部ファイルを持ってきて、それを include して使います。すでに膨大なテーマが用意されています。
Mermaid は、CSS を使用してテーマを変更しますが、デフォルトでいくつかのテーマが用意されているようです。VS Code の設定 Markdown-preview-enhanced: Mermaid Theme
で変更するか、下記例のように先頭にテーマ名を記述します。
記述例だけ示します。
```puml
!include puml-theme-<THEME NAME>.puml
@startuml
A -> B
@enduml
```
```mermaid
%%{init: {'theme': 'neutral' } }%%
sequenceDiagram
A ->> B : message
```
HTML に書き出すと、その中に mermaid.min.js
の置き場所が書かれているので、CSS の追加もできるでしょう。たぶん。
参加者の別名
両者同じように別名を定義できます。しかし書き方は逆ですね...。
```puml
@startuml
participant クライアント as A
participant データベース as B
A -> B : 問い合わせ
@enduml
```
```mermaid
sequenceDiagram
participant A as クライアント
participant B as データベース
A ->> B : 問い合わせ
```
改行
PlantUML は \n
で、Mermaid は <br/>
で、それぞれ改行できます。
下記サンプルで、へんなところで改行しているのは、デフォルトの桁揃えを示したいためです。
PlantUML でメッセージをセンタリングしたい場合は、先頭で skinparam sequenceMessageAlign center
を指定することで可能です。
```puml
@startuml
participant "クラ\nイアント" as A
participant "データベー\nス" as B
A -> B : 問い\n合わせ
@enduml
```
```mermaid
sequenceDiagram
participant A as クラ\イアント
participant B as データベー\ス
A ->> B : 問い\合わせ
```
書き出し
図は、単独で使用するのではなく文書に挿入して使うことが多いはずなので、Markdown 内に書くことができれば問題ないはずです。しかし多くの職場では未だ Office ソフトの使用を余儀なく2されているかと思います。
そんな場合、私は、プレビュー表示から「範囲指定のスクショ」を撮ってコピペしています。面倒なので。どうしてもの場合(図の中のテキストを検索できるようにしたいなど)は HTML 書き出し、SVG 部分だけ抜き出して.svg
で保存、インポート、をしていたりします。
おわりに
両者とも、いろいろとカスタマイズできます。詳細はそれぞれの公式を参照ください。PlantUML はインラインでスタイルを変えられるところ便利ですが、Mermaid は CSS を使えるので独自記法を覚えなくて良いという点がメリットでしょうか。
もう一度、それぞれの公式を書いておきます。