Editor Mermaid online (Mermaid live editor)

Un editor Mermaid integrado en un editor de Markdown

Mermaid convierte unas pocas líneas de texto en un diagrama, lo que facilita comparar, revisar y mantener los diagramas junto a la documentación que explican. El editor de esta página es un editor de Markdown dividido con compatibilidad con Mermaid integrada: escribe el diagrama donde le corresponde dentro del documento y la vista previa lo redibuja un instante después de que dejes de escribir. Los diagramas que no has cambiado se recuperan de una caché, así que editar el texto que los rodea sigue siendo rápido; el motor se carga la primera vez que un documento contiene un diagrama, lo que puede tardar un momento.

Empieza con este bloque en el editor:

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

y el diagrama de flujo aparece a la derecha. Cambia LR (de izquierda a derecha) por TD (de arriba abajo), añade un nodo o renombra una flecha, y la imagen lo sigue.

Tipos de diagrama que puedes dibujar

Todos los diagramas siguientes se renderizan en la vista previa. Escribe la palabra clave del diagrama en la primera línea dentro del bloque delimitado:

• Diagrama de flujo (flowchart TD): procesos, decisiones, esquemas de arquitectura.
• Diagrama de secuencia (sequenceDiagram): llamadas entre servicios o personas a lo largo del tiempo.
• Diagrama de clases (classDiagram) y diagrama de estados (stateDiagram-v2).
• Diagrama entidad-relación (erDiagram): esquemas de bases de datos.
• Diagrama de Gantt (gantt), línea de tiempo (timeline) y recorrido de usuario (journey).
• Gráfico circular (pie), gráfico de cuadrantes (quadrantChart) y mapa mental (mindmap).
• Gráfico Git (gitGraph), diagrama de requisitos (requirementDiagram) y C4 (C4Context).
• Tipos más nuevos como Sankey (sankey-beta), gráfico XY (xychart-beta), bloques (block-beta), paquetes, kanban y arquitectura (architecture-beta).

La sintaxis de los tipos de diagrama en beta puede cambiar entre versiones de Mermaid, así que consulta la documentación oficial de Mermaid para ver las palabras clave exactas; este editor ejecuta la versión incluida en el sitio.

Depurar un diagrama

Cuando Mermaid no puede analizar el código, el bloque del diagrama se convierte en un cuadro de error con el mensaje del analizador: el número de línea, el texto en el que se atascó y lo que esperaba. Corrige la línea y el diagrama sustituye al error. Usa la disposición Dividido para ver ambos a la vez; la vista previa se desplaza al ritmo de la línea que editas. Los diagramas se renderizan en el modo de seguridad estricto de Mermaid, por lo que los callbacks de clic y los scripts dentro de las definiciones de diagrama están desactivados, y el HTML en línea del resto del documento se sanea.

Guardar, compartir y exportar

El documento se guarda automáticamente en tu navegador. Exportar → Descargar .md te da el archivo Markdown para hacer el commit junto a tu código. Compartir crea un enlace que contiene todo el documento, así que un compañero lo abre con el diagrama ya dibujado. Descargar .html exporta una página independiente con los diagramas como SVG, e Imprimir / Guardar como PDF genera un PDF en el que los diagramas se ven nítidos con cualquier zoom. Los colores de los diagramas siguen el tema claro u oscuro que elijas.

Cuándo usar este editor y cuándo una herramienta dedicada

Si solo quieres iterar sobre un diagrama con un panel de configuración y descargas de imagen, una herramienta dedicada como mermaid.live está pensada para eso. Si el diagrama forma parte de un documento (un README, una nota de diseño, el plan de un agente, la documentación de un proyecto), un editor de Markdown que renderice Mermaid es el camino más corto, porque ves el diagrama en contexto y puedes descargar el archivo completo. ¿Eres nuevo en la sintaxis que lo rodea? Consulta la guía rápida de Markdown o abre directamente el editor de Markdown.