Pele: la librería que renderiza Mermaid a SVG puro

Lo esencial

Pele renderiza diagramas Mermaid a SVG puro, sin motor de JavaScript en el navegador final.
El bundle de Pele pesa 230 kB comprimido frente a 1.6 MB de Mermaid.js.
El render tarda 0.05 a 0.3 ms en Pele contra 6 a 82 ms en Mermaid.js.
Pele no tiene dependencias directas; Mermaid.js carga 23.
El theming usa variables CSS y cambia de color sin volver a renderizar el SVG.

Qué es Pele y qué problema resuelve

Un diagrama Mermaid tarda hasta 82 milisegundos en convertirse en imagen cuando lo procesa la librería original. Pele hace la misma conversión en menos de 0.3 milisegundos, sin arrastrar las 23 dependencias que carga Mermaid.js.

La idea es simple: escribís la misma sintaxis Mermaid que ya usás en un README de GitHub o en Notion, y Pele la transforma en un SVG estático. No hay motor de JavaScript corriendo en el navegador del lector final, solo una imagen vectorial lista para mostrarse.

Cómo funciona: de texto Mermaid a SVG

Pele toma el texto del diagrama, lo interpreta y genera directamente los nodos SVG, sin pasar por el motor de renderizado completo de Mermaid.js. Un flujo de despliegue típico se escribe así:

flowchart TD
  A[Push a main] --> B{Tests pasan?}
  B -- Si --> C[Build Docker]
  B -- No --> D[Notificar a Slack]
  C --> E([Deploy a produccion])

Cada línea describe un nodo y una flecha. B es un nodo de decisión gracias a la sintaxis con llaves, y E cierra el flujo con un nodo de forma ovalada. Pele interpreta esa sintaxis igual que Mermaid.js y entrega el SVG final.

Instalación y el API de render()

Los comandos de instalación son idénticos en Windows, macOS y Linux porque dependen de Node.js, no del sistema operativo:

npm install pele
pnpm add pele
yarn add pele
bun add pele

Para renderizar, se pasa la sintaxis Mermaid a la función render() y se inserta el SVG resultante en el DOM:

import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Request HTTP] --> B[API Gateway]
  B --> C[SVG]`);

document.querySelector('#diagrama-pipeline').innerHTML = svg;

render() devuelve un objeto con la propiedad svg ya resuelta como string. No hace falta montar un canvas ni esperar a que cargue un bundle externo: el SVG queda disponible en el mismo ciclo de ejecución.

Theming con variables CSS sin volver a renderizar

Pele no recibe un objeto de configuración de colores en cada render: lee variables CSS desde la clase .pele aplicada al contenedor del SVG.

.pele {
  --pele-bg: #100f0f;
  --pele-fg: #fffcf0;
  --pele-muted: #878580;
  --pele-line: #fffcf0;
  --pele-surface: #1c1b1a;
  --pele-surface-alt: #282726;
  --pele-border: #343331;
}

Cambiar de tema claro a oscuro consiste en alternar esa clase o redefinir las variables: el navegador repinta el SVG con el motor de CSS normal, sin volver a ejecutar render(). Eso es lo que permite pasar de un tema a otro en un dashboard sin recalcular el diagrama.

Los números: bundle y tiempo de render frente a Mermaid.js

Peso del bundle (gzip): 230 kB en Pele contra 1.6 MB en Mermaid.js.
Tiempo de render: 0.05 a 0.3 ms en Pele contra 6 a 82 ms en Mermaid.js.
Dependencias directas: 0 en Pele, 23 en Mermaid.js.
Pantallas chicas: Pele adapta el layout, Mermaid.js escala el diagrama completo.

Qué no resuelve Pele todavía

Pele es una reimplementación del renderizador, no un fork de Mermaid.js, así que depende de mantenerse al día con cada cambio de sintaxis del proyecto original por su cuenta. Los ejemplos públicos del sitio muestran flowcharts; si tu documentación usa diagramas de secuencia, gantt o de estado de forma intensiva, conviene probar ese tipo exacto antes de migrar una base grande.

Por qué importa para equipos que documentan con diagramas

Un blog técnico, un sitio de documentación o un dashboard interno que embeben decenas de diagramas Mermaid en SVG pagan ese peso en cada carga de página. Reemplazar Mermaid.js por Pele en ese escenario baja el JavaScript que el navegador tiene que descargar y ejecutar, sin cambiar una sola línea de la sintaxis que ya escribieron los equipos de LATAM que documentan sus pipelines en español.

📖 Versión extendida con más detalle: https://elsolitario.org/2026/10/17/pele-renderizar-diagramas-mermaid-svg/?utm_source=telegraph&utm_medium=instant_view&utm_campaign=programacion