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 enveloppes <div class="mermaid-container">. Le script CDN Mermaid effectue le rendu 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 paquet 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]

Paquets d’icônes disponibles

Les paquets d’icônes suivants sont enregistrés et disponibles dans les diagrammes Mermaid. Les icônes sont chargées en différé depuis le CDN uniquement lorsqu’elles sont référencées.

Nom du paquet	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é de l’enveloppe mermaid afin que seule la bordure du conteneur externe soit visible :

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

Forçage du fond SVG

Le SVG interne 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 possède un fond SVG blanc en mode sombre
• La bordure du conteneur utilise --sl-color-gray-5
• Le conteneur a un rayon de bordure de 0,75 rem et une ombre portée en couches
• Les diagrammes sont lisibles dans les thèmes clair et sombre
• Le script CDN Mermaid se charge et effectue le rendu des SVG au chargement de la page