Quiénes pueden 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 los diagramas entre Miro, tu base de código y las herramientas de IA sin perder su estructura.
NOTA: Los diagramas Mermaid estructurados están en Beta. Los tipos de diagramas compatibles y las funcionalidades de edición mejoran de forma iterativa, y algunas de las funcionalidades descritas más abajo todavía se están implementando.
NOTA: Si buscas información sobre la aplicación Mermaid heredada, consulta Diagramas Mermaid para Miro (heredados).
Por qué usar diagramas Mermaid en Miro
- Portátil con el resto de tu flujo de trabajo de 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 Diagram compuesto por formas y conectores editables de Miro, distribuidos automáticamente por Miro — no es una imagen estática.
- Edición bidireccional. Modifica 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, coeditar y 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
- Copia el código Mermaid desde tu editor, documentos o un chat de IA.
- Pégalo en un tablero de Miro.
Miro convierte el código en un Diagrama de formas de Miro.
Crea 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 se genere en un tablero existente.
- Abre el tablero en Miro para revisar, editar y colaborar en el diagrama renderizado.
Los agentes también pueden leer el código Mermaid del tablero y actualizar los diagramas en el propio tablero, para que puedas 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 del 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 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 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, de forma visual 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 con 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 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 su lugar a medida que el agente edita.
NOTA: La edición visual y el panel de código están disponibles únicamente en 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 cambiar el diagrama a formato libre.
ADVERTENCIA: Una vez que cambies un diagrama a formato libre, deja de sincronizarse con el código Mermaid y ya no podrás editarlo mediante MCP.
Tipos de diagramas compatibles
Los diagramas de flujo se representan como formas nativas de Miro. Otros tipos de diagramas de Mermaid se están añadiendo de forma iterativa:
- Diagramas de flujo: Se representan como formas nativas de Miro, editables.
- 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 esté en la lista, envía tus comentarios en este formulario. Podríamos contactarte 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 una base de código, PR u otras herramientas. La fuente Mermaid permanece disponible para actualizaciones en ambos sentidos.
- Compartir un enlace. Copia la URL del tablero, o en el menú del diagrama Más (⋯) selecciona Copiar enlace del modo sin distracciones para enviar 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
Dado que los diagramas Mermaid estructurados están en Beta, ten en cuenta las siguientes 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 el 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 el auto-layout nativo de Miro. Para mover las formas libremente o usar un diseño que Mermaid no admite, convierte el diagrama a formato libre.
- Arrastrar y soltar formas estará disponible próximamente. Por ahora, agrega formas con el botón + en una forma, o con copiar y pegar y 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.