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, por lo que puedes mover los diagramas entre Miro, tu base de código y las herramientas de IA sin perder la estructura.

Si buscas información sobre la aplicación heredada de Mermaid, consulta Mermaid diagrams for Miro (legacy).

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 usas en documentos, PRs y chats de IA. Con Miro MCP, los agentes pueden crear, leer, actualizar y editar diagramas Mermaid en tus tableros de Miro.
• Representados como formas de Miro. El código de Mermaid se convierte en un Diagram compuesto por formas y conectores editables de Miro, dispuesto automáticamente por Miro, no en una imagen estática. Miro admite las formas de las versiones 10 y 11 de Mermaid, por lo que los diagramas pegados desde Mermaid Live, Mermaid AI u otras herramientas se renderizan con los tipos de formas previstos.
• 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 y iterar en el mismo tablero en tiempo real.

Crear un diagrama Mermaid

Puedes agregar diagramas Mermaid de varias 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 Diagram compuesto por formas de Miro.

Si el código tiene un error de sintaxis, Miro muestra comentarios en el lienzo para que sepas que debes abrir el modo sin distracciones y corregirlo en el panel de código. Después de corregir el código, el diagrama se renderiza automáticamente.

Arrastrar y soltar un archivo Mermaid

1. Arrastra un .mmd o .mermaid desde tu computadora a un tablero de Miro.
   Miro renderiza el archivo como un diagrama con formas de Miro.

Para ver la lista completa de formatos que se pueden cargar, consulta Formatos de archivo compatibles.

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.

1. Conecta tu herramienta de IA a Miro MCP.
2. Pide 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.
3. 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 indique qué se añadió, eliminó o cambió.

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 Mermaid.
   El diagrama se representa como formas nativas de Miro.
4. Continúa editando en modo sin distracciones o en el lienzo.

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

Editar un diagrama Mermaid

Puedes editar visualmente en el tablero, en el código fuente Mermaid o con IA (compañeros de IA, flujos o Miro MCP). 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: cambiar el tipo de forma, editar el texto, ajustar el tamaño de fuente, aplicar negrita o establecer el color del texto, del borde y del relleno.
   
3. Abre el panel de código para confirmar que la sintaxis de Mermaid se actualizó para coincidir.

Agregar y conectar formas

En modo sin distracciones, puedes ampliar el diagrama sin editar el código Mermaid:

• Haz clic para agregar formas. Abre el panel de formas y haz clic en una forma para agregarla al diagrama. El panel incluye formas de diagrama de flujo de Mermaid y las formas estándar de diagrama de flujo de Miro.
• Agrega una forma conectada. Selecciona una forma y haz clic en el botón + para agregar una nueva forma conectada a ella.
• Conecta formas. Selecciona una forma y arrastra el botón + sobre otra forma para dibujar una línea entre ellas. También puedes volver a conectar una línea existente para cambiar el flujo.

Ajustar el diseño

Abre el panel de diseño en modo sin distracciones para cambiar la disposición del diagrama:

1. En Dirección, haz clic en una flecha para establecer el flujo del diagrama: de izquierda a derecha, de arriba hacia abajo, de abajo hacia arriba o de derecha a izquierda.
   
2. En Espaciado, arrastra los controles deslizantes Horizontal y Vertical para ajustar la separación entre las formas.
   
3. En Formas, elige cómo se dimensionan las formas:
   • Mismo ancho: Todas las formas comparten un ancho uniforme para un diseño ordenado y alineado.
   • Ajustar al contenido: Cada forma se ajusta a su texto, útil cuando algunas formas tienen mucho más texto que otras.
4. En Texto, elige cómo se disponen las etiquetas:
   • Varias líneas: Las etiquetas largas se ajustan en varias líneas.
   • Una sola línea: Cada etiqueta se mantiene en una sola línea, lo que hace que las formas sean más anchas.

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 a medida que editas.

Mientras editas:

• Forma y código permanecen vinculados. Selecciona una forma en el diagrama para resaltar su código, o selecciona el código para ir a la forma correspondiente.
• Resaltado de sintaxis colorea los tokens de Mermaid en el editor para facilitar la lectura de la estructura.
• Puedes redimensionar el panel de código para tener más espacio 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 líneas largas para que quepan en el ancho del panel en lugar de desplazarse horizontalmente.

Editar con IA

Puedes iterar sobre diagramas Mermaid con compañeros de IA, flujos, o con un agente conectado a través de Miro MCP. Los agentes leen y editan el código fuente de Mermaid, por lo que pueden hacer cambios precisos sin regenerar todo el diagrama.

Con compañeros de IA o flujos:

1. Selecciona el diagrama en el tablero o copia el enlace al widget del diagrama.
2. Abre un compañero de IA o ejecuta un flujo.
3. Pide el cambio que quieres (por ejemplo, "haz que todos los contenedores de este diagrama sean rojos").
   El diagrama se actualiza en su lugar.

Con Miro MCP:

1. Copia el enlace del widget del diagrama.
2. Abre la herramienta de IA que prefieras, con Miro MCP autenticado.
3. Pídele al agente que haga los cambios, pegando el enlace del widget del diagrama que quieras que edite.
   El diagrama vuelve a renderizarse en su lugar mientras el agente lo edita.

La edición visual y el panel de código están disponibles solo en modo sin distracciones. No se admite la edición en vista dividida directamente en el lienzo.

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 iniciar esto 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 cambiar: Conservar la versión actual de Mermaid y convertir una copia a edición libre.

Una vez que cambias un diagrama a edición libre, deja de sincronizarse con el código Mermaid y ya no puedes editarlo mediante MCP.

Tipos de diagramas compatibles

Esta tabla muestra cómo se renderiza cada tipo de diagrama Mermaid en Miro. La edición visual en modo sin distracciones está disponible hoy para diagramas de flujo; se irán añadiendo más tipos de forma iterativa:

Si necesitas un tipo de diagrama que todavía no se puede editar visualmente, comparte tus comentarios en este formulario. Es posible que nos pongamos en contacto para una entrevista.

Para ver 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. Pide a un agente conectado que lea el diagrama desde la URL del tablero para que puedas documentarlo en un repositorio, en un PR u otras herramientas. La fuente Mermaid queda disponible para ciclos de ida y vuelta.
• 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

Toma en cuenta estas limitaciones actuales:

• La edición visual está disponible solo para diagramas de flujo. Los diagramas de estado, secuencia, clase y ER se representan como formas nativas de Miro, pero la edición visual para esos tipos llegará más adelante.
• La edición visual y el panel de código están disponibles únicamente en el 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 la disposición automática nativa de Miro. No puedes mover las formas libremente en un diagrama Mermaid.

Evaluamos solicitudes de funciones de forma continua; si alguna de estas limitaciones te representa 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 conocer las funciones del formato Diagram, 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.
• Para compañeros de IA y flujos, consulta la descripción general de los compañeros de IA y la descripción general de flujos.