中野's workspace

  • Profile
  • Privacy
  • Contact

2021/05/03

vscodeでPlantUMLを使う

  • #vscode
  • #PlantUML

目次

vscodeでPlantUMLを使いたくなったのでプラグインインストールして動かすまでの手順を備忘録として記載します。

インストール手順

  1. Javaのインストール

PlantUMLを動かすためにはJavaが必要なのでインストール
Pathを通して置くことを忘れずに。

  1. Graphvizのインストール

PlantUMLのダイアグラムの座標計算を行うために必要?みたいなのでインストール
(必須ではないとの記事も見かけましたが、この後インストールするプラグインのRequirementsに記載されていたのでインストール必須だと思います。)

  1. 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の環境構築をする

このエントリーをはてなブックマークに追加
  • Copyright © 2019. Makoto Nakano
  • ALL Tags