Visual Studio CodeでPlantUMLを使う
今更だけれども、Visual Studio CodeでマークダウンでUMLを描くことができるPlantUML拡張機能
を使ってみようと思ったところ、プレビューが全然動かなくて2時間も使ってやっと正常に動かすことができたので、誰かの役に立つかと思ってメモ。
インストール手順
- Javaランタイム(JRE)をインストール
PlantUMLはJavaランタイムで動作します。
まずはJREがインストールされているか確認します。
コマンドプロンプトで、
java -version
と入力してバージョン情報が取得できたらすでにインストール済みです。
C:\Users\hoge>java -version java version "1.8.0_211" Java(TM) SE Runtime Environment (build 1.8.0_211-b12) Java HotSpot(TM) Client VM (build 25.211-b12, mixed mode)
インストールされていなければOracleのサイトからダウンロードしてインストールします。 ずっと昔から思っていたのですが、Java関係のツールのダウンロードはどこから何を選択したらいいのかわかりにくいです。個人的に。
さて、「同意して無料ダウンロードを開始」ボタンをクリックしてダウンロードしてインストールします。
- Graphvizをインストール
インストーラのダウンロードはこちらから。 「Stable 2.38 Windows install packages」をクリックし、「graphviz-2.38.msi」をダウンロードして、インストール。
Graphvizの実行ファイルへパスを通します。
環境変数のPath
にC:\Program Files (x86)\Graphviz2.38\bin
(デフォルトのままであればここ)を追加します。
パスが通ったことを確認します。
コマンドプロンプトを立ち上げ直して、dot -version
と入力します。
バージョン情報が表示されればOKです。
C:\Users\hoge>dot -version dot - graphviz version 2.38.0 (20140413.2041) libdir = "C:\Program Files (x86)\Graphviz2.38\bin" Activated plugin library: gvplugin_dot_layout.dll Using layout: dot:dot_layout Activated plugin library: gvplugin_core.dll
「拡張機能」のタブを開いて検索欄にplantuml
と入力して検索するとPlantUML
(作者:jebbs)という名前の拡張機能が見つかります。
これをインストールします。
動作確認
適当にファイルを作成します。 ファイル名、拡張子はなんでも問題ありません。 しかし、拡張子に関しては適切なものを選択しておくとシンタックスハイライトが効くので便利です↓。
拡張子はpu
として、ここではtest.pu
というファイル名にします。
ファイルに以下の記述をコピペします。
@startuml skinparam component { FontColor black AttributeFontColor black FontSize 17 AttributeFontSize 15 AttributeFontname Droid Sans Mono BackgroundColor #6A9EFF BorderColor black ArrowColor #222266 } title "OSCIED Charms Relations (Simple)" skinparam componentStyle uml2 cloud { interface "JuJu" as juju interface "API" as api interface "Storage" as storage interface "Transform" as transform interface "Publisher" as publisher interface "Website" as website juju - [JuJu] website - [WebUI] [WebUI] .up.> juju [WebUI] .down.> storage [WebUI] .right.> api api - [Orchestra] transform - [Orchestra] publisher - [Orchestra] [Orchestra] .up.> juju [Orchestra] .down.> storage [Transform] .up.> juju [Transform] .down.> storage [Transform] ..> transform [Publisher] .up.> juju [Publisher] .down.> storage [Publisher] ..> publisher storage - [Storage] [Storage] .up.> juju } @enduml
Alt+D
を押すとプレビュー用のタブが開いてUMLが表示されます。
なんかプレビューが表示されない
自分が経験した症状としては、PlantUMLの記述は正しいのにプレビュータブには赤いバツ印が表示されUMLが表示されないというものでした。
いろいろ調べて、StackOverFlowなどで紹介されている方法を試したり、拡張機能をインストールし直したりして2時間ほど費やしましたが、結局問題は解決できませんでした。
そこで、諦めてVSCodeをアンインストールしてから再インストールしました。
VSCodeにPlantUML拡張機能をインストールしてPluntUMLを記述したファイルを開いてプレビューを表示させたら何事もなく表示されて拍子抜けしました。
解決方法呼べるようなものではないですが、困ったらとりあえずVSCodeを再インストールするというのは選択肢の一つです。
学び
困ったら再インストール。