Vista previa al instante
Cambia el código y comprueba cómo queda el diagrama. Así puedes detectar errores de sintaxis o ajustar la distribución.
Crea diagramas en línea
Crea diagramas de flujo, de secuencia y ER con este editor de Mermaid online. Pega tu código y ve los cambios al instante. Usa ejemplos, guarda en PNG, SVG o PDF y comparte un enlace. Sin instalar nada.
Gratis y sin instalar nada
Crea tus diagramas con Mermaid online
Pega tu código o elige una plantilla y mira cómo queda el diagrama mientras lo editas. Crea diagramas de flujo, de secuencia o de bases de datos y guárdalos en PNG, SVG o PDF. También puedes compartirlos con un enlace.
- 100% gratis
- 33 tipos de diagrama
- Procesamiento en el navegador
- 4 formatos de exportación
Todo a mano para crear diagramas con Mermaid
Escribe el código, comprueba el resultado y prepara un diagrama para tus documentos o presentaciones.
Plantillas y ejemplos
Empieza con un diagrama de flujo, de secuencia, ER o de Gantt y adáptalo a lo que necesitas.
33 tipos de diagramas
Además de diagramas de flujo y mapas mentales, puedes crear diagramas C4, de Sankey y tableros Kanban.
Descarga imágenes, PDF y código
Guarda el diagrama en PNG, SVG o PDF, o descarga el código en MMD para editarlo más adelante.
Comparte un enlace
Envía el enlace a un compañero para que abra el mismo diagrama en su navegador.
Edita desde el navegador
El código se procesa en tu navegador al editar y exportar, sin tener que subirlo al servidor.
Disponible en 11 idiomas
Puedes usar la interfaz en español o cambiar a cualquiera de los otros idiomas disponibles.
Gestiona tus diagramas con Git
Como los diagramas son texto, puedes copiarlos, revisar los cambios y guardarlos junto al código del proyecto.
Ejemplos de Mermaid: diagramas de flujo, secuencia y entidad-relación
Representa un proceso de aprobación, las llamadas a una API y las relaciones de una base de datos con Mermaid. Abre un ejemplo en el editor, modifica el código y comprueba el resultado en la vista previa.
Diagrama de flujo para aprobar una solicitud
Un proceso desde el envío de una solicitud hasta su aprobación o corrección. flowchart TD organiza los pasos de arriba abajo y el rombo representa una decisión.
flowchart TD
A[Enviar solicitud] --> B{¿Solicitud aprobada?}
B -->|Sí| C[Iniciar proceso]
B -->|No| D[Corregir solicitud]
D --> AConsejo de sintaxis: Cambia los textos entre corchetes y conserva los identificadores A y B. Las etiquetas de las ramas van entre barras: -->|Sí|. Si aparece un error, comprueba que has cerrado los corchetes y las barras.
Abrir este ejemplo en el editorDiagrama de secuencia de una API
Muestra el orden de los mensajes entre el usuario, la API y la base de datos. participant con as permite usar un identificador corto y mostrar un nombre en español.
sequenceDiagram
participant U as Usuario
participant A as API
participant D as Base de datos
U->>A: Enviar pedido
A->>D: Guardar pedido
D-->>A: Devolver ID del pedido
A-->>U: Confirmar recepciónConsejo de sintaxis: Después de la flecha escribe dos puntos y el mensaje: U->>A: Enviar pedido. La flecha -->> muestra una respuesta con línea discontinua.
Abrir este ejemplo en el editorDiagrama entidad-relación de clientes y pedidos
Un modelo donde cada cliente puede tener varios pedidos. Los atributos de CUSTOMER y ORDER incluyen claves primarias y una clave foránea.
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
int id PK
string name
}
ORDER {
int id PK
int customer_id FK
date created_at
}Consejo de sintaxis: || indica una entidad y o{ indica cero o más. Escribe cada atributo como «tipo nombre»; PK señala una clave primaria y FK una clave foránea.
Abrir este ejemplo en el editorCómo exportar Mermaid a PNG, SVG o PDF
Abre el menú de exportación del editor y elige el formato. PNG sirve para presentaciones y compartir imágenes; SVG mantiene la nitidez al ampliar el diagrama; PDF es útil para imprimir. Guarda un archivo MMD para volver a editar el código Mermaid más adelante.
Tu diagrama, en tres pasos
- 01
Pega el código o elige una plantilla
Usa tu código Mermaid o abre un ejemplo y cambia el contenido.
- 02
Comprueba el resultado
Ajusta los textos y las conexiones mientras ves los cambios en la vista previa.
- 03
Guarda o comparte
Descarga una imagen, un PDF o el código en MMD, o crea un enlace para compartirlo.
33 tipos de diagramas para elegir
Elige el diagrama que mejor explique un proceso, las llamadas entre servicios, una base de datos o el plan de un proyecto.
- 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
Para tus proyectos, documentos y clases
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.
¿En qué formato quieres guardar tu diagrama?
Usa PNG para presentaciones, SVG si necesitas ampliarlo y PDF para imprimir. Guarda el código en MMD para seguir editándolo después.
- 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.
El código se procesa en tu navegador
Al editar y exportar, el código Mermaid se procesa en el navegador sin subirlo al servidor. Los enlaces compartidos incluyen el contenido del diagrama: envíalos solo a quienes quieras que lo vean.
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 permite crear diagramas escribiendo texto. Describe los elementos y sus conexiones con código y obtendrás un diagrama de flujo, de secuencia u otro tipo de diagrama.
¿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.
Prueba con un ejemplo
Abre el editor, elige una plantilla o pega tu propio código Mermaid.
Crear un diagrama