VSCodeで簡単に図を描こう！draw.io拡張機能の使い方
VSCodeで簡単に図を描こう！draw.io拡張機能の使い方
公開: 2025年06月24日
- VSCodeのdraw.io拡張機能を使うと、簡単にフローチャートや図を作成できる。
- ファイル名に.drawioを付けて新しいファイルを作成し、直感的に図を描くことが可能。
- XML形式で保存されるため、チームでの編集時には注意が必要で、効率的な開発が促進される。
プログラミングをしていると、「ちょっとした設計図やフローチャートを書きたい！」という場面がよくありますよね。
そんな時に便利なのが、Visual Studio Codeのdraw.io拡張機能です！
🔰 draw.io拡張機能とは？
「draw.io」は、簡単にフローチャートやUML、ネットワーク図などの作図ができるツールです。これをVSCodeに統合したのが、**『Draw.io Integration』**という拡張機能です。
🚀 インストール方法
VSCodeの拡張機能検索（左側のバーにある四角形のアイコン）を開きます。
検索欄に『draw.io』と入力。
『Draw.io Integration』 を選択して「Install」をクリックします。
インストール後、VSCodeを再起動すると使えるようになります。
🖌️ 使い方
新しいdraw.ioファイルを作成するには、ファイル名の末尾に
.drawioをつけてファイルを作成します。
例：sample.drawio
作成したファイルを開くと、draw.ioの作図画面が自動で表示されます。
左のサイドバーから使いたい図形をドラッグ＆ドロップで配置して、直感的に図を描けます。
💡 便利ポイント
作成した図はXML形式で保存され、Git管理も簡単です。
エディター内で完結するので、コードと設計図を同時に管理できます。
⚠️ 注意点
draw.ioのファイルはXML形式のため、複数人が同時に編集するとGitでコンフリクトが発生しやすいです。そのため、
できるだけ小さく、頻繁にコミット＆プッシュしましょう。
チームで使う場合、作図する際に編集状況を確認し合うのがベストです。
🎉 まとめ
VSCodeのdraw.io拡張機能を使えば、ちょっとした作図作業も簡単に、コードと一緒に管理できるので開発効率がグッと上がります。
ぜひあなたの開発環境にも取り入れてみてくださいね！
シェア！
