ShowNet2021アイコンが配布されていたのでDraw.ioでTemplateとして使えるようにしました。
Draw.ioでsvg形式のiconを読み込み、以下のように使用することができるようになります。
iconセットをxml形式に変換する
Draw.ioでiconセットをTemplateとして読み込ませるためxml形式に変換します。
- Draw.ioにアクセスし、"Create New Diagram" で適当なファイルを作成
- "File" -> "New Library" -> "Device"で画面を開き、用意したsvg形式のiconセットをdrag&dropもしくは"Add images"から追加
- 追加し終わったら、"Export"からxmlファイルの保存先を選択する
Githubリポジトリに追加する
変換したxmlファイルをURLとしてDraw.ioで参照できるようにすると、Templateとして読み込むことができます。ここではGithubリポジトリにxmlファイルを追加してURLで参照できるようにします。
- 用意したGithubリポジトリにxmlファイルを追加
- ブラウザからリポジトリ内のxmlファイルへと辿り、"Raw"をクリックして表示されるページのURLを控えておく（ex. https://raw.githubusercontent.com/younishi/drawio-icon/main/shownet-icon.drawio)
URL参照設定
ブラウザ版Draw.io
下記の手順を実施して生成されたURLにアクセスすることで今後Templateとしてiconセットを使えるようになります。
- https://jgraph.github.io/drawio-tools/tools/convert.htmlにアクセスし、先ほど控えたURLを入力して "URL Encode" でエンコードしたURLを控えておく(ex. https%3A%2F%2Fraw.githubusercontent.com%2Fyounishi%2Fdrawio-icon%2Fmain%2Fshownet-icon.drawio)
- https://app.diagrams.net/?splash=0&clibs=U の直後に上で控えたURLを結合してできたURLにアクセスする(ex. https://app.diagrams.net/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fyounishi%2Fdrawio-icon%2Fmain%2Fshownet-icon.drawio
VSCode Draw.io
settings.jsonを開き、下記のように追記すると読み込まれます。
"hediet.vscode-drawio.customLibraries": [
{
"entryId": "ShowNet2021_icons",
"libName": "ShowNet2021 icons",
"url": "https://raw.githubusercontent.com/younishi/drawio-icon/main/shownet-icon.drawio"
}
],