跳转到内容
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