Interop ShowNet アイコンを draw.io (diagrams.net) で使おう

## Interop ShowNet Icon とは?

- [ShowNet - NOCの絵描きさん（河口さん）からどえらいものが届きました。| Facebook](https://www.facebook.com/interop.shownet/posts/3901052873342639)
- [https://www.interop.jp/shownet/point/#topology_external](https://www.interop.jp/shownet/point/#topology_external)
    - ダウンロードはここから
- あきみちさんの解説動画 (YouTube)
    - [美しいネットワーク図を描けるInterop ShowNetアイコン2021](https://youtu.be/oYGXXMx0NQo)

7年ぶりのアップデートということなんですが、今回 SVG 形式のアイコンも同梱されてるんですよね。であれば draw.io (diagrams.net) で使えるじゃないか！ という記事です。

## とっとと使いたい

### 変換済みアイコンライブラリファイル

ライセンスは [Creative Commons — 表示 - 継承 4.0 国際 — CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.ja) なので再配布 OK。私が作ったアイコンライブラリファイル (mxlibrary xml) を GitHub に置いてあります。

- [corestate55/shownet-icons-mxlibrary: Draw.io (Diagrams.net) icon library of Interop ShowNet Icons 2021](https://github.com/corestate55/shownet-icons-mxlibrary)
    - shownet-icons.xml (mxlibrary xml)

### Diagrams.net (online)

以下の URL をクリックすると ShowNet Icons コミの状態で diagrams.net を開けます。

* [Open Diagrams.net with shownet-icons.xml](https://app.diagrams.net/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fcorestate55%2Fshownet-icons-mxlibrary%2Fmain%2Fshownet-icons.xml)

イメージ
![Diagrams.net with ShowNet Icons](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/16d9fe13-98fc-a816-11ca-b93179e9ac1d.png)


### VSCode Draw.io Integration

イメージ

![VSCode Draw.io Integration with Shownet Icon image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/8cfc3d22-6f7d-4756-a60e-61d6d0964c25.png)

設定手順

- [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) はインストール済みって想定で。(慣れてる人はダイレクトに settings.json の編集に行ってください)
- [File] - [Preferences] - [Settings]

![VSCode settings menu](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/570f4c88-ddab-01df-042d-bf2b280a2b6b.png)

- ”Draw.io" で検索すると "Hediet > Vscode-drawio: Custom Libraries" があるので、そこで "Edit in settings.json" をクリック

![03_vscode_settings_customlib.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/dcb010e4-8f0f-312c-7cf1-951facb5c42b.png)

- settings.json に追記します。
    - URL は gist にあげた shownet-icons.xml ("Raw file") のURL

```json
    "hediet.vscode-drawio.customLibraries": [
        {
            "entryId": "Interop ShowNet Icons",
            "libName": "Interop ShowNet Icons",
            "url": "https://raw.githubusercontent.com/corestate55/shownet-icons-mxlibrary/main/shownet-icons.xml"
        }
    ]
```

なお、`url` のかわりに `file` にしてダウンロードした shownet-icons.xml ファイルパスを指定するのでも大丈夫です。

```json
    "hediet.vscode-drawio.customLibraries": [
        {
            "entryId": "Interop ShowNet Icons",
            "libName": "Interop ShowNet Icons",
            "file": "/home/hagiwara/app/shownet-icons-mxlibrary/shownet-icons.xml"
        }
    ]
```


- [+ More Shapes] から "Custom Libraries" - "Interop ShowNet Icons" を選択して [Apply]

![Add Shapes](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/cf1a9143-e372-34fd-6d83-eca3f302b2d9.png)


### Ubuntu Draw.io Desktop App

イメージ

![Draw.io desktop app image with ShowNet icons](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/90f0e8cf-8303-0fb0-6c35-058483e78746.png)

設定手順

- shownet-icons.xml をダウンロードします。
    - URL は github の shownet-icons.xml ("Raw file") の URL

```shell
curl -LO https://raw.githubusercontent.com/corestate55/shownet-icons-mxlibrary/main/shownet-icons.xml
```

- [ファイル]-[ライブラリを開く] でダウンロードした shownet-icons.xml を開いてください。

![Open shownet-icons.xml as library](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/d944195f-eee0-7986-d0f4-f845619d7a60.png)


## Draw.io用のアイコンライブラリを作る

[最新の Azure アイコンを svg2mxlibrary で変換して diagrams.net (draw.io) で使用する - Qiita](https://qiita.com/yaegashi/items/c0882e76baab72b13e39) でツールおよび手順の解説があるのでそのまま使わせてもらいました。

- [yaegashi/icon-collection-mxlibrary: Azure Icon Collection mxlibrary for diagrams.net (formerly draw.io)](https://github.com/yaegashi/icon-collection-mxlibrary)
- Node.js (node + npm) が必要です

```shell
git clone https://github.com/corestate55/shownet-icons-mxlibrary.git
cd shownet-icons-mxlibrary/
./convert.sh
```

convert.sh は ShowNet Icon のダウンロードと展開, icon-collection-mxlibrary のダウンロード(pull) と npm package のインストール, SVG-mxlibrary 変換実行までまとめてやります。

## おわりに

~~ファイル1個だけだし gist に置いたんだけど、URL がアレなのでちゃんとリポジトリ作ったほうが良かった気もする。まあいいや。~~ [2021-05-01] ちゃんとリポジトリ作りました。

よいNW図生活を！