Diagrama de flujo
Representa decisiones y procesos con nodos, flechas y formas Mermaid: cajas redondeadas, rombos…
Mermaid Viewer online
Pega tu código Mermaid a la izquierda y observa cómo el diagrama se renderiza al instante a la derecha. Analiza y corrige la sintaxis Mermaid con un clic, optimiza tu código y exporta el resultado a PNG, SVG o PDF — gratis, privado y sin registro.
- 100 % gratis
- Sin registro
- Todo funciona en tu navegador
- Más de 12 tipos de diagramas
Editor Mermaid en vivo y visor de gráficos
Este visor de gráficos Mermaid actualiza la vista previa cada vez que dejas de escribir, así que dibujar un diagrama Mermaid sencillo es tan fácil como redactar texto. Cuando algo se rompe, el corrector Mermaid integrado localiza el problema y repara los errores de sintaxis más comunes — puntuación de ancho completo, caracteres invisibles, comillas tipográficas — con una explicación clara de cada cambio.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Tipos de diagramas Mermaid que puedes renderizar
De diagramas de flujo a líneas de tiempo, todos los tipos de diagramas Mermaid funcionan desde el primer momento — la forma más fácil de dibujar diagramas Mermaid sin instalar nada. Cada vista previa de abajo se genera en vivo con el mismo motor del visor; carga cualquier plantilla para seguir editándola.
Diagrama de secuencia
Muestra cómo se intercambian mensajes los participantes en el tiempo, con bucles, alternativas y activaciones.
Diagrama ER
Modela entidades, atributos y relaciones de una base de datos en notación de pata de gallo.
Diagrama de clases
Describe clases, interfaces, miembros y herencia para el diseño de software.
Diagrama de estados
Sigue los estados de un sistema y las transiciones entre ellos.
Diagrama de Gantt
Planifica proyectos con tareas, hitos, dependencias y fechas.
Gráfico circular
Convierte unos pocos números en un gráfico circular de proporciones.
User journey
Mapea el recorrido de un usuario con tareas y puntuaciones de satisfacción.
Línea de tiempo
Registra eventos en una línea vertical — ideal para historias y hojas de ruta.
Mapa mental
Lluvia de ideas en un mapa ramificado: texto plano de entrada, jerarquía de salida.
Grafo de Git
Visualiza ramas, commits y fusiones de un repositorio Git.
Matriz de cuadrantes
Coloca elementos en dos ejes y cuatro cuadrantes, p. ej. prioridad vs. esfuerzo.
Conceptos esenciales de la sintaxis Mermaid
La sintaxis Mermaid es texto plano: una instrucción por línea, nodos unidos por flechas. Estas formas Mermaid cubren la mayoría de diagramas — haz clic en cualquier ejemplo para abrirlo en el visor y seguir editando.
| Sintaxis | Dibuja |
|---|---|
A[Etiqueta] | Rectángulo (proceso) |
A(Etiqueta) | Caja redondeada |
A{Etiqueta} | Rombo (decisión) |
A([Etiqueta]) | Estadio (píldora) |
A[(Etiqueta)] | Cilindro (base de datos) |
A((Etiqueta)) | Círculo |
A-->B | Flecha (enlace) |
A-->|texto|B | Flecha con etiqueta |
A---B | Línea simple |
subgraph Título … end | Grupo de nodos |
Miniplantillas
Convertir un diagrama Mermaid en imagen online
¿Te preguntas cómo convertir un diagrama Mermaid en una imagen online? Tres pasos: pega tu código, espera el renderizado de la vista previa y haz clic en PNG, SVG o PDF en la barra de herramientas. Todo ocurre en tu navegador — sin subidas de archivos.
Mermaid a PNG
Exporta con hasta 4× de resolución — diagramas nítidos para diapositivas, documentos y mensajería.
Mermaid a SVG
Un archivo vectorial de verdad: zoom infinito, editable en Figma o Illustrator, perfecto para imprenta y pantallas de alta densidad.
Mermaid a PDF
Un clic genera una página PDF del tamaño exacto de tu diagrama — ideal para informes, tickets y archivo.
Preguntas frecuentes
¿Qué es un visor Mermaid?
Un visor Mermaid toma código de diagrama escrito en sintaxis Mermaid y lo renderiza como un diagrama real. Este reúne visor, creador y corrector en una sola página: renderizado en vivo mientras escribes, detección de problemas de sintaxis, reparación automática y exportación a PNG, SVG o PDF.
¿Cómo corrijo una sintaxis Mermaid no válida?
Pega el código y haz clic en Corregir. El corrector Mermaid repara comillas tipográficas y caracteres Unicode invisibles, puntuación CJK de ancho completo, corchetes sin emparejar, palabras reservadas como «end», «end» ausentes en subgrafos y bucles, vallas de Markdown pegadas por error y mucho más. Cada cambio se explica en la lista de diagnóstico.
¿Cómo convierto Mermaid a PNG, SVG o PDF?
Renderiza tu diagrama en el visor de arriba y haz clic en PNG, SVG o PDF en la barra de la vista previa. PNG descarga un mapa de bits de alta resolución, SVG un archivo vectorial y PDF un documento listo para imprimir. Gratis, ilimitado y todo en el navegador.
¿PlantUML o Mermaid — cuál elegir?
Mermaid se renderiza directamente en el navegador, por eso GitHub, GitLab y la mayoría de wikis Markdown lo soportan de forma nativa; es la opción ligera para documentación. PlantUML cubre más de la especificación UML 2 pero necesita Java o un servidor para renderizar. Para diagramas basados en texto en documentación y web, Mermaid suele ser el camino más fácil.
¿Qué representa «Mermaid» — cuál es el significado del nombre?
La herramienta toma su nombre de la sirena mitológica: la idea de que un texto sencillo puede, como el canto de una sirena, hacer nacer un diagrama precioso. En los diagramas, Mermaid representa el «diagrama como código»: describes nodos y flechas en texto y la biblioteca dibuja el gráfico por ti.
¿Cuáles son los diferentes tipos de diagramas Mermaid?
Los más usados: diagramas de flujo, de secuencia, ER, de clases, de estados, de Gantt, circulares, user journeys, líneas de tiempo y mapas mentales — la galería completa está más arriba. Cada tipo empieza con una línea de palabra clave como «flowchart TD» o «sequenceDiagram», seguida de una instrucción por línea.
¿Mi código de diagrama se sube a algún sitio?
No. El renderizado, la corrección, la optimización y la exportación se ejecutan localmente en tu navegador. Nada se envía ni se almacena en un servidor — puedes incluso usar el visor sin conexión una vez cargada la página.