{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/create-er-diagrams-vscode-draw-io",
  "path": "/posts/create-er-diagrams-vscode-draw-io",
  "publishedAt": "2023-04-01T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "draw-io",
    "draw-io-integration",
    "er図",
    "vscode"
  ],
  "textContent": "そもそもER図とは？\n\nER図とは「データベース設計における代表的な設計図のこと」らしい。そして「作成したER図がそのまま物理データベース上に変換できることから、データベース設計手法におけるデファクトスタンダード」とのこと。\n\nつまりたぶん、ER図を書くという技術は必要不可欠っぽい。\n\nデータモデル\n\nER図はシステムの上流工程の中で段階的に設計するらしく、各工程で作成するER図の状態のことを「データモデル」というらしい。\n\n概念モデル\n\n要件定義工程で作成するデータモデル。  \n最初にシステム全体における「もの」や「できごと」をエンティティ、リレーションシップとして洗い出し、概要を表したもの。\n\n論理モデル\n\n基本設計工程で作成するデータモデル  \n特定のデータベースに依存しないレベルで具体化した状態を表したもの。\n\n物理モデル\n\n詳細設計工程で作成するデータモデル  \nOracle Database等の特定の物理データベース向けに論理モデルの変換をする。  \n例えばデータ型を追加したり、物理データベースに即したアルファベットに変換する。  \nER図の最終形態がこの物理モデル。\n\nと色々書いたけどほとんどER図とは？書き方やテクニックをわかりやすく解説を参考にしたので、こっちを参考にした方がよっぽど良い。\n\nどう書くか\n\nで、ここからが本題になる。 じゃER図は何を使って書くべきなのか。\n\n参考までに会社のバックエンド担当に聞くと「A5:SQL Mk-2」を使っているとのこと。\n\nなるほど、それを使うかと思ったけど、自宅のパソコンはパフォーマンスが良くないので、出来れば開くソフトを少なくしたい。\n\nということで、どうせ開いている「VS code」で書ける拡張機能を探してみた。\n\nDraw.io Integration\n\n> This unofficial extension integrates Draw.io (also known as diagrams.net) into\n> VS Code.  \n> Mentioned in the official diagrams.net blog.\n\n↑が本家の説明文。\n\n詳細はVSCodeでDraw.ioが使えるようになったらしい！に詳しい。\n\nそこから引用すると、\n\n> Draw.ioとはdraw.ioにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。  \n> Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。\n\nこのサービスがVS codeで使えるようになったらしい。\n\n.dioファイルを作成する\n\n拡張子を.dioに設定したファイルを作成することで利用が開始される。\n\nちなみに、\n.drawio.pngとかdrawio.svgでファイルを生成すると、importやexportの必要なくそのまま画像として利用できたり、編集することが可能らしい。\n\nファイルを作った瞬間、編集画面が表示されたすごい。\n\nあとはdiagrams.net(draw.io)でER図を描く方法　※画像つき解説とかの通り、draw.ioでER図各サイトを参考にすれば問題ない。",
  "title": "VSCodeの拡張機能「Draw.io Integration」でER図を作成する"
}