最新の Azure アイコンを svg2mxlibrary で変換して diagrams.net (draw.io) で使用する

14181 ワード
QiitaAzure Draw.io Azure VSCode mxgraph Azure テキストリンク

概要

先日の 最新の Azure アイコンと Visual Studio Code Draw.io Integration の活用 という記事で、 pacodelacruz さんが作られた最新 Azure アイコンの diagrams.net (draw.io) アプリ用のシェイプライブラリを紹介しましたが、最新版の Azure Icon Collection を反映していないのが残念だということを書きました。

そこで SVG のアイコンファイルから diagrams.net アプリが認識する mxlibrary 形式のファイルに変換するツール svg2mxlibrary を自作し、最新版の Azure Icon Collection から変換した mxlibrary と共に次のリポジトリで公開しましたので、この記事で紹介します。

Visual Studio Code の Draw.io Integration 用のカスタムライブラリ設定も用意しています。ぜひ活用してください。

使い方

SVG のアイコンファイルから変換済みの mxlibrary ファイルは、リポジトリの mxlibrary ブランチで参照できます。

オンライン版 app.diagrams.net アプリで使う場合は、次のリンクを利用してください。 mxlibrary がインポートされます。一度インポートされた mxlibrary はアプリによって永続化されます。

アイコンギャラリー app.diagrams.net リンク
'Official' Azure Icons Set Open app.diagrams.net with azure-icons.xml
Azure Docs Open app.diagrams.net with azure-docs.xml
'CDS' Azure Icons Set Open app.diagrams.net with azure-cds.xml
Azure Patterns Collection Open app.diagrams.net with azure-patterns.xml
(アイコンが 1500 以上あるので注意！)
Logos & Brands Open app.diagrams.net with logos.xml
Other Icons Open app.diagrams.net with other.xml

デスクトップ版 diagrams.net アプリで使う場合は、mxlibrary ファイルをダウンロードして XML ファイルをアプリにドラッグ・アンド・ドロップすればインポートすることができます。

Visual Studio Code の Draw.io Integration 拡張で使用する場合は、次の設定を settings.json に追加してください。カスタムライブラリとして呼び出せるようになります。

    "hediet.vscode-drawio.customLibraries": [
        {
            "entryId": "'Official' Azure Icons Set",
            "libName": "Azure Icons",
            "url": "https://raw.githubusercontent.com/yaegashi/icon-collection-mxlibrary/mxlibrary/azure-icons.xml"
        },
        {
            "entryId": "Azure Docs",
            "libName": "Azure Docs",
            "url": "https://raw.githubusercontent.com/yaegashi/icon-collection-mxlibrary/mxlibrary/azure-docs.xml"
        },
        {
            "entryId": "'CDS' Azure Icons Set",
            "libName": "Azure CDS",
            "url": "https://raw.githubusercontent.com/yaegashi/icon-collection-mxlibrary/mxlibrary/azure-cds.xml"
        },
        {
            "entryId": "Azure Patterns Collection",
            "libName": "Azure Pattenrs",
            "url": "https://raw.githubusercontent.com/yaegashi/icon-collection-mxlibrary/mxlibrary/azure-patterns.xml"
        },
        {
            "entryId": "Logos & Brands",
            "libName": "Azure Logos",
            "url": "https://raw.githubusercontent.com/yaegashi/icon-collection-mxlibrary/mxlibrary/logos.xml"
        },
        {
            "entryId": "Other Icons",
            "libName": "Azure Other",
            "url": "https://raw.githubusercontent.com/yaegashi/icon-collection-mxlibrary/mxlibrary/other.xml"
        },
    ],

Azure Icon Collection から mxlibrary への変換

リポジトリには Azure Icon Collection のリポジトリのクローンと mxlibrary ファイルへの変換を自動的に行うスクリプト convert.sh が含まれています。

次のように実行してください。変換プログラム svg2mxlibrary を動かすために Node.js が必要です。変換結果の mxlibrary ファイルは out フォルダに格納されます。

$ git clone https://github.com/yaegashi/icon-collection-mxlibrary
$ cd icon-collection-mxlibrary
$ npm install --no-save svg2mxlibrary
$ ./convert.sh
Cloning into 'icon-collection'...
remote: Enumerating objects: 2842, done.
remote: Counting objects: 100% (2842/2842), done.
remote: Compressing objects: 100% (2739/2739), done.
remote: Total 2842 (delta 153), reused 1216 (delta 99), pack-reused 0
Receiving objects: 100% (2842/2842), 1.72 MiB | 1.95 MiB/s, done.
Resolving deltas: 100% (153/153), done.
Generating mxlibrary out/azure-icons.xml
Generating mxlibrary out/azure-docs.xml
Generating mxlibrary out/azure-cds.xml
Generating mxlibrary out/azure-patterns.xml
Generating mxlibrary out/logos.xml
Generating mxlibrary out/other.xml

svg2mxlibrary について

変換プログラム svg2mxlibrary は Node.js の CLI で、次のようなコマンドラインオプションが利用できます。

$ node svg2mxlibrary
svg2mxlibrary [options] <SVG files...>

Options:
      --version  Show version number                                   [boolean]
      --help     Show help                                             [boolean]
  -o, --out      output file                 [string] [default: "mxlibrary.xml"]
  -s, --size     icon size                                         [default: 80]

-s オプションで出力するアイコンのサイズを指定できます。リポジトリで公開している mxlibrary はデフォルトの値 80 で出力しています。

svg2mxlibrary は mxgraph という NPM パッケージを使用しています。 mxGraph は diagrams.net (draw.io) アプリ実装のコアとなるライブラリです。

mxGraph を使用するには DOM が必要なのですが、Web ブラウザではなく Node.js の CLI で使うために jsdom を利用するテクニックを利用しました。 How i can use mxGraph instance in node.js という Stack Overflow の回答に説明があります。

SVG アイコンを描画した mxGraph オブジェクトを mxlibrary 形式のファイルに変換する手順については、 GitHub Issue #470 Generate mxlibrary - how to properly encode contents of the xml property? を参考にしました。

SVG アイコン描画時のスタイルについては元ネタとなった Azure Icon Libraries for Diagrams.net (Draw.io) の設定値を参考にしました。アスペクト比を固定し、テキストラベルの位置をアイコン下中央にしているので、使いやすいと思います。

まとめ

ということで、最新の Azure アイコンを diagrams.net (draw.io) アプリや Visual Studio Code で使える mxlibrary として公開しましたので、ぜひ活用してください。なお公式の Azure アーキテクチャアイコンの配布では 2020 年 11 月に v3 がリリースされていますが、 Azure Icon Collection にはまだこれが含まれていないようです。こちらが更新されしだいリポジトリの mxlibrary にも反映させます。

また今回開発した svg2mxlibrary は、 Azure アイコンに限らず、任意の SVG ファイルから mxlibrary に変換するための汎用ツールとしても使えると思います。

大して複雑ではない短いプログラムですが、正しく動作させるまでにはいろいろな調査や試行錯誤が必要でした。 Node.js のプログラムを一から作るのも初めてで、いろいろと不備があると思いますので、バグの報告や改善の提案をいただけるうれしいです。