AWSを使ってサーバーレスなWebアプリ開発を行っています。
サーバーレスな分、自分で作っていても訳がわからなくなるので、適切なドキュメント管理を目指しています。
今回は「シーケンス図」を作っていきます！
Lv1 とにかく一旦作ってみる
シーケンス図とは？
そもそもシーケンス図とはなんぞや。ざっくりどう書くんだ？
を以下記事でお勉強します。
ひとまず書いてみる
Mermaid Graphical Editorを使ってみました。
vscode上でポチポチ画面をいじりながら、シーケンス図を作成できて、
ついでにコードも生成してくれる神拡張機能です。
一番左のアイコンで、「ライフライン」を
左から２番目のアイコンで、「メッセージ」を書けます。
あらちょー簡単！
余談ですが、
Mermaidとは、マークダウン形式でコードっぽいモノを書くと勝手にシーケンス図を書いてくれる便利ライブラリ見たいです。
そのMermaidをGUIで書けるよー。というのがMermaid Graphical Editorみたいです。
Lv2 もうちょい細かい仕様を加える
実行仕様
「実行仕様（別名：制御フォーカス）」はライフライン上で処理が実行されていることを意味します。もちろん、実行仕様はライフライン上に設置されます。
この実行仕様なるものを付け加えたいです。
色々調べたんですが、Mermaid Graphical Editorを使って追加する方法がわかりませんでした。
しぶしぶmermaidのコード実装方法を勉強します。。。
以下のサイトより、矢印の後ろに+か-を記入すればいいみたいです。
+-を付け加えるくらいなら、GUIで操作できなくても良いでしょう。
注釈
以下画像で緑にハイライトされているタグっぽいアイコンをクリックすると注釈を入れられます。
注釈を入れられる場所は、横方向（ライフラインの左、ライン上、右）と縦方向（request、response）の組み合わせで選択可能です。
例えば、ライフラインAの右側 × requestの後に注釈を入れるとこんな感じ。
今回の例で言うと、ライフラインBの左側に注釈を入れても同じような結果が得られます。
「処理の種類」を加える
そろそろコードへの耐性も出来てきたので、こちらもMermaidでどう描くのかを調べました。
例えば、IF文を書くならこんな感じ。
IFはGUI操作よりもコードで書き加えた方が楽でした。
（IF文=altの文はGUIで記載できたけど、ELSE文の書き方がわからなかったので。）
しかしLoopはGUIを使った方が書きやすいです。
以下画像の緑にハイライトされているアイコンをクリックして、
①Loopの始点を定める②終点を定める、とLoopをシーケンス図に書き加えられます。
Lv3 根本を深く知る
ここまで出来てくると、
「そもそもメッセージに記載すべき粒度はなんだ？」とか、
「IF文の処理を書き加えるべき時と、そうでない時の差はなんだ？」が気になってきます。
（個人的には、ログインの成功失敗のIF文はいらない気がする。）
このシーケンス図は、UML(=統一モデリング言語)というプログラミング界における一般的な規格みたいなので、以下記事を読むなどして理解を深めるのが良いと思います。