概要

最近自分が、他人に伝える際に心がけていることの一つで、仕様を可視化して伝える、というものがあります。
今やっている案件で、今回の拡張機能「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分で大体書けるようになるのでよかったらぜひ！

Thank you!