Zenn
🧜‍♀️

[Mermaid]MermaidでAWS構成図を書く

2024/09/19に公開
VS Code
VS Code 拡張機能
Mermaid
tech

はじめに

MermaidでAWS構成図が書けるようになったとの記事を見て、私も試してみました。
まさに期待してたことができるので素敵すぎました。

前提

  1. Visual Studio Code インストール済み

拡張機能 インストール

  1. Markdown Preview Mermaid Support
  2. Markdown Preview Enhanced

Markdown Preview Enhanced 設定(icons)

  1. VSCode上で、コマンドパレット([Ctrl] + [Shift] + [P])から、「Markdown Preview Enhanced: Customize Preview HTML Head (Global)」を選択。
  2. 表示される、head.htmlに以下のコードを入力。
HTML, the markup language of the web
<!-- The content below will be included at the end of the <head> element. -->
<script type="text/javascript">
  const configureMermaidIconPacks = () => {
    window["mermaid"].registerIconPacks([
      {
        name: "logos",
        loader: () =>
          fetch("https://unpkg.com/@iconify-json/logos/icons.json").then(
            (res) => res.json()
          ),
      },
    ]);
  };
    
  // ref: https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working
  if (document.readyState !== 'loading') {
    configureMermaidIconPacks();
  } else {
    document.addEventListener("DOMContentLoaded", () => {
      configureMermaidIconPacks();
    });
  }
</script>

動作確認

  1. 任意のマークダウンファイルに以下を入力してプレビュー([Ctrl] + K, V)を表示。
Markdown
``` 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
```

補足

  1. Markdown Preview Enhancedの背景色と文字色を変更。
    1. Markdown Preview Enhancedの設定画面を開く。
    2. 検索窓で「markdown-preview-enhanced theme」を検索。
    3. Markdown-preview-enhanced: Mermaid Theme > [dark]を選択。
    4. Markdown-preview-enhanced: Preview Theme > [github-dark.css]を選択。

まとめ

システムアーキテクチャ図や構成図をバージョン管理できるように、PlantUMLやMermaidで書きたいなと常々思ってましたが、まさにやりたかったことができて感動です。

参考

Architecture Diagrams Documentation (v11.1.0+) | Mermaid

MermaidでAWSアーキテクチャ図を描いてみた！
Mermaidでアーキテクチャ図が書けるようになったらしい #AWS - Qiita
Markdown Preview Enhanced で mermaid を使って AWS のアーキテクチャを書く #VSCode - Qiita

Discussion