LoginSignup
465
508

VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~

Posted at

はじめに

  • Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました

こんな方におすすめ

  • シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢

できること

  • VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる
  • mermaid記法のコードも自動生成されるよ

個人的メリット

  • mermaidの学習コスト0
  • 紙で書くよりも修正しながら書きやすい

導入手順 (簡単7steps)

(1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする
スクリーンショット 2024-04-30 21.50.33.png

(2) 新規mdファイルを作成する
(3) 以下のようにファイルに入力する

```mermaid
``` 

(4) すると、薄い文字でMermaidEditorと出てくるのでクリックする
スクリーンショット 2024-04-30 21.55.49.png

(5) 右側にEditorが表示され、フローチャート、シーケンス図、クラス図が選択できるので作成したいものを選択
スクリーンショット 2024-04-30 21.57.40.png

(6) 例えばシーケンス図だとライフラインや矢印などが選べるサブメニューが出てくるので、ポチポチしていきます
スクリーンショット 2024-04-30 21.59.29.png

(7) 良い感じに書けます! mermaid記法のコードも自動生成されます
スクリーンショット 2024-04-30 22.32.00.png

↑例として私が自作したslack appで、メンションするとChatGPTからの応答が返ってくるアプリのシーケンス図を書いてみました(UML初心者すぎて色々間違っていたらすみません、、)

感想

フローチャート、シーケンス図、クラス図の作成は私のような初心者エンジニアにとってはハードルが高く活用できてなかったのですが、Mermaid Graphical Editorを利用するとサクサクっと書けるのでUMLを活用し始めるきっかけになりました。

これきっかけでつい最近からUMLを勉強し始めたのですが早速活用できまくっていて、APIで余分にDB接続している箇所に気付けたり、そのDB接続回数を減らすためにどこをどう改善したら良いなど図を活用しチームで議論できたりしています。

おまけ (自動生成されたmermaidをそのままqiitaに貼り付けてみた)

すごい!

さいごに

ここまで読んでいただきありがとうございました!
本記事が少しでも良いなと思った方はぜひ「いいね!」していただけるとめちゃくちゃ喜びますmm

465
508
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
465
508