Pele : diagrammes Mermaid en SVG thémable
Original : Pele – Mermaid diagrams as themeable SVG
Pourquoi c'est important
Une alternative sérieuse à Mermaid.js pour les apps soucieuses des performances front-end.
Pele est une bibliothèque open source légère qui convertit la syntaxe Mermaid en SVG stylisable via des variables CSS. Elle est 6× plus petite et jusqu'à 500× plus rapide que Mermaid.js, sans aucune dépendance.
Pele s'installe via npm en une ligne et expose une API minimaliste : on passe du texte Mermaid à la fonction render(), qui retourne directement du SVG prêt à insérer dans le DOM. Pas de pipeline complexe, pas de configuration.
Là où Mermaid.js pèse 1,6 Mo (gzip) avec 23 dépendances directes et met entre 6 et 82 ms pour rendre un diagramme, Pele tient en 230 Ko, zéro dépendance, et rend en 0,05 à 0,3 ms. Le gain est particulièrement visible sur mobile, où la bibliothèque adapte automatiquement la mise en page au lieu de simplement réduire l'image.
Le thème se pilote entièrement par variables CSS (couleurs, polices), et les changements de couleur s'appliquent sans re-rendu — utile pour les applications qui basculent entre mode clair et sombre. Pele prend en charge tous les types de diagrammes intégrés à Mermaid 12.1.0.
La bibliothèque est publiée sous licence MIT. Elle a été développée à l'origine pour le plugin Obsidian, afin d'afficher les diagrammes rapidement tout en respectant le thème de l'utilisateur.