はじめに
- Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました
こんな方におすすめ
- シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢
できること
- VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる
- mermaid記法のコードも自動生成されるよ
個人的メリット
- mermaidの学習コスト0
- 紙で書くよりも修正しながら書きやすい
導入手順 （簡単7steps）
(1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする
(2) 新規mdファイルを作成する
(3) 以下のようにファイルに入力する
```mermaid
```
(4) すると、薄い文字でMermaidEditorと出てくるのでクリックする
(5) 右側にEditorが表示され、フローチャート、シーケンス図、クラス図が選択できるので作成したいものを選択
(6) 例えばシーケンス図だとライフラインや矢印などが選べるサブメニューが出てくるので、ポチポチしていきます
(7) 良い感じに書けます！ mermaid記法のコードも自動生成されます
↑例として私が自作したslack appで、メンションするとChatGPTからの応答が返ってくるアプリのシーケンス図を書いてみました（UML初心者すぎて色々間違っていたらすみません、、）
感想
フローチャート、シーケンス図、クラス図の作成は私のような初心者エンジニアにとってはハードルが高く活用できてなかったのですが、Mermaid Graphical Editorを利用するとサクサクっと書けるのでUMLを活用し始めるきっかけになりました。
これきっかけでつい最近からUMLを勉強し始めたのですが早速活用できまくっていて、APIで余分にDB接続している箇所に気付けたり、そのDB接続回数を減らすためにどこをどう改善したら良いなど図を活用しチームで議論できたりしています。
おまけ （自動生成されたmermaidをそのままqiitaに貼り付けてみた）
すごい！
さいごに
ここまで読んでいただきありがとうございました！
本記事が少しでも良いなと思った方はぜひ「いいね！」していただけるとめちゃくちゃ喜びますmm