Ajout d’un zoom click-to-fullscreen sur les diagrammes Mermaid de l’article gouvernance GenAI.
Ce que c’est
Un clic sur un diagramme Mermaid l’affiche en plein écran (overlay blanc, z-index 9999). Un second clic ou Escape ferme le zoom. Utile parce que l’article a 15 diagrammes, certains sont denses.
Piège rencontré
Le champ css: dans le YAML Quarto attend un chemin de fichier, pas du CSS inline. Mettre du CSS inline dedans cause une erreur 500 (Quarto essaie de charger un fichier avec le contenu CSS comme nom). Utiliser include-in-header avec une balise <style> à la place.
Autre piège : quadrantChart Mermaid et accents
Le parser Mermaid (v11.6.0) crashe sur les caractères accentués dans les labels de quadrantChart (axes, titres, noms de points). Le crash bloque le rendu de tous les diagrammes qui suivent dans la page. Solution : retirer les accents des labels quadrantChart uniquement.
Comment c’est implémenté
Ce n’est PAS une fonctionnalité native de Quarto. C’est du code custom dans le frontmatter de l’article :
include-in-header: classes.mermaid-wrapper(cursor zoom-in) et.mermaid-wrapper.zoomed(position fixed, overlay plein écran)include-after-body: au DOMContentLoaded, wrappe chaque.mermaiddans un div.mermaid-wrapper, toggle la classezoomedau clic, ferme sur Escape