Instructions

Le thème inclut un plugin remark-mermaid personnalisé (plugins/remark-mermaid.mjs) qui convertit les blocs de code ```mermaid délimités en wrappers <div class="mermaid-container">. Le script CDN Mermaid génère des diagrammes SVG au chargement de la page.

Syntaxe des icônes

Diagrammes de flux

Utilisez la syntaxe de nœud @\{\} pour ajouter des icônes depuis n’importe quel pack d’icônes enregistré :

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

Diagrammes d’architecture

Le type de diagramme architecture-beta prend en charge les définitions de services et de groupes avec des nœuds décorés d’icônes :

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

Packs d’icônes disponibles

Les packs d’icônes suivants sont enregistrés et disponibles dans les diagrammes Mermaid. Les icônes sont chargées de manière différée depuis le CDN uniquement lorsqu’elles sont référencées.

Nom du pack	Paquet npm	Icônes principales
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

Référence CSS

Style du conteneur

Les diagrammes Mermaid sont encapsulés dans un conteneur stylisé avec des coins arrondis et une ombre portée en couches :

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

Réinitialisation de l’élément Pre

Le style <pre> par défaut de Starlight est supprimé du wrapper mermaid afin que seule la bordure du conteneur extérieur soit visible :

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

Forçage du fond SVG

Le SVG intérieur est forcé sur un fond blanc pour assurer la compatibilité avec le mode sombre :

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

Vérifications du thème

• .mermaid-container dispose d’un fond SVG blanc en mode sombre
• La bordure du conteneur utilise --sl-color-gray-5
• Le conteneur possède un rayon de bordure de 0,75 rem et une ombre portée en couches
• Les diagrammes sont lisibles aussi bien en thème clair qu’en thème sombre
• Le script CDN Mermaid se charge et génère les SVG au chargement de la page