手順

このテーマには、フェンス付き ```mermaid コードブロックを <div class="mermaid-container"> ラッパーに変換するカスタム remark-mermaid プラグイン（plugins/remark-mermaid.mjs）が含まれています。Mermaid CDN スクリプトは、ページ読み込み時に SVG ダイアグラムをレンダリングします。

アイコン構文

フローチャート

@\{\} ノード構文を使用して、登録済みのアイコンパックからアイコンを追加します：

nodeName@{ icon: 'pack:icon-name', label: 'Display Label' }

アーキテクチャダイアグラム

architecture-beta ダイアグラムタイプは、アイコン装飾ノードを持つサービスおよびグループ定義をサポートしています：

service myService(pack:icon-name)[Label]
group myGroup(pack:icon-name)[Label]

利用可能なアイコンパッケージ

以下のアイコンパックが登録済みで、Mermaid ダイアグラムで利用できます。アイコンは参照されたときにのみ CDN から遅延読み込みされます。

パック名	npm パッケージ	主なアイコン
hashicorp-flight	@f5-sales-demo/icons-hashicorp-flight	terraform-color, consul-color, vault-color, aws-color, azure-color, gcp-color, kubernetes-color, docker-color
f5-brand	@f5-sales-demo/icons-f5-brand	network-gateway, security-firewall, security-shield-network, cloud-multi, hw-server
f5xc	@f5-sales-demo/icons-f5xc	web-app-and-api-protection, bot-defense, multi-cloud-app-connect, dns-management, content-delivery-network
carbon	@f5-sales-demo/icons-carbon	cloud-services, data-base, gateway-api, virtual-machine, load-balancer-global, firewall, dns-services, virtual-private-cloud
lucide	@f5-sales-demo/icons-lucide	server, database, shield, shield-check, globe, lock, cloud, network, user
mdi	@f5-sales-demo/icons-mdi	server, database, shield, cloud, lock, network, dns, vpn, router
phosphor	@f5-sales-demo/icons-phosphor	cloud, database, shield, globe, lock, network
tabler	@f5-sales-demo/icons-tabler	server, database, shield, cloud, lock, network, route, router
azure	@f5-sales-demo/icons-azure	virtual-networks, load-balancers, firewalls, virtual-network-gateways, virtual-machine, public-ip-addresses, route-tables, subnet

CSS リファレンス

コンテナスタイリング

Mermaid ダイアグラムは、角丸と階層的なボックスシャドウを持つスタイル付きコンテナでラップされます：

.mermaid-container {
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
  margin-block: 1.5rem;
  background: #fff;
}

Pre 要素のリセット

Starlight のデフォルト <pre> スタイリングは、mermaid ラッパーから除去され、外側のコンテナボーダーのみが表示されます：

.mermaid-container pre.mermaid {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

SVG 背景の強制設定

内部の SVG はダークモード互換性のために白い背景に強制されます：

.mermaid-container svg {
  background: white !important;
  border-radius: 0.5rem;
}

テーマチェック

• .mermaid-container はダークモードで白い SVG 背景を持つ
• コンテナボーダーは --sl-color-gray-5 を使用する
• コンテナは 0.75rem のボーダー半径と階層的なボックスシャドウを持つ
• ダイアグラムはライトテーマとダークテーマの両方で読みやすい
• Mermaid CDN スクリプトが読み込まれ、ページ読み込み時に SVG をレンダリングする