Nous avons remplacé le composant de thème mermaid par pele ici sur Meta, à des fins de test ![]()
De quoi s’agit-il ?
mermaid, c’est deux choses :
- une syntaxe pour décrire des diagrammes en texte brut (organigrammes, séquences, chronologies…)
- une bibliothèque qui transforme ce texte en SVG dans votre navigateur
pele remplace le #2. Il lit la même syntaxe[1], mais possède son propre moteur et son propre rendu visuel ![]()
Comment ça marche ?
Vous écrivez un bloc de code ```mermaid dans un message (ou une discussion). Lorsque ce message s’affiche, le composant de thème détecte le bloc et utilise pele pour dessiner le diagramme à la place.
pele n’est chargé que sur les pages contenant réellement un diagramme, il ne ralentit donc rien d’autre.
Pourquoi s’en donner la peine ?
La bibliothèque mermaid est volumineuse et « lente ». pele est 6 fois plus petit, jusqu’à 500 fois plus rapide, sans dépendances, personnalisable via des variables CSS, sous licence MIT, et développé par l’équipe d’Obsidian.
En pratique : les diagrammes s’affichent plus rapidement et s’adaptent aux couleurs de votre site (mode clair/sombre inclus) sans aucune configuration supplémentaire.
Même syntaxe ```mermaid, donc rien à changer dans vos messages.
Voici le composant de thème si vous souhaitez l’essayer sur votre propre site.
Supprimez d’abord le composant mermaid, les deux ne peuvent pas fonctionner simultanément.
flowchart LR
A[mermaid] -->|swap| B[pele]
B --> C{looks good?}
C -->|yes| D[🎉]
C -->|no| E[reply here]
Si vous remarquez un bug visuel, veuillez
répondre ici avec
- un lien vers le message (ou le code du diagramme)
- une capture d’écran
- votre navigateur et votre thème (clair/sombre)
Merci ![]()
jusqu’à mermaid 12.1.0, tous les types de diagrammes ↩︎