Pega Mermaid. Mira el diagrama. Al instante.

Pega Mermaid, previsualiza al instante, exporta SVG/PNG, sube archivos, arrastra para desplazarte y comparte por URL.

Plantillas rápidas
Abrir un archivo MermaidSuéltalo en cualquier lugar — .mmd · .mermaid · .md · .txt · Cómo abrir un archivo .mmd
Cargando Mermaid...Ln 1, Col 1
Consejo: en la vista previa, haz clic y arrastra (o toca y arrastra) para desplazarte. Suelta archivos en la vista previa para cargarlos.

¿Qué es Mermaid?

Mermaid es una herramienta de diagramación y gráficos basada en JavaScript que utiliza definiciones de texto inspiradas en Markdown para crear y modificar diagramas dinámicamente. Es un proyecto de código abierto que permite generar diagramas a partir de descripciones de texto simples.

En lugar de usar herramientas de dibujo complejas, escribes una sintaxis similar a código que describe tu diagrama, y Mermaid lo renderiza como un diagrama visual. Este enfoque hace que los diagramas sean versionables, fáciles de actualizar y perfectos para la documentación.

Mermaid se integra perfectamente con plataformas de documentación, wikis y archivos Markdown, lo que la convierte en una herramienta favorita entre desarrolladores y redactores técnicos.

¿Por qué usar Mermaid?

  • Control de versiones: los diagramas son archivos de texto, por lo que se pueden rastrear en Git junto con tu código
  • Actualizaciones rápidas: cambia unas pocas líneas de texto en lugar de redibujar diagramas completos
  • Consistencia: Mermaid maneja automáticamente el diseño y el estilo, garantizando diagramas consistentes
  • Sin herramientas de diseño: no necesitas Visio, Lucidchart ni otras herramientas costosas
  • Documentación como código: mantén los diagramas en el mismo repositorio que tu documentación
  • Multiplataforma: funciona en navegadores y Node.js, e integra con muchas plataformas
  • Gratis y de código abierto: sin costos de licencia, comunidad activa
  • Múltiples tipos de diagramas: admite diagramas de flujo, de secuencia, de clases y más

Diagrama de Flujo

Crea diagramas de flujo profesionales usando sintaxis simple basada en texto. Vista previa instantánea, exporta a SVG/PNG y comparte por URL, todo gratis.

Diagrama de Secuencia

Diseña diagramas de secuencia UML para visualizar interacciones entre componentes del sistema. Perfecto para documentación de API y diseño de sistemas.

Gráfico Gantt

Planifica y visualiza líneas de tiempo de proyectos con gráficos Gantt. Rastrea tareas, dependencias e hitos usando sintaxis de texto simple.

Diagrama de Clase

Diseña sistemas orientados a objetos con diagramas de clase UML. Define clases, atributos, métodos y relaciones usando texto simple.

Diagrama de Estado

Visualiza máquinas de estado y comportamiento del sistema con diagramas de estado. Modela estados, transiciones y eventos usando texto simple.

Diagrama ER

Diseña esquemas de bases de datos con diagramas entidad-relación. Define entidades, atributos y relaciones usando sintaxis de texto simple.

Publicidad

Guía completa de diagramas Mermaid

Aprende a crear diagramas profesionales con una sintaxis sencilla basada en texto

Preguntas frecuentes

Preguntas comunes sobre el uso de Mermaid Viewer y la creación de diagramas

¿Este editor de Mermaid es realmente gratis?
Sí, totalmente gratis. Puedes crear diagramas ilimitados, exportar a SVG/PNG, compartir por URL y usar todas las funciones sin registro ni pago. La herramienta se financia con publicidad no intrusiva.
¿Necesito instalar algo?
No necesitas instalar nada. Es una herramienta web que funciona por completo en tu navegador. Solo abre el sitio y empieza a crear en escritorio, tablet o móvil.
¿Cómo guardo mis diagramas?
Puedes guardar tu trabajo de varias formas: 1) exportar como SVG o PNG, 2) compartir por URL (el código va codificado en la URL), 3) copiar el código Mermaid a tus archivos, 4) subir y descargar archivos .mmd o .mermaid.
¿Puedo usar los diagramas en documentación?
Sí, claro. Exporta tus diagramas como SVG (escalable) o PNG y úsalos en documentación, presentaciones o sitios web. También puedes incrustar el código Mermaid en plataformas como GitHub, GitLab o Notion.
¿Cuál es la diferencia entre SVG y PNG?
SVG es vectorial, mantiene calidad a cualquier tamaño y es ideal para documentación y web. PNG es rasterizado, útil para compartir rápido, pero pierde calidad al redimensionar.
¿Por qué mi diagrama no se renderiza?
Revisa errores de sintaxis en tu código Mermaid. Los fallos comunes incluyen comillas sin cerrar, dos puntos o punto y coma faltantes, IDs de nodos incorrectos o sintaxis no compatible. Simplifica el diagrama para ubicar el problema.
¿Puedo colaborar con otras personas?
No hay colaboración en tiempo real integrada, pero puedes compartir diagramas por URL. Otras personas pueden abrir, editar y volver a compartir su versión. Al ser texto, Mermaid también encaja muy bien con Git.
¿Funciona también sin conexión?
La primera carga requiere conexión a Internet. Después, la edición básica suele funcionar sin conexión. Algunas funciones, como la exportación, pueden requerir conectividad.
¿Cómo aprendo la sintaxis de Mermaid?
Empieza con nuestra guía completa de Mermaid con ejemplos de todos los tipos de diagramas. Usa la sección de plantillas para avanzar más rápido y complementa con la documentación oficial en mermaid.js.org.
¿Puedo personalizar la apariencia?
Sí. Los diagramas siguen el tema del sitio: cambia entre claro y oscuro con el botón Tema de la barra superior y el diagrama se vuelve a renderizar con el tema de Mermaid correspondiente. Para personalización avanzada, usa la directiva %%{init:...}%% para definir colores, tipografías y otras propiedades visuales.
¿Qué tipos de diagramas se admiten?
Este editor admite los tipos principales de Mermaid: flowcharts, diagramas de secuencia, de clases, de estados, ER, Gantt, gráficos de pastel, grafos Git, user journeys y más.
¿Mis datos de diagramas son privados?
Tu código de diagrama no se envía a nuestros servidores. Todo se renderiza en tu navegador. Al compartir por URL, el código viaja codificado en la URL; no almacenamos ni rastreamos tu contenido.
¿Por qué usar diagramas basados en texto?
Los diagramas basados en texto tienen ventajas claras: control de versiones (ideal para Git), actualización rápida, estilo consistente, búsqueda sencilla y poco peso. Además, son más fáciles de revisar en pull requests.
¿Puedo incrustar Mermaid en mi sitio web?
Sí. Incluye la librería JavaScript de Mermaid en tu web y añade bloques de código Mermaid. Muchas plataformas ya lo soportan de forma nativa, como GitHub, GitLab, Notion y Obsidian.
¿Cuál es el tamaño máximo recomendado?
No hay un límite estricto, pero los diagramas muy grandes (más de ~100 nodos) pueden renderizar más lento según tu dispositivo. Para sistemas complejos, conviene dividir en varios diagramas más pequeños.