shuhelohelo’s blog

Xamarin.Forms多めです.

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関係のツールのダウンロードはどこから何を選択したらいいのかわかりにくいです。個人的に。

さて、「同意して無料ダウンロードを開始」ボタンをクリックしてダウンロードしてインストールします。 f:id:shuhelohelo:20190427142429p:plain

インストーラのダウンロードはこちらから。 f:id:shuhelohelo:20190427141556p:plain 「Stable 2.38 Windows install packages」をクリックし、「graphviz-2.38.msi」をダウンロードして、インストール。

Graphvizの実行ファイルへパスを通します。 環境変数PathC:\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
  1. VSCodeでPlantUML拡張機能をインストール

拡張機能」のタブを開いて検索欄にplantumlと入力して検索するとPlantUML(作者:jebbs)という名前の拡張機能が見つかります。

f:id:shuhelohelo:20190427143419p:plain

これをインストールします。

動作確認

適当にファイルを作成します。 ファイル名、拡張子はなんでも問題ありません。 しかし、拡張子に関しては適切なものを選択しておくとシンタックスハイライトが効くので便利です↓。 f:id:shuhelohelo:20190427144412p:plain

拡張子は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が表示されます。 f:id:shuhelohelo:20190427144632p:plain

なんかプレビューが表示されない

自分が経験した症状としては、PlantUMLの記述は正しいのにプレビュータブには赤いバツ印が表示されUMLが表示されないというものでした。

いろいろ調べて、StackOverFlowなどで紹介されている方法を試したり、拡張機能をインストールし直したりして2時間ほど費やしましたが、結局問題は解決できませんでした。

そこで、諦めてVSCodeをアンインストールしてから再インストールしました。

VSCodeにPlantUML拡張機能をインストールしてPluntUMLを記述したファイルを開いてプレビューを表示させたら何事もなく表示されて拍子抜けしました。

解決方法呼べるようなものではないですが、困ったらとりあえずVSCodeを再インストールするというのは選択肢の一つです。

学び

困ったら再インストール。