Instruções

O tema inclui um plugin remark-mermaid personalizado (plugins/remark-mermaid.mjs) que converte blocos de código ```mermaid em wrappers <div class="mermaid-container">. O script CDN do Mermaid renderiza diagramas SVG no carregamento da página.

Sintaxe de Ícones

Fluxogramas

Use a sintaxe de nó @\{\} para adicionar ícones de qualquer pacote de ícones registrado:

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

Diagramas de Arquitetura

O tipo de diagrama architecture-beta suporta definições de serviço e grupo com nós decorados com ícones:

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

Pacotes de Ícones Disponíveis

Os seguintes pacotes de ícones estão registrados e disponíveis nos diagramas Mermaid. Os ícones são carregados de forma lazy a partir do CDN somente quando referenciados.

Nome do Pacote	Pacote npm	Ícones Principais
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

Referência CSS

Estilização do Contêiner

Os diagramas Mermaid são envoltos em um contêiner estilizado com cantos arredondados e uma sombra de caixa em camadas:

.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;
}

Reset do Elemento Pre

A estilização padrão do <pre> do Starlight é removida do wrapper mermaid para que apenas a borda do contêiner externo fique visível:

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

Forçando o Fundo do SVG

O SVG interno é forçado a ter um fundo branco para compatibilidade com o modo escuro:

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

Verificações de Tema

• .mermaid-container possui fundo SVG branco no modo escuro
• A borda do contêiner utiliza --sl-color-gray-5
• O contêiner possui raio de borda de 0.75rem e sombra de caixa em camadas
• Os diagramas são legíveis nos temas claro e escuro
• O script CDN do Mermaid carrega e renderiza os SVGs no carregamento da página