2021/05/03
vscodeでPlantUMLを使う
vscodeでPlantUMLを使いたくなったのでプラグインインストールして動かすまでの手順を備忘録として記載します。
インストール手順
- Javaのインストール
PlantUMLを動かすためにはJavaが必要なのでインストール
Pathを通して置くことを忘れずに。
- Graphvizのインストール
PlantUMLのダイアグラムの座標計算を行うために必要?みたいなのでインストール
(必須ではないとの記事も見かけましたが、この後インストールするプラグインのRequirementsに記載されていたのでインストール必須だと思います。)
- vscode上でPlantUML(プラグイン)のインストール
vscodeを立ち上げ、Ctrl+P(macの場合は⌘ + p)します。
開いた小窓に下記をペースト。
ext install plantuml
今回はjebbsさんのを使います。
リファレンスはこちら
ここまで出来たら実際に動かしてみます。
プレビュー
vscode内にファイルを作成します。
サポートされている拡張子は下記の通り。
*.wsd, *.pu, *.puml, *.plantuml, *.iuml
作成したファイルで下記のように記載します。
@startmindmap test
* plantuml
** can make
*** mindmap
*** uml
*** class
** editor
*** vim
*** vscode
**** easy to use
@endmindmap
Alt + D でプレビューが表示されるはずです。
こんな感じで。
プレビューはリアルタイムで更新されます。
※うまく動かない場合はJavaのPathが通っているか確認すると良いかも知れません。
画像のエクスポート
作成したファイルを画像として保存したい場合は、コマンドパレットを開き(Ctrl + Shift + P もしくは ⇧⌘P)下記を入力してください。
PlantUML: Export Current Diagra
下記の中から拡張子を選択し、出力します。
png、svg、eps、pdf、vdx、xmi、scxml、html、txt、utxt、latex
出力結果はデフォルトでは下記のようになります。
配置場所:img/test.pu
出力結果:out/img/test/test.png
エクスポートpathの変更方法
出力結果のPathを変更したい場合、プラグインの設定を変更することで可能です。
例えば出力結果を配置場所と同じ所にしたい場合、下記のように記載してください。
"plantuml.diagramsRoot": "img",
"plantuml.exportOutDir": "img"
下記のように出力されます。
配置場所:img/test.pu
出力結果:img/test/test.png
余談
今回はローカルに色々入れて動かす手法を取りましたが、いちいち環境構築面倒なのでdockerでPlantUML用サーバ作って利用したい感が強いです。
-> (追記)作りました。 dockerで簡単にvscode+PlantUMLの環境構築をする