こんにちは、白々さじきです！
今回は AlmaLinux 9.5 に Visual Studio Code（VSCode）を使って PlantUML を導入し、UML図をコードで作成する方法 を紹介します。
PlantUML を使えば、シーケンス図やクラス図などを簡単にコードベースで作成でき、PNG 形式などで出力できます。VSCode の拡張機能を活用して、より快適に使えるようにしていきます。
それでは、早速やっていきましょう！
PlantUMLとは
PlantUML は、UML（Unified Modeling Language）をテキストベースで記述できるツールです。コードでシーケンス図やクラス図を定義し、画像ファイルとして出力することができます。
PlantUML のメリットは以下の通りです。
- PNG、SVG、PDF などの形式でエクスポートできる
- コードで図を管理できるので、Git などでバージョン管理しやすい
- 簡単な構文でUML図を素早く作成できる
Javaのインストール
PlantUML を動作させるために、まず Java をインストールする必要があります。
Java のバージョンを確認
まず、AlmaLinux 9.5 で利用できる Java のバージョンを確認します。
sudo dnf list java-*-openjdk --showduplicates実行すると、以下のようにインストール可能な Java のバージョン一覧が表示されます。
今回は 最新の java-21 を使用 します。
Java のインストール
まず、パッケージマネージャ（dnf）のバージョンを最新に更新します。
sudo dnf update -y次に、Java 21 をインストールします。
sudo dnf install -y java-21-openjdkインストール後、バージョンを確認します。
java -version実行すると、以下のように表示されます。
ワンポイント！
sudo dnf info java-latest-openjdkを実行するとエラーになるため、バージョンを指定してインストールすることをおすすめします。実際にやってみると下記のように表示されます。
PlantUMLのインストール
PlantUML の実行には Graphviz が必要なので、先にインストールします。
sudo dnf install -y graphviz次に、PlantUML の最新バージョンを取得します。
wget https://sourceforge.net/projects/plantuml/files/latest/download -O plantuml.jarワンポイント！
wgetコマンドがない場合は、以下のコマンドでインストールできます。sudo dnf install -y wget
PlantUML の配置
ダウンロードしたファイルを適切なディレクトリに配置し、シンボリックリンクを作成します。
sudo mkdir -p /opt/plantuml
sudo mv plantuml.jar /opt/plantuml/
sudo ln -s /opt/plantuml/plantuml.jar /usr/local/bin/plantumlワンポイント！
mkdir -pオプションを指定すると、親ディレクトリが存在しない場合でも自動で作成されます。
Visual Studio Code で PlantUML を使えるようにする
VSCode で PlantUML を使うために、拡張機能をインストールします。
VSCode を開き、拡張機能の検索欄に “PlantUML” と入力し、以下の拡張機能をインストールします。
実際に UML 図を作成してみる
ここまでで、AlmaLinux 9.5 に PlantUML の環境を構築し、VSCode で使える準備が整いました。
実際に PlantUML を使ってシーケンス図を作成 してみます！
1. サンプルコード
まず、テスト用に シーケンス図 を作成します。
公式サイトからサンプルコードを取得し、test.pu というファイルを作成して記述します。
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml2. VSCode でプレビュー
次に、VSCode で プレビューを表示 してみます。
手順:
- VSCode の コマンドパレット（Ctrl+Shift+P） を開く
PlantUML: Preview Current Diagramを選択
すると、以下のように UML 図がプレビュー表示 されます。
ワンポイント！
PlantUML: Preview Current Diagramを使うと、コードを編集しながらリアルタイムで図を確認できます！
PlantUMLのファイルのコードにカーソルを合わせると、プレビューの作成を始めて下記のようにリアルタイムで図が表示されます。
3.図の出力
プレビューで確認した図を PNG ファイルとして保存 してみます。
手順:
- プレビュー画面の上部メニューから “Export Current Diagram” を選択
- 保存形式を PNG に設定
out/フォルダ名/ファイル名.pngにエクスポートされる
エクスポートされた PNG ファイルは以下のようになります。
ワンポイント！
SVG や PDF など、他の形式でもエクスポート可能！用途に応じて選択しましょう。
感想
最初は「コマンドだけで全部完結できるのでは？」と思いましたが、VSCode の拡張機能を使うと圧倒的に楽 ですね。
現状では VSCode ありきの環境 になっていますが、コマンドラインだけで完結させる方法も今後探ってみたいと思います。
それでは、また次回の記事でお会いしましょう！
サポートのお願い
下記リンクからお買い物いただけると、ブログ運営のための費用が増え、有料サービスを利用した記事作成が可能になります。ご協力よろしくお願いします！
コメント