前提条件と注意点

本記事で述べている機能は、記事執筆時点（2024-09-17）ではベータ版です。
Mermaidの今後の開発状況によっては変更がある可能性があります。

Mermaidとは

Mermaidは、Markdown記法でグラフを描画するためのライブラリです。
Mermaidを使うことで、フローチャートやクラス図をシンプルな記法で描画することができます。

mermaid.js.org

Mermaidで書いたコードは、Visual Studio Codeなどのエディタや、GitHub上でプレビューすることができます。

Mermaidで構成図を書けるようになりました

mermaid.js.org

そんなMermaidですが、構成図が書けるようになりました。
図の種類を示す記述にarchitecture-betaが増えて、これを使うことで構成図を書くことができます。
betaという名前がついている通り、ベータ版の機能です。

上記ページにある通り、こんな感じで書くことができます。

```mermaid
architecture-beta

    group aws(cloud)[AWS]
    group vpc(cloud)[VPC] in aws
    group public_subnet(cloud)[Public Subnet] in vpc
    group private_subnet1(cloud)[Private Subnet1] in vpc
    group private_subnet2(cloud)[Private Subnet2] in vpc
    group db_subnet(cloud)[DB Subnet] in vpc

    service load_balancer(server)[LoadBalancer] in public_subnet
    service web_server1(server)[Web Server 1] in private_subnet1
    service web_server2(server)[Web Server 2] in private_subnet2
    service db_server(server)[DB Server] in db_subnet

    load_balancer:B -- T:web_server1
    load_balancer:B -- T:web_server2
    web_server1:B -- T:db_server
    web_server2:B -- T:db_server

```

このコードをVisual Studio Codeでプレビューすると、このように表示されます。

Visual Studio CodeとGitHubでこのコードをプレビューすると、構成図が表示されることを確認できました。
とても便利です。

一方で、現状ではサブネットをまたいだ表現はやり方を見つけることができませんでした。
また、アイコンの種類も限定されています。

AWSのアイコンはデフォルトでは出ない

Mermaidの公式ページにもある通り、AWSのアイコンはデフォルトでは表示されませんでした。
AWSのアイコンを使ったサンプルコードをVisual Studio Codeのプレビューで見ると、下記のように？マークが表示されます。

```mermaid
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
```