mermaid.design es un editor de diagramas Mermaid en línea. Escribe sintaxis mermaid en texto plano y mira cómo se convierte en diagramas de flujo, de secuencia, ER, diagramas de Gantt y más — renderizados en vivo mientras escribes.
Todo se ejecuta localmente en tu navegador: sin cuenta, sin subidas, sin idas y vueltas al servidor. El código de tus diagramas permanece en tu dispositivo y cada exportación se genera donde trabajas.
Más que una herramienta de pegar y previsualizar: un entorno completo para diseñar, estilizar y exportar diagramas como código.
Un editor CodeMirror ligero con resaltado de sintaxis Mermaid, marcadores de error en línea y selección sincronizada con el lienzo, junto a una vista previa en vivo con desplazamiento y zoom.
Edita etiquetas y elementos del diagrama directamente en el lienzo. Los cambios se sincronizan con el código fuente Mermaid, con selección y deshacer/rehacer compartidos entre el código y la vista previa.
Escribe Mermaid más rápido con autocompletado contextual, fragmentos listos para usar, búsqueda y reemplazo, formato con un clic y diagnósticos de sintaxis en línea.
Alterna entre la salida SVG oficial de mermaid y un motor ASCII que dibuja tu diagrama en texto plano — perfecto para terminales, comentarios de código y documentación.
Ajusta las 73 variables de tema de mermaid, parte de más de 20 preajustes integrados y de diseñador, o deriva una paleta completa de un solo color semilla — y luego exporta el tema como JSON o frontmatter.
Ajusta 438 opciones de renderizado de Mermaid organizadas en 33 grupos, desde el diseño y los espacios hasta el comportamiento de cada tipo de diagrama, sin editar manualmente el JSON de configuración.
Empieza desde una galería de plantillas de flujo, secuencia, estado, ER, Gantt y más — cada una renderizada en vivo con tu tema actual antes de aplicarla.
Descarga tu diagrama como SVG, PNG, JPG o WebP — con fondo transparente opcional — o copia el renderizado ASCII directamente en tu README.
Sin registro y sin backend: el análisis, el renderizado y la exportación ocurren en el cliente, así que los diagramas de arquitectura sensibles nunca salen de tu máquina.
El mismo código mermaid, renderizado a tu manera — cambia de motor desde la barra de navegación en cualquier momento.
El renderizado SVG clásico de mermaid que conoces de la documentación, con control total sobre cada variable de tema y campo de configuración.
Abrir el editor oficial →Renderiza diagramas como arte ASCII para terminales, comentarios de código y documentos de texto plano, con juego de caracteres y tamaño de fuente ajustables.
Probar el modo ASCII →Describe un diagrama en lenguaje natural y deja que la IA redacte el código mermaid por ti. Este modo está en camino.
Ver lo planeado →De diagramas de flujo a diagramas de arquitectura C4 — si mermaid lo soporta, puedes diseñarlo aquí.
Empieza desde cero, pega código existente o elige una de las 31 plantillas de la galería.
Ajusta las variables de tema, aplica un preajuste o cambia al motor Styled para sombras y trazos personalizados — sin una línea de CSS.
Descarga SVG, PNG, JPG o WebP para documentos y diapositivas, o TXT para el renderizado ASCII. Tu tema viaja como JSON o frontmatter.
No. mermaid.design funciona completamente en tu navegador: abre la página y empieza a escribir sintaxis mermaid. No hay nada que instalar ni dónde registrarse.
No. El análisis, el renderizado y la exportación ocurren localmente en tu navegador. El código de tus diagramas se guarda en el almacenamiento local de tu navegador y nunca sale de tu dispositivo.
Todos los tipos soportados por mermaid 12, incluidos diagramas de flujo, de secuencia, de clases, de estado, ER, diagramas de Gantt, mapas mentales, líneas de tiempo, diagramas de Sankey, diagramas C4 y más.
Puedes descargar diagramas como SVG, PNG, JPG o WebP (con fondo transparente opcional), exportar renderizados ASCII como texto plano y copiar tu configuración de tema como JSON o frontmatter de mermaid.
Sí. Los diagramas que creas y exportas son tuyos: úsalos en documentación, presentaciones, artículos de blog o productos, comerciales o no.
Sin registro — el editor de arriba ya te está esperando.