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, por lo que puedes mover diagramas entre Miro, tu base de código y herramientas de IA sin perder la estructura.
NOTA: Los diagramas Mermaid estructurados están en Beta. Los tipos de diagramas compatibles y las funcionalidades de edición están mejorando de forma iterativa y algunas de las capacidades descritas a continuación aún se están implementando.
NOTA: Si buscas información sobre la aplicación Mermaid anterior, consulta Diagramas Mermaid para Miro (versión anterior).
Por qué usar diagramas Mermaid en Miro
- Portabilidad con el resto de tu flujo de trabajo Mermaid. Usa la misma sintaxis Mermaid que ya empleas 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 formado por formas y conectores editables de Miro, dispuestos automáticamente por Miro—no es una imagen estática.
- Edición bidireccional. Cambia el diagrama visualmente 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, editar en colaboración e iterar en el mismo tablero en tiempo real.
Crear un diagrama Mermaid
Puedes agregar diagramas Mermaid de tres formas.
Pegar código Mermaid en el tablero
- Copia el código Mermaid desde tu editor, documentos o un chat de IA.
- Pégalo en un tablero de Miro.
Miro representa el código como un Diagrama hecho con formas de Miro.
Crear un diagrama con Miro MCP
Usa una herramienta de IA compatible con MCP (por ejemplo, Cursor o Claude Code) conectada a Miro MCP Server para generar un diagrama Mermaid en un tablero.
- Conecta tu herramienta de IA a Miro MCP. Para los pasos de configuración, consulta Miro MCP.
- Pídele al agente que cree un diagrama Mermaid en un tablero específico. Incluye la URL del tablero en tu instrucción cuando quieras que el diagrama esté en un tablero existente.
- Abre el tablero en Miro para revisar, editar y colaborar en el diagrama generado.
Los agentes también pueden leer el código Mermaid desde el tablero y actualizar los diagramas directamente, de modo que puedes seguir iterando entre tu base de código y Miro. Cuando un agente edita un diagrama, puede añadir una leyenda que marque 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 para admin del servidor Miro MCP.
Comenzar con el formato Diagrama
- En un tablero de Miro, abre la Barra de creación y selecciona Formatos > Diagrama.
- Haz clic en Comenzar con código.
- Elige una plantilla de Mermaid, o pega tu propio código Mermaid en el panel de código.
El diagrama se representa como formas de Miro. - Continúa editando en el modo sin distracciones o en el lienzo.
Para más información sobre el formato Diagrama, el modo sin distracciones, las capas y las plantillas, consulta diagramas de Miro.
Editar un diagrama Mermaid
Puedes editar un diagrama con IA, visualmente en el tablero o en el código fuente de Mermaid. Los cambios se mantienen sincronizados.
Editar visualmente
- Abre el diagrama en modo sin distracciones.
- Agrega o elimina formas y conectores como lo harías en cualquier diagrama de Miro.
- Cambia la disposición: de arriba hacia abajo, de izquierda a derecha.
- Abre el panel de código para confirmar que la sintaxis de Mermaid se actualizó en consecuencia.
Editar el código
- Abre el diagrama en modo sin distracciones.
- Abre el panel de código.
- Actualiza la sintaxis de Mermaid.
El diagrama se vuelve a renderizar a medida que lo editas.
Editar con IA
- Copia el enlace del widget del diagrama.
- Abre el agente que prefieras, con Miro MCP autenticado.
- Pide al agente que haga tus cambios, pegando el enlace del widget del diagrama que quieres que edite.
El diagrama se vuelve a renderizar en el mismo lugar mientras el agente edita.
NOTA: La edición visual y el panel de código solo están disponibles en el modo sin distracciones. La edición en vista dividida directamente en el lienzo no está disponible.
Más funcionalidades de edición
Si necesitas más formas o quieres moverlas libremente, usa uno de los puntos de entrada en el panel de formas o en el panel de diseño para convertir el diagrama a formato libre.
ADVERTENCIA: Una vez que conviertes un diagrama a formato libre, deja de sincronizarse con el código Mermaid y ya no puedes editarlo mediante MCP.
Tipos de diagramas compatibles
Los diagramas de flujo se representan como formas nativas de Miro. Se están añadiendo iterativamente otros tipos de diagramas de Mermaid:
- Diagramas de flujo: Se representan como formas nativas editables de Miro.
- Diagramas de secuencia, de clase y de entidad-relación: Se representan como formas nativas de Miro; la edición visual llegará pronto.
- Otros tipos de diagramas: Si necesitas un tipo de diagrama que no aparece en la lista, comparte tus comentarios en este formulario. Es posible que nos pongamos en contacto contigo para una entrevista.
Para la lista completa de tipos de diagramas y la sintaxis de Mermaid, consulta la documentación oficial de Mermaid.
Compartir y exportar
- Leer con Miro MCP. Pídele a un agente conectado que lea el diagrama desde la URL del tablero para que puedas documentarlo en un repositorio de código, en una solicitud de extracción (PR) u otras herramientas. El código fuente de Mermaid sigue disponible para ediciones de ida y vuelta.
- Compartir un enlace. Copia la URL del tablero o, en el menú Más (⋯) del diagrama, selecciona Copiar enlace del modo sin distracciones para llevar a los colaboradores directamente al diagrama. Consulta también Compartir tableros e invitar colaboradores.
- Descargar como PDF o imagen. Desde 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
Debido a que los diagramas Mermaid estructurados están en Beta, ten en cuenta las siguientes restricciones 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 admite la sintaxis de Mermaid.
- Los diagramas usan la distribución automática nativa de Miro. Para mover las formas libremente, o para usar una distribución que Mermaid no admite, convierte el diagrama al formato libre.
- La función de arrastrar y soltar formas llegará pronto. Por ahora, agrega formas con el + en una forma, o usando copiar y pegar o duplicar.
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 diagramas de Miro.
- Para conectar herramientas de IA a Miro, consulta Descripción general de Miro MCP Server.