【作図ツール】draw.ioの概要とVSCodeでの使い方

draw.ioとは

draw.io は、ブラウザ上で手軽に図を作成できる 無料のオンライン作図ツール です。
フローチャートやUML図、ネットワーク図、ER図、ワイヤーフレームなど、様々な図を直感的に作成できます。

あわせて読みたい

draw.io

手軽さ・無料・豊富なテンプレートが揃っていることから、システム設計・業務フロー作成・資料作成 まで幅広く活用されています。

VSCodeでの使用方法

draw.ioはブラウザで使用できますが、拡張機能を使用することでVSCodeでも作業が可能です。

インストールと初期設定

① VSCode拡張機能　Draw.io Integration　をインストール

➁ エクスプローラーで、.drawio ファイルを作成（※）
　（→作成した.drawioファイルを開くと、draw.io編集画面が開きます）

※.drawio.png , .drawio.svg などのファイル名で作成した場合、そのまま画像としても利用可能
　(途中からの変換は不可。最初から画像として用途が確定している場合にのみ利用推奨)

テーマ（ダークモード）設定：

VSCodeのフッターバー右下にある「Theme:～」をクリックし、展開するメニューからテーマを選択できます。
（automatic にしておけば、VSCodeと同じ設定(light/dark)が反映されます）

操作方法について

drawioの操作方法については、以下公式ドキュメントで確認できます。
（VSCodeで使う場合でも基本操作に大きな違いはございません）

あわせて読みたい

draw.io Documentation