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

Other

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

スポンサーリンク

PlantUMLとは

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

  • シーケンス図 / Sequence diagram
  • アクティビティ図 / Activity diagram
  • コンポーネント図 / Component diagram
  • クラス図 / Class diagram
  • 状態遷移図 / State diagram
  • ユースケース図 / Usecase diagram
  • オブジェクト図 / Object diagram

メリット

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

  • テキストエディタで書くことができる(表示するには環境構築が必要)
  • テキストで管理するため、変更前後での差分がわかりやすい
  • UMLのレイアウト調整の工数を削減することができる
  • バージョン変更管理ツールのサーバ容量を抑えることができる

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

環境構築の全体の流れ

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

  1. Visual Studio Code(VSCode)をインストール
  2. PlantUMLで必要となるソフトウェアをインストール
  3. Visual Studio Code(VSCode)でプラグインを追加
  4. 動作確認

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

1. Visual Studio Code(VSCode)をインストール

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

$ brew install visual-studio-code

2. PlantUMLで必要となるソフトウェアをインストール

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

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

Javaをインストール

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

$ brew install --cask adoptopenjdk

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

$ java --version

Graphvizをインストール

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

$ brew install graphviz

3. Visual Studio Code(VSCode)でプラグインを追加

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

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

4. 動作の確認

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

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

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

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

  • .wsd
  • .pu
  • .puml
  • .plantuml
  • .iuml

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