[Mac版] Visual Studio CodeでPlantUMLを使える環境を構築

Macで「Visual Studio Code （VSCode）」で「PlantUML」を使用するための環境構築について記載します。

PlantUMLとは

PlantUMLは下記UMLをテキストで素早く描くためのオープンソースです。

メリットとしては以下が挙げられます。

他にもありますが、ここに書いただけでも素晴らしい。

VSCodeでPlantUMLを使える環境を構築する際の全体の流れは以下となります。

さっそく、次のセクションから環境構築を開始します。

以下のコマンドでVSCodeをインストールします。
※事前にHomebrewをインストールしておく必要がありますので注意。

$ brew install visual-studio-code

PlanutUMLを動かすために、JavaとGraphvizをインストールします。

Java :PlantUMLを動かすためのプラットフォーム
Graphviz: PlantUMLでは図の位置計算で必要となる

以下のコマンドでJavaをインストールします。

$ brew install --cask adoptopenjdk

インストールが出来たか確認します。
以下のコマンドでバージョンが表示されたら問題ありません。

$ java --version

以下のコマンドでGraphvizをインストールします。
依存関係のあるソフトウェアもインストールされるため、この操作には時間がかかります。

$ brew install graphviz

VSCodeでPlantUMLのプラグインを追加します。

まず、画面左側のタブからExtensionsを選択して検索ボックスに「PlantUML」と入力します。
すると、一番上に「PlantUML」が表示されるのでクリックして、画面中央の「Install」ボタンをクリックしてインストール完了です！

一度VSCodeを再起動して、新しいファイルに以下を貼り付けましょう。

@startuml
title シーケンス図
クライアント -> サーバ: リクエスト
サーバ --> クライアント: レスポンス
@enduml

⌥ (Option) + d キーを押すとPlantUML Previewの画面が表示され、中央に「Processing…」と表示がされます。
その後、以下のような表示になればOKです！

ファイルの保存についてですが、以下の拡張子で保存することでPlantUMLのファイルとして認識されます。
個人的には .pu を使用しています。

以上で、Visual Studio Code（VSCode）でPlantUMLを使う環境の設定は終了になります。