VSCodeで簡単に図を描こう！draw.io拡張機能の使い方

プログラミングをしていると、「ちょっとした設計図やフローチャートを書きたい！」という場面がよくありますよね。

そんな時に便利なのが、Visual Studio Codeのdraw.io拡張機能です！

🔰 draw.io拡張機能とは？

「draw.io」は、簡単にフローチャートやUML、ネットワーク図などの作図ができるツールです。これをVSCodeに統合したのが、**『Draw.io Integration』**という拡張機能です。

🚀 インストール方法

1. VSCodeの拡張機能検索（左側のバーにある四角形のアイコン）を開きます。

2. 検索欄に『draw.io』と入力。

3. 『Draw.io Integration』 を選択して「Install」をクリックします。

インストール後、VSCodeを再起動すると使えるようになります。

🖌️ 使い方

• 新しいdraw.ioファイルを作成するには、ファイル名の末尾に.drawioをつけてファイルを作成します。

例：sample.drawio

• 作成したファイルを開くと、draw.ioの作図画面が自動で表示されます。

• 左のサイドバーから使いたい図形をドラッグ＆ドロップで配置して、直感的に図を描けます。

💡 便利ポイント

• 作成した図はXML形式で保存され、Git管理も簡単です。

• エディター内で完結するので、コードと設計図を同時に管理できます。

⚠️ 注意点

draw.ioのファイルはXML形式のため、複数人が同時に編集するとGitでコンフリクトが発生しやすいです。そのため、

• できるだけ小さく、頻繁にコミット＆プッシュしましょう。

• チームで使う場合、作図する際に編集状況を確認し合うのがベストです。

🎉 まとめ

VSCodeのdraw.io拡張機能を使えば、ちょっとした作図作業も簡単に、コードと一緒に管理できるので開発効率がグッと上がります。

ぜひあなたの開発環境にも取り入れてみてくださいね！