Présentation

Pele est une bibliothèque JavaScript qui accepte du texte au format Mermaid et le transforme directement en SVG. L’exemple fourni montre une chaîne de caractères Mermaid décrivant un flux simple, puis le rendu final sous forme d’un élément <svg>. Cette conversion s’effectue côté client, ce qui évite d’envoyer les diagrammes au serveur pour les transformer.

Mécanisme de rendu et thématisation

Le rendu SVG utilise les variables CSS déclarées dans la classe .pele. Le bloc suivant illustre les huit variables reconnues : 

.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-muted: #6f6e69;
  --pele-line: #100f0f;
  --pele-surface: #f2f0e5;
  --pele-surface-alt: #e6e4d9;
  --pele-border: #cecdc3;
}
Chaque variable contrôle une couleur ou un ton du diagramme (fond, premier plan, bordure, etc.). Parce que le SVG hérite de ces variables, modifier la valeur d’une variable dans le CSS entraîne immédiatement un changement visuel, sans nécessiter un nouveau passage par la fonction de rendu. Cette séparation entre données graphiques (SVG) et style (CSS) réduit le nombre de recalculs du DOM et améliore la réactivité lors de l’ajustement de thèmes.

Intégration via l'API

L’interface publique se résume à une fonction render() qui prend en argument une chaîne Mermaid et renvoie le code SVG correspondant. L’appel typique ressemble à : 

const svg = Pele.render(`flowchart TD
  A[Mermaid text] --> B{Flowchart?}
  B -- Yes --> C[Pele]
  B -- No --> D[Mermaid]
  C --> E([SVG])
  D --> E`);
document.getElementById('target').innerHTML = svg;
Le développeur insère ensuite le résultat dans le DOM, par exemple dans un conteneur identifié #target. Aucun processus serveur n’est requis, ce qui simplifie le déploiement dans des applications statiques ou des SPA.

Compatibilité et limites

Pele se positionne comme une alternative à Mermaid en conservant la même syntaxe de base. La documentation indique une comparaison du syntaxe, du layout et des fonctionnalités, mais ne précise pas la couverture exacte des diagrammes avancés (ex. : Gantt, class diagram). L’absence d’une liste exhaustive implique que certaines extensions Mermaid pourraient ne pas être supportées. De plus, la dépendance aux variables CSS nécessite un navigateur compatible avec les custom properties ; les versions antérieures à Chrome 49 ou Internet Explorer ne garantissent pas le comportement attendu. Enfin, le rendu se fait entièrement côté client, ce qui exclut les scénarios où un SVG pré‑généré est requis pour le SEO ou l’archivage.