164
154

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VScodeでER図を描く【Draw.io】

Posted at

DB設計をする際にER図を描くかと思いますが、フリーで簡単に使えるものって意外となかったりします。
VScodeを使うとER図が簡単に描けるので使い方をさらっと紹介します。

かなり直感的に作図できるので試してみてください。

※ ER図を他人と共有したいという場合は、GoogleドライブでDraw.ioを使えば良いかと思います。

導入

VSCodeの拡張機能検索窓で「Draw.io Integration」と検索してインストール
e9c2425d6b71d03e695132176e51a025.png

使い方

拡張子が.dioのファイルを作成すればOKです。
02cae1c1b754e00bd6c22033cca85874.png

ER図を描く

ファイルを開いた時に左下にあるその他の図形をクリックしてERにチェックを入れて適用をクリックします。
010835432bb7de1326af6e2e4cc2b708.png

そうすると左側にERという項目が現れるので、そこから使いたい図形をドラッグアンドドロップするだけです。(クリックするだけでも追加できます)
341901dd0971ed9214e2672826a30528.gif

リレーション用の線を引くときは、図形の縁にカーソルを合わせると矢印が出てくるのでそこからドラッグ&ドロップで別の図形まで引っ張るだけです。
線の始点終点のスタイルは右側のスタイルタブで変更できます。これで1対多などのリレーションを表現できます。
c43e9f4956dc07a110ac630dc4572ef2.gif

エクスポート

左上のファイルから形式を指定してエクスポートを選んで好きな形式を選択するだけです。
97300725ae0423baa20706d25463bc21.png

形式を指定してエクスポートが表示されない場合はこちらの記事を参考に設定を変更してみてください。

164
154
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
164
154

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?