Repolode
Enviar
lukilabs

lukilabs/beautiful-mermaid

Biblioteca de TypeScript que convierte diagramas Mermaid en SVG personalizables o texto ASCII/Unicode, sin dependencias del DOM.

Ver en GitHub
Estrellas
11,200
Forks
411
Issues abiertos
93
Último commit
hace 6 meses

¿Qué es?

beautiful-mermaid convierte el código fuente de diagramas Mermaid en cadenas SVG o en arte de texto ASCII/Unicode. Admite diagramas de flujo, de estados, de secuencia, de clases y ER, además de gráficos XY con series de barras, líneas y combinadas.

El renderizado es síncrono, por lo que el resultado SVG se puede calcular directamente durante un renderizado de React con useMemo. Los temas se crean a partir de dos colores —fondo y primer plano—, con colores de acento y atenuados opcionales. Los colores se exponen como propiedades CSS personalizadas, de modo que los cambios de tema se pueden aplicar sin volver a renderizar. La biblioteca también incluye 15 temas integrados y puede asignar los colores de los diagramas a cualquier tema de Shiki (VS Code).

El renderizador ASCII es un port a TypeScript del proyecto Go mermaid-ascii, ampliado para admitir diagramas de secuencia, de clases y ER. Puede generar caracteres Unicode para dibujar cuadros o usar solo ASCII, con color opcional mediante ANSI o HTML para la terminal.

Funciones clave

  • 01Renderiza diagramas de flujo, de estados, de secuencia, de clases, ER y gráficos XY
  • 02Genera SVG para interfaces web o texto ASCII/Unicode para terminales
  • 03API síncrona que funciona dentro del renderizado de React con useMemo
  • 04Temas derivados de dos colores, con 15 temas integrados
  • 05Admite cualquier tema de Shiki/VS Code mediante fromShikiTheme
  • 06Cambio de tema en tiempo real mediante propiedades CSS personalizadas

Casos de uso

  • Mostrar diagramas de flujo o diagramas generados en una interfaz de chat de IA o de agentes
  • Mostrar diagramas Mermaid en una aplicación React sin carga asíncrona
  • Imprimir diagramas de arquitectura o de estados en herramientas CLI y en la salida de la terminal
  • Adaptar los colores de los diagramas a un tema existente del editor o de la aplicación

Inicio rápido

  1. 1

    Instala el paquete con npm

    npm install beautiful-mermaid
  2. 2

    Renderiza un diagrama de flujo a SVG desde el código

Antes de usarlo

  • El renderizado es síncrono, pero el diseño de ELK.js se ejecuta mediante un bypass de FakeWorker, por lo que los diagramas muy grandes pueden tardar más.
  • El README solo enumera seis tipos de diagramas; no se contemplan otros tipos de diagramas de Mermaid.

Temas

#mermaid#diagram#svg#ascii#typescript#theming#charts

Preguntas frecuentes

¿Qué es beautiful-mermaid?
Biblioteca de TypeScript que convierte diagramas Mermaid en SVG personalizables o texto ASCII/Unicode, sin dependencias del DOM. beautiful-mermaid convierte el código fuente de diagramas Mermaid en cadenas SVG o en arte de texto ASCII/Unicode. Admite diagramas de flujo, de estados, de secuencia, de clases y ER, además de gráficos XY con series de barras, líneas y combinadas.
¿beautiful-mermaid es gratuito? ¿Qué licencia tiene?
beautiful-mermaid es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿beautiful-mermaid sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de beautiful-mermaid fue el 6 may 2026.
¿Para qué puedo usar beautiful-mermaid?
Mostrar diagramas de flujo o diagramas generados en una interfaz de chat de IA o de agentes Mostrar diagramas Mermaid en una aplicación React sin carga asíncrona Imprimir diagramas de arquitectura o de estados en herramientas CLI y en la salida de la terminal Adaptar los colores de los diagramas a un tema existente del editor o de la aplicación
¿Cómo se instala beautiful-mermaid?
Instala el paquete con npm: npm install beautiful-mermaid Renderiza un diagrama de flujo a SVG desde el código
¿Dónde consigo beautiful-mermaid?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/lukilabs/beautiful-mermaid

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

Proyectos relacionados