LoginSignup
1
0

【データベース設計】VSCode上でDrow.ioを使いER図を作成する

Last updated at Posted at 2024-05-31

手順

VSCodeの拡張機能をインストールする
.dio拡張子でファイル作成
1. その他の図形
2. ソフトウェア ➡ ER図
3. テーブル選択
4. リレーション作成(接続開始)
6. スタイルタブでカスタマイズ
IE表記法の足は自作する必要がある

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

「Draw.io Integration」
screenshot_15.png

.dio拡張子でファイル作成

screenshot_17.png

1. その他の図形

screenshot_19.png

2. ソフトウェア ➡ ER図

少し見づらいですが、「図形」➡「ソフトウェア」➡「ER図」を選択
screenshot_20.png

3. テーブル選択

テーブル選択して、コピペでもう一つ作成。
screenshot_21.png

4. リレーション作成(接続開始)

テーブルの外枠にカーソルを乗せると緑色に変化する。
screenshot_22.png

5. リレーション作成(接続)

クリックしたままもう一つのテーブルの外枠に繋げる。
screenshot_23.png

6. スタイルタブでカスタマイズ

右側のスタイルタブで
リレーションのスタイルを変更できます。
screenshot_24.png

IE表記法の足は自作する必要がある

例えば1対多 (1:N)の場合、デフォルトで選択できるリレーションは以下の通りです。
screenshot_22.png

これだと基準と違うため。
以下のように右側のメニューから足を選択して自作する必要があります。
少々面倒ですが、正しい正規化を行えば、ほとんどのリレーションは1対多(1:N)で済むはずなので、コピペで使いまわすのが賢明です。
screenshot_23.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0