MermaidでAWSアーキテクチャ図を描いてみた！

Mermaidが好きすぎるけど結局draw.ioにしがちな今日この頃ですが、ついにMermaidでAWSアーキテクチャ図が描けるようになったらしいので試してみました！

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

やってみた

感想としては、そこそこ複雑なものも描けそうです！
Mermaidのアーキテクチャドキュメントに飛んで、一番下のAWSアーキテクチャ図のサンプルコードに以下のコードをコピペして実行すると見ることができます

mermaidコード

architecture-beta
    service dns(logos:aws-route53)[Route53]
    service cdn(logos:aws-cloudfront)[CloudFront]
    service cert(logos:aws-certificate-manager)[ACM]

    service storage(logos:aws-s3)[S3]

    group vpc(logos:aws-vpc)[VPC]

    service loadbalancer(logos:aws-elb)[ALB] in vpc

    group private_subnet1[Private Subnet 1] in vpc
    service appserver1(logos:aws-ec2)[EC2 Instance 1] in private_subnet1
    service db_primary(logos:aws-aurora)[Aurora Primary] in private_subnet1

    group private_subnet2[Private Subnet 2] in vpc
    service appserver2(logos:aws-ec2)[EC2 Instance 2] in private_subnet2
    service db_replica(logos:aws-aurora)[Aurora Replica] in private_subnet2

    junction asg_junction in vpc
    junction aurora_junction in vpc

    dns:R -- L:cdn
    cdn:R -- L:loadbalancer
    loadbalancer:R -- L:asg_junction
    asg_junction:T -- B:appserver1
    asg_junction:B -- T:appserver2
    appserver1:R -- L:db_primary
    appserver2:R -- L:db_replica
    cdn:T -- B:storage

    db_replica:T -- B:aurora_junction
    aurora_junction:T --> B:db_primary

    cert:B -- T:dns

2024-09-11追記 Zenn上でもアーキテクチャが描けるようになりました！！

ただし、デフォルトアイコンのみ対応で、上記の例のようにAWSリソースアイコンなどは使用できないようです

書き方

サービス

AWSだとEC2やS3に使えそうです
アイコンとタイトルが付けられます

service {service id}({icon name})[{title}]

例：service ec2(logos:aws-ec2)[EC2]

エッジ

AWSだとネットワークに使えそうです
サービス間を線でつなぐことができます

{serviceId}:{direction} -- {direction}:{serviceId}

directionはL, R, T, Bのいずれかで、それぞれアイコンの左・右・上・下方向に矢印を伸ばすことができます
また、エッジは矢印にすることができ-->, <--, <-->のいずれかが使えます

例

architecture-beta
    service ec2(logos:aws-ec2)[EC2]
    service s3(logos:aws-s3)[S3]
    
    ec2:R -- L:s3

ジャンクション

レイアウトをそろえるための点です
サービスと同じようにエッジに指定して位置を揃えることができます

junction {junction id}

例

architecture-beta
    service alb(logos:aws-elb)[ALB]
    service ec2A(logos:aws-ec2)[EC2 A]
    service ec2B(logos:aws-ec2)[EC2 B]
    
    junction jct
    
    alb:B -- T:jct
    jct:L -- R:ec2A
    jct:R -- L:ec2B

グループ

AWSだとVPCやサブネット・Auto Scalingグループに使えそうです
アイコンとタイトルが付けられます

group {group id}({icon name})[{title}]

例：group vpc(logos:aws-vpc)[VPC]

グループの中にグループやサービス・ジャンクションを入れることができます

例

architecture-beta
    group vpc(logos:aws-vpc)[VPC]

    service alb(logos:aws-elb)[ALB] in vpc
    service ec2A(logos:aws-ec2)[EC2 A] in vpc
    service ec2B(logos:aws-ec2)[EC2 B] in vpc
    
    junction jct in vpc
    
    service s3(logos:aws-s3)[S3]
    
    alb:B -- T:jct
    jct:L -- R:ec2A
    jct:R -- L:ec2B

アイコン

アイコンはデフォルトアイコンかIconifyのアイコンセット（インポートが必要）が使用できます

デフォルトアイコン

cloud, database, disk, internet, serverが使用できます

例

architecture-beta

    service internet(internet)[Internet]

    group cloud(cloud)[Cloud]

    service server(server)[Server] in cloud
    service db(database)[Database] in cloud
    service disk(disk)[Storage] in cloud

Iconify アイコンセット

インポート方法はMermaidのアーキテクチャドキュメントを参照してください

iconify-json/logosのインポート方法

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

今回の例で使用したAWSリソースアイコンはIconfyのサイトで探しましたが、代表的なAWSリソースしかありませんでした
https://icon-sets.iconify.design/?query=aws

おわりに

バージョンがまだまだ対応していないことと、アイコンはインポートが必要で種類が少ないことがあるので、Zennで使うことやREADME.mdで使うのはまだまだ難しそうです・・
コードでAWSアーキテクチャ図が描けるのはChatGPTが使えるなどかなり便利なので、今後のアップデートに期待です！