VSCode + Draw.ioでER図をエクスポートする！
はじめに
現在常駐しているお客様先でDraw.ioというものを知ったので備忘録として残したいと思います。 今まではER図を書く際はExcelで書いていたのでDraw.ioの便利さや手軽さにはとても驚きました。
Draw.ioの導入方法や概要は以下の記事がとても分かりやすかったです。ありがとうございました！
それでは今回は1対多のテーブルを作ってSVG形式でエクスポートする流れを書いていこうと思います。
新規ファイルを作成する
任意のフォルダにてVSCodeを起動し、ファイル名を「sample.dio」とします。
すると以下のような普段のVSCodeとは違う画面が表示されます。
ER図をメニューに追加する
次にER図に使うテーブル図やリレーションの線などを利用できるようにしましょう。
画面左下の「＋More Shapes...」ボタンをクリックします。
以下のように様々な図形が選べるのでSoftware > Entity Relation を選択します。 チェックを付けたらApplyボタンをクリックします。
メニュー一覧にER図が加わったことが分かります。
テーブルを追加する
任意のテーブルをドラッグ&ドロップで格子部分へ持っていくと、あっという間にテンプレートが出来上がりました。
テーブルへ行を追加する
せっかくなので行も追加してみましょう。
テーブルをクリックした状態で画面右のArrangeタブをクリックします。
追加したい場所の前にある行をクリックしてInsert Row After をクリックします。（赤枠部分）
Insert Row After ボタンをクリック後、行が追加されるので
任意の行の名前を追記して完了です。
先ほど触った画面右のArrangeタブの左にTextタブもあるので、こちらでテキストについても色々と編集が出来そうです。
リレーションを追加する
こちらもテーブルを作成した時と同様にテンプレートがあるのでドラッグ&ドロップで持っていきます。 あっという間に出来ました！
SVG形式でエクスポートする
それでは出来上がったER図をSVG形式でエクスポートしてみます。
画面左上のFile > Export... をクリックします。
画面上にどの拡張子でエクスポートするかが出ますのでそちらでsvg形式を選択します。
名前をsample.svgとして保存します。
出来上がったsample.svgをブラウザで開くと、先ほど作成したER図が表示されていることが確認できます。
おわりに
今まではER図もExcelで書いていたのでこんなにサクサク作れなかったのですがDraw.ioを知ってからより効率的に作業が進められそうです。 今後もどんどん利用して理解を深めていきたいと思います！
