【Tool】コードでシーケンス図が簡単に書けるSequenceDiagram使ってみた

# シーケンス図書くのめんどくさい
ExcelやFigmaとか図形を直接動かしてシーケンス図を書くのぶっちゃけめんどくさい。。
コードでシーケンス図書けるToolないかなと探していたところ、[SequenceDiagram](https://sequencediagram.org/)というWebサービスを見つけたので紹介いたします。

# SequenceDiagramとは
・登録不要で使えるシーケンス図作成WEBサービス
・画像/SVGで保存できる　
・URLで共有などもできる

## 実際に使ってみよう

### タイトルとオブジェクトの生成
**title**でシーケンス図
**actor**でシステム外のオブジェクト
**participant**でシステム内のオブジェクト

```text
title テスト図

actor User
participant 入力画面
participant 結果画面
participant Flutter層
participant Native層
participant iOS層
participant Android層
participant OS層
```
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/c46b8873-86c3-4646-92dc-810ab8043b29.png)

### 処理の流れ
先ほど定義したオブジェクトを使って処理の流れを書きます。

```text
// オブジェクト->オブジェクト:表示したいテキスト

User->入力画面:測定ボタン押下
入力画面->Flutter層:測定開始
Flutter層->Native層:scanStart()
```
![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/541334d8-36a2-a6ba-c965-26f093b97831.png)

### 矢印の種類
以下のように計４種類の矢印を書くことができます。

```text
User->Test1: 入力
User-->Test2: 入力
User->>Test3: 入力
User-->>Test4: 入力
User<-Test5: 出力
User<--Test6: 出力
User<<-Test7: 出力
User<<--Test8: 出力
```
![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/35a13b4f-12af-9a2b-a104-fab96da7ccf0.png)

### 条件分岐
以下のようにaltで条件分岐を生成でき、条件の数に応じてelseで追加できます。

```text
alt Test1
User->Test1: 入力
User<-Test1: 出力
else Test2
User-->Test2: 入力
User<--Test2: 出力
else Test3
User->>Test3: 入力
User<<-Test3: 出力
else Test4
User-->>Test4: 入力
User<<--Test4: 出力
end
```
![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/a1d4c445-399f-ea9e-2082-6f7431843557.png)

### ループ処理
以下のようにループ処理もかけます。

```text
loop test1
User->Test1: 入力
User-->Test2: 入力
User->>Test3: 入力
end
loop
User-->>Test4: 入力
User<-Test5: 出力
User<--Test6: 出力
User<<-Test7: 出力
User<<--Test8: 出力
end
```
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/2b0738c5-ad35-76c9-8538-846ccdd47b1f.png)

### Note
何か説明を書き記したい場合は、以下のようにすることができます。

```text
note over User,Test1:This is note 
```
![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/87092008-8659-86ca-274a-35bd17490bda.png)

### 実際に書いてみた
簡単なシーケンス図を書いてみました。
結構短い時間で簡単にかけて、見た目もいい感じですね。

今回紹介した機能以外にも色々な機能があり、シーケンス図の作成にとても役に立つツールだと思うので、是非皆さんも使ってみてはいかがでしょうか。

```
title Test
actor User
participantgroup #cyan Flutter
participant 測定画面
participant 測定結果画面
participant Flutter層
end
participantgroup #orange Native
participant Native層
participant SDK
participant OS層
end

測定画面->Flutter層:測定ボタン押下
alt 年齢、性別がnullの場合
測定画面<-Flutter層:入力エラーを表示
end
Flutter層->Flutter層: 測定情報のリセット
note over Flutter層,Native層: MethodChannelを使用して\nFlutter層からネイティブ層に連携する
Flutter層->Native層:startMesure(age:Int, sex: Int)
Native層->SDK:測定開始
SDK->OS層: 測定開始
SDK<-OS層:測定結果返却
Native層<-SDK:測定結果返却
note over Flutter層,Native層: EventChannelを使用して\nネイティブ層からFlutter層に連携する
Flutter層<-Native層: detectData(data:Data)
alt 正常な値が返却された場合
Flutter層->測定結果画面:測定結果画面を表示
測定結果画面->User:測定結果画面を表示
else 不正な値が返却された場合
Flutter層->User:測定エラーダイアログを表示
end
```
![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357475/a78a4a4f-1cf8-e127-db00-864fc32f15c3.png)

# 参考
https://sequencediagram.org/