mermaidjsでシーケンス図を書く方法を紹介します。 まずはJavaScriptファイルを読み込んでおきます。準備はこれでOKです。

<script type="text/javascript" src="mermaid.min.js"></script>

それでは、シーケンス図を書いてみましょう。 mermaidjsでシーケンス図を書く場合は、div要素のclassにmermaidと指定します。

<div class="mermaid">
  sequenceDiagram
    ルフィ->ゾロ: 仲間
</div>

div要素の最初に"sequenceDiagram"と書く必要があります。 上の例だと、以下のようなシーケンス図になります。 デフォルトだと、図の上と下に、アクター(シーケンスの登場人物)の名前が表示されます。 上だけに表示するようにしたり、アクターの四角を小さくしたりは、以下のようにmermaidを初期化すればよいです。

mermaid.initialize({
  sequence: {
    diagramMarginX: 50, // シーケンス図と周囲のマージン(横の幅)
    diagramMarginY: 20, // シーケンス図と周囲のマージン(縦の幅)
    actorMargin: 200, // アクター同士の距離
    width: 100, // アクターの四角のサイズ(横幅)
    height: 30, // アクターの四角のサイズ(高さ)
    boxTextMargin: 5,
    mirrorActors: false // シーケンスの最後にアクターを表示しないなら、false
  }
});

それでは、別の例を試してみます。

<div class="mermaid">
  sequenceDiagram
    ゾロ->>サンジ: 斬る
    サンジ->>ゾロ: 蹴る
</div>

ゾロとサンジの間の矢印の向きは、mermaidが自動的に決定してくれます。 ゾロを左に、サンジを右にしたままで、サンジから矢印を開始したい場合は、"participant"で、位置を宣言します。 participant宣言したアクターから順番に、左から描画されます。

<div class="mermaid">
  sequenceDiagram
    participant ゾロ
    participant サンジ
    サンジ->>ゾロ: 蹴る
    ゾロ->>サンジ: 斬る
</div>

実線ではなく点線にしたい場合は、ハイフンを2個つなげます。

<div class="mermaid">
  sequenceDiagram
    participant ゾロ
    participant サンジ
    サンジ->>ゾロ: 蹴る
    ゾロ-->>サンジ: 斬る
</div>

このように、mermaidjsを使うと、簡単にシーケンス図を書くことができます。