mermaid.jsのArchitecture Diagramsでのアイコンの使い方

## はじめに

### mermaid.js v11.1.0+ 

mermaid.jsに「Architecture Diagrams」という機能が追加され、自サイトでさっそく活用してみました。ネットでも話題になっているように、AWSのアイコンを使ったアーキテクチャ図を簡単に描けるようになっています。

https://mermaid.js.org/syntax/architecture

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/9a822fcd-0ffe-9292-9938-6f7bbcadc42a.png)


### 私のサイト（tariki-code）

早速ではありますが、下記の通り使ってみました。

https://tariki-code.tokyo/blog/svelte

例えば、カオスマップ風にアイコンを活用したり：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/2e423f6d-b4b8-6900-b933-5d5d240a7584.png)

また、しっかりとアーキテクチャ図を描いたり：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/f1bbc156-1048-5916-8f91-b31066e7e899.png)

## 使い方

今回はニーズが高そうなAWSのアーキテクチャ図を例に、アイコンの使い方を説明します。こちらはあくまで私の実践例であり、他の手法もありますので、オフィシャルのドキュメントをご参照ください。

### 前提

mermaid.jsの最新版をインストール済。
Node.jsフレームワーク等でレンダリング処理を実装済。

### パッケージのインストール

まずは、アイコンパッケージをインストールします。

```bash
npm install @iconify-json/logos
```

### アイコンのインポート

mermaidをレンダリングしているコンポーネントに次のコードを追加します。

```Javascript
import mermaid from 'mermaid';
import { icons } from '@iconify-json/logos';
mermaid.registerIconPacks([
  {
    name: icons.prefix, // To use the prefix defined in the icon pack
    icons,
  },
]);
```

### markdownファイルなどで記載

あとは、以下のようにmarkdownファイルにコードを書くだけで、AWSアイコンを含むアーキテクチャ図が表示されます。

```yaml
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

### アイコンの指定の仕方

使えるアイコンは以下のサイトで確認できます。

https://icones.js.org/

こちらの「SVG Logos」がオフィシャルの説明までで使えるアイコンになります。
これだけでもかなり色々使えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/3bf473a0-15d4-b531-fc17-2a1f82f884ec.png)

アイコンをクリックした際の`logos:aws`の文字列、こちらを使用します。
アイコンサンプルのすぐ下にあるやつですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/64e48781-5d77-038a-f264-4b08d0fa0fbf.png)

`group`: 点線で囲むグルーピング
`service`: 個々の構成物

となり、いずれにもアイコンの指定が可能です。
`group`の場合は左上にアイコンが表示されます。

```
    group コード内識別子(ロゴ名称)[表記名]
    service コード内識別子(ロゴ名称)[表記名] in グループの識別子
```

すなわち、先ほどのAWSのロゴを使いたい場合は「ロゴ名称」の箇所に`logos:aws`を指定します。

ここまではオフィシャルに書いているそのままの内容です。


## 他のアイコンを使うには？

使えるアイコンのカテゴリは多数あります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/1727004f-abf7-0962-7b34-f1ccf0f688cf.png)

ただ繰り返しですが、オフィシャルのサンプルは「SVG Logos」しか使えません。

例えば、「CoreUI Brands」のカテゴリにはモノトーンカラーのLINEロゴがあるのですが、こちらに記載の`cib:line`を指定しても`?`で表示をされてしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194056/7ed7bc88-48f2-92b9-112b-3c0a1b593703.png)

こちら当たり前の話ではあるのですが、「CoreUI Brands」など、他のカテゴリのアイコンを使用するには、アイコンパッケージを追加でインストールする必要があります。

### 追加パッケージのインストール

次のコマンドで追加パッケージをインストールします。

```bash
npm i -D @iconify-json/cib
```

### 追加アイコンのインポート

レンダリングしているコンポーネントに追加した箇所を下記の通り修正します。

```javascript
import { icons as logos } from '@iconify-json/logos';
import { icons as cib} from '@iconify-json/cib';

mermaid.registerIconPacks([
    {
        name: logos.prefix,
        icons: logos,
    },
    {
        name: cib.prefix, // 追加アイコンの指定
        icons: cib
    }
]);
```

これで使えるようになります。

```yaml
    group lineGroup(cib:line)[LINE]
    service lineService(cib:line)[LINEChannel] in lineGroup
```

ちなみにコード内の識別子や表記名に「記号」は使えないようでSyntaxErrorとなります。（`-`とか`:`とか）

### 最後に

mermaid.jsを使ったWebサイト上での（そしてmarkdownファイルからの）描画は、ライトテーマとダークテーマの切替など色々苦労したので他にも書きたいと思います。

今後ともよろしくお願いいたします。