📖

VSCodeでDraw.ioを使う

2024/05/03に公開

Draw.ioはフローチャートやネットワーク図、ER図などを簡単に描画できるサービスで、VSCodeで利用できます。以下の手順に従って導入してみてください。

1, Draw.io Integrationのインストール

VSCodeを起動します。
左端の「プラグイン検索」アイコンをクリックします。
検索ボックスに「draw.io」と入力し、「Draw.io Integration」を選択してインストールします。

2,ファイル作成と描画

拡張子を.drawioまたは.dioでファイルを作成すると、VSCode内でDraw.ioエディタが起動します。
描画画面になったら、左側のシェイプから必要なものをドラッグ&ドロップして描画します。

3,アイコンの追加

左側のシェイプの下にある「+ その他の図形」を選択すると、AWSやGCP、Azureのアイコンなどを追加できます。

4,エクスポート

作成した図をエクスポートする際は、上部メニューバーから「ファイル」、「Export...」 、任意の拡張子を選択します。


簡単ではありますが、以上の手順でVSCodeでDraw.ioを利用できるようになります。


参考

Discussion