Editor Mermaid en Vivo

Editor Mermaid en Vivo

Escribe la sintaxis Mermaid a la izquierda y mira el diagrama actualizarse a la derecha en tiempo real. Soporta los once tipos de diagrama de Mermaid — flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, user journey y quadrant chart — con cinco temas (default, dark, forest, neutral, base). Exporta el diagrama como SVG vector limpio o PNG en alta resolución. Todo corre en tu navegador; nada se sube.

¿Qué es Mermaid y qué puedo dibujar con él?

Mermaid es un lenguaje de diagramas basado en JavaScript que permite describir un diagrama en texto plano. Empezó como alternativa a herramientas tipo Visio caras y se ha convertido en el estándar de facto en documentación de desarrollo — soportado nativamente por GitHub, GitLab, Notion, Obsidian, VS Code y muchos generadores estáticos.

Este editor soporta todos los tipos de diagrama que trae Mermaid 10:

- Flowchart — cajas, decisiones, flechas. El más común.
- Sequence — intercambio de mensajes entre participantes en el tiempo.
- Class — diagramas UML de clases con herencia, composición, métodos, atributos.
- State — máquinas de estados finitas con transiciones y subestados.
- Entity-Relationship — tablas de base de datos y sus relaciones.
- Gantt — líneas de tiempo de proyecto con tareas, dependencias e hitos.
- Pie — gráficas de proporción.
- Mindmap — jerarquías radiales de ideas.
- Timeline — eventos en un eje horizontal de tiempo.
- User journey — flujo UX con puntuación de ánimo.
- Quadrant chart — rejilla 2×2 para priorizar.

Elige uno del desplegable Ejemplos para empezar, después edita el código a tus datos.

¿En qué se diferencia del Mermaid Live Editor oficial?

El editor oficial mermaid.live es excelente — y esta herramienta usa exactamente el mismo motor de render (mermaid-js v10.9). Diferencias:

- Esta página es una de ~1.400 herramientas en un mismo dominio, por lo que el editor comparte la UI del sitio, modo oscuro y cambio de idioma (English/Spanish/Vietnamese/French/Portuguese).
- Sin cuentas, sin canvas Pan/Zoom, sin URL compartible: a propósito más simple. Si necesitas compartir enlaces o diagramas persistentes, mermaid.live o GitHub Gist son la opción correcta.
- Usamos el bundle UMD de cdn.jsdelivr.net, así que el diagrama se renderiza tras cargar la página. Sin build ni plan de pago.
- Todo el procesamiento es local. Mermaid renderiza SVG totalmente en JavaScript; nada se envía al servidor.

Si necesitas incrustar Mermaid en un entorno privado/offline, el mismo código funciona allí — solo aloja mermaid.min.js y llama esta misma render.

¿Cómo creo un flowchart?

Los flowcharts son el tipo más fácil. Empieza con una declaración de dirección y luego lista nodos y aristas:

flowchart TD
A[Inicio] --> B{¿Decisión?}
B -- Sí --> C[Hacer algo]
B -- No --> D[Saltar]
C --> E[Fin]
D --> E

Direcciones: TD (top-down), LR (left-right), BT, RL.

Formas de nodo por tipo de paréntesis:
- [Rectángulo]
- (Redondeado)
- ((Círculo))
- {Rombo / decisión}
- [/Paralelogramo/]
- [\Trapezoide\]
- [(Cilindro)]

Estilos de arista:
- --> flecha
- --- línea
- -. punteado .->
- ==> flecha gruesa
- -- texto -->

Carga el ejemplo Flowchart y juega con las formas para sentir la sintaxis.

¿Cómo hago un sequence diagram para un API o flujo de chat?

Los sequence diagrams muestran el orden de mensajes entre participantes:

sequenceDiagram
participant Browser
participant API
participant DB
Browser->>API: POST /login {email, password}
API->>DB: SELECT user WHERE email=?
DB-->>API: row(id, hash)
API->>API: bcrypt.compare()
API-->>Browser: 200 OK + token
Note over Browser,API: Próximas peticiones<br>envían el token
Browser->>API: GET /profile (Bearer token)
API-->>Browser: 200 OK + profile JSON

Flechas: ->> sólida con punta; -->> respuesta punteada; -> fina; --> punteada.

Notas: Note over X,Y: text — añade una nota amarilla que abarca participantes.

Loops, alt blocks, parallel (par) y secciones críticas se soportan. La gramática completa está en mermaid.js.org/syntax/sequenceDiagram.

¿Cómo modelo una base de datos con el ER diagram?

