Vista previa en tiempo real
Cada cambio en el código se renderiza al instante para detectar fácilmente errores de sintaxis y diseño.
Crea diagramas en línea
Crea diagramas Mermaid online con vista previa en tiempo real, plantillas y ejemplos. Exporta PNG, SVG, PDF o MMD, comparte por enlace y procesa todo en tu navegador.
Editor de diagramas gratuito en el navegador
Crea diagramas Mermaid online gratis
Escribe o pega código Mermaid, visualiza los cambios al instante, parte de una plantilla y exporta en PNG, SVG, PDF o MMD. Tus datos se procesan en el navegador.
- 100% gratis
- 33 tipos de diagrama
- Procesamiento en el navegador
- 4 formatos de exportación
Todo lo necesario para convertir código Mermaid en diagramas
Un flujo rápido y centrado en código para desarrolladores, equipos de producto, redactores técnicos, estudiantes y docentes.
Plantillas y ejemplos
Empieza con diagramas de flujo, secuencia, ER, Gantt, arquitectura y otros casos prácticos.
33 tipos de diagrama
Desde diagramas de flujo y mapas mentales hasta C4, Sankey, Wardley Maps, diagramas de sintaxis y ZenUML.
Exportación PNG, SVG, PDF y MMD
Descarga una imagen raster, un vector escalable, un documento listo para imprimir o el código fuente Mermaid.
Enlaces para compartir
Genera un enlace para que colegas, clientes o compañeros abran rápidamente el mismo diagrama.
Privacidad en el navegador
La edición, el renderizado y el procesamiento se realizan en el navegador para mantener el contenido sensible en tu dispositivo.
11 idiomas de interfaz
Disponible en English, 简体中文, Tiếng Việt, Русский, Português (Brasil), Español, Français, 日本語, 한국어, Deutsch y العربية.
Diseñado para diagram as code
Mantén los diagramas editables, revisables y fáciles de gestionar con control de versiones.
Crea un diagrama en tres pasos
- 01
Escribe o pega código Mermaid
Elige una plantilla, abre un ejemplo o pega código desde documentación, GitHub, ChatGPT, Claude u otra fuente.
- 02
Previsualiza mientras escribes
El diagrama se actualiza al instante al ajustar textos, relaciones, dirección, estilos y distribución.
- 03
Exporta o comparte
Descarga PNG, SVG, PDF o MMD, o crea un enlace para compartir.
Explora 33 tipos de diagramas Mermaid
Elige la visualización adecuada para software, procesos, proyectos, modelado de datos, estrategia, investigación y documentación.
- Diagrama de flujo
- Diagrama de clases
- Diagrama de secuencia
- Diagrama entidad-relación
- Diagrama de estados
- Mapa mental
- Diagrama de arquitectura
- Diagrama de bloques
- Diagrama C4
- Marco Cynefin
- Modelado de eventos
- Diagrama de Gantt
- Grafo Git
- Diagrama de Ishikawa (espina de pescado)
- Tablero Kanban
- Diagrama de paquete de red
- Gráfico circular
- Gráfico de cuadrantes
- Gráfico radar
- Diagrama de sintaxis (ABNF)
- Diagrama de sintaxis (EBNF)
- Diagrama de sintaxis (IR)
- Diagrama de sintaxis (PEG)
- Diagrama de requisitos
- Diagrama de Sankey
- Línea de tiempo
- Vista de árbol
- Mapa de árbol
- Recorrido del usuario
- Diagrama de Venn
- Mapas de Wardley
- Gráfico XY
- ZenUML
Pensado para documentación real
Desarrolladores de software
Documenta API, servicios, modelos de datos, transiciones de estado, flujos Git, paquetes de red y arquitectura.
Equipos de producto y proyecto
Mapea recorridos de usuario, procesos, roadmaps, Kanban, cronologías, requisitos y planes de proyecto.
Redactores técnicos
Crea visuales mantenibles para README, bases de conocimiento, especificaciones, tutoriales y documentación interna.
Estudiantes y docentes
Explica sistemas complejos, compara conceptos, crea mapas mentales y convierte apuntes en diagramas claros.
El formato adecuado para cada flujo de trabajo
Pasa de la vista previa a documentos, diseño, impresión, presentaciones o control de versiones sin volver a dibujar.
- PNG
- Imagen raster de alta calidad para presentaciones, documentos, chats y uso rápido.
- SVG
- Vector escalable que permanece nítido en la web, herramientas de diseño y cualquier nivel de zoom.
- Formato portátil para impresión, informes, revisiones y archivo.
- MMD
- Código fuente Mermaid original para editar, reutilizar y versionar.
Los datos del diagrama permanecen en el navegador
El contenido Mermaid se procesa del lado del cliente, una opción práctica para arquitectura, procesos internos, modelos de bases de datos y otros diagramas que no quieres subir a un servicio remoto.
Preguntas frecuentes
¿El editor Mermaid online es realmente gratis?
Sí. El editor, las plantillas, los ejemplos, la vista previa, los enlaces y las exportaciones PNG, SVG, PDF y MMD son gratuitos.
¿Qué es Mermaid?
Mermaid es una sintaxis textual para crear diagramas. Describes nodos, relaciones, eventos o líneas de tiempo con código y el renderizador los convierte en una visualización.
¿Qué tipos de diagramas admite?
Admite 33 categorías, como flujo, clases, secuencia, ER, estados, mapas mentales, arquitectura, C4, Gantt, Git, Kanban, Sankey, cronologías, recorrido del usuario, Venn, Wardley Maps, XY, ZenUML y más.
¿Puedo exportar a PNG, SVG, PDF y MMD?
Sí. PNG es ideal para imágenes comunes, SVG para vectores escalables, PDF para impresión y documentos formales, y MMD para conservar el código editable.
¿Mi código Mermaid se sube a un servidor?
El sitio está diseñado para procesar los datos en el navegador; el contenido de trabajo permanece en el cliente durante la edición y exportación normales.
¿Cómo funcionan los enlaces compartidos?
Genera un enlace en el editor y envíalo. La otra persona podrá abrir el diagrama directamente en el navegador.
¿Tengo que instalar Mermaid u otro programa?
No. Solo necesitas un navegador moderno.
¿Puedo empezar con una plantilla o ejemplo?
Sí. Las plantillas ayudan a aprender la sintaxis y crear diagramas comunes sin partir de cero.
¿Puedo pegar código Mermaid generado por ChatGPT o Claude?
Sí. Pégalo, revisa la vista previa, corrige posibles errores y exporta o comparte el resultado.
¿Por qué usar Mermaid en vez de una herramienta de arrastrar y soltar?
Los diagramas de texto son rápidos de editar, fáciles de copiar, compatibles con Git y code review, y más sencillos de mantener junto a la documentación.
Convierte texto en un diagrama claro ahora
Abre el editor, elige una plantilla y exporta tu primer diagrama Mermaid en minutos.
Crear un diagrama Mermaid