Saltar al contenido principal
LibraTool logoLibraTool

Editor de Diagramas Mermaid gratis

Escribe diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más con sintaxis Mermaid y una vista previa en tiempo real. Exporta como SVG o PNG. Se ejecuta completamente en tu navegador.

💡 Escribe diagramas con la sintaxis de Mermaid (diagramas de flujo, de secuencia, de Gantt, de clases y más) y expórtalos como SVG o PNG. Todo se ejecuta en tu navegador: el texto de tu diagrama nunca se sube y el motor de Mermaid se sirve desde este sitio, no desde una CDN de terceros.

Usos habituales

  • Crear un diagrama de flujoCrea un diagrama de flujo desde texto y exórtalo como imagen.
  • Dibujar un diagrama de secuenciaDiagrama cómo sistemas o personas interactúan a lo largo del tiempo.
  • Añadir un diagrama a un READMECrea diagramas que GitHub renderiza nativamente en tu README.
  • Construir un diagrama de GanttCrea una línea de tiempo del proyecto como diagrama de Gantt desde texto.
  • Crear un diagrama de clasesDiagrama las clases y sus relaciones para diseño de software.

Cómo funciona

Mermaid te permite escribir diagramas como texto y hacer que se rendericen automáticamente — excelente para mantener diagramas en control de versión. Este es un editor en vivo que se renderiza mientras escribes.

  1. 1
    Se carga el motor Mermaid
    La biblioteca Mermaid se carga desde LibraTool la primera vez que usas la herramienta y luego tu navegador la guarda en caché.
  2. 2
    Escribes código de diagrama
    Diagramas de flujo, diagramas de secuencia, gráficos de Gantt, diagramas de clase, gráficos circulares y más — usando la sintaxis de texto de Mermaid.
  3. 3
    Se renderiza en vivo
    Tu código se analiza y se renderiza a un SVG en tu navegador mientras escribes, con temas claro y oscuro.
  4. 4
    Exporta SVG o PNG
    Descarga el diagrama como un SVG escalable o un PNG 2× para soltar en docs, diapositivas o un README.

Tu código de diagrama — que puede describir sistemas internos — se renderiza enteramente en tu navegador y nunca se carga.

Herramientas relacionadas

📝

Editor de Markdown

Escribe y previsualiza Markdown en tiempo real. Admite encabezados, negrita, cursiva, bloques de código, tablas y listas.

Probar
🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar
🌳

Generador de Árbol ASCII

Convierte una lista con sangría en un árbol de carpetas limpio (├── └──) para READMEs y documentación. Salida Unicode o ASCII puro. Se ejecuta completamente en tu navegador.

Probar

Preguntas frecuentes