Editor Mermaid online (diagramas con texto)
Pega o escribe código Mermaid. La vista previa se actualiza mientras escribes y los ejemplos muestran los tipos de diagrama.
Cómo usarEscribe el diagrama, mira el dibujo
flowchart LR
A[Idea] --> B{¿Vale la pena?}
B -- sí --> C[Planificar]
B -- no --> D[Archivar]
C --> E[Ejecutar] --> F((Listo))sequenceDiagram
Cliente->>Tienda: Hace el pedido
Tienda-->>Cliente: Confirma por e-mailpie title A dónde va el presupuesto
"Alquiler" : 35
"Equipo" : 40
"Marketing" : 15
"Otros" : 10journey
title Compra en el sitio
section Descubrimiento
Encuentra la tienda en Google: 4: Cliente
Ve los productos: 5: Cliente
section Compra
Completa la dirección: 2: Cliente
Paga: 3: ClientequadrantChart
title Prioridad de las tareas
x-axis Poco esfuerzo --> Mucho esfuerzo
y-axis Poco impacto --> Mucho impacto
quadrant-1 Planificar
quadrant-2 Hacer ya
quadrant-3 Dejar para después
quadrant-4 Repensar
Sitio nuevo: [0.7, 0.85]
Post en Instagram: [0.2, 0.6]
Cambiar el logo: [0.6, 0.3]gitGraph
commit
branch pantalla-nueva
checkout pantalla-nueva
commit
commit
checkout main
merge pantalla-nueva
commit
Disponible en: 
Editor Mermaid online (diagramas con texto): para qué sirve
Escribe o pega código Mermaid y mira cómo se actualiza el diagrama mientras escribes. Los botones de ejemplo muestran un diagrama de flujo, uno de secuencia, un gráfico circular, un recorrido del usuario, un cuadrante y un gráfico de git, y el editor acepta los demás tipos de Mermaid, como clases, estados, ER, Gantt, mapa mental y línea de tiempo.
El código queda guardado en tu navegador y el dibujo sale en PNG o SVG.
Cómo usar
- Escribe el código Mermaid o elige un ejemplo.
- Ajusta el texto y mira la vista previa.
- Descarga en PNG o SVG o copia el código.
Cuándo usar
- Probar un diagrama antes de ponerlo en GitHub.
- Documentación técnica.
- Gráficos rápidos para una presentación.
Preguntas frecuentes
¿Qué es Mermaid?
Es un lenguaje abierto para describir diagramas en texto. GitHub, GitLab, Notion y muchos editores de documentación dibujan los bloques Mermaid automáticamente, así que el mismo código sirve en la documentación del proyecto.
¿Qué tipos de diagrama puedo hacer?
Diagrama de flujo (flowchart), secuencia, clases, estados, entidad-relación, Gantt, circular, recorrido del usuario, cuadrante, gráfico de git, mapa mental, línea de tiempo y otros. Cada tipo empieza con una palabra en la primera línea, como flowchart, sequenceDiagram o pie.
¿El código queda guardado?
Sí, en el almacenamiento de tu navegador, en este dispositivo. Al volver, el último diagrama aparece de nuevo. Nada se envía a servidores.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.