VSCodeの拡張機能「Draw.io Integration」でER図を作成する

フロント専門にやってきたが、ここいらでバックエンドにも技術を広げたいと色々試している。その流れでWeb APIを作成しようということになったので、今回は生まれて初めてER図というものを書いてみる。

目次

そもそもER図とは?

ER図とは「データベース設計における代表的な設計図のこと」らしい。そして「作成したER図がそのまま物理データベース上に変換できることから、データベース設計手法におけるデファクトスタンダード」とのこと。

つまりたぶん、ER図を書くという技術は必要不可欠っぽい。

データモデル

ER図はシステムの上流工程の中で段階的に設計するらしく、各工程で作成するER図の状態のことを「データモデル」というらしい。

概念モデル

要件定義工程で作成するデータモデル。
最初にシステム全体における「もの」や「できごと」をエンティティ、リレーションシップとして洗い出し、概要を表したもの。

論理モデル

基本設計工程で作成するデータモデル
特定のデータベースに依存しないレベルで具体化した状態を表したもの。

物理モデル

詳細設計工程で作成するデータモデル
Oracle Database等の特定の物理データベース向けに論理モデルの変換をする。
例えばデータ型を追加したり、物理データベースに即したアルファベットに変換する。
ER図の最終形態がこの物理モデル。

と色々書いたけどほとんどER図とは?書き方やテクニックをわかりやすく解説を参考にしたので、こっちを参考にした方がよっぽど良い。

どう書くか

で、ここからが本題になる。
じゃER図は何を使って書くべきなのか。

参考までに会社のバックエンド担当に聞くと「A5:SQL Mk-2」を使っているとのこと。

なるほど、それを使うかと思ったけど、自宅のパソコンはパフォーマンスが良くないので、出来れば開くソフトを少なくしたい。

ということで、どうせ開いている「VS code」で書ける拡張機能を探してみた。

Draw.io Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Mentioned in the official diagrams.net blog.

↑が本家の説明文。

詳細はVSCodeでDraw.ioが使えるようになったらしい!に詳しい。

そこから引用すると、

Draw.ioとはdraw.ioにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。
Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。

このサービスがVS codeで使えるようになったらしい。

.dioファイルを作成する

拡張子を.dioに設定したファイルを作成することで利用が開始される。

ちなみに、 .drawio.pngとかdrawio.svgでファイルを生成すると、importexportの必要なくそのまま画像として利用できたり、編集することが可能らしい。

ファイルを作った瞬間、編集画面が表示されたすごい。

あとはdiagrams.net(draw.io)でER図を描く方法 ※画像つき解説とかの通り、draw.ioでER図各サイトを参考にすれば問題ない。

次に読むおすすめ記事

VS Codeの拡張機能「Ascii Tree Generator」を使用しツリーファイル構造をサクッと作成する

フォルダをツリー構成で綺麗に表示したい。vsCodeでtree コマンドがなくても表示できる

VSCodeの拡張機能「Draw.io Integration」でER図を作成する

来世でも使うと思われるVisual Studio Codeの拡張機能をまとめてみた

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このブログは製作者の開発ログであり、厳密なテックブログではありません。
問題解決にいたらず、筆を置いているページもありますので、ご了承ください🙇‍♀️