はじめに

今回、Visual Studio Codeを使って、PlantUMLでシーケンス図、クラス図、ER図を書く方法を書きました。

なお、本記事の作成にあたって
PlantUML公式
を参考にしています。

この記事の読者対象

Macを使用している方
シーケンス図、クラス図、ER図などを簡単に書きたい人
PlantUMLの環境構築がよく分からない人

今回、PlantUMLの図の書き方の説明は省略いたします。
詳しくは、公式サイトを確認してください。

環境

Mac: Ventura
Visual Studio Code
Java version 20

※Windowsでは動作確認していないため、今回は省略してます。

PlantUMLとは

PlantUMLは、簡単なテキスト記述でUML図や様々な図を生成することができるオープンソースのツールです。テキストベースの記述により、バージョン管理が容易になり、コードのように変更履歴を追跡することができます。

以下のテキストを素早く作成きます。

シーケンス図 / Sequence diagram
アクティビティ図 / Activity diagram
コンポーネント図 / Component diagram
クラス図 / Class diagram
状態遷移図 / State diagram
ユースケース図 / Usecase diagram
オブジェクト図 / Object diagram

オンラインでPlantUMLも使うことができます。

環境構築(Mac)

PlantUMLを使うために必要なものをインストールしましょう。

Javaのインストール

1: Oracleの公式サイトからJavaをダウンロードしてインストールします。

Javaダウンロード

2: ターミナルを開き、以下のコマンドを実行して、環境変数JAVA_HOMEを設定し、PATHに追加します。

echo 'export JAVA_HOME=$(/usr/libexec/java_home)' >> ~/.zshrc
echo 'export PATH=$JAVA_HOME/bin:$PATH' >> ~/.zshrc
source ~/.zshrc

完了したら、実際にインストールされているか確認しましょう。

echo $JAVA_HOME
echo $PATH 
java -version

echo $JAVA_HOMEは、環境変数JAVA_HOMEの設定確認
echo $PATHは、PATHにJAVA_HOMEが追加されているかどうかを確認
java -versionは、JavaのVersion確認

Graphvizのインストール

※シーケンス図とアクティビティ図（新構文）のみ使用するのであれば、これは不要です。

Macではbrewをインストールすることで簡単にGraphVizをインストールすることができます。これにより、GraphVizを.dmgパッケージでインストールする際に発生する問題を回避することができます。

brew install libtool
brew link libtool
brew install graphviz
brew link --overwrite graphviz

libtoolは、Homebrewを使ってlibtoolというパッケージをインストールするためのものです。
プログラムのビルドやインストールをサポートするツールです。これは、Graphvizのインストールに必要な依存パッケージです。

link libtoolは、libtoolパッケージをシステムにリンクするためのものです。
これにより、libtoolがシステム全体で利用できるようになります。

install graphvizは、graphvizというパッケージをインストールするためのものです。
graphvizは、グラフィカルなネットワーク図を生成するためのツールセットです。

link --overwrite graphvizは、graphvizパッケージをシステムにリンクするためのものです。
--overwriteオプションを使用することで、既存のリンクがある場合でも強制的に上書きされます。
これにより、graphvizがシステム全体で利用できるようになります。

環境変数の設定とPATHの追加

echo 'export GRAPHVIZ_DOT="$(brew --prefix)/bin/dot"' >> ~/.zshrc
echo 'export PATH=$GRAPHVIZ_DOT:$PATH' >> ~/.zshrc
source ~/.zshrc

インストールされているか確認しましょう。

dot -V

インストールされているなら以下のような出力になります。

dot - graphviz version 8.0.5 (20230421.1958)

この例では、20230421.1958がビルド情報です。これは通常、ビルド日時を表しています。この場合、2023年4月21日に19時58分にビルドされたバージョンであることを示しています。ビルド情報は、バージョン番号だけでは識別できない細かな違いや、特定のビルドに関連する問題を特定する際に役立ちます。

PlantUMLのインストール

1: PlantUMLの公式サイトからPlantUMLのjarファイルをダウンロードします。

2: 設定したい場所にplantuml.jarファイルを配置する

このファイルは、あなたがアクセスしやすい場所に配置してください。例えば、/usr/local/binディレクトリや、$HOME/binディレクトリに配置することができます。これにより、ターミナルから簡単にPlantUMLを実行することができます。

/usr/local/binに配置する場合
ターミナルで以下のコマンドを実行し、plantuml.jarを/usr/local/binにコピーしてください。

sudo cp plantuml.jar /usr/local/bin/

このコマンドにより、plantuml.jarファイルが/usr/local/bin/ディレクトリに配置されます。/usr/local/binは、macOSで一般的に使用される実行可能ファイルのデフォルトのインストール場所です。このディレクトリは、通常PATH環境変数に含まれているため、ここに配置されたファイルはターミナルから簡単に実行することができます。

3: ターミナルで、以下のコマンドを実行して、PlantUMLをインストールします。

java -jar /usr/local/bin/plantuml.jar

/usr/local/bin/にplantuml.jarを配置することで、システム全体でアクセス可能になります。どのユーザーアカウントからでもターミナルでPlantUMLを実行できるようになります。

配置されているか確認しましょう。

java -jar /usr/local/bin/plantuml.jar -version

ファイルの作成

クラス図

クラス図は、システム内のクラスとその関連性を表します。

1: classDiagram.txtというファイルを作成し、以下の内容を記述します。

@startuml
class クラス1 {
  +属性1: 型
  +メソッド1(): 戻り値の型
}

class クラス2 {
  +属性2: 型
  +メソッド2(): 戻り値の型
}

クラス1 --|> クラス2
@enduml

2: 作成しているシーケンス図の確認
option + D
で、作成中の図を確認できます。

3: ターミナルで次のコマンドを実行して、画像ファイル（classDiagram.png）を生成します。

java -jar /usr/local/bin/plantuml.jar classDiagram.txt

シーケンス図

シーケンス図は、システムのオブジェクト間のメッセージのやりとりを表します。

1: sequenceDiagram.txtというファイルを作成し、以下の内容を記述します。

@startuml
participant A
participant B

A -> B: メッセージ1
B --> A: メッセージ2
@enduml

2: 作成しているシーケンス図の確認
option + Dで、作成中の図を確認できます。

3: ターミナルで次のコマンドを実行して、画像ファイルを生成します。

java -jar /usr/local/bin/plantuml.jar sequenceDiagram.txt

これで、同じディレクトリ内にファイルが作成されます。

ER図

ER図（エンティティ-リレーションシップ図）は、データベースのエンティティ（テーブル）とその関連性を表します。

1: erDiagram.txtというファイルを作成し、以下の内容を記述します。

@startuml
!define Table(name,desc) class name as "desc" << (T,#FFAAAA) >>
!define primary_key(x) <u>x</u>
!define foreign_key(x) <#u>x</#u>

Table("テーブル1","テーブル1の説明") {
  primary_key(主キー1)
  属性1
  属性2
}

Table("テーブル2","テーブル2の説明") {
  primary_key(主キー2)
  foreign_key(外部キー)
  属性3
}

テーブル1 --|> テーブル2: 関連性
@enduml

2: 作成しているER図の確認
option + Dで、作成中の図を確認できます。

3: ターミナルで次のコマンドを実行して、画像ファイル（erDiagram.png）を生成します。

java -jar /usr/local/bin/plantuml.jar erDiagram.txt

以上で、それぞれの図が作成されます。生成された画像ファイルを開いて、図が正しく作成されたことを確認してください。