Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

draw.ioでデータ構造を描く

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

目次

みんなER図を描く時ってどんなツールを使っているんだろうか。Excelファイルか改行区切りのテキストからデータをインポートできて、さくっとコネクタで線をつなげるツールとか、あってもよさそうなもんだけど。Visioとか高価なソフトを探せばあるのかな。

私自身はER図の作法に沿って描くというよりは、自分用の資料としてあればいい、程度のことなんだけど……。

とりあえず描きやすいdraw.ioで描く。

環境

手順など

  • Entity RelationのShape Libraryに「ER Table 1」というシェイプがあるので配置する。これはグループ化されているが、内部に行オブジェクトみたいなものが設定されており、1行に2カラム入力できるし、行単位で複製できる。何より、行からコネクタ線を引き出すことができる。
  • 行をCtrl+Dで複製して必要なだけ増やす。 Shift+クリックで複数行を選択しておいてCtrl+Dすると一気に複数行を複製することも可能。
  • コネクタ線を引きたい時は、行オブジェクトにマウスオーバーすると矢印マークが出るので、矢印の上からドラッグを開始して他のテーブルの行オブジェクト上でリリースする。
  • コネクタ線の交差については「gap」がシンプルで使いやすい気がする。
  • 構造的には「行オブジェクトの中に左列オブジェクトが入っている」状態。右列は左列オブジェクトの幅だけインデントされている。そのため、左列の幅を変えようと思うと、「左列オブジェクトを選択して幅を変更→右列テキストを選択してインデント量を変える」という作業が必要で少々煩雑だがこれはやむを得ないか。表っぽいものを扱えるオブジェクトがあるといいのだが。それとも探せばあるのかな?

ちょっと手元に公開できるサンプルがないけど、できたら画像を追加する。