Mac の VSCode に PlantUML を導入

4953 ワード
Mac VSCode plantuml Mac テキストリンク

Overview

プライベートの開発タスクの依存関係を可視化するために、PlantUML を導入する。

インストール

brew コマンドを使って必要なパッケージを導入

$ brew install graphviz
$ brew install adoptopenjdk --cask
$ brew install plantuml

brew コマンド自体がない場合は、以下でインストールしてから再実行する。

# コマンドがない！
$ brew install XXX
bash: brew: command not found

# インストール
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# インストール確認
$ brew -v
Homebrew 2.2.3
Homebrew/homebrew-core (git revision a0d66; last commit 2020-01-19)
Homebrew/homebrew-cask (git revision 4bb1; last commit 2020-01-19)

plantuml は Java が必要とのことで、入っていない場合は以下のエラーが表示される。


$ brew install plantuml
plantuml: Java is required to install this formula.
Install AdoptOpenJDK with Homebrew Cask:
  brew cask install adoptopenjdk
Error: An unsatisfied requirement failed this build.

VSCode で利用する

PlantXML 用の拡張をインストールする。

インストールが完了したら VSCode を再起動。

*.pu 形式のファイルを作成し、以下の様に記入してみる。

@startuml
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
@enduml

その後、⌥(option) + D を入力すると。。。

↓

少し時間をかけた後に上記の図が描写された！

一度プレビューを表示すれば、後はリアルタイムで更新が反映されていくので確認しつつ修正ができる。これは便利。

画像として保存

⌘(command) + ⇧(shift)+ P でコマンドパレットを開き、 Export Current File Diagrams を選択。

その後ファイル形式を聞かれるので、好きな形式を選択。

少し時間が経った後、 以下の通知が出れば作成完了。

今回の場合、test.um から /out/uml/test/test.png を生成した。
生成ファイルのディレクトリが独自に作られるので、最初は少し迷うかもしれない。

GitHub 上で管理・閲覧する。

PlantUML Viewerを使うことで、GitHub 上のテキスト形式の UML図 を描写して確認することが可能。
確認する際は、そのファイルをGitHub上のRaw指定で表示する必要あり。

詳しい書き方

Reference