とある日

VScodeで、Draw.ioが使えるようになった¹という記事を見た。

VScodeというキーワードに惹かれてみてみたが、おもしろそうな拡張機能だった。

ってことで、 Draw.io VS Code Integration²拡張機能インストールしてみた。

インストールしてみた

VScodeの拡張機能でDrawで検索したら一番上に出てくる。

f:id:Updraft:20200520102815p:plain

自分はもうインストール済みなのでインストールと書かれた緑枠は出ないですが・・・・。

ファイル作成で、拡張子を.drawioまたは.dioにすると・・・・。

f:id:Updraft:20200520104204p:plain — お試しで、YouTubeの画面作ってました。

そもそもDraw.ioってなに

「draw.io」とは、フローチャートやオフィスのレイアウト図、ネットワーク図を作成できる無料の作図ツールです。

複数の図形を組み立てて、UML図やER図を完成させるためのツールということですね。

様々な図形があり、いろいろな図を作成する手間を省ける感じですね。

今まで、ユースケース図やシーケンス図などUML図を書く際は、Eclipseを使って書いてたのですが、VScodeでもできるようになるのは便利ですね。

使っててすごいなって思ったところ

様々なカテゴリーが存在していて、

アイコンの画像もあるので、スマホの画面設計図とかにも使用できそう。

f:id:Updraft:20200520115210p:plain — 適当に図形を追加してみた

気になった図形を紹介

1.iOS Icons

f:id:Updraft:20200520120032p:plain

豊富なアイコンでシンプルで使いやすそう。

2.高度な設定

f:id:Updraft:20200520122357p:plain

他のカテゴリのものとは違って、ほとんど完成してある図形があったりする。

3.検索窓

f:id:Updraft:20200520121700p:plain — Oracleと検索して出てきた図形

図形が多いので、検索できるのはすごく便利。

なのだが、注意なことがある。

日本語で検索してもほとんど出ない。

本題の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));

テーブル追加してカラム追加。

f:id:Updraft:20200523223458p:plain

関係紐付けて終了。

f:id:Updraft:20200523223620p:plain

テーブルの配置にこだわったので少し時間がかかりましたが、約30分で完成。

まとめ

Draw.ioはとても便利でした。

VScodeの拡張機能で使えるのは楽ですね。

どんどん拡張機能入れすぎて使うものと使わないものが多すぎていずれ整理しないといけない・・・・。

VScodeどんどん進化していく。ますます便利になる。　

今日はなにの日。

気になったこと勉強になったことのメモ。

今日は、VScodeの拡張機能Draw.ioでER図を書いてみたの日。