とある日
VScodeで、Draw.ioが使えるようになった1という記事を見た。
VScodeというキーワードに惹かれてみてみたが、おもしろそうな拡張機能だった。
ってことで、 Draw.io VS Code Integration2拡張機能インストールしてみた。
インストールしてみた
VScodeの拡張機能でDraw
で検索したら一番上に出てくる。
自分はもうインストール済みなのでインストールと書かれた緑枠は出ないですが・・・・。
ファイル作成で、拡張子を.drawio
または.dio
にすると・・・・。
そもそもDraw.ioってなに
「draw.io」とは、フローチャートやオフィスのレイアウト図、ネットワーク図を作成できる無料の作図ツールです。
複数の図形を組み立てて、UML図やER図を完成させるためのツールということですね。
様々な図形があり、いろいろな図を作成する手間を省ける感じですね。
今まで、ユースケース図やシーケンス図などUML図を書く際は、Eclipseを使って書いてたのですが、VScodeでもできるようになるのは便利ですね。
使っててすごいなって思ったところ
様々なカテゴリーが存在していて、
アイコンの画像もあるので、スマホの画面設計図とかにも使用できそう。
気になった図形を紹介
1.iOS Icons
豊富なアイコンでシンプルで使いやすそう。
2.高度な設定
他のカテゴリのものとは違って、ほとんど完成してある図形があったりする。
3.検索窓
図形が多いので、検索できるのはすごく便利。
なのだが、注意なことがある。
日本語で検索してもほとんど出ない。
本題のER図作成
Draw.ioは、図を書くのに使用する。図と言われればER図ということでER図を作成します。
Oracle DataBaseのサンプルテーブルを使用させていただきます。
CREATE TABLE departments (deptno NUMBER(2) CONSTRAINT pk_dept PRIMARY KEY, dname VARCHAR2(14) , loc VARCHAR2(10) ) ; CREATE TABLE employees (empno NUMBER(4) CONSTRAINT pk_emp PRIMARY KEY, ename VARCHAR2(10), yomi VARCHAR2(20), job VARCHAR2(8), mgr NUMBER(4), hiredate DATE, sal NUMBER(7), comm NUMBER(7), deptno NUMBER(2) CONSTRAINT fk_deptno REFERENCES departments(deptno)); CREATE TABLE ord_details (ordno NUMBER(8) CONSTRAINT ord_det_ord_fk REFERENCES orders(ordno), prodno CHAR(3) CONSTRAINT ord_det_prod_fk REFERENCES products(prodno), quantity NUMBER(5), CONSTRAINT ord_det_pk PRIMARY KEY(ordno,prodno)); CREATE TABLE orders (ordno NUMBER(8) CONSTRAINT ORD_PK PRIMARY KEY, custno NUMBER(5) CONSTRAINT ORD_CUST_FK REFERENCES customers(CUSTNO), date_ordered DATE, date_shipped DATE, salesman_no NUMBER(4) CONSTRAINT ord_emp_fk REFERENCES employees(empno), payment_type VARCHAR2(10)); CREATE TABLE products (PRODNO CHAR(3) CONSTRAINT PROD_PK PRIMARY KEY, PNAME VARCHAR2(30), PRICE NUMBER(6)); CREATE TABLE customers (custno NUMBER(5) CONSTRAINT cust_pk PRIMARY KEY, cname VARCHAR2(20), address VARCHAR2(30), phone VARCHAR2(12), credit_rating VARCHAR2(6)); CREATE TABLE salgrades ( grade CHAR(1) CONSTRAINT pk_grade PRIMARY KEY, losal NUMBER(7), hisal NUMBER(7));
テーブル追加してカラム追加。
関係紐付けて終了。
テーブルの配置にこだわったので少し時間がかかりましたが、約30分で完成。
まとめ
Draw.ioはとても便利でした。
どんどん拡張機能入れすぎて使うものと使わないものが多すぎていずれ整理しないといけない・・・・。
VScodeどんどん進化していく。ますます便利になる。