VSCodeでPlantUMLを使ってER図を作成する方法 #VSCode

Visual Studio Code（VSCode）には、ER図を含むさまざまな図を作成できる強力なツール、PlantUMLが利用可能です。ここでは、PlantUMLを使用してECサイトのER図を作成する手順を説明します。

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

VSCodeでPlantUMLを使用するためには、まず拡張機能をインストールする必要があります。

VSCodeを開き、「拡張機能」ビューを開きます（サイドバーの四角形が重なったアイコンをクリック）。
検索バーに「PlantUML」と入力し、検索結果から「PlantUML」拡張機能を見つけます。
「インストール」ボタンをクリックして拡張機能をインストールします。

2. PlantUMLの設定

PlantUMLを使用するには、Graphvizがシステムにインストールされている必要があります。これはPlantUMLが図をレンダリングする際に必要となるためです。
Windows、macOS、Linux の各環境での手順を簡単に説明します。

javaがインストールされていない場合は、https://www.java.com/ja/download/ よりダウンロードしてインストールが必要です。javaがインストールされているかの確認は次のコマンドでできます。
```
java -version
```

Graphviz のインストール

Windows:

Graphviz の公式サイトから Windows 用のインストーラーをダウンロードします。
ダウンロードしたファイルを実行してインストールします。
Install Optionsで、「Add Graphviz to the PATH for ...」で環境変数に Graphviz の bin フォルダを追加します（通常は C:\Program Files\Graphviz\bin）。

macOS:

Homebrew を使用して Graphviz をインストールします。ターミナルで以下のコマンドを実行：
```
brew install graphviz
```

Linux:

ほとんどの Linux ディストリビューションで、次のようにして Graphviz をインストールできます：

sudo apt-get install graphviz  # Debian/Ubuntu
sudo yum install graphviz      # CentOS/RHEL
sudo dnf install graphviz      # Fedora

必要に応じて設定を調整します。例えば、Graphviz のパスを指定する場合は、"plantuml.graphvizDot" の設定で Graphviz の実行可能ファイル（dot コマンド）へのパスを指定します。

これで、VSCode で PlantUML を使用して図を作成し、ドキュメントに統合する準備が整いました。 PlantUML は UML 図をコードから自動生成する便利なツールで、ソフトウェア設計プロセスを支援します。

3. ECサイトの基本エンティティとその属性

ECサイトのデータベース設計に必要な基本エンティティを例としてその属性を表形式で以下に示します。

エンティティ	属性	タイプ	説明
ユーザー (Users)	user_id	integer (PK)	ユーザーの一意の識別子
	name	string	ユーザーの名前
	email	string	ユーザーのメールアドレス
	password	string	ユーザーのログインパスワード
商品 (Products)	product_id	integer (PK)	商品の一意の識別子
	name	string	商品名
	price	decimal	商品価格
	stock	integer	在庫数
カテゴリ (Categories)	category_id	integer (PK)	カテゴリの一意の識別子
	category_name	string	カテゴリ名
注文 (Orders)	order_id	integer (PK)	注文の一意の識別子
	user_id	integer (FK)	注文したユーザーのID
	order_date	datetime	注文日時
	total_amount	decimal	注文の合計金額
注文詳細 (Order Details)	order_id	integer (FK)	注文のID
	product_id	integer (FK)	商品のID
	quantity	integer	購入数量
	unit_price	decimal	単価

4. ER図の作成

以下の手順でER図を作成します。

新しいファイルを作成し、ファイルの拡張子を.puまたは.pumlや.plantumlにします。
PlantUMLの構文を使用して、ER図のコードを記述します。例えば、ECサイトのER図では以下のように記述します。

@startuml sample_site
entity "Users" {
    *user_id : integer <<PK>>
    --
    *name : string
    *email : string
    *password : string
}

entity "Products" {
    *product_id : integer <<PK>>
    --
    *name : string
    *price : decimal
    *stock : integer
    *category_id : integer <<FK>>
}

entity "Categories" {
    *category_id : integer <<PK>>
    --
    *category_name : string
}

entity "Orders" {
    *order_id : integer <<PK>>
    --
    *user_id : integer <<FK>>
    *order_date : datetime

entity "Order Details" {
    *order_id : integer <<FK>>
    *product_id : integer <<FK>>
    --
    *quantity : integer
    *unit_price : decimal
}

Users ||--o{ Orders
Orders ||--o{ "Order Details"
"Order Details" }o--|| Products
Products ||--o{ Categories
@enduml

このコードでは、各エンティティの属性と主キー（PK）、外部キー（FK）を指定し、エンティティ間の関係を示しています。

コードをVSCodeで開き、プレビュー機能を使ってER図を確認します。

4. プレビュー表示

プレビュー機能を使ってER図を確認します。Ctrl + Shift + P を押してコマンドパレットを開きます
コマンドパレットに「PlantUML」と入力し、出てくるオプションから「PlantUML: Preview Current Diagram」を選択します。
横にPlanUMLプレビューが表示されます。

5. 画像としてエクスポート

Ctrl + Shift + P を押してコマンドパレットを開きます。
コマンドパレットに「PlantUML」と入力し、表示されるオプションから「PlantUML: Export Current Diagram」を選択します。
このコマンドを実行すると、出力フォーマットを選択するオプションが表示されます（例：PNG, SVG, PDFなど）。
希望のフォーマットを選択します。
デフォルトでは、out配下に出力されます。
出力先を変更したい場合は、ファイル > ユーザー設定 > 拡張機能 > PlantUML の「Plantuml: Export Out Dir」を変更します。

まとめ

PlantUMLを使用すると、コードベースで直感的にER図を作成することができ、変更があった場合の更新も簡単に行えます。VSCodeとPlantUMLで、効率的にシステム設計を進めましょう。

参考

https://plantuml.com/ja/ie-diagram