過去にVSCodeで図形を書くための拡張機能としてDraw.ioの記事を書きました。
このDraw.ioでもシーケンス図やクラス図など書けなくはないですが、基本的には自分で図形を書いていく形になります。
この他にドキュメントを書くような形で図形を書くことができるPlantUMLというのがあります。
今回はそのPlantUMLをVSCodeで使うための手順の備忘録となります。
基本的には参考資料に挙げているページ様の内容の通りなので、詳しくはそちらを参照してください。
では、始めます。
１：Java JDKのインストール
Plant UMLをプレビューするためにJavaが必要なのでJava JDKをインストールします。
以下のMicrosoftのページを開きます。
ページを少しスクロールするとJDKのダウンロードファイルのリンク一覧が出てくるので、環境に合ったものを選択してダウンロードします。自分の場合はWindows11の64bitなので赤枠の部分のインストーラ形式のものを選択しました。
ダウンロードしたインストーラファイルをダブルクリックで起動させます。
インストーラが起動するので「次へ」をクリックします。
契約関係の文面が出てくるので「使用許諾契約書に同意します」にチェックを入れて「次へ」をクリックします。
インストール先の選択画面になります。特に変える必要はないと思うのでデフォルトのまま「次へ」をクリックします。
インストールするかの確認画面が出てくるので「インストール」をクリックします。
インストールが終わると以下の画面になるので「完了」をクリックして終了させます。
２：Plant UMLのVSCode拡張のインストール
VSCodeを起動させ、左側メニューにある「拡張機能」アイコンをクリックして検索欄に「plantuml」と入力して出てきた一番上の「インストール」をクリックします。
インストールが完了すると以下のような画面が表示されます。アンインストールのボタンが出ていればインストールは完了しています。
３：実際に試してみる
新規ファイルとして「test.pu」と作成して、以下の内容を記述して保存します。
@startuml title シーケンス図 アリス -> ボブ: リクエスト ボブ --> アリス: レスポンス @enduml
そのファイルをVSCodeで開いて「Alt + Dキー」を押下すると、右側にUMLとしてプレビューすることができます。
プレビュー画像が表示されない場合はJavaが入っていないので、１の手順でJava JDKをインストールしてください。
以上がVSCodeでPlantUMLを使う方法になります。
ドキュメントのように記述していく形で差分も取りやすいので、Gitなどで管理するのであればかなり有用だと思います。
・参考資料
