Generador de diagramas Mermaid
Escribe sintaxis de diagrama Mermaid y observa cómo se renderiza en vivo. Empieza desde una plantilla lista para usar, corrige errores de sintaxis sobre la marcha, y luego copia o descarga el diagrama como SVG o PNG.
Se ejecuta totalmente en tu navegador — los archivos nunca salen de tu dispositivo.
Cómo funciona
- 01Escribe o pega sintaxis Mermaid en el panel izquierdo, o haz clic en Ejemplos para cargar una plantilla de diagrama de flujo, secuencia, clases, estados, Gantt, circular o entidad-relación.
- 02El diagrama se renderiza automáticamente mientras escribes. Una sintaxis no válida muestra un error en lenguaje sencillo y sigue mostrando tu último diagrama válido, en lugar de borrar la vista previa.
- 03Usa los controles − / % / + sobre la vista previa para hacer zoom del 50% al 200% mientras revisas los detalles — esto no afecta al tamaño del archivo exportado.
- 04Copia el diagrama renderizado como cadena SVG, o usa «Descargar como» para guardarlo como archivo .svg o .png independiente.
- 05Pega el SVG o PNG en un documento, o incrusta el código fuente de Mermaid directamente en Markdown en los renderizadores que lo admiten (GitHub, GitLab, Notion y otros renderizan de forma nativa los bloques de código Mermaid).
Preguntas frecuentes
¿Es gratis este generador de diagramas Mermaid?
Sí, sin cuenta y sin límites. Los diagramas se analizan y renderizan totalmente en tu navegador usando la biblioteca Mermaid.js.
¿Se sube a algún sitio el código fuente de mi diagrama?
No. El renderizado ocurre totalmente en el cliente — la sintaxis que escribes nunca sale de tu dispositivo.
¿Qué tipos de diagramas admite Mermaid?
Diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estados, diagramas entidad-relación, diagramas de Gantt, gráficos circulares y varios otros tipos — esta herramienta renderiza cualquier sintaxis Mermaid válida, no solo diagramas de flujo. El menú Ejemplos incluye una plantilla inicial lista para usar de cada uno de estos siete tipos.
¿Qué pasa si mi sintaxis tiene un error?
El panel del diagrama muestra un mensaje de error en lenguaje sencillo que describe lo que Mermaid no pudo interpretar, en lugar de fallar o mostrar una página en blanco. Si ya tenías un diagrama válido renderizado, permanece visible debajo del error para que no pierdas tu lugar — corrige la sintaxis y la vista previa se actualiza automáticamente.
¿Puedo exportar como PNG, no solo SVG?
Sí. Elegir «PNG» en el menú «Descargar como» renderiza el diagrama a resolución 2x con fondo blanco, independientemente del nivel de zoom que tenga la vista previa en ese momento.
¿Puedo usar el resultado directamente en Markdown?
Muchos renderizadores (GitHub, GitLab, Notion, Obsidian y otros) renderizan de forma nativa los bloques de código ```mermaid — en ese caso puedes pegar tu sintaxis sin procesar directamente en un documento Markdown sin necesidad de exportar. Usa la exportación SVG o PNG de esta herramienta para los renderizadores que no admiten Mermaid de forma nativa.
Herramientas relacionadas
Generador de tablas Markdown
Crea tablas Markdown a partir de una cuadrícula sencilla.
AbrirHerramientaGenerador de README
Crea un README.md a partir de 17 secciones reordenables — insignias, instalación, referencia de API y más.
AbrirHerramientaCurrículum en Markdown
Genera un currículum en Markdown a partir de un formulario breve.
Abrir