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

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

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

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

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

## 2. PlantUMLの設定

PlantUMLを使用するには、Graphvizがシステムにインストールされている必要があります。これはPlantUMLが図をレンダリングする際に必要となるためです。
Windows、macOS、Linux の各環境での手順を簡単に説明します。
- javaがインストールされていない場合は、https://www.java.com/ja/download/ よりダウンロードしてインストールが必要です。javaがインストールされているかの確認は次のコマンドでできます。

    ```bash
    java -version
    ```

### Graphviz のインストール

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

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

#### Linux:
1. ほとんどの Linux ディストリビューションで、次のようにして Graphviz をインストールできます：
   ```bash
   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図を作成します。

1. 新しいファイルを作成し、ファイルの拡張子を`.pu`または`.puml`や`.plantuml`にします。
2. 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
```
![sample_site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754521/f59b3502-b5ce-b89d-397d-959a540fcb3f.png)




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

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

## 4. プレビュー表示

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

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

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


## まとめ

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

## 参考


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