はじめに

mermaid.js v11.1.0+

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

私のサイト（tariki-code）

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

例えば、カオスマップ風にアイコンを活用したり：

また、しっかりとアーキテクチャ図を描いたり：

使い方

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

前提

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

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

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

npm install @iconify-json/logos

アイコンのインポート

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

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アイコンを含むアーキテクチャ図が表示されます。

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

アイコンの指定の仕方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

npm i -D @iconify-json/cib

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

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

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
    }
]);

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

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

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

最後に

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

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