,

[Document & Workflow] Visual Studio Code + okazuki PlantUML でテキストから UML を書く方法

公開日: 2016/11/09
更新日: 2018/10/09

テキストから UMLを生成する Visual Studio Code の機能拡張。
PlantUML を Mac に設定して利用する。

Contents

ライブラリのインストール

Java と Graphviz, PlantUML が必要との事なのでインストールする。

% brew install Graphviz PlantUML

Java

なければ brew cask install java できる。

Graphviz

インストール後、dot コマンドが利用できる。
動作を確認する。

% which dot
/usr/local/bin/dot

以下のファイルを用意し、

uml.dot
graph g{
    "Hello World"
    }

以下を実行すると PDF が生成される。

% dot -Tpdf uml.dot -o uml.pdf

2016-11-08_plantuml_01

PlantUML

インストール後、plantuml コマンドが利用できる。
動作を確認する。

% which plantuml
/usr/local/bin/plantuml

以下のファイルを用意し、

uml.txt
@startuml
A -> B: message
B --> A: response message
@enduml

以下を実行すると PNG が生成される。

% plantuml uml.txt

2016-11-08_plantuml_02

設定

拡張のインストール

Visual Studio Code にインストール。
Cmd + P を押して ext install okazukiplantuml を完了する。

2016-11-08_plantuml_03

環境変数を設定する

.zshrc などに $JAVA_HOME を設定する。

.zshrc
export JAVA_HOME=$(/usr/libexec/java_home)

さらに .zshrc などに $PLANTUML_JAR を設定する。
.jar ファイルの場所を指定する必要があるようなので探して設定する。

.zshrc
export PLANTUML_JAR="/usr/local/Cellar/plantuml/8048/libexec/plantuml.jar"

再起動

シェルとアプリを再起動しておく。

実行

Cmd + P の後、>plantUML ... でコマンドが実行できる。

補遺