Cómo crear diagramas Mermaid

Quién puede hacerlo: Todos los usuarios
Planes: Free, Starter, Business, Enterprise, Education
Plataformas: Navegador, Escritorio

Crea diagramas a partir del código de Mermaid y edítalos como lo harías con las formas y líneas de Miro. Mermaid sigue siendo la fuente de la verdad, así que puedes mover los diagramas entre Miro, tu base de código y las herramientas de IA sin perder la estructura.

NOTA: Si buscas información sobre la app heredada de Mermaid, consulta Diagramas de Mermaid para Miro (versión anterior).

Por qué usar diagramas Mermaid en Miro

• Compatible con el resto de tu flujo de trabajo en Mermaid. Usa la misma sintaxis de Mermaid que ya escribes en documentos, PRs y chats de IA. Con Miro MCP, los agentes pueden crear, leer, actualizar y editar diagramas Mermaid en tus tableros.
• Renderizado como formas de Miro. El código Mermaid se convierte en un diagrama compuesto por formas y conectores de Miro editables, dispuestos automáticamente por Miro, no en una imagen estática.
• Edición bidireccional. Cambia el diagrama de forma visual en el tablero y el código Mermaid se actualiza. Edita el código y el diagrama se vuelve a renderizar.
• Diseñado para la colaboración. Como los diagramas son contenido nativo de Miro, tu equipo puede comentar, coeditar e iterar en el mismo tablero en tiempo real.

Crear un diagrama Mermaid

Puedes agregar diagramas Mermaid de tres maneras.

Pegar código Mermaid en el tablero

1. Copia el código Mermaid desde tu editor, tus documentos o un chat de IA.
2. Pégalo en un tablero de Miro.
   Miro representa el código como un diagrama formado por formas de Miro.

Crear un diagrama con Miro MCP

Usa una herramienta de IA compatible con MCP (por ejemplo Cursor o Claude Code) conectada al servidor Miro MCP para generar un diagrama Mermaid en un tablero.

1. Conecta tu herramienta de IA a Miro MCP.
2. Pídele al agente que cree un diagrama Mermaid en un tablero específico.
3. Incluye la URL del tablero en tu instrucción cuando quieras que el diagrama se genere en un tablero existente.

Los agentes también pueden leer código Mermaid desde el tablero y actualizar los diagramas directamente en él, de modo que puedas seguir iterando entre tu base de código y Miro. Cuando un agente edita un diagrama, puede añadir una leyenda que indique lo que se añadió, eliminó o cambió.

NOTA: En los planes Enterprise, un admin de empresa debe habilitar Miro MCP antes de que los usuarios puedan conectarse. Consulta la guía de administración del servidor Miro MCP.

Empieza con el formato de diagrama

1. En un tablero de Miro, abre la barra de creación y selecciona Formatos > Diagrama.
2. Haz clic en Construir con código.
3. Pega tu propio código Mermaid en el panel de código, o elige una plantilla de Mermaid.
   El diagrama se genera como formas de Miro.
4. Continúa editando en el modo sin distracciones o en el lienzo.

Para obtener más información sobre el formato de diagrama, el modo sin distracciones, las capas y las plantillas, consulta Diagramas de Miro.

Editar un diagrama Mermaid

Puedes editar visualmente en el tablero, en el código fuente de Mermaid o usar IA para editar un diagrama. Los cambios se mantienen sincronizados.

Editar visualmente

1. Abre el diagrama en modo sin distracciones.
2. Selecciona una forma, una línea o una etiqueta de texto para editarla directamente en el diagrama. Se abre una barra de herramientas con controles para el elemento seleccionado; por ejemplo, cambia el tipo de forma, edita el texto, ajusta el tamaño de la fuente, aplica negrita o establece el color del texto, del borde y del relleno.
   
3. Establece la dirección del diseño. Haz clic en el control de dirección en la barra de herramientas de Diagram y elige De arriba a abajo, De abajo a arriba, De izquierda a derecha, o De derecha a izquierda.
   
4. Ajusta el espaciado. Abre el control de diseño y elige Estrecho para un diseño más compacto, Regular para un espaciado equilibrado, o Amplio para un diseño más espacioso y fácil de escanear.
   
