Zenn
🐡

Visual Studio CodeでPlantUMLを使う(MacOS)

2024/08/24に公開
VS Code
PlantUML
UML
VS Code 拡張機能
tech

概要

VSCodeでPlantUMLを使うまでの手順です。

ローカル環境でPlantUMLによる作図を実行するには、事前にjavaなどのインストールが必要だったため、備忘として残しておきます。

PlantUMLをインストールする

Javaのインストール

PlantUMLはJavaで動くため、Javaをインストールする必要があります。

$ brew install openjdk
...略
If you need to have openjdk first in your PATH, run:
  echo 'export PATH="/opt/homebrew/opt/openjdk/bin:$PATH"' >> ~/.zshrc

パスを通します。

$ echo 'export PATH="/opt/homebrew/opt/openjdk/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc

インストール完了です。

$ java --version
openjdk 22.0.2 2024-07-16
OpenJDK Runtime Environment Homebrew (build 22.0.2)
OpenJDK 64-Bit Server VM Homebrew (build 22.0.2, mixed mode, sharing)

OpenJDKって何なのか

OpenJDK（Open Java Development Kit）とは、Java言語でソフトウェア開発を行うのに必要なツールを一つにまとめたオープンソースのパッケージ

https://e-words.jp/w/OpenJDK.html

普段Javaを使わないので、イメージしづらいですが、C#や他の.NET言語における.NET SDKのようなものと理解しました。

Graphvizのインストール

Graphviz（Graph Visualization Software）は、グラフやネットワーク構造を図として表現するためのオープンソースのソフトウェアです。PlantUMLでの作図に使用されるため、事前にインストールが必要です。

インストールおよびその確認を行います。

$ brew install graphviz

$ brew list --versions graphviz
graphviz 12.1.0

# dotはGraphvizのコマンド
$ dot -V
dot - graphviz version 12.1.0

PlantUMLのインストール

$ brew install plantuml
$ brew list --version plantuml
plantuml 1.2024.6

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

VSCodeの拡張機能であるPlantUML(jebbs.plantuml)をインストールします。

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

ER図をプレビューする

@startuml sample
entity "User" {
  * id : int
  * name : string
  * email : string
}

entity "Order" {
  * id : int
  * order_date : date
  * user_id : int
}

User ||--o{ Order : "places"
@enduml

上記のような適当なER図を作成して、Preview Current Diagramしてみます。

上手くいきません。どうやら、Javaの設定が適切ではないようです。

VSCodeの設定を変更する

正しくプレビューするためには、VScode側でPlantUMLに関する設定を変更する必要がありました。

設定を開き、Plantuml: Javaにjavaのフルパスを入力します。元々は、フルパスではなく、javaとだけ入力されていました。

# javaのフルパスを調べる
$ which java
/opt/homebrew/opt/openjdk/bin/java

再度ER図をプレビューする

再度プレビューすると、ER図のプレビューが成功しました。

PlantUMLサーバを使う方法もある

ここまでの流れは、ローカル環境でPlantUMLの作図を行う想定です。

しかし、外部サーバであるPlantUMLサーバを使って作図を行うこともできます。この場合、前述のJava、Graphviz、PlantUMLのインストールは不要です。

利用するためには、VSCodeの拡張機能PlantUML(jebbs.plantuml)をインストールし、設定を下記のように変更するだけです。

"plantuml.render": "PlantUMLServer",
"plantuml.server": "https://www.plantuml.com/plantuml"

ただし、この方法は、外部サーバにデータを送信することになるため、セキュリティリスクがあります。機密情報を扱う際には利用できません。

また、ローカルで実行する方がパフォーマンスは良いでしょうし、オフラインでも使用できるというメリットもあります。

個人的にはローカル環境での実行をオススメします。

最後に

以上です。

PlantUMLは結構表現力高そうなので、色んな図が作れそうです。

どんなことができるのか、また記事にしてみたいなと思います。

Discussion