Mermaidのシーケンス図の書き方ー備忘録ー

はじめに

Mermaid でシーケンス図が書けるようになると、開発時の整理がかなり楽になるとよく聞きます。
しかし、開発初心者のうちは、そもそもシーケンス図はどう書けばいいのか、矢印の種類にはどんな意味があるのかといった点でつまずきます。

そこで本記事では、 Mermaid のシーケンス図における矢印の意味について、完全に自分用のメモとして整理してみました。
今回は矢印と上のやつです。

矢印

->>：リクエスト、処理を依頼

左から右へ処理を依頼します。

お願いする側 ->> 処理する側

sequenceDiagram
  Client->>Server: POST /login

-->>：レスポンス、結果を返却

処理結果を呼び出し元へ返します。

処理した側 -->> お願いした側

sequenceDiagram
  Server-->>Client: 200 OK

その他矢印

sequenceDiagram
  A->B: 線
  A-->B: 点線
  A<<->>B: 双方向の線
  A<<-->>B: 双方向の点線
  A-xB: バッテン
  A--xB: バッ点線 (?)
  A-)B: すごい矢印
  A--)B: すごい矢印点線

上のやつ

sequenceDiagram
  actor User

  participant Web@{ "type": "boundary" }
  participant API@{ "type": "control" }
  participant Service@{ "type": "control" }
  participant UserEntity@{ "type": "entity" }
  participant DB@{ "type": "database" }
  participant Users@{ "type": "collections" }
  participant Queue@{ "type": "queue" }

  User->>Web: 操作
  Web->>API: request
  API->>Service: execute
  Service->>UserEntity: create/update
  Service->>DB: save
  DB->>Users: insert
  Service-)Queue: enqueue job
  API-->>Web: response
  Web-->>User: result