Test de Pele comme remplacement de Mermaid

Nous avons remplacé le composant de thème mermaid par pele ici sur Meta, à des fins de test :test_tube:

De quoi s’agit-il ?

mermaid, c’est deux choses :

  1. une syntaxe pour décrire des diagrammes en texte brut (organigrammes, séquences, chronologies…)
  2. 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 :gear:

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.

:warning: 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 :folded_hands: 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 :wink:


  1. jusqu’à mermaid 12.1.0, tous les types de diagrammes ↩︎

29 « J'aime »

Instructions unclear; no :tada: reaction available :pensive_face:

Looks good!

9 « J'aime »

La semaine dernière, j’ai découvert Pele. J’ai envisagé d’essayer une intégration interne, et aujourd’hui je suis tombé sur ceci. Ultra rapide et issu du Core, merci !

2 « J'aime »

Pele est déjà intégré dans de nombreuses plateformes… et pour de bonnes raisons !

Je l’utilise dans Obsidian et j’ai testé ma communauté Discourse : très bon.

3 « J'aime »

Si je comprends bien… avec Pele, nous pourrions configurer les éléments de Pele afin qu’ils respectent notre communauté/notre marque, de sorte que tous les graphiques Mermaid existants (ou peut-être simplement les nouveaux) aient par défaut l’apparence et le style de notre charte graphique ?

Oui :+1:

le composant associe déjà les variables CSS de Pele à la palette de couleurs de votre site, donc tous les diagrammes, anciens et nouveaux, prennent automatiquement vos couleurs (mode clair/sombre inclus)

si vous souhaitez personnaliser davantage, remplacez n’importe quelle variable --pele-* sur .pele-diagram dans le CSS de votre thème :wink:

4 « J'aime »