跳到內容
Theme

使用說明

此主題包含一個自訂的 remark-mermaid 插件（plugins/remark-mermaid.mjs），可將圍欄式 ```mermaid 程式碼區塊轉換為 <div class="mermaid-container"> 包裝元素。Mermaid CDN 腳本會在頁面載入時渲染 SVG 圖表。

圖示語法

Section titled “圖示語法”

流程圖

Section titled “流程圖”

使用 @\{\} 節點語法，從任何已註冊的圖示包新增圖示：

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

架構圖

Section titled “架構圖”

architecture-beta 圖表類型支援帶有圖示裝飾節點的服務與群組定義：

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

可用圖示包

Section titled “可用圖示包”

以下圖示包已完成註冊，可於 Mermaid 圖表中使用。圖示僅在被參照時才會從 CDN 延遲載入。

包名稱npm 套件主要圖示
hashicorp-flight@f5-sales-demo/icons-hashicorp-flightterraform-color, consul-color, vault-color, aws-color, azure-color, gcp-color, kubernetes-color, docker-color
f5-brand@f5-sales-demo/icons-f5-brandnetwork-gateway, security-firewall, security-shield-network, cloud-multi, hw-server
f5xc@f5-sales-demo/icons-f5xcweb-app-and-api-protection, bot-defense, multi-cloud-app-connect, dns-management, content-delivery-network
carbon@f5-sales-demo/icons-carboncloud-services, data-base, gateway-api, virtual-machine, load-balancer-global, firewall, dns-services, virtual-private-cloud
lucide@f5-sales-demo/icons-lucideserver, database, shield, shield-check, globe, lock, cloud, network, user
mdi@f5-sales-demo/icons-mdiserver, database, shield, cloud, lock, network, dns, vpn, router
phosphor@f5-sales-demo/icons-phosphorcloud, database, shield, globe, lock, network
tabler@f5-sales-demo/icons-tablerserver, database, shield, cloud, lock, network, route, router
azure@f5-sales-demo/icons-azurevirtual-networks, load-balancers, firewalls, virtual-network-gateways, virtual-machine, public-ip-addresses, route-tables, subnet

CSS 參考

Section titled “CSS 參考”

容器樣式

Section titled “容器樣式”

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 元素重置

Section titled “Pre 元素重置”

Starlight 預設的 <pre> 樣式會從 mermaid 包裝元素中移除，使邊框僅顯示於外層容器：

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

SVG 背景強制設定

Section titled “SVG 背景強制設定”

內部 SVG 被強制設為白色背景，以確保深色模式相容性：

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

主題檢查

Section titled “主題檢查”
  • .mermaid-container 在深色模式下具有白色 SVG 背景
  • 容器邊框使用 --sl-color-gray-5
  • 容器具有 0.75rem 圓角及多層陰影
  • 圖表在淺色與深色主題下均可正常閱讀
  • Mermaid CDN 腳本會在頁面載入時載入並渲染 SVG