mermaid.jsのシーケンス図の書き方
mermaid.js使ってますか。
このブログでも何度か紹介させていただいてますが、mermaid.js は JavaScript 製の作図ツールで、テキストベースで図の作成ができるスグレモノです。
WordPressの記事中に直接埋め込めるようにしているのも相まって、ブログ記事内でもたまに使ったりしてます。
以前書いた、mermaid.jsのフローチャートの書き方 が結構読まれているみたいだったので、今回はシーケンス図の書き方も紹介したいと思います。
英語ですが公式ドキュメントもありますのでそちらも合わせて参照ください。
環境
- macOS Mojave 10.14
- mermaid.js 7.0.10
環境構築
以前フローチャートの書き方を紹介した時に環境構築の方法を書きましたので、そちらを参照ください。
mermaid.js のシーケンス図の書き方
基本
まずは基本的なコード。mermaid.js公式のサンプルを拝借します。
|
1 2 3 4 |
sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! |
sequenceDiagram でシーケンス図であることを宣言し、あとはアクタ同士をメッセージでつないでいく感じです。
- アクタ(上の例の Alice、John) は自動的に認識される（別途宣言しなくてもOK）
- アクタ同士を繋ぐメッセージの書き方で矢印の表示方法が変わる
:移行でメッセージのテキストを表示
フローチャートの書き方もそうでしたが、非常に書き方がシンプルなので、テキストからも内容が推測しやすい感じになってます。
アクタ
上述の通り、アクタは特に宣言しなくても、コード中に最初に登場した時点で自動で認識されます。
ただし、明示的に宣言することもできます。その場合は participant で最初に宣言します。
|
1 2 3 4 5 6 |
sequenceDiagram participant Client participant Server Client->>Server: ping Server-->>Client: pong |
これだけだとなんのありがたみも感じませんが、この書き方をすると Alias(別名) が使えるようになります。
Alias は、participant と as で使えるようになります。上の例だとこんな感じに。
|
1 2 3 4 5 6 |
sequenceDiagram participant c as Client participant s as Server c->>s: ping s-->>c: pong |
“アクタ ->> アクタ” の部分が短く書けるようになるので良いかと思います。
また、よくあるシーケンス図の書き方として、”オブジェクト名:クラス名” をアクタとして表示するものがありますが、これも as を使わないと実現できません。
“アクタ –> オブジェクト名:クラス名” という書き方をしようとすると、”:” 部分を mermaid.js の方で正しく解釈できないためです。（”:”以降がメッセージのテキストとして扱われてしまう）
メッセージ
アクタ同士を繋ぐメッセージの書き方で、グラフ中の表示方法を変えることができます。
6パターンしかないので全パターン書きます。
|
1 2 3 4 5 6 7 8 |
sequenceDiagram A ->> B: 実線矢印 B -->> A: 破線矢印 A -> B: 矢印なし実線 B --> A: 矢印なし破線 A -x B: バツ付き実線 B --x A: バツ付き破線 |
- ハイフン(
-) １つで実線、２つで破線。 >>で矢印、>で矢印なし、xでバツ付きの矢印
x のバツ付き矢印何に使うんだろうと思って調べてみたら、mermaid.js開発者の方が非同期呼び出し用に使うみたいなことを GitHubのissue で答えておりました。
一般的なのかな・・・。矢印の形状で同期/非同期を切り替えるものと思っていたので、ちょっと不思議な感じがします。
また、: からはメッセージに表示するテキストの内容ですが、これは省略することができないみたいです。
—– 2023/07/27 追記 —–
コメントにて情報提供いただきました。mermaid.js のバージョン8.9.0からは、--) で一般的な非同期処理に近い矢印の線が書けるようになっています。
詳しくは こちらのGitHubのissue を確認ください。
———————————–
アクティビティ
実行仕様とも言うそうですが、とにかく処理が実行中であることを示すために使います。
|
1 2 3 4 5 6 7 8 |
sequenceDiagram A ->>+ B: 活性化 B -->>- A: 非活性化 A ->>+ B: 活性化 B ->>+ B: さらに別の処理を呼び出し B -->>- B: 別の処理終わり B -->>- A: 非活性化 |
- メッセージに
+をつけると活性化、-をつけると非活性化 - 多段に活性化することもできる
+ と - はペアになってないと正しく表示されないみたいです。
ループ
シーケンス図中で繰り返し処理を行う箇所にはループの表現を使います。
|
1 2 3 4 5 |
sequenceDiagram loop 繰り返し条件 A ->> B: 繰り返し処理 end |
loop 条件 繰り返し処理 end という感じの構文ですね。
選択
どれか一つの処理のみが実行される場合に使います
|
1 2 3 4 5 6 7 |
sequenceDiagram alt 晴れの場合 親 ->> 子: 水筒をわたす else 雨の場合 親 ->> 子: 傘をわたす end |
alt 条件で最初の条件を、else 条件で以降の条件を記載するという構文のようです。
オプション
実行されない可能性がある処理を記述する時に使います。
|
1 2 3 4 5 |
sequenceDiagram opt 空腹なら 客 ->> 店: デザートを注文 end |
opt 条件 処理 end という感じの構文ですね。
注釈
シーケンス図上に注釈（コメント）を記述することができます。
|
1 2 3 4 5 6 7 8 |
sequenceDiagram A ->> B: 実線矢印 Note left of A: 左側に注釈 Note right of B: 右側に<br>注釈 Note over A, B: ２つのアクタの上に注釈 B ->> C: 実線矢印 Note over A, C: ３つ以上のアクタでも可 |
Noteで注釈であることを宣言し、その後のleft of,right of,overで表示場所を指定overでは３つ以上のアクタにまたがる注釈をつけることも可- 注釈中に
<br>で改行できる
さいごに
mermaid.js は手軽にかけて、表示も結構きれいなのでお気に入りです。
WordPress上でも書けるように環境構築したので、ブログでもさくっと使えます。
（今回の記事も全て直接ブログ上にmermaid.jsのコードを書いていて、画像を一つも使ってません。すごくない？）
ただ、本格的な UML を書こうとすると mermaid.jsのシーケンス図だと少し物足りないかなと思うこともありますね。
そういうときは PlantUML を使うことが多いです。
このあたりは使い分ければ良いかなと思います。
いずれにしても、テキストベースの環境はやはり良いです。手に馴染みます。
最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら、Twiter にてフォローいただけるとうれしいです。ブログ更新情報などもお届けします。
Follow @ryuta461
この記事をシェアする
“–)”
こちらで、一般的な非同期メッセージに使われる塗りつぶしなしの矢印が出せるようですね
情報ありがとうございます！
バージョン 8.9.0 で追加された書き方という情報を見つけたので、記事の方にも追加しておきます！