Mermaid で使う Azure アイコンを用意し隊

Mermaid で Azure アイコンを使ったアーキテクチャを書き隊 – クラウドを勉強し隊の記事で記載している通り Mermaid で利用できる　Azure アイコンがほとんどありません
そこで自分で用意してみました

ざっくり手順

オリジナルアイコンの公開方法を確認
npm アカウントの作成
Azure アイコンの取得
SVG を IconifyJSON へ変換
公開
テスト

1. オリジナルアイコンの公開方法を確認

CDN からアイコンを取得する方法を利用します
Mermaid のドキュメントのサンプルでは以下のように記載されています

import mermaid from 'CDN/mermaid.esm.mjs';
mermaid.registerIconPacks([
  {
    name: 'logos',
    loader: () =>
      fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
  },
]);

https://unpkg.com/ から取得していることがわかります

（Copilot いわく）UNPKG とは npm（Node Package Manager）で公開されているパッケージを CDN で配信するサービスだそうです
ということは自分で用意するオリジナルアイコンも npm で公開すれば使えるということです

npm を使った経験もほぼないですが、とりあえずやってみます

2. npm アカウントの作成

npm で公開するためにアカウントが必要だそうです
npm | Home からアカウントを作成します

3. Azure アイコンの取得

公開するためのアイコンを用意します
Azure のアイコンは Azure アイコン - Azure Architecture Center | Microsoft Learn から SVG ファイルがまとめられた zip ファイルでダウンロードすることができます

アイコンの利用条件を確認します

Microsoft は、これらのアイコンをアーキテクチャダイアグラム、トレーニング資料、またはドキュメントで使用することを許可しています。マイクロソフトから明示的な許可がない限り、許可された使用目的でのみアイコンをコピー、配布、および表示することができます。マイクロソフトはその他の権利をすべて留保します。

今回はアーキテクチャ図を作成するために利用します
また npm で公開することになりますが、アーキテクチャ図の作成に利用するためのアイコンとしての利用になります

上記の観点で利用条件に反しない認識です

ダウンロードした zip ファイルは解凍し、ファイル名を変更しておきます

変更前	変更後
10061-icon-service-Virtual-Networks.svg	Virtual-Networks.svg

ファイル名の変更には Windows用 PowerToys PowerRename ユーティリティ | Microsoft Learn を使って正規表現から一括変換しました

4. SVG を IconifyJSON へ変換

Mermaid で利用するアイコンは　Iconfy から取ってきていました
ダウンロードした Azure アイコンも Iconfy で利用できる形式にする必要があります
Iconfy で利用できる形式は Iconify JSON Type です

SVG ファイルを IconfyJSON に変換する方法が Iconfy のサイトに記載されいます

単体の SVG ファイルを変換する方法
- Importing SVG
ディレクトリ内の SVG ファイルを変換する方法
- Importing SVG from directory

今回はディレクトリ内の SVG ファイルを変換する方法を利用します
Iconfy のドキュメントを確認すると TypeScript で書かれた Iconify Tools というライブラリを使うようです

Visual Studio で Blank TypeScript プロジェクトを作成します

Github Copilot にサンプルコードを説明してもらいながら、下記のように修正しました
サンプルでは実行結果をファイル出力していなかったので、ファイル出力するように修正しました

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64


import * as fs from 'fs';
import {
    importDirectorySync,
    cleanupSVG,
    runSVGO,
    parseColors,
    isEmptyColor,
} from '@iconify/tools';

// Import icons
const iconSet = importDirectorySync('svgDirectory', {
    prefix: 'Azure',
});

// Validate, clean up, fix palette and optimise
iconSet.forEachSync((name, type) => {
    if (type !== 'icon') {
        return;
    }

    const svg = iconSet.toSVG(name);
    if (!svg) {
        // Invalid icon
        iconSet.remove(name);
        return;
    }

    // Clean up and optimise icons
    try {
        // Clean up icon code
        cleanupSVG(svg);

        /*
        // Assume icon is monotone: replace color with currentColor, add if missing
        // If icon is not monotone, remove this code
        parseColors(svg, {
            defaultColor: 'currentColor',
            callback: (attr, colorStr, color) => {
                return !color || isEmptyColor(color)
                    ? colorStr
                    : 'currentColor';
            },
        });
        */

        // Optimise
        runSVGO(svg);
    } catch (err) {
        // Invalid icon
        console.error(`Error parsing ${name}:`, err);
        iconSet.remove(name);
        return;
    }

    // Update icon
    iconSet.fromSVG(name, svg);
});

// Export
console.log(iconSet.export());

// Export to file
const output = iconSet.export();
fs.writeFileSync('output.json', JSON.stringify(output, null, 2));

実行するためにライブラリが必要なので、npm でインストールしておきます

npm install @iconify/tools --save

ダウンロード、解凍、名前変更した Azure アイコンを TypeScript プロジェクトのフォルダに移動させておきます

その Azure アイコンのフォルダを対象に上記の TypeScript プロジェクトを実行します
実行結果は JSON ファイルに出力されます

今回実行したプロジェクトはこちらです GitHub - NakayamaKento/IconfyJSON

5. 公開

作成した JSON ファイルを npm で公開します
初めてのnpm パッケージ公開 #Linux - Qiita や既に公開済みの Iconfy のアイコンパッケージを @iconify-json/logos - npm 参考にしました

README.md や package.json などを修正し、 npm publish ./ を実行し公開します
もし、公開した内容に不備があった場合は unpublish で取り消すことができますが、制約があるようなので注意が必要です
あの時の俺に言いたい。NPMにpublishしたら（ほぼ）消せないことを #JavaScript - Qiita

作成済みの npm パッケージはこちらです

6. テスト

テストをしてみます
細かい手順は Mermaid で Azure アイコンを使ったアーキテクチャを書き隊 – クラウドを勉強し隊を見てもらうとして、こんな風に使うことができました

architecture-beta
    
group rg1(azure:resource-groups)[Resource Group]

    group vnet1(azure:virtual-networks)[Virtual Network] in rg1
        group subnet1(azure:subnet)[Subnet] in vnet1
        service server(azure:virtual-machine)[Server] in subnet1

    service storage(azure:storage-accounts)[Storage] in rg1
    service nsg1(azure:network-security-groups)[NSG] in rg1
    service database(azure:sql-database)[Database] in rg1

    nsg1:L --> R:server{group}

まとめ

Mermaid で利用できる Azure アイコンがほとんどないので、自分で用意してみました
結果的には TypeScript を実行したり、npm で公開する必要がありました
npm で公開するのは初めてでしたが、意外と簡単にできました

自分自身でガンガン使っていきたいと思います