初心者向け環境構築方法：VisualStudioCodeでplantumlを使う方法[VSCode PlantUml導入とPlantumlの概要]

VSCodeで使用するための下準備

VSCodeでPlantUMLを使用するためには、まず↓のツールをダウンロード・インストールする必要があります。

• graphviz <- 描画を行うツール
• OpenJDK <- Javaが必要

他に当然ですが、VSCodeが必要ですが、インストール方法は以前に記事を作成していますので↓を確認してください。

Visual Studio Codeを使用したPython開発環境の構築方法

前回の記事で、Pythonをパソコンに導入する方法について記載しました。まだ見ていない方で、導入の仕方がわからないという方は↓をみてみてください。では今回は、開発環境を構築するやり方と開発で使用するエディタについて記載します。一般的には、Anacondaというツールを使...

niyanmemo.com

2023.09.14

graphviz のインストール

↓からインストーラ(windows_10_cmake_Release_graphviz-install-8.0.5-win64.exe)をダウンロードしインストールする。

Download

Graph Visualization Software

graphviz.org

OpenJDK のインストール

OpenJDKはインストーラになっていないので、↓から一式をダウンロードして任意の場所に展開します。
※今回は、OpenJDKを使用していますが、公式のJavaがインストールできる方は、こちらのインストールは不要です。

JDK 20 Releases

jdk.java.net

VSCodeの設定

ここからは、VSCodeでの作業になります。

PlantUMLの拡張機能をインストール

Extentionから、PlantUMLをインストールします。

まず以下のようにExtention画面を表示します。

検索窓に、「plantuml」と入力

「Install」をクリックすれば作業終了です。

VSCodeの設定

今回、OpenJDKを使用しますので、Javaが環境変数に設定されていない状態ですので、PlantUMLが使用するjavaの実行ファイルパスを設定してあげます。
※公式のJavaを使用する場合や、環境変数にOpenJDKのjava.exeを設定している方はこの作業は不要です。

VSCodeの設定画面を表示します。
「File」->「Preferences」->「Setting」を順に選択します。

検索窓に、「Java」を入力します。

Plantuml:javaという項目を探して、OpenJDKのjava.exeのパスを設定する。
OpenJDKの展開したパスのbinフォルダ内にjava.exeが格納されています。

これで準備は完了です。

試してみる

plantumlのファイル拡張子は、***.puですので、この拡張子のファイルを作成します。
今回は、test.puというファイルにしました。
ファイルの中身は以下。
今回は、簡単なシーケンス図にしてあります。
@startumlと@endumlが、各UMLの開始と終了の識別子となっていて、この間に作図内容を記載します。

@startuml

me->you : こんにちは
you->me : こんにちは

@enduml

VSCodeで、上記のファイルを開き、キーボードで Alt＋「D」を押下してください。
これで、プレビューが表示されます。

画像を保存する場合は、テキスト側で右クリック->「Export Current Diagram」で保存できます。

まとめ

今回は、Pythonではなく、PlantUMLをVSCodeで作成->プレビューする方法を記載してみましたが、いかがだったでしょうか？
ルールを覚えるまでは、ちょっと大変かもしれませんが、覚えてしまえばちょっとしたシーケンス程度であればお手軽作図できるのでかなり便利です。
また、メリットに上げましたが、図の使いまわしが簡単なので、いっぱい作図しないといけない場合は、コピーしまくれば簡単に作図できます。

あと、テキストで記載するのでうまくすればシーケンス図をコードから自動で作成なんてこともできるかもしれません。

もしちょっとでも気になった方は、簡単でかつ無料で使用できますので一度使用してみてみてください！！