<h3 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h3>
MermaidでAWS構成図が書けるようになったとの記事を見て、私も試してみました。 
まさに期待してたことができるので素敵すぎました。
<h3 id="%E5%89%8D%E6%8F%90" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h3>
<ol data-line="5" class="code-line">
<li data-line="5" class="code-line">Visual Studio Code インストール済み</li>
</ol>
<h3 id="%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 拡張機能 インストール</h3>
<ol data-line="8" class="code-line">
<li data-line="8" class="code-line">Markdown Preview Mermaid Support 
<img src="https://storage.googleapis.com/zenn-user-upload/5d7848d69efd-20240919.png" loading="lazy" class="md-img">
</li>
<li data-line="10" class="code-line">Markdown Preview Enhanced 
<img src="https://storage.googleapis.com/zenn-user-upload/62da9055856e-20240919.png" loading="lazy" class="md-img">
</li>
</ol>
<h3 id="markdown-preview-enhanced-%E8%A8%AD%E5%AE%9A(icons)" data-line="13" class="code-line">
<a class="header-anchor-link" href="#markdown-preview-enhanced-%E8%A8%AD%E5%AE%9A(icons)" aria-hidden="true"></a> Markdown Preview Enhanced 設定(icons)</h3>
<ol data-line="14" class="code-line">
<li data-line="14" class="code-line">VSCode上で、コマンドパレット([Ctrl] + [Shift] + [P])から、「Markdown Preview Enhanced: Customize Preview HTML Head (Global)」を選択。 
<img src="https://storage.googleapis.com/zenn-user-upload/b8c7de59c141-20240919.png" loading="lazy" class="md-img">
</li>
<li data-line="16" class="code-line">表示される、head.htmlに以下のコードを入力。</li>
</ol>
<div class="code-block-container">
<div class="code-block-filename-container"> HTML, the markup language of the web</div>
<pre class="language-html"><code class="language-html code-line" data-line="17">&lt;!-- The content below will be included at the end of the &lt;head&gt; element. --&gt;
&lt;script type="text/javascript"&gt;
 const configureMermaidIconPacks = () =&gt; {
 window["mermaid"].registerIconPacks([
 {
 name: "logos",
 loader: () =&gt;
 fetch("https://unpkg.com/@iconify-json/logos/icons.json").then(
 (res) =&gt; res.json()
 ),
 },
 ]);
 };
 
 // ref: https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working
 if (document.readyState !== 'loading') {
 configureMermaidIconPacks();
 } else {
 document.addEventListener("DOMContentLoaded", () =&gt; {
 configureMermaidIconPacks();
 });
 }
&lt;/script&gt;
</code></pre>
</div><h3 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" data-line="43" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h3>
<ol data-line="44" class="code-line">
<li data-line="44" class="code-line">任意のマークダウンファイルに以下を入力してプレビュー([Ctrl] + K, V)を表示。</li>
</ol>
<div class="code-block-container">
<div class="code-block-filename-container"> Markdown</div>
<pre class="language-markdown"><code class="language-markdown code-line" data-line="45">``` 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 --&gt; B:db_primary

 cert:B -- T:dns
```
</code></pre>
</div><img src="https://storage.googleapis.com/zenn-user-upload/9cd4b151dd43-20240919.png" loading="lazy" class="md-img">
<h3 id="%E8%A3%9C%E8%B6%B3" data-line="86" class="code-line">
<a class="header-anchor-link" href="#%E8%A3%9C%E8%B6%B3" aria-hidden="true"></a> 補足</h3>
<ol data-line="87" class="code-line">
<li data-line="87" class="code-line">Markdown Preview Enhancedの背景色と文字色を変更。
<ol data-line="88" class="code-line">
<li data-line="88" class="code-line">Markdown Preview Enhancedの設定画面を開く。</li>
<li data-line="89" class="code-line">検索窓で「markdown-preview-enhanced theme」を検索。</li>
<li data-line="90" class="code-line">Markdown-preview-enhanced: Mermaid Theme &gt; [dark]を選択。</li>
<li data-line="91" class="code-line">Markdown-preview-enhanced: Preview Theme &gt; [github-dark.css]を選択。 
<img src="https://storage.googleapis.com/zenn-user-upload/d18dbc08a32d-20240919.png" loading="lazy" class="md-img">
</li>
</ol>
</li>
</ol>
<h3 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="94" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h3>
システムアーキテクチャ図や構成図をバージョン管理できるように、PlantUMLやMermaidで書きたいなと常々思ってましたが、まさにやりたかったことができて感動です。
<h3 id="%E5%8F%82%E8%80%83" data-line="97" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h3>
<a href="https://mermaid.js.org/syntax/architecture.html" title="Architecture Diagrams Documentation (v11.1.0+) | Mermaid" target="_blank" rel="nofollow noopener noreferrer">Architecture Diagrams Documentation (v11.1.0+) | Mermaid</a>
<a href="https://zenn.dev/iharuoru/articles/630ae2e4d7230d" title="MermaidでAWSアーキテクチャ図を描いてみた！" target="_blank">MermaidでAWSアーキテクチャ図を描いてみた！</a> 
<a href="https://qiita.com/hiroto_1220/items/3f4c950fa27430355e5a" title="Mermaidでアーキテクチャ図が書けるようになったらしい #AWS - Qiita" target="_blank" rel="nofollow noopener noreferrer">Mermaidでアーキテクチャ図が書けるようになったらしい #AWS - Qiita</a> 
<a href="https://qiita.com/take_me/items/83769d32c35e99b85ec8" title="Markdown Preview Enhanced で mermaid を使って AWS のアーキテクチャを書く #VSCode - Qiita" target="_blank" rel="nofollow noopener noreferrer">Markdown Preview Enhanced で mermaid を使って AWS のアーキテクチャを書く #VSCode - Qiita</a>

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

Discussion