VS Code でも Mermaid で Azure アイコンを使ったアーキテクチャを書き隊

はじめに

こんにちは、ACS 事業部の田中（脩）です。

ダイアグラムを作成するツールは draw.io が有名です。
私自身も利用していますが、図形の前面/背面の把握が面倒だったりアイコンを1つ動かすと複数の図形が動いたりと、
スマートに作図できずヤキモキすることが多々あります。
コードベースで作図できればと思っていたところ、下記の記事に出会い Mermaid を試すことにしました。

www.kentsu.website

こちらの記事ではブログ上で Azure のアイコンを表示するための手順が紹介されていますが、
業務での利用を考え、Visual Studio Code でプレビューできる方法を模索しました。
本記事ではその設定方法をご紹介します。

設定方法

手順1. 拡張機能をインストールする

Visual Studio Code に拡張機能 Markdown Preview Enhanced をインストールします。
こちらの拡張機能をインストールすれば、Mermaid で記述したダイアグラムがプレビューされるようになります。

marketplace.visualstudio.com

手順2. 拡張機能の設定を編集する

前述の拡張機能をインストールしただけでは Mermaid の標準のアイコンしかプレビューされません。
Azure のアイコンもプレビューされるように、Mermaid の初期設定を編集します。

github.com

VS Code でコマンドパレットを表示する。（F1 キー）
コマンドパレットで Markdown Preview Enhanced: Customize Preview Html Head を入力・選択して、head.html ファイルを開く。
head.html ファイルを下記のように編集する。

編集前

<!-- The content below will be included at the end of the <head> element. -->
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    // your code here
  });
</script>

編集後

<!-- The content below will be included at the end of the <head> element. -->
<script type="text/javascript">
  const configureMermaidIconPacks = () => {
    window["mermaid"].registerIconPacks([
      {
        name: "azure",
        loader: () =>
          fetch("https://unpkg.com/azureiconkento@1.1.1/azureicons/allicons.json").then(
            (res) => res.json()
          ),
      },
    ]);
  };

  if (document.readyState !== 'loading') {
    configureMermaidIconPacks();
  } else {
    document.addEventListener("DOMContentLoaded", () => {
      configureMermaidIconPacks();
    });
  }
</script>

テスト

任意の Markdown ファイルに下記コード（参考記事と同じもの）を記述して、プレビューします。

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}

プレビューは下図のように表示され、Azure アイコンが使用できていることが確認できました。