Edited at

Visual Studio Code で UML を描こう!

More than 1 year has passed since last update.

この記事では、Windows 環境に Visual Studio CodePlantUML をセットアップする手順を説明します。


PlantUML とは

PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。


  • シーケンス図 / Sequence diagram

  • ユースケース図 / Usecase diagram

  • クラス図 / Class diagram

  • アクティビティ図 / Activity diagram

  • コンポーネント図 / Component diagram

  • 状態遷移図 / State diagram

  • オブジェクト図 / Object diagram


環境

下記の環境で動作確認しました。


セットアップ


Visual Studio Code のインストール



  1. Visual Studio Code を開く

  2. [Download for Windows] を押してインストーラーをダウンロードする

  3. ダウンロードしたインストーラーを実行する


    • 例)VSCodeSetup-1.11.1.exe




PlantUML のセットアップ


1. Java のインストール

PlantUML の実行には、Javaの実行環境が必要となります。



  1. java.com を開く

  2. [無料Javaのダウンロード]ボタンを押す

  3. [同意して無料ダウンロードを開始]を押し、インストーラーをダウンロードする

  4. ダウンロードしたインストーラーを実行する


    • 例)JavaSetup8u121.exe




2. Graphviz のインストール

PlantUML が UML を描画するために使用しているソフトウェアです。



  1. Graphviz - Graph Visualization Software を開く

  2. 左側のバーから Download を開く

  3. License ページの末尾にある[Agree]を押す

  4. Download ページの Windows の Stable and development Windows Install packages をクリックする

  5. MSIファイルを選択してインストーラーをダウンロードする

  6. ダウンロードしたインストーラーを実行する


    • 例)graphviz-2.38.msi




インストール先を変更した場合には、環境変数"GRAPHVIZ_DOT"でパスを指定する必要があるそうです。



3. PlantUML のインストール

Visual Studio Marketplace で PlantUML をインストールします。


  1. Visual Studio Code を起動する


  2. "Ctrl + P" と入力して、Quick Open を開く

  3. Quick Open に ext install plantuml と入力して、Enter キーを押す


  4. 検索結果から PlantUML を選択し、[インストール]を押す


  5. インストール完了後に[再度読み込む]を押して Visual Studio Code を再起動する


動作確認


1. プレビュー表示


  1. Visual Studio Code を起動する

  2. 拡張子 .pu で新規ファイルを作成する

  3. ファイルに以下を入力し、"Alt + D"でプレビューを表示する


test.pu

@startuml

title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml


2. 画像ファイルとして出力



  1. "Ctrl + Shift + P" でコマンドパレットを開く


  2. PlantUML: Export Current Diagram と入力する



  3. png, svg, eps, pdf, vdx, xmi, scxml, html から出力形式を選択する


PNGファイルとして出力した時のディレクトリ構成は、以下のようになります。


ディレクトリ構成

 test.pu

test/
シーケンス図.png

出力結果のPNGファイルは以下のようになります。


PlantUML言語リファレンス

PlantUMLの文法は、"PlantUML Language Reference Guide"としてPDFファイルが提供されています。



  1. http://plantuml.com/download を開く

  2. PlantUML Language Reference Guide にある日本国旗を選択する

  3. "PlantUML_Language_Reference_Guide_JA.pdf"がダウンロードされる

なお、plantuml.com でも同様の説明がありますが、広告表示が鬱陶しいため、PDFファイルの方が読みやすいです。


終わりに

まだまだ PlantUML を使い始めたばかりですが、他のUMLの描画ツールと比べて以下の点が気に入っています。


  • テキストで UML を描けるため、Gitで管理しやすい

  • 図の細かいレイアウト調整などを気にしなくて良い


参考情報