5. Abre el panel de código para confirmar que la sintaxis de Mermaid se actualizó para coincidir.

Editar el código

1. Abre el diagrama en modo sin distracciones.
2. Abre el panel de código.
   
3. Actualiza la sintaxis de Mermaid.
   El diagrama se vuelve a renderizar mientras editas.

Haz clic en el icono de configuración (engranaje) en el panel de código para ajustar cómo el editor muestra tu código:

• Números de línea: Mostrar u ocultar los números de línea en el editor.
• Ajustar texto: Ajustar las líneas largas al ancho del panel en lugar de desplazarse horizontalmente.

Editar con IA

1. Copia el enlace del widget de diagrama.
2. Abre la herramienta de IA que prefieras, con Miro MCP autenticada.
3. Pídele al agente que haga los cambios, pegando el enlace del widget de diagrama que quieres que edite.
   El diagrama se vuelve a renderizar en su lugar a medida que el agente edita.

NOTA: La edición visual y el panel de código están disponibles solo en modo sin distracciones. La edición en vista dividida directamente en el lienzo no es compatible.

Más funcionalidades de edición

Si necesitas más formas o quieres mover las formas libremente, cambia el diagrama a edición libre. Puedes comenzar desde el panel de formas, desde el panel de diseño o intentando mover una forma en el diagrama.

1. Intenta mover una forma, o selecciona Cambiar a edición libre desde el panel de formas o el panel de diseño.
   Se abre el modal Cambiar a edición libre.
2. Elige cómo cambiar:
   • Cambiar y reemplazar: Convertir este diagrama a edición libre.
   • Crear copia y luego cambiar: Mantener la versión actual de Mermaid y convertir una copia a edición libre.

ADVERTENCIA: Una vez que cambias un diagrama a edición libre, ya no se sincroniza con el código Mermaid, y tampoco puedes editarlo mediante MCP.

Tipos de diagrama compatibles

Los diagramas de flujo se representan como formas nativas de Miro. Se van añadiendo iterativamente otros tipos de diagramas de Mermaid:

Si necesitas un tipo de diagrama que todavía no se puede editar visualmente, comparte tus comentarios en este formulario. Podríamos contactarte para una entrevista.

Para ver la lista completa de tipos de diagrama y la sintaxis de Mermaid, consulta la documentación oficial de Mermaid.

Compartir y exportar

• Leer con Miro MCP. Pide a un agente conectado que lea el diagrama desde la URL del tablero para que puedas documentarlo en una base de código, un PR u otras herramientas. La fuente de Mermaid queda disponible para sincronizaciones bidireccionales.
• Compartir un enlace. Copia la URL del tablero, o en el menú Más del diagrama (⋯) selecciona Copiar enlace de modo sin distracciones para llevar a los colaboradores directamente al diagrama. Consulta también Compartir tableros e invitar colaboradores.
• Descargar como PDF o imagen. En el menú Más del diagrama (⋯), selecciona Exportar como PDF o Exportar como imagen (JPG, SVG o PDF). También puedes copiar el diagrama como imagen desde el tablero.

Limitaciones conocidas

Ten en cuenta estas limitaciones actuales:

• La edición visual está disponible solo para diagramas de flujo.
• La edición visual y el panel de código están disponibles solo en modo sin distracciones.
• La edición visual de formas, texto y líneas está limitada a lo que permite la sintaxis de Mermaid.
• Los diagramas usan el auto-layout nativo de Miro. No puedes mover libremente las formas en un diagrama de Mermaid.

Evaluamos las solicitudes de funciones de forma continua; si alguna de estas limitaciones te resulta un impedimento, ponte en contacto con nosotros a través de la comunidad o con tu admin.

Información adicional

• Para la sintaxis de Mermaid, los tipos de diagramas compatibles y ejemplos, consulta la documentación oficial de Mermaid.
• Para las funciones del formato Diagram, como capas, contenedores y modo sin distracciones, consulta los diagramas de Miro.
• Para conectar herramientas de IA a Miro, consulta la descripción general del Miro MCP Server.