Repolode
Enviar
obsidianmd

obsidianmd/pele

Un renderizador pequeño y síncrono que convierte texto de diagramas Mermaid en SVG sin dependencias en tiempo de ejecución.

Ver en GitHubSitio web
Estrellas
2,219
Forks
65
Issues abiertos
23
Último commit
ayer

¿Qué es?

Pele convierte el código fuente de diagramas Mermaid en SVG. Está pensado para la sintaxis de Mermaid 12.1.0 y admite todos los tipos de diagramas incluidos en esa versión, con su propio diseño y estilo visual en lugar de los de Mermaid.

El renderizado es síncrono y no tiene dependencias en tiempo de ejecución. Los colores y las fuentes se controlan mediante variables CSS, por lo que un diagrama puede adaptarse al tema de una página y actualizarse cuando este cambie, sin necesidad de volver a renderizarlo. En el navegador, una función auxiliar de montaje renderiza el diagrama en un elemento, obtiene las fuentes de CSS y adapta el diseño al ancho del contenedor. La entrada principal incluye todos los tipos de diagramas, pero se pueden registrar o cargar tipos individuales bajo demanda para reducir el tamaño del bundle.

El proyecto escapa el texto de los diagramas, filtra enlaces y estilos, y limita el tamaño de la entrada y la salida; además, ofrece recomendaciones para gestionar diagramas que no sean de confianza. Se distribuye en npm y también se puede cargar desde un CDN como script global.

Funciones clave

  • 01Renderiza en SVG todos los tipos de diagramas incluidos en Mermaid 12.1.0.
  • 02No tiene dependencias en tiempo de ejecución y el renderizado es síncrono.
  • 03Controla los colores y las fuentes mediante variables CSS que se actualizan cuando cambia el tema.
  • 04Incluye una función auxiliar de montaje en el navegador que adapta el diseño al ancho del contenedor.
  • 05Permite cargar tipos de diagramas individuales bajo demanda para reducir el tamaño del bundle.
  • 06Escapa el texto y filtra enlaces y estilos para admitir entradas que no sean de confianza.

Casos de uso

  • Renderizar diagramas Mermaid en una página web o un sitio de documentación sin una dependencia pesada.
  • Incrustar diagramas que deban adaptarse al tema claro u oscuro de un sitio mediante CSS.
  • Generar diagramas SVG a partir de texto Mermaid en el servidor o con herramientas de compilación.
  • Reducir el tamaño del código JavaScript cargando solo los tipos de diagramas que usa la página.

Inicio rápido

  1. 1

    Instala el paquete

    npm install pele
  2. 2

    Importa render y convierte el texto de Mermaid a SVG

Antes de usarlo

  • El README no especifica una licencia; los metadatos muestran NOASSERTION, aunque el README menciona MIT.
  • Pele está diseñado para la sintaxis de Mermaid 12.1.0 y utiliza su propio diseño y estilo visual, por lo que el resultado puede diferir del de Mermaid.

Temas

#mermaid#diagrams#svg#typescript#visualization#javascript#charts#diagramming#mermaid-diagrams#mermaidjs

Preguntas frecuentes

¿Qué es pele?
Un renderizador pequeño y síncrono que convierte texto de diagramas Mermaid en SVG sin dependencias en tiempo de ejecución. Pele convierte el código fuente de diagramas Mermaid en SVG. Está pensado para la sintaxis de Mermaid 12.1.0 y admite todos los tipos de diagramas incluidos en esa versión, con su propio diseño y estilo visual en lugar de los de Mermaid.
¿pele es gratuito? ¿Qué licencia tiene?
pele es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿pele sigue mantenido?
Mantenimiento activo. El último commit de pele fue el 18 oct 2026.
¿Para qué puedo usar pele?
Renderizar diagramas Mermaid en una página web o un sitio de documentación sin una dependencia pesada. Incrustar diagramas que deban adaptarse al tema claro u oscuro de un sitio mediante CSS. Generar diagramas SVG a partir de texto Mermaid en el servidor o con herramientas de compilación. Reducir el tamaño del código JavaScript cargando solo los tipos de diagramas que usa la página.
¿Cómo se instala pele?
Instala el paquete: npm install pele Importa render y convierte el texto de Mermaid a SVG
¿Dónde consigo pele?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/obsidianmd/pele

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados