はじめに

開発者の多くが直面するSVG編集の課題。コードだけでの編集は視覚的に分かりにくく、専用ツールは機能過多で重いことも。そんな悩みを解決するのが、VS CodeのDraw.io Integration。軽量で直感的なSVG編集環境を手に入れましょう。

環境準備

基本的なインストールはこれで完了です。

デフォルトでは、Draw.io Integrationは *.drawio.svg ファイルのみを処理します。通常の .svg ファイルも Draw.io で編集したい場合は、VS Code の settings.json に以下の設定を追加してください：

"workbench.editorAssociations": {
    "*.svg": "hediet.vscode-drawio-text",
}

この設定により、すべての SVG ファイルを Draw.io エディタで開けるようになります。

グリッド表示でアラインメントを整える
レイヤー機能で複雑な図形も管理可能
コンポーネントの再利用で効率的に作図
インポートしたSVGの編集テクニック：
- グループ化された要素は必要に応じてグループ解除
- パスやシェイプを個別に編集可能
- 色やサイズの一括変更も可能
- 必要に応じて要素の追加や削除

Draw.io IntegrationはVS Code上で手軽にSVGを編集できる強力なツールです。当初は単純な図形作成ツールとして使い始めましたが、実際に使ってみると以下のような幅広い用途に活用できることがわかりました：

特に、開発者のワークフローに自然に組み込める点が大きな魅力です。コードと図解を同じVS Code上で管理できることで、ドキュメント作成の効率が大きく向上しました。

SVGファイルの編集は従来、専用のグラフィックツールが必要でしたが、Draw.io Integrationを使うことで、普段使いのエディタ上で手軽に行えるようになります。まずは簡単な図形の作成から始めて、徐々に用途を広げていくことをお勧めします。

デフォルトで用意されている図形もたくさんある

自分で描いた図形をスクラッチパッドに登録できる

例: BPMNがある　ビジネスのプロセスを整理するのに便利そう