VSCode の PlantUML の拡張のインストールと使い方

テキストファイルでUML図が描ける、PlantUML が便利そうなのでインストールします。
ここでは、PlantUMLをmacOSにインストールして使用します。
またVisual Studio Code(以下VSCode)に拡張をインストールして使用できるようにします。

インストール

Graphviz をインストールする方法はいくつかありますが、
Homebrewからインストールすると良いと思うので、Homebrewをインストールしていない場合はインストールします。

３−１、Xcode をインストールします

Homebrew のインストールにはXcode（App Storeからインストールできます）が必要なので、インストールします。
※ Xcodeは大きい（５GBくらい？）ので、インストールには時間がかかると思います。

続いて　Command Line Tools for Xcode をインストールします。

$ xcode-select --install
xcode-select: note: install requested for command line developer tools

３−２、Homebrew をインストールします。

Homebrew のサイトにインストール用のスクリプトが載っているので、コピーしてターミナルで実行します。
The missing package manager for macOS — The missing package manager for macOS

３−３、Graphvizをインストールします

次のコマンドをターミナルで実行してGraphviz をインストールします。

$ brew install graphviz

４、VSCode の PlantUML の拡張をインストールします。

※VSCode の PlantUML の拡張をインストールすると、PlantUMLも自動的にインストールされます。

VSCodeにて、「拡張機能」ボタンをクリックします。

f:id:tksfj17:20180302220911p:plain

検索窓にてPlantUML を検索します。ここではjebbs さんが作成されたものを使用します。

f:id:tksfj17:20180302221017p:plain

いちど、VSCode を再起動します。

以上でPlantUML がインストールされました。

PlantUML の使い方

１、はじめに、テキストファイルでUMLを定義します。

２、ファイルの拡張子

ファイルには以下の拡張子をつけると、PlantUMLのファイルであると認識されます。

.wsd
.pu
.puml
.plantuml
.iuml

３、VSCode でプレビュー表示

VSCodeでは、Option + dキーにて、UML図のプレビュー表示を表示できます。

f:id:tksfj17:20180302221632p:plain

４、作成したUML図のエクスポート／保存

fn + F1キー、または shift + command + pキー　を押すと、コマンドパレットが表示されます。

「PlantUML:] カーソル位置のダイアグラムをエクスポート

（「PlantUML: Export Current Diagram」）」　と入力し、クリックします。（補完が効きます）
f:id:tksfj17:20180302222143p:plain

保存したいファイルタイプをクリックします。

UML図を定義したファイル名でディレクトリが作られ、その中にUML図がエクスポート／保存されます。

【試しに作成したUML定義ファイルのサンプル】

@startuml
  left to right direction

  package "予定調整くん" as schedule-arranger {
    entity "ユーザー：user" as user {
      + userId:数値:GitHubのユーザーID [主キー]
      --
      username:文字列:GitHubのユーザー名
    }

    entity "予定:schedule" as schedule {
      + scheduleId:UUID:予定ID [主キー]
      --
      scheduleName:文字列:予定名
      memo:文字列:メモ
      # createdBy:数値:作成者、ユーザーID [INDEX] [外部キー]
      updatedAt:日時:更新日時
    }

    entity "候補日:candidate" as candidate {
      + candidateId:数値:候補日程ID [主キー]
      --
      candidateName:文字列:候補日程名
      scheduleId:UUID:関連する予定ID [INDEX]
    }

    entity "出欠:availability" as availability {
      + candidateId:数値:候補日程ID [主キー] [外部キー]
      + userId:数値:GitHubのユーザーID [主キー] [外部キー]
      --
      availability:数値:出欠ID
      scheduleId:UUID:関連する予定ID [INDEX]
    }

    entity "コメント:comment" as comment {
      + scheduleId:UUID:関連する予定ID [主キー]
      + userId:数値:GitHubのユーザーID [主キー] [外部キー]
      --
      comment:文字列:コメント
    }
  }

user ----o{ schedule : 1 to 0...*
user ----o{ comment : 1 to 0...*
user ----o{ availability : 1 to 0...*
candidate ----|{ availability : 1 to 1...*
schedule ----|{ candidate : 1 to 1...*
schedule ----o{ comment : 1 to 0...*
@enduml

【作成されるUML図】
f:id:tksfj17:20180302223025p:plain