日頃から構成図や資料中で使用する図などはエクセルやパワポではなく VSCode ＋ Draw.io で作成しています。このたびデジタル庁がイラスト・アイコン素材を公開したとのことで、早速これをカスタムライブラリとして使用できるようにしました。その時の手順をメモとして残しておきます。
アイコン素材のダウンロード
公開ページ から zip ファイルをダウンロードして展開。designsystem-assets/icon/png フォルダにアイコンの png 画像一式、designsystem-assets/illustration/png フォルダにイラストの png 画像一式が入っているのでこれを使用。
カスタムライブラリの作成
Draw.io Integration プラグインだけではカスタムライブラリの作成ができないようなので、Web の https://app.diagrams.net/ で作成することに。
今回はローカルデバイス上で、白紙のファイルを新規作成。
「ファイル」メニューから「新規ライブラリ」→「デバイス」を選択。
ライブラリ作成画面が出てくるので、ファイル名を designsystem-assets.xmlとして、先ほどダウンロードした zip に含まれていたアイコンの png ファイル（designsystem-assets/icon/png/*）およびイラストの S サイズの png ファイル（designsystem-assets/illustration/png/s_*）をすべてドラッグ＆ドロップ。「Do you want to resize large images to make the application run faster?」と聞かれたら「サイズ変更」を選択。すべてアップロードできたのち「保存」ボタンを押すと xml ファイルが自動でダウンロードされる。
適当なフォルダを作って ~/Downloads から移動。
% mkdir /Users/xsgk/Documents/vscode-custom-libraries
% mv /Users/xsgk/Downloads/designsystem-assets.xml /Users/xsgk/Documents/vscode-custom-libraries
VSCode の設定
settings.json を開き、以下の設定を新規追加。file には保存したパス、libName と entryId はとりあえず designsystem-assets で。他の設定との前後に記述する際にはカンマを忘れないよう。
"hediet.vscode-drawio.customLibraries": [
{"file": "/Users/xsgk/Documents/vscode-custom-libraries/designsystem-assets.xml",
"libName": "designsystem-assets",
"entryId": "designsystem-assets.xml"
}
],
反映の確認
VSCode 上で適当な .drawio ファイルを作成し、エディタを開くと他のライブラリと並んで designsystem-assets が存在。これを展開すると追加したイラストとアイコンが無事表示。
以上、どなたかの参考になれば幸いです。