概要
最近自分が、他人に伝える際に心がけていることの一つで、仕様を可視化して伝える、というものがあります。
今やっている案件で、今回の拡張機能「Preview Mermaid」を活用できたので、ご紹介させていただきます
[拡張機能]Preview Mermaid
Command + Shift + P --> "Preview Mermaid" --> mermaid記法で
書いている箇所をクリックでプレビュー表示する、という拡張機能です
Preview Mermaidって？
その名の通り「Mermaid記法に則って記載されたものをPreviewしてくれる」もの。
Mermaid記法とは、Merkdowonっぽい、PlantUMLっぽい書き方で、UMLが記述することのできる記法のことです
[参考]https://mermaid-js.github.io/mermaid/#/
例
[シナリオ]
共通部品を作って、一緒に案件参加されている方に、使い方(仕様)を伝える
例えば、、、（極端な例）
「A」っていうクラス作りました。
呼び出し元でnewしてもらったら、XXXと、YYYYと、ZZZZを引数にしてもらって、
AAA()メソッド呼んだら、「B」のBBB（）メソッドが呼ばれるので、
そのレスポンスデータの”CCC”というキーでを使ってデータとって、
呼び出し元画面に、「A」クラスのZZZ()メソッドで値埋め込みできます
で、そこから、、、、、、、。
詳しくは、ソーストレースしてください、じゃお願いします！
...？
1mmもわからんわ、、、
VSCode"Preview Mermaid"を使うと。。。？(Mermaid記法例)
以下は、シーケンス図をmermaid記法で書いた記載例
VSCode"Preview Mermaid"を使うと。。。？(プレビュー)
プレビューすると、こんな感じ
※ Qiitaもプレビューできるんですね（この記事書いてて気づいた）
※ そもそもシーケンス図の書き方なってないわ〜はご容赦。。。
いかがでしょうか
極端例、や、ソース見るだけ、より
シーケンス図が理解の一助にはなっているのかな、と思います
まとめ
この手のツールってたくさんありますよね。
Mermaid記法より、PlantUMLの方が有名（だと思ってる）
ただ前職で、GitLab使ってて、GitLabはMermaid記法のプレビューに対応しているけど、PlantUMLはプラグイン入れないとダメだったので、
Mermaid記法でいいか、で採用した経緯があります
学習コストも特に高くないので、トライアンドエラーしながらで、１０分、15分で大体書けるようになるのでよかったらぜひ！