Mermaid Design

Primeros pasos

mermaid.design es un editor de diagramas Mermaid en línea y gratuito. Escribe la sintaxis Mermaid a la izquierda y observa cómo el diagrama se renderiza en vivo a la derecha. Todo se ejecuta completamente en tu navegador: tus diagramas nunca salen de tu dispositivo.

Tu primer diagrama

  1. Abre mermaid.design: el editor se carga con un diagrama de flujo de ejemplo.
  2. Edita el código Mermaid en el panel izquierdo, por ejemplo:
flowchart TD
    A[Inicio] --> B{¿Listo?}
    B -- Sí --> C[Publicar]
    B -- No --> D[Seguir programando]
  1. La vista previa se vuelve a renderizar automáticamente mientras escribes (con un breve antirrebote). Si la sintaxis no es válida, el último diagrama correcto permanece visible detrás de un aviso de error, y el editor de código marca la línea con problemas.

El área de trabajo

El editor es un área de trabajo de tres paneles:

  • Editor de código (izquierda): un editor Monaco (el mismo motor que VS Code) con resaltado de sintaxis Mermaid, marcadores de error en línea y una barra de herramientas para formatear/copiar/borrar. Puedes plegarlo en una delgada franja de iconos o arrastrar el divisor para cambiar su tamaño.
  • Vista previa (centro): el diagrama renderizado en vivo. Arrastra para desplazarte, Ctrl/⌘ + rueda para hacer zoom, doble clic para ajustar. Una barra de herramientas flotante ofrece controles de zoom y un selector de fondo del lienzo (puntos / blanco / cuadros).
  • Panel de tema (derecha): preajustes con un clic, variables de tema detalladas y generación de temas a partir de un color semilla. Ver abajo.

En pantallas estrechas, el área de trabajo se convierte en un solo panel con una barra de pestañas inferior Código / Vista previa / Tema.

Modos de renderizado

Usa el control segmentado de la barra de navegación para cambiar cómo se renderiza tu diagrama:

  • Oficial: la salida SVG estándar de Mermaid, exactamente como la renderiza el motor de Mermaid.
  • ASCII: tu diagrama convertido en arte de texto que puedes pegar en comentarios de código, documentación o terminales. Consulta Renderizado ASCII.

El modo forma parte de la URL, por lo que puedes guardar en favoritos o compartir un enlace a un modo específico.

Temas

Cada diagrama se renderiza con el tema base más un conjunto de más de 70 variables de tema editables:

  • Preajustes: los 11 temas integrados de Mermaid (Default, Neutral, Forest, Dark, Base y más) además de preajustes de diseñador, cada uno con una mini vista previa.
  • Variables de tema: ajusta colores, bordes y fuentes individuales por grupo, con búsqueda.
  • Generar: deriva un tema completo a partir de un único color semilla, claro u oscuro.

Tu trabajo se guarda automáticamente

El editor guarda tu código, tema y diseño en el almacenamiento local de tu navegador. Cierra la pestaña y vuelve más tarde: tu diagrama sigue ahí. Nada se sube a un servidor.

Próximos pasos