LoginSignup
49
39

More than 1 year has passed since last update.

Mac の VSCode に PlantUML を導入

Last updated at Posted at 2020-01-19

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 で利用する

PlantUML 用の拡張をインストールする。
image.png
インストールが完了したら VSCode を再起動。

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

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

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

image.png
少し時間をかけた後に上記の図が描写された!

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

画像として保存

⌘(command) + ⇧(shift)+ P でコマンドパレットを開き、 Export Current File Diagrams を選択。
image.png
その後ファイル形式を聞かれるので、好きな形式を選択。
image.png
少し時間が経った後、 以下の通知が出れば作成完了。
image.png

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

GitHub 上で管理・閲覧する。

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

詳しい書き方

Reference

49
39
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
39