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

Mermaid で Architecture という Diagram Type がサポートされました
Architecture Diagrams Documentation (v11.1.0+) | Mermaid

今までは Flowcharts で図を書いていましたが、アーキテクチャ専用のスタイルが用意されたようです
オリジナルのアイコンを使うこともできるようなので、Azure のアーキテクチャ図を書いてみました

ざっくり手順

Architecture Diagrams の確認
公開済みオリジナルアイコンの利用
Azure アイコンの公開
テスト

1. Architecture Diagrams の確認

まずは本ブログで利用できるかを確認します
Mermaid のドキュメントに記載のあるテンプレートをそのまま利用してみるときちんと表示されました

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

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

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

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

2. 公開済みオリジナルアイコンの利用

執筆時点で Mermaid が標準で用意してあるアイコンは Cloud, database, disk, internet, server の 5 つだけです
それに加えて、Iconify Design: All popular icon sets, one framework. などで公開されているアイコンを利用できるようです

公開されているアイコンはいくつかの利用方法がありますが、今回は CDN から取ってくる方法でオリジナルアイコンを利用してみます

本ブログは Hugo を利用しているので、baseof.html に下記を追加します

1
2
3
4
5
6
7


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

Architecture Diagrams Documentation (v11.1.0+) | Mermaid を見てコピペしているだけです
参考にした Mermaid では 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

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

ちゃんと表示されました
これは AWS のアイコンのいくつかが既に公開されているから利用することができています
[AWS] で検索してみた結果 Search - Iconify

一方で [Azure] で検索してみた結果がこちらです Search - Iconify
AWS のアイコンも多いとは言えない種類でしたが、Azure はもっと少なくもはや何もないレベルです

3. Azure アイコンの公開

Azure のアイコンが全然ないことが分かったので自分で用意して公開してみます
長くなるので別記事でまとめました
Mermaid で使う Azure アイコンを用意し隊 – クラウドを勉強し隊

4. テスト

公開した Azure アイコンを使えるように baseof.html を更新します

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


mermaid.registerIconPacks([
{
    name: 'azure',
    loader: () =>
    fetch('https://unpkg.com/azureiconkento@1.1.1/azureicons/allicons.json').then((res) => res.json()),
},
{
    name: 'logos',
    loader: () =>
        fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
    },
]);

では Azure アイコンを実際に使ってみます

architecture-beta
    group api(azure:resource-groups)[API]

    service db(azure:sql-database)[Database] in api
    service disk1(azure:storage-accounts)[Storage] in api
    service disk2(azure:storage-accounts)[Storage] in api
    service server(azure:virtual-machine)[Server] in api

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

architecture-beta
    group api(azure:resource-groups)[API]

    service db(azure:sql-database)[Database] in api
    service disk1(azure:storage-accounts)[Storage] in api
    service disk2(azure:storage-accounts)[Storage] in api
    service server(azure:virtual-machine)[Server] in api

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

ちゃんと Azure のアイコンを使うことができました
※アイコンを変更しただけなので、アーキテクチャ図としての意味は無視しています

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}

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 で Architecture Diagrams が使えるようになりました
オリジナルアイコンを使うこともできるので、Azure のアイコンを使ってアーキテクチャ図を書けるようにしてみました

インポートが処理が必要なので GitHub などではオリジナルアイコンは使えるかわかりませんが
このブログでは積極的に使ってみようと思います