動くMermaid：矢印アニメーションで通信を表現する

はじめに

Mermaid では、flowchart の矢印に animation を指定することで、通信が流れる様子をアニメーションとして表現できます。
アニメーションには slow や fast といった速度指定が用意されており、通信の速さの違いを視覚的に表すことができます。

公式ドキュメントでは仕様として紹介されていますが、この機能を使うと 動的な通信の流れやレスポンスの遅さ を直感的に表現できます。

この記事では、アニメーション（slow / fast）と矢印の長さを組み合わせて、通信の見え方を調整するシンプルな例を紹介します。

最小構成の通信例（Request / Response）

以下は、最もシンプルな通信の例です。

入力例

```mermaid
flowchart LR
    Client r1@---->|Request| Server
    Server r2@---->|Response| Client
    
    r1@{ animation: fast }
    r2@{ animation: slow }
```

Request は素早く届く一方で、Server 側の処理に時間がかかり、Response が遅れて返ってくる、という状況を表しています。
Mermaid は時間軸を直接持っていませんが、アニメーション速度の違いによって「どこで時間がかかっているか」 を視覚的に伝えることができます。

並列通信の中で一部が遅い例

次は、複数の API に並列でリクエストを投げるケースです。

入力例

```mermaid
flowchart TD
    Client r1@---> API1
    Client r2@---> API2
    Client r3@---> API3
    
    r1@{ animate: true }
    r2@{ animation: fast }
    r3@{ animation: slow }
```

すべて同時に通信していますが、API3 だけレスポンスが遅いことが、アニメーションを見るだけで直感的に分かります。
非同期処理や fan-out 構造の説明にも使いやすい表現です。

矢印の長さで「距離」を調整する

Mermaid では ----> のようにハイフンの数を増やすことで、矢印の長さ（距離）を調整できます。
アニメーションと組み合わせることで、遠い・重い・時間がかかる通信 をより強調できます。

正確な時間を表現するものではありませんが、「どの通信が支配的か」「どこがボトルネックか」を伝える図としては十分に有効です。

たとえば、通信速度や物理的な距離がレスポンスに影響するイメージとして、次のように表現できます。

入力例

```mermaid
flowchart TD
    Client r1@-----> API1
    Client r2@----> API2
    Client r3@---> API3
    
    r1@{ animation: fast }
    r2@{ animation: fast }
    r3@{ animation: slow }
```

おわりに

Mermaid の矢印アニメーションは装飾ではなく、通信の流れやレスポンスの感覚を伝えるための表現手段として使えます。シンプルな構成でも意味のある図が作れるので、設計説明やドキュメント作成時に活用できるかもしれません。

参考

• 公式ドキュメント（Turning an Animation On項参照）
  https://mermaid.js.org/syntax/flowchart.html