Mermaid - Balise - arleo.eu https://www.arleo.eu/tags/mermaid/ Mermaid - Balise - arleo.eu Hugo -- gohugo.iofrFri, 29 May 2026 20:00:00 +0200 Hugo : gel des diagrammes Mermaid en SVG statiques dark/light https://www.arleo.eu/posts/debug-mermaid-svg-freeze/ Fri, 29 May 2026 20:00:00 +0200 Jmr https://www.arleo.eu/posts/debug-mermaid-svg-freeze/

Problème

Les diagrammes Mermaid sur arleo.eu rendaient côté client via cdn.jsdelivr.net. Trois conséquences concrètes :

  1. CSP contrainte — script-src cdn.jsdelivr.net et worker-src cdn.jsdelivr.net obligatoires (Mermaid v11 utilise des Web Workers pour ses parsers).
  2. Flash de rendu — le diagramme apparaît après l’exécution JS, créant un décalage visible.
  3. Thème dark ignoré — Mermaid initialisait le SVG en mode clair même quand le thème du site était dark.

La solution : générer les SVG au build avec mmdc, en dehors de tout contexte navigateur.

]]> Postmortem : TypeIt cassé par Mermaid dans le thème LoveIt https://www.arleo.eu/posts/postmortem-typeit-mermaid/ Thu, 14 May 2026 09:44:43 +0200 Jmr https://www.arleo.eu/posts/postmortem-typeit-mermaid/

TL;DR

L’animation typewriter du thème LoveIt (TypeIt) ne fonctionnait plus sur la home après l’ajout de diagrammes Mermaid dans les posts. Cause : un sélecteur DOM #id-1 partagé entre les deux librairies. Quand Mermaid trouve un bloc orphelin dans un résumé de home, son initialisation crash, et la chaîne d’init JS s’arrête avant d’atteindre TypeIt. Fix : ajouter `

]]>