ひとりマーメイド7日目
シーケンス図１
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではシーケンス図の記法を紹介します！
↓↓前回の記事はこちら
シーケンス図って何ですか！
前回の記事ではフローチャートの実用例について紹介しました。
今日はシーケンス図の記述について紹介します！
シーケンス図はプロセスの動作と順序を表す図です。上から下に見ていくとプロセスの流れを追うことができます。
mermaid
sequenceDiagram
App ->>+ API: GET /user:id
API ->>+ Server: auth
Server-->>-API: user-data
alt 200
API-->>App:OK
else 400
API-->>-App:error
end
基本の記法
先頭にダイアグラムの種類を宣言します。シーケンス図はsequenceDiagramです。続いて使用するモジュールや人物をparticipantで宣言しています。こちらは省略可能ですが、記述することでレンダリングの順序を指定することができます。
mermaid
sequenceDiagram
participant App
participant API
App ->> API: request
API -->> App: response
人物の宣言
actorで宣言すると人の形になります。
mermaid
sequenceDiagram
actor me
actor you
me ->> you: Thank you
you -->> me: You're welcome
ラベル
asで任意のラベルを付与することができます。ラベルを用いることで記述を簡略化することができます。
mermaid
sequenceDiagram
participant A as App
participant B as API
A ->> B: request
B -->> A: response
矢印の種類
矢印の形状を変えることができます。
mermaid
sequenceDiagram
a -> b : 直線
a --> b : 点線
a ->> b : 矢印
a -->> b : 点線矢印
a -x b : バツ矢印
a --x b : 点線バツ矢印
a -) b : オープン矢印
a --) b : 点線オープン矢印
一般的にレスポンスには点線が使用されます。
矢印とオープン矢印の違いは同期/非同期です。
活性/非活性
+で活性化-で非活性化することができます。
mermaid
sequenceDiagram
App ->> +API: request
API -->> -App: response
多重活性も可能です。
mermaid
sequenceDiagram
App -) +API: GET /user_name
App -) +API: POST /user_id
API --) -App: response
API --) -App: response
ノート
ダイアグラム中にノートを挿入することができます。
以下の3種類のポジションを指定できます。
- 右：
Note right of PARTICIPANT - 左：
Note left of PARTICIPANT - 中心：
Note over PARTICIPANT
mermaid
sequenceDiagram
participant App
Note right of App: note on right
Note left of App: note on left
Note over App: note over
2つの要素に重ねることもできます。3つ以上はできないようです。
mermaid
sequenceDiagram
participant App
participant API
Note over App, API: this is note
シーケンスナンバー
autonumberと記述すると自動でプロセスに番号が振られます。
mermaid
sequenceDiagram
autonumber
App ->> API: request
API ->> Server: connect
Server -->> API: OK
API -->> App: response
まとめ
シーケンス図の記述について紹介しました！
↓↓次回の記事はこちら！
参考