Repolode
Enviar
mermaid-js

mermaid-js/mermaid

Mermaid genera diagramas, como diagramas de flujo, de secuencia y de Gantt, a partir de definiciones de texto similares a Markdown.

Alternativa open source a:Lucidchartdraw.io

Ver en GitHubSitio web
Estrellas
90,776
Forks
9,374
Issues abiertos
1,938
Último commit
hace 10 horas

¿Qué es?

Mermaid es una herramienta de diagramación para JavaScript y TypeScript que convierte definiciones de texto en diagramas renderizados. Escribes una breve descripción en texto, como un diagrama de flujo o de secuencia, y Mermaid la renderiza como SVG en el navegador o durante un paso del proceso de compilación. Como el diagrama es texto plano, se puede guardar junto al código, editar en una pull request y volver a generarlo cada vez que cambie el sistema subyacente.

El proyecto admite una amplia variedad de tipos de diagramas, incluidos diagramas de flujo, de secuencia, de clases, de estados, ER, de Gantt, de pastel, de grafos de Git, mapas mentales, líneas de tiempo, recorridos de usuario y diagramas C4. Se puede usar mediante un paquete npm, un script CDN o el Live Editor en línea. Además, GitHub renderiza directamente los bloques de código Mermaid en archivos Markdown.

Mermaid incluye un proceso de sanitización predeterminado para entradas no confiables y un modo opcional de renderizado en un iframe aislado para sitios que aceptan código de diagramas de usuarios externos, aunque esto limita algunas funciones interactivas.

Funciones clave

  • 01Renderiza diagramas de flujo, de secuencia, de clases, de estados, ER, de Gantt y muchos otros tipos a partir de texto.
  • 02Los diagramas son texto plano, por lo que se pueden comparar y revisar fácilmente en el control de versiones.
  • 03Funciona en Markdown de GitHub, mediante un paquete npm o con un script CDN.
  • 04Permite personalizar temas, colores, fuentes y la orientación del diseño.
  • 05Ofrece un modo de renderizado aislado para entradas de diagramas no confiables.

Casos de uso

  • Mantener diagramas de arquitectura y de secuencia en un repositorio, junto al código que describen.
  • Incluir diagramas en archivos README de GitHub y sitios de documentación.
  • Generar gráficos, como gráficos de Gantt o de pastel, dentro de un proceso de compilación.
  • Permitir que personas sin conocimientos de programación creen borradores de diagramas en el Live Editor en línea.

Inicio rápido

  1. 1

    Prueba diagramas al instante en Mermaid Live Editor, en mermaid.live

Temas

#diagrams#diagrams-as-code#flowchart#uml-diagrams#documentation#markdown#javascript#typescript#mindmap

Preguntas frecuentes

¿Qué es mermaid?
Mermaid genera diagramas, como diagramas de flujo, de secuencia y de Gantt, a partir de definiciones de texto similares a Markdown. Mermaid es una herramienta de diagramación para JavaScript y TypeScript que convierte definiciones de texto en diagramas renderizados. Escribes una breve descripción en texto, como un diagrama de flujo o de secuencia, y Mermaid la renderiza como SVG en el navegador o durante un paso del proceso de compilación. Como el diagrama es texto plano, se puede guardar junto al código, editar en una pull request y volver a generarlo cada vez que cambie el sistema subyacente.
¿mermaid es gratuito? ¿Qué licencia tiene?
mermaid es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿mermaid sigue mantenido?
Mantenimiento activo. El último commit de mermaid fue el 20 oct 2026.
¿Para qué puedo usar mermaid?
Mantener diagramas de arquitectura y de secuencia en un repositorio, junto al código que describen. Incluir diagramas en archivos README de GitHub y sitios de documentación. Generar gráficos, como gráficos de Gantt o de pastel, dentro de un proceso de compilación. Permitir que personas sin conocimientos de programación creen borradores de diagramas en el Live Editor en línea.
¿Cómo se instala mermaid?
Prueba diagramas al instante en Mermaid Live Editor, en mermaid.live
¿Dónde consigo mermaid?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/mermaid-js/mermaid

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

Proyectos relacionados