Pele: la librería que renderiza Mermaid a SVG puro
Un sitio de documentación carga hoy 1,6 MB de JavaScript solo para convertir texto en diagramas Mermaid en SVG. Pele logra lo mismo con 230 kB comprimidos y sin ninguna dependencia declarada. La librería acepta la misma sintaxis que ya usás en Mermaid.js, pero cambia cómo se pintan los colores: en vez de pasar un objeto de tema y volver a ejecutar el renderizador, lee variables CSS directamente…
Pele es una librería de código abierto que renderiza diagramas Mermaid en SVG sin necesidad de un motor de layout externo ni de un framework de UI. Pesa solo 230 kB comprimidos y no lleva ninguna dependencia directa. La librería acepta la misma sintaxis que Mermaid.js, pero cambia el método de renderizado de colores. En lugar de usar un objeto de tema, los elementos del SVG referencian variables CSS directamente del navegador.
Esto permite cambiar de tema sin volver a renderizar el diagrama. El render() de Pele devuelve el SVG listo para insertarlo en el DOM en menos de 0,3 ms, en comparación con 6 a 82 ms de Mermaid.js. Pele vivió en un sitio web donde también sirve como editor interactivo para visualizar y probar los cambios en tiempo real.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
