この記事では、Windows 環境に Visual Studio Code と PlantUML をセットアップする手順を説明します。
PlantUML とは
PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。
- シーケンス図 / Sequence diagram
- ユースケース図 / Usecase diagram
- クラス図 / Class diagram
- アクティビティ図 / Activity diagram
- コンポーネント図 / Component diagram
- 状態遷移図 / State diagram
- オブジェクト図 / Object diagram
環境
下記の環境で動作確認しました。
- Windows 10 Pro (64bit)
- Visual Studio Code 1.11
- Java SE Runtime Environment 8 Update 121
- Graphviz 2.38
- PlantUML 1.4.0 (plugin)
セットアップ
Visual Studio Code のインストール
- Visual Studio Code を開く
- [Download for Windows] を押してインストーラーをダウンロードする
- ダウンロードしたインストーラーを実行する
- 例）VSCodeSetup-1.11.1.exe
PlantUML のセットアップ
1. Java のインストール
PlantUML の実行には、Javaの実行環境が必要となります。
- java.com を開く
- [無料Javaのダウンロード]ボタンを押す
- [同意して無料ダウンロードを開始]を押し、インストーラーをダウンロードする
- ダウンロードしたインストーラーを実行する
- 例）JavaSetup8u121.exe
2. Graphviz のインストール
PlantUML が UML を描画するために使用しているソフトウェアです。
- Graphviz - Graph Visualization Software を開く
- 左側のバーから Download を開く
- License ページの末尾にある[Agree]を押す
- Download ページの Windows の Stable and development Windows Install packages をクリックする
- MSIファイルを選択してインストーラーをダウンロードする
- ダウンロードしたインストーラーを実行する
- 例）graphviz-2.38.msi
インストール先を変更した場合には、環境変数"GRAPHVIZ_DOT"でパスを指定する必要があるそうです。
3. PlantUML のインストール
Visual Studio Marketplace で PlantUML をインストールします。
- Visual Studio Code を起動する
- "Ctrl + P" と入力して、Quick Open を開く
- Quick Open に ext install plantuml と入力して、Enter キーを押す
- 検索結果から PlantUML を選択し、[インストール]を押す
- インストール完了後に[再度読み込む]を押して Visual Studio Code を再起動する
動作確認
1. プレビュー表示
- Visual Studio Code を起動する
- 拡張子 .pu で新規ファイルを作成する
- ファイルに以下を入力し、**"Alt + D"**でプレビューを表示する
test.pu
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml
2. 画像ファイルとして出力
- "Ctrl + Shift + P" でコマンドパレットを開く
-
PlantUML: Export Current Diagram と入力する
-
png, svg, eps, pdf, vdx, xmi, scxml, html から出力形式を選択する
PNGファイルとして出力した時のディレクトリ構成は、以下のようになります。
ディレクトリ構成
test.pu
test/
シーケンス図.png
出力結果のPNGファイルは以下のようになります。
PlantUML言語リファレンス
PlantUMLの文法は、"PlantUML Language Reference Guide"としてPDFファイルが提供されています。
- http://plantuml.com/download を開く
- PlantUML Language Reference Guide にある日本国旗を選択する
- "PlantUML_Language_Reference_Guide_JA.pdf"がダウンロードされる
なお、plantuml.com でも同様の説明がありますが、広告表示が鬱陶しいため、PDFファイルの方が読みやすいです。
終わりに
まだまだ PlantUML を使い始めたばかりですが、他のUMLの描画ツールと比べて以下の点が気に入っています。
- テキストで UML を描けるため、Gitで管理しやすい
- 図の細かいレイアウト調整などを気にしなくて良い