[Mac版] VSCodeで"PlantUML"の環境構築

PlantUMLとは

PlantUML は、以下のようなUMLをテキストベースで素早く作成するためのオープンソースです。

• シーケンス図
• ユースケース図
• クラス図
• オブジェクト図
• アクティビティ図
• コンポーネント図
• 配置図
• 状態遷移図（ステートマシン図）
• タイミング図

またUML以外にも以下のような図も対応してます。

• JSON data
• YAML data
• Network diagram (nwdiag)
• ワイヤーフレームによるグラフィカルインターフェース、UIモックアップ（salt）
• アーキテクチャ図
• 仕様及び記述言語 (SDL)
• Ditaa
• ガントチャート
• マインドマップ
• WBS図(作業分解図)
• AsciiMath や JLaTeXMath による、数学的記法
• ER図

公式サイト

PlantUMLのメリット

• テキストエディタで書くことができる（VSCode等）
• 作成・修正・流用(コピペ)が簡単にできる
• テキストで管理するため、Git等で変更前後での差分がわかりやすい
• UMLのレイアウト調整の工数を削減することができる
• テキストベースなのでファイルサイズが軽量

環境構築

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

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

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

Javaをインストール

brew install --cask adoptopenjdk

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

java --version

↓バージョン確認結果の例

Graphvizをインストール

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

brew install graphviz

VisualStudioCode（VSCode）でプラグインを追加

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

1. 画面左側のタブからExtensionsを選択して検索ボックスに「PlantUML」と入力
2. 一番上に「PlantUML」が表示されるので「Install」ボタンをクリック
3. インストールが完了したらVSCodeを再起動

動作確認

1. 新しいファイルを作成し、以下のテキストを入力します。

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

2. ⌥ (Option) + d キーを押し、PlantUML Previewの画面が表示します。
   以下のような表示になれば、正常に動作できています。
   

PlantUML 参考サイト

• PlantUML公式リファレンス

• PlantUML入門①: シーケンス図の書き方