# Cómo renderizar diagramas de Mermaid con el tema de tu web: probamos Pele, de Obsidian

**URL:** <https://www.yodev.dev/t/como-renderizar-diagramas-de-mermaid-con-el-tema-de-tu-web-probamos-pele-de-obsidian/5712>\
**Category:** Desarrollo\
**Tags:** diagramas, open-source, css, mermaid, obsidian, svg, yodev-tested\
**Created:** [18 Octubre, 2026 14:10 UTC](https://www.yodev.dev/t/como-renderizar-diagramas-de-mermaid-con-el-tema-de-tu-web-probamos-pele-de-obsidian/5712 "2026-10-18T14:10:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\
**Post date:** [18 Octubre, 2026 14:10 UTC](https://www.yodev.dev/t/como-renderizar-diagramas-de-mermaid-con-el-tema-de-tu-web-probamos-pele-de-obsidian/5712/1 "2026-10-18T14:10:11Z")

</div>

Para que tus diagramas de Mermaid sigan el tema de tu web, modo oscuro incluido, renderízalos con Pele: una librería MIT de Obsidian que convierte la misma sintaxis de Mermaid en SVG cuyos colores salen de variables CSS. Así el diagrama cambia junto con tu página en lugar de conservar la paleta de Mermaid. La instalamos, la pusimos al lado de Mermaid.js en modo claro y oscuro, y medimos las dos.

 ![pele-vs-mermaid-oscuro](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/1e15d9cdb439f4d69cf3553ba283ec68383cb14e.png)

> **[GitHub - obsidianmd/pele: Renders Mermaid diagrams faster than you'd run...](https://github.com/obsidianmd/pele)**
>
> Renders Mermaid diagrams faster than you'd run from a volcano! 🌋

> **✅ yoDEV Tested** · 18 de octubre de 2026 Instalamos Pele 1.6.0 desde npm y lo comparamos con Mermaid 12.2.0 en Node 22 y en Chromium headless, con el mismo diagrama y el mismo CSS. Los resultados que reportamos como nuestros salen de esa prueba.

## ¿Qué es Pele y en qué se diferencia de Mermaid.js?

Pele es una librería de JavaScript que recibe texto en sintaxis Mermaid y devuelve SVG. No es un plugin de Mermaid ni depende de Mermaid: tiene su propio parser, su propio motor de layout y cero dependencias en tiempo de ejecución. Soporta todos los tipos de diagrama incluidos en Mermaid 12.1.0, desde diagramas de flujo y de secuencia hasta Gantt, C4, Sankey y mapas mentales.

Nació para Obsidian, la app de notas, con el objetivo de dibujar diagramas rápido y que coincidan con el tema del usuario. La mantiene Steph Ango (kepano) en la organización `obsidianmd` de GitHub. El nombre viene de la diosa hawaiana de los volcanes, no del futbolista.

Sigues escribiendo Mermaid. Lo que cambia es quién lo dibuja.

## ¿Por qué los diagramas de Mermaid se ven mal en modo oscuro?

Porque Mermaid toma sus colores de su propia configuración de tema, no de tu hoja de estilos. En nuestra prueba pusimos el mismo diagrama de flujo en la misma página, con el mismo CSS, y cambiamos el navegador a modo oscuro. Con su tema por defecto, Mermaid 12.2.0 mantuvo los nodos blancos, y las líneas y puntas de flecha siguieron en negro: sobre un fondo casi negro prácticamente desaparecen. Mermaid sí trae temas propios (lo que en inglés se busca como `mermaid theme`), pero se eligen en su configuración, y el CSS de tu página no llega hasta ellos.

En Pele, nodos, líneas y etiquetas leen sus colores de variables `--pele-*`. Cada valor hexadecimal del SVG que generó era solo un valor de respaldo dentro de `var()`. Cuando la página pasó a oscuro, el relleno de los nodos cambió de `rgb(242, 240, 229)` a `rgb(28, 27, 26)` sin volver a renderizar el diagrama: nuestro contador de renders se quedó en 1.

 ![pele-vs-mermaid-oscuro](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/1e15d9cdb439f4d69cf3553ba283ec68383cb14e.png)

 ![pele-vs-mermaid-claro](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/c/ca4ad947ae47fbf984415ffa4dd626f8700ee399.png)

## ¿Cómo renderizar diagramas de Mermaid con el tema de tu web?

Instalas un paquete, sin dependencias adicionales:

```auto
npm install pele

```

Después pasas el texto de Mermaid a `render()` e insertas el SVG que devuelve:

```js
import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Mermaid text] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;

```

`render()` es síncrono y también funciona en Node sin DOM. Nosotros renderizamos el diagrama de prueba del lado del servidor, donde Pele mide el texto con una tabla de anchos incluida en lugar de un canvas. Así que sirve igual para convertir Mermaid a SVG (`mermaid to svg`) en un generador de sitios estáticos que en el navegador.

Hay otros dos puntos de entrada que conviene conocer:

- `pele/lazy` carga cada tipo de diagrama la primera vez que se usa: `const { svg } = await renderAsync(source);`
- `pele/global` define un objeto global `pele` para páginas sin bundler. Viene en el paquete en `dist/pele.global.js`, y es la versión que cargamos en Chromium.

## ¿Cómo cambiar los colores de un diagrama Mermaid con variables CSS?

Defines las variables en `.pele` o en cualquier elemento que lo contenga. La raíz `<svg>` de cada diagrama lleva la clase `.pele`. El bloque siguiente es la paleta de la documentación de temas de Pele, con una variante oscura bajo `prefers-color-scheme`, y es exactamente lo que usamos en la prueba:

```css
.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-muted: #6f6e69;
  --pele-line: #100f0f;
  --pele-surface: #f2f0e5;
  --pele-surface-alt: #e6e4d9;
  --pele-border: #cecdc3;
  --pele-accent: #205ea6;
  --pele-critical: #af3029;
}
@media (prefers-color-scheme: dark) {
  .pele {
    --pele-bg: #100f0f;
    --pele-fg: #cecdc3;
    --pele-muted: #878580;
    --pele-line: #cecdc3;
    --pele-surface: #1c1b1a;
    --pele-surface-alt: #282726;
    --pele-border: #403e3c;
    --pele-accent: #4385be;
    --pele-critical: #d14d41;
  }
}

```

En la práctica, apuntas estas variables a los tokens que tu sitio ya tiene. El conjunto completo de `mermaid css variables` que ofrece Pele cubre:

- fondo, texto, texto secundario y líneas
- relleno de nodos y de subgrafos, y bordes
- un color de acento, más un color “crítico” para Gantt y kanban
- `--pele-error`, fuentes, pesos de fuente y `--pele-radius`
- `--pele-series-1` a `--pele-series-8` para gráficos

Los elementos también llevan clases como `pele-node`, `pele-edge` y `pele-label`, y puedes apuntar a un nodo concreto por su id en el código fuente con `[data-id="…"]`.

Un detalle con las fuentes: Pele mide las etiquetas para dimensionar las cajas, así que necesita conocer la fuente antes de dibujar. `mount()` la lee de `--pele-font`; con `render()` se la pasas tú:

```js
const fontFamily = getComputedStyle(container).fontFamily;
container.innerHTML = render(source, { fontFamily }).svg;

```

## ¿Cuándo usar render() y cuándo mount()?

Usa `render()` cuando quieres un string: generadores de sitios estáticos, renderizado en servidor, pipelines de Markdown. Usa `mount()` cuando el diagrama vive en una página que cambia:

```js
import { mount } from 'pele';

const diagram = mount(container, source);
diagram.update('flowchart LR\n A[Draft] --> B[Published]');

```

`mount()` observa el contenedor y vuelve a distribuir el diagrama cuando cambia su ancho. En nuestra prueba, al reducir el contenedor a 320 px, el diagrama de izquierda a derecha pasó a ser vertical y el zoom se activó solo. Reorganiza el diagrama en lugar de encogerlo hasta que el texto sea ilegible.

`mount()` también maneja los errores en el lugar. Cuando le pasamos a `update()` una sintaxis rota, no lanzó ninguna excepción: el diagrama anterior quedó en pantalla, atenuado, con el error del parser en su borde inferior, y `diagram.error.code` devolvió `syntax` en la línea 3. Con `render()`, los errores se lanzan como `PeleError`, con `code`, `line`, `column` y un `snippet` que marca la columna.

 ![pele-pantalla-angosta](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/d/d07f3db039911b1bb0b1121d6c1269b36fd0c301.png)

 ![pele-error-en-el-diagrama](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/e/eb978a4c0beeac5cbe0aceba1b5342c7865de8a6.png)

## ¿Pele es más rápido y liviano que Mermaid.js?

Según nuestras mediciones, sí, aunque la diferencia de velocidad fue menor que la cifra del titular. La comparación del propio proyecto, que es autorreportada, indica:

- 230 kB en gzip frente a 1,6 MB
- tiempos de render de 0,05–0,3 ms frente a 6–82 ms
- “hasta 500 veces” más rápido

Esto es lo que medimos nosotros, en una sola máquina y con un diagrama de flujo de cinco nodos:

| | Pele 1.6.0 | Mermaid 12.2.0 |
| --- | --- | --- |
| Bundle, gzip -9 | 245 KB | 1.532 KB |
| Render en caliente, Chromium headless | ~0,44–0,59 ms | ~71–79 ms |
| Primer render en la página | ~17 ms (`mount()`) | ~377–431 ms |
| Render en Node, con parseo | 0,56 ms | no probado |

La afirmación del tamaño se cumple: Pele es unas seis veces más liviano. En nuestro diagrama, la diferencia de velocidad fue de unas 135 a 180 veces, dentro del “hasta 500” pero lejos de ese techo. Para una página de documentación con un puñado de diagramas, la diferencia práctica no está en los milisegundos, sino en enviar 1,3 MB menos de JavaScript.

## ¿Qué no hace Pele?

Pele es una reimplementación, así que no es idéntico a Mermaid píxel por píxel. Su página de compatibilidad es clara sobre las diferencias:

- **El layout cambia.** Las posiciones de los nodos, los espacios y el trazado de las líneas salen del motor propio de Pele. Si dependes del layout exacto de Mermaid, revisa tus diagramas en el Playground antes de migrar.
- **Los temas de Mermaid no se aplican.** `themeVariables` se ignora y el color sale del CSS.
- **Los colores definidos dentro del diagrama son fijos.** Los que pones con `style`, `classDef` o `linkStyle` no siguen el tema.
- **Las etiquetas no admiten HTML arbitrario.** Los saltos de línea, la negrita y la cursiva sí funcionan.
- **Los `click` con enlace funcionan, pero los callbacks de JavaScript se ignoran.**
- **No soporta ZenUML ni plugins externos de Mermaid.** `supports()` te dice si un tipo de diagrama está disponible.

## ¿Es lo bastante estable para usarlo?

Avanza rápido. La versión 1.0.4 salió el 6 de octubre de 2026 y la 1.6.0 el 17 de octubre, y dos de las versiones intermedias cambiaron la API:

- La 1.5.0 eliminó `watch` y `fit()` de `mount()`.
- La 1.6.0 hizo que `mount()` y `update()` dejaran de lanzar excepciones ante una entrada inválida.

Además, al momento de publicar esta nota (18 de octubre de 2026), Pele documenta compatibilidad con Mermaid 12.1.0, mientras que npm ya sirve Mermaid 12.2.0. Fija la versión y lee las notas de cada release antes de actualizar. Si un diagrama se ve distinto que en Mermaid, el proyecto pide reportarlo con una comparación hecha en el Playground.

## ¿Es una buena alternativa a Mermaid.js?

Si renderizas Mermaid en un sitio con modo oscuro, como una documentación, un blog o un portal interno, sí: es una `mermaid alternative` directa, porque no te obliga a reescribir ningún diagrama. Pruébala en una página: el cambio es un import y un bloque de CSS, y los diagramas empiezan a seguir tu tema. Si dependes del layout exacto de Mermaid, de su configuración de temas o de ZenUML, quédate con Mermaid por ahora.

Si lo que buscas no es renderizar tu Mermaid sino que un agente te genere diagramas con diseño propio, revisa lo que publicamos sobre [diagram-design para Claude Code](https://www.yodev.dev/t/adios-a-los-diagramas-genericos-de-mermaid/4382).

* * *

**¿Y tú?** ¿En qué parte de tu trabajo usas diagramas de Mermaid hoy: documentación, READMEs, presentaciones u otra?

_Poll ([view on site](https://www.yodev.dev/t/como-renderizar-diagramas-de-mermaid-con-el-tema-de-tu-web-probamos-pele-de-obsidian/5712/1))_

Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí.

Relacionado: [Reladraw: la alternativa a Mermaid donde tú decides dónde va cada nodo](https://www.yodev.dev/t/reladraw-la-alternativa-a-mermaid-donde-tu-decides-donde-va-cada-nodo/5508)