はじめに
開発者の多くが直面するSVG編集の課題。コードだけでの編集は視覚的に分かりにくく、専用ツールは機能過多で重いことも。そんな悩みを解決するのが、VS CodeのDraw.io Integration。軽量で直感的なSVG編集環境を手に入れましょう。
環境準備
必要なもの
- VS Code（最新版推奨）
- Draw.io Integration拡張機能
インストール手順
- VS Codeの拡張機能タブを開く
- 「Draw.io Integration」を検索
- インストールボタンをクリック
- VS Codeを再起動
基本的なインストールはこれで完了です。
追加設定（必要ならば）
デフォルトでは、Draw.io Integrationは *.drawio.svg ファイルのみを処理します。通常の .svg ファイルも Draw.io で編集したい場合は、VS Code の settings.json に以下の設定を追加してください：
"workbench.editorAssociations": {
"*.svg": "hediet.vscode-drawio-text",
}
この設定により、すべての SVG ファイルを Draw.io エディタで開けるようになります。
基本的な使い方
SVGファイルの作成と編集
-
新規ファイル作成
-
.drawioまたは.drawio.svg拡張子でファイルを作成 - Draw.ioエディタが自動的に開きます
-
-
図形の作成とSVGのインポート
-
新規作成の場合：
- 左側のツールパネルから図形を選択
- キャンバスにドラッグ＆ドロップ
- サイズ調整や色の変更も直感的に可能
-
既存SVGの編集：
- File → Import から既存のSVGファイルを選択
- または編集したいSVGファイルをDraw.ioエディタにドラッグ＆ドロップ
- インポートされたSVGは自動的に編集可能な図形として読み込まれる
- 各要素を個別に選択して編集可能
-
- SVGのエクスポートと保存
- File → Export as → SVG
- または直接
.drawio.svgとして保存
実践的なTips
- グリッド表示でアラインメントを整える
- レイヤー機能で複雑な図形も管理可能
- コンポーネントの再利用で効率的に作図
- インポートしたSVGの編集テクニック：
- グループ化された要素は必要に応じてグループ解除
- パスやシェイプを個別に編集可能
- 色やサイズの一括変更も可能
- 必要に応じて要素の追加や削除
実践的な活用シーン
キャラクター作成・調整
- 基本図形を組み合わせてオリジナルキャラクターを作成
- 既存のSVGキャラクターの色やサイズを調整
- アバターやアイコンのバリエーション作成
プレゼン資料の図解作成
- スライド用の図形やダイアグラムを作成
- 企業カラーに合わせた配色調整
- 既存の図表のサイズや配置を微調整
- 複数スライドで再利用可能な図形の管理
開発ツールとの連携
PlantUMLからの出力
- PlantUMLで作成した図をSVGとして出力
- レイアウトや色の微調整
- 図の一部を強調・修正
Pythonグラフの加工
- Matplotlibなどで出力したグラフをSVGとして保存
- グラフの色やフォントを調整
- 追加の図形や注釈を付与
既存素材の組み合わせ
- アイコンや図形を組み合わせて新しい図を作成
- 複数のSVGを統合して1つの図に
- パーツの再利用による効率的な図解作成
チーム開発での活用
- SVGファイルのバージョン管理（Git）
- チームでの図解の共有・再利用
- レビューしやすい差分確認
メリットと注意点
メリット
- VS Code内で完結する軽量な編集環境
- コードとビジュアル編集の両立
- バージョン管理との相性が良好
注意点
- 複雑なグラデーションやエフェクトには不向き
- アートワーク制作には機能が不足
- 大規模なSVG編集では専用ツールの検討を推奨
まとめと所感
Draw.io IntegrationはVS Code上で手軽にSVGを編集できる強力なツールです。当初は単純な図形作成ツールとして使い始めましたが、実際に使ってみると以下のような幅広い用途に活用できることがわかりました：
- キャラクターデザインの作成・調整
- プレゼン資料用の図解作成
- PlantUMLやPythonグラフの後編集
- 既存素材の組み合わせによる新しい表現
特に、開発者のワークフローに自然に組み込める点が大きな魅力です。コードと図解を同じVS Code上で管理できることで、ドキュメント作成の効率が大きく向上しました。
SVGファイルの編集は従来、専用のグラフィックツールが必要でしたが、Draw.io Integrationを使うことで、普段使いのエディタ上で手軽に行えるようになります。まずは簡単な図形の作成から始めて、徐々に用途を広げていくことをお勧めします。
参考情報: 図形のパレットについて
デフォルトで用意されている図形もたくさんある
自分で描いた図形をスクラッチパッドに登録できる
- その他の図形からカテゴリを追加して使える要素を追加できる
例: BPMNがある ビジネスのプロセスを整理するのに便利そう
