https://shuhelohelo.hatenablog.com/entry/2019/04/27/145448

今更だけれども、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

Graphvizをインストール

インストーラのダウンロードはこちらから。 f:id:shuhelohelo:20190427141556p:plain 「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

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