VSCode内でのDraw.ioの使用

Draw.ioとは

web上でフローチャートやER図を描けるアプリケーションです。
予め図形や矢印などのテンプレートが用意されているので、
あとは文字を打ち込んだり矢印で関係性を示したりするだけで済みます。

私はER図作成のために利用しました。
通っていたプログラミングスクールでチーム開発があったのですが、コロナ禍ということで完全リモートでの開発となりました。
最初は紙に描いていたのですが、チーム全員と共有する必要があった為このアプリを使用することにし、
シンプルで直感的に扱える為、簡単に作成することができました！

そのDraw.ioがVSCodeでも扱えるようになったと聞き、どんな感じなのか調べてみることにしました。

VSCodeに Draw.ioの導入

①VSCodeの拡張機能窓を選択

②「Draw.io Integration」と検索

③インストール！！

以上で導入完了です！さあさあこれから描いていきましょう！

使用方法

拡張子を.drawioか.dioでファイルを作成すると自動的にDraw.ioの画面になります。
今回はtest.dioで作成しました。

あとはファイル左側のテンプレートからドラッグ&ドロップでどんどん作成していくだけです。

用意されている図形が以前より少ないように感じますが、
下部の "その他の図形" を選択し、必要なものを追加することで利用できるようになりました。

また、図形を検索することでリストに追加しなくても使用することはできます。

使用感については、 web版に比べてぬるぬる動くのでより使いやすくなった印象です！

参考

https://github.com/hediet/vscode-drawio