Usa erDiagram y un carácter de cardinalidad por lado de la relación:

erDiagram
USER ||--o{ ORDER : coloca
ORDER ||--|{ LINE_ITEM : contiene
USER {
int id PK
string email
string name
}
ORDER {
int id PK
int user_id FK
date created_at
}

Claves de cardinalidad (izq a der):
- |o cero o uno
- || exactamente uno
- }o cero o más
- }| uno o más

Así, USER ||--o{ ORDER se lee como 'un usuario tiene cero o más pedidos'.

Dentro de las {} lista las columnas como tipo nombre modificador — modificador puede ser PK (primary key) o FK (foreign key). Excelente para incrustar esquemas pequeños en un README sin levantar un visor de esquema real.

¿Cómo funciona la sintaxis del Gantt?

La sintaxis Gantt describe tareas por sección, con fechas, duraciones y dependencias:

gantt
title Plan de proyecto
dateFormat YYYY-MM-DD
section Diseño
Wireframes :done, w1, 2026-05-01, 5d
Maquetas :active, m1, after w1, 7d
section Desarrollo
Backend :b1, 2026-05-13, 14d
Frontend :f1, after b1, 10d
section Lanzamiento
QA :q1, after f1, 3d
Release :milestone, after q1, 0d

Formato de tarea: 'Nombre : [estados], task-id, fecha-inicio | after task-id, duración | fecha-fin'

Estados: done, active, crit (camino crítico).

Hitos: terminar con 0d para render como diamante.

Dependencias: 'after task-id' encadena tareas para que editar una temprana corra el resto. Para cronogramas complejos, Smartsheet o MS Project son mejores — pero para documentación y propuestas rápidas, Gantt en Mermaid es difícil de superar.

¿Puedo exportar el diagrama?

Sí — dos formatos:

- SVG: vector, escalable infinito, se incrusta directo en HTML/Markdown/PDF, y el texto interior queda seleccionable y buscable. El archivo descargado contiene exactamente el XML renderizado que ves en el inspector de elementos.
- PNG: raster a 2× por defecto. Cada píxel del diagrama se convierte en 4 píxeles en una pantalla high-DPI. Se añade fondo blanco para que la imagen se vea correcta en Slack/Discord/email. Úsalo cuando el destino no acepte SVG (p. ej. algunos servicios o Slack viejo).

Ambas exportaciones ocurren totalmente en el navegador. PNG usa un HTMLCanvasElement para rasterizar el SVG; SVG es una descarga directa del XML. Sin ida al servidor en ningún caso.

Para diagramas de arquitectura que vivirán en un repo Git, prefiere SVG: hace diff razonable en pull requests y es el formato que GitHub renderiza en línea.

¿Hay marcador de errores de sintaxis?

Cuando Mermaid no puede parsear tu código (typo en palabra clave, paréntesis sin cerrar, forma desconocida), el mensaje de error del parser aparece bajo el editor. El último diagrama renderizado bien permanece a la derecha — para que compares tu código actual con la versión válida anterior mientras corriges.

Los mensajes de error de Mermaid pueden ser crípticos. Correcciones comunes:
- 'Parse error on line N' — mira la línea indicada y la de arriba; normalmente falta flecha o paréntesis.
- 'Lexical error' — carácter ilegal, a menudo una comilla Unicode (“ ”) cuando querías ASCII (").
- La palabra clave del tipo (flowchart, sequenceDiagram, etc.) debe ser la primera línea no en blanco; espacios delante rompen el parseo.

Para depuración en vivo, pega un snippet corto y añade líneas gradualmente — Mermaid renderiza con cada pulsación (con pequeño debounce) así detectas la edición rota fácilmente.

Características Principales

• Render en vivo del diagrama por cada pulsación (con debounce)
• Once tipos: flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline, journey, quadrant
• Cinco temas: default, dark, forest, neutral, base
• Carga rápida de muestra completa para cada tipo
• Exporta como SVG (vector) o PNG (2× retina)
• Debounce por pulsación que mantiene la UI fluida en diagramas grandes
• Conserva el último render válido si el código actual tiene error de parseo
• Controles de zoom in/out y reset para el panel de vista previa
• Copia la fuente Mermaid al portapapeles
• Potenciado por [email protected] desde el CDN de jsDelivr (URL probada)
• 100% en el cliente — tu fuente nunca sale del navegador
• Layout responsive amigable para móvil
• Modo oscuro con cambio de tema automático
• Nivel de seguridad estricto — los diagramas no ejecutan HTML arbitrario
• Funciona en cualquier navegador moderno; sin build