Programming Self-Study Notebook

勉強したことを忘れないように!　思い出せるように!!

VSCodeでPlantUMLを使うための環境構築

Markdown PlantUML



私は今まではmarkdownファイル内にmermaidでシーケンス図やブロック図を作成していたのですが、PlantUMLの方が多くのことができるらしいので、使ってみることにしました。

※ mermaidと違って環境構築が必要になります。

前提条件

OS エディター
Windows10 VSCode

参考サイト

以下がPlantUMLの日本語サイトと、日本語サイト内のクイックスタートガイドページです。

手順

動作確認用にPlantUMLの図表が書かれたmarkdownファイルを用意しておき、VSCode上のMarkdownファイルのプレビュー画面内にUMLが正しく表示がされるようにします。 （いろいろ試行錯誤をしましたので、以下の手順の中に不要な工程があるかもしれませんがご了承下さい。）

手順０：準備（動作確認用のmarkdownファイルの作成）

環境構築が完了したことを確認するために、markdownファイルを作成しておきます。

# 動作確認用の記述です

以下でシーケンス図が表示されるはずです。

 ``` plantuml
@startuml
title シーケンス図
Webページ -> APIサーバー: リクエスト
APIサーバー --> Webページ: レスポンス
@enduml
 ```

<注意> 上記コードは「コードブロック表記部分の先頭」に半角スペースを入れています。（コードブロック記号を手軽にエスケープするための対応です。） コピペで使用する場合は「```」の前の半角スペースを削除して使用してください。

私の環境では以下のような画面が表示されます

まだプレビューが正しく表示されません。

手順１：Javaのインストール

Java8以上のバージョンのJavaがインストールされている必要があります。コマンドプロンプト等でjava -versionと入力すると、Javaのインストールの有無や、インストール済みのJavaバージョンを確認することができます。

以下が私のローカル環境での実行結果です。

>java -version
openjdk version "1.8.0_242"
OpenJDK Runtime Environment Corretto-8.242.08.1 (build 1.8.0_242-b08)
OpenJDK 64-Bit Server VM Corretto-8.242.08.1 (build 25.242-b08, mixed mode)

手順２：GraphVizのインストール

（注意）公式サイトには「Windows10以降の場合はインストール不用」とありましたが、私の環境ではこれをインストールしないと想定通り動きませんでした。

手順３：VSCodeに拡張機能を追加する

以下のプラグインを追加します。

  • PlantUML Previewer：
    • 最終的にこれをインストールすることでプレビューが表示されました。ただし、決め手になったのか確認するためにプラグインをuninstallしたところプレビュー表示はされ続けました。（ナゾです。）

手順４：PlantUMLのjarファイルをセットする

次はPlantUML公式サイトからjarファイルを取得して、VSCodeに登録します。

4-1：公式サイトからjarファイルをDLする

以下が日本サイトのDLページです。広告が多いので惑わされないようにしてください。私はMITライセンスのjarファイルをDLしました。

  • plantuml-mit-1.2024.3.jarという名称のファイルがDLされました。

4-2：jarファイルを適当なフォルダに保存する

保存したjarファイルをVSCodeに登録しますので、どこに保存したかを忘れないでください。

4-3：VSCodeの設定にjarファイルを登録する

VSCodeを起動して、設定画面を開き、保存したjarファイルを登録します。

  • セッティング画面はショートカットキー（「Ctrl+､」）で開くことができます。（メニューからだと「File ->Preferences->Settings」で開けます。）

  • Search settingsの領域にmarkdown-preview-enhanced.plantumlJarPathと入力してください。

  • Plantuml:Jarの項目に先ほど保存したjarファイルをフルパスで記載します。

結果

上記の作業を行うことでVSCode上でMarkdownファイルのプレビュー画面上にPlantUMLの表示を行うことができました。

さいごに

最終的にPlantuml:Jarの記述を削除し、PlantUML Previewerをuninstallしてもプレビューは表示されています。環境構築を実施したときは一度でうまくいかなかったので、上記手順を前後しながら作業を行いました。なので無駄な工程が混ざっているかもしれませんし、そもそも再現性が無いかもしれません。現時点でなぜプレビューが表示されているのかよくわかりません。

なので、もしうまくプレビューが表示できていない人がいるなら、いろいろ試してみてください。 その際に上記手順で示した項目からいじってみるのが良いと思います。

誰かの参考になればうれしいです。