Quién puede hacerlo: Todos los usuarios
Qué planes: Free, Starter, Business, Enterprise, Education
Qué 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 permanece como la fuente de la verdad, por lo que puedes mover diagramas entre Miro, tu base de código y 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 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 en Miro (versión anterior).
Por qué usar diagramas Mermaid en Miro
- Portátil con el resto de tu flujo de trabajo con 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 construido a partir de formas y conectores editables de Miro, dispuestos automáticamente por Miro—no 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 añadir 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 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 Miro MCP Server para generar un diagrama Mermaid en un tablero.
- Conecta tu herramienta de IA a 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 si quieres que el diagrama se cree 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 desde el tablero y actualizar los diagramas directamente en él, 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 Construir con código.
- Pega tu propio código Mermaid en el panel de código, o elige una plantilla Mermaid.
El diagrama se representa con 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 de forma visual en el tablero, en el código fuente de Mermaid o editar un diagrama con IA. Los cambios se mantienen sincronizados.
Editar visualmente
- Abre el diagrama en el modo sin distracciones.
- Selecciona una forma, una línea o una etiqueta de texto para editarla directamente en el diagrama. Se abrirá 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 fuente, aplica negrita o establece el color del texto, del borde y del relleno.
- Configura la dirección del diseño. Haz clic en el control de dirección en la barra de herramientas del Diagrama y elige De arriba hacia abajo, De abajo hacia arriba, De izquierda a derecha o De derecha a izquierda.
- 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 que sea más fácil de escanear.
- Abre el panel de código para confirmar que la sintaxis de Mermaid se actualizó.
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.
Haz clic en el ícono 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: Ajusta las líneas largas para que se adapten al ancho del panel en lugar de desplazarte horizontalmente.
Editar con IA
- Copia el enlace del widget de diagrama.
- Abre la herramienta de IA que prefieras, con Miro MCP autenticado.
- Pide al agente que haga tus cambios, pegando el enlace del widget de diagrama que quieres que edite.
El diagrama se vuelve a renderizar en su lugar mientras el agente lo 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 es compatible.
Más funcionalidades de edición
Si necesitas más formas, o quieres mover las formas con total libertad, cambia el diagrama a edición libre. Puedes iniciar esto desde el panel de formas, desde el panel de diseño o intentando mover una forma en el diagrama.
- Intenta mover una forma, o selecciona Cambiar a modo libre en el panel de formas o en el panel de diseño.
Se abre el modal Cambiar a edición en modo libre. - Elige cómo cambiar:
- Cambiar y reemplazar: Convierte este diagrama a modo libre.
- Crear copia y luego cambiar: Conserva la versión de Mermaid actual y convierte una copia a modo libre.
ADVERTENCIA: Una vez que cambias un diagrama a modo libre, ya no se sincroniza con el código Mermaid y no podrás editarlo mediante MCP.
Tipos de diagramas compatibles
Los diagramas de flujo se representan como formas nativas de Miro. Se están agregando otros tipos de diagramas de Mermaid de forma iterativa:
| Tipo de diagrama | Renderizador | ¿Editable visualmente? |
|---|---|---|
| Diagramas de flujo | Formas nativas de Miro | Sí |
| Secuencia | Formas nativas de Miro | Próximamente |
| Clase | Formas nativas de Miro | Próximamente |
| ER (Relación de entidades) | Formas nativas de Miro | Próximamente |
| Otros diagramas compatibles de Mermaid | SVG de Mermaid | No |
| Diagramas que no son compatibles con Mermaid (por ejemplo, carriles) | N/A | N/A |
Si necesitas un tipo de diagrama que aún no sea editable visualmente, comparte tus comentarios en este formulario. Podríamos ponernos en contacto 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, una PR u otras herramientas. El código fuente de Mermaid permanece disponible para actualizaciones bidireccionales.
- Compartir un enlace. Copia la URL del tablero o, desde 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
Como los diagramas Mermaid estructurados están en Beta, ten en cuenta las siguientes limitaciones:
- 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 autoajuste nativo de Miro. Para mover las formas libremente, o para usar una disposición que Mermaid no admite, convierte el diagrama a forma libre.
- El arrastrar y soltar de formas estará disponible pronto. Por ahora, añade 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 funciones del formato Diagrama, como capas, contenedores y modo sin distracciones, consulta diagramas de Miro.
- Para conectar herramientas de IA a Miro, consulta la descripción general del servidor Miro MCP.