mermaidを使ってテキストでシーケンス図を作成

mermaid公式ドキュメント

テキストでシーケンス図を作れて便利。
ついでにガントチャートも。フローチャートも作れるが、ちょっと不格好でイマイチ。

同種のプロダクトとしてPlantUMLもあるが、Javaが必要だったりちょっとだけめんどくさい。
mermaidはさくっと使えてHTMLにも簡単に埋め込める。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="mermaid">
    sequenceDiagram
      # エイリアス
      participant cl as クライアント
      participant sv as サーバー
      participant db as データベース

      # データ取得コード
      cl ->>+ sv : データ登録開始
      Note right of cl : データ登録
      Note over sv : 入力チェック

      alt 入力チェック失敗
        sv -->>+ cl : エラーを返す
      end

      sv -->>+ cl : データ登録確認
      cl ->>- sv : 確認完了

      sv ->> db : データの登録

      sv -->> cl : データ登録完了
  </div>
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

公式のサンプルをざっと眺めれば何ができるか分かる。

hoge.mmdのようにmmd拡張子でシーケンス図部分だけ抜き出して別ファイルで書けばVSCodeでプレビューしながら編集できるので良い。
Preview Sequence Diagramsを使う。


sequenceDiagram
  # エイリアス
  participant cl as クライアント
  participant sv as サーバー
  participant db as データベース

  # データ取得コード
  cl ->>+ sv : データ登録開始
  Note right of cl : データ登録
  Note over sv : 入力チェック

  alt 入力チェック失敗
    sv -->>+ cl : エラーを返す
  end

  sv -->>+ cl : データ登録確認
  cl ->>- sv : 確認完了

  sv ->> db : データの登録

  sv -->> cl : データ登録完了

実際以下のような感じで表示。

参考