VSCodeの拡張機能「Draw.io Integration」の使い方を解説します。
拡張機能「Draw.io Integration」とは？
拡張機能「Draw.io Integration」を入れると、VSCodeV上でisioライクにVSCode上で簡単に作図（UML/ER図、ネットワーク図、電気回路図など）ができます。diagrams.net（旧Draw.io）のGUIを直接呼び出します。
ブラウザを開かずにエディタ内で図を描けるので、ドキュメントやリポジトリに図版を組み込みやすくなります。
導入手順
① VSCodeの拡張機能から「Draw.io Integratione」を検索してインストールします。
② 拡張機能を有効化した後、一度VS Codeを再起動します。
基本的な使い方
1. 新規図の作成
- コマンドパレット（
Ctrl+Shift+P） → Draw.io: New Diagram - 保存形式（.drawio/.dio/.drawio.svg/.drawio.png）を選択
- 空のキャンバスがタブで開きます
2. 既存ファイルを編集
- エクスプローラーで
.drawioなどをダブルクリック - VS Code 上に描画エディタが開く
3. 図形の追加・編集
- 左ペインの図形ライブラリからドラッグ＆ドロップ
- 右クリックメニューやショートカットで線をつなぐ
- Undo/Redo, ズーム操作も VS Code 上で利用可能
4. エクスポート
- コマンドパレット → Draw.io: Export As…
- 形式を選択すると、同名のファイルが出力されます
コマンド一覧
| コマンド | 説明 |
|---|---|
| Draw.io: New Diagram | 新規 Draw.io ファイルを作成 |
| Draw.io: Open Diagram | 既存の Draw.io ファイルを開く |
| Draw.io: Export As (PNG/JPEG/SVG/HTML…) | 描画中のファイルを各種画像／HTML化 |
| Draw.io: Toggle Grid | グリッド表示のON/OFF |
| Draw.io: Zoom In / Zoom Out | ズーム操作 |
よくあるトラブル対策
| 症状 | 対処方法 |
|---|---|
| 図が開けない／白紙のまま | 拡張を再インストール後、VS Code を再起動。 バージョン 0.7+ では .drawio.svg のみ自動認識仕様。 |
| 図形ライブラリが表示されない | 左ペインの「+ More Shapes…」をクリックし、必要な図形セットを有効化[^5^]。 |
| 保存後にエクスポートが反映されない | ファイル形式を .drawio.svg にすると、SVG 内にXMLデータが埋め込まれるのでエディタ上の状態が保持されます。 |
関連ページ
【VSCode超入門】基本的な使い方から応用例まで解説
VSCode（Visual Studio Code）の基本的な使い方から応用例まで入門者向けに解説します。
windows.joho.info
2025.06.23
Python超入門速報
python.joho.info
【Windows超入門】初心者から上級者までテクニックを解説
Windowsの基本操作と設定基本操作Windowsの基本操作便利なショートカット大全集画面のカスタマイズカスタマイズWindows 11の右クリックメニューを昔のスタイル（Windows 10）に戻す方法Windowsを高速化・軽量化する...
windows.joho.info
2024.06.29
コメント