Diagramas Mermaid para Miro

Personas: Todos los usuarios
Planes: Todos los planes
Plataformas: Navegador, Escritorio

Con la aplicación Mermaid, puedes crear e insertar fácilmente diagramas enriquecidos basados en código directamente en tus tableros de Miro. Esto te permite visualizar sistemas complejos, flujos de trabajo o estructuras de datos usando una sintaxis simple basada en texto, mejorando la colaboración y la comprensión.

Cambiando el código de un diagrama y viendo la actualización de la vista previa en tiempo real

Instalar la aplicación Mermaid

Puedes instalar la app Mermaid desde el Marketplace de Miro o directamente desde la barra de herramientas de creación dentro de un tablero de Miro.

Para instalar desde el Marketplace de Miro:

1. Navega al Marketplace de Miro o sigue este enlace directo a la app Mermaid.
2. Selecciona un equipo de Miro para completar la instalación.

También puedes instalar la app desde la barra de herramientas de creación:

1. En la barra de herramientas de Creación a la izquierda de tu tablero, selecciona Herramientas, medios e integraciones (+). Se abrirá el panel de Herramientas, medios e integraciones.
2. En la pestaña Herramientas, busca y selecciona Diagramas de Mermaid.
3. Se abrirá el panel de la aplicación Diagramas de Mermaid y la aplicación se añadirá a tu barra de herramientas.

✏️ Nota: Los usuarios que no son admins no pueden instalar aplicaciones si la instalación de aplicaciones está restringida en la configuración del equipo.

Crear y agregar diagramas a los tableros de Miro

Una vez instalada, la aplicación Mermaid te permite generar diagramas usando código basado en texto y añadirlos a tu tablero como imágenes.

Después de la instalación, encontrarás la aplicación Mermaid en tu barra de creación. La aplicación se abre con un código de muestra predeterminado. A medida que modificas el código para construir tu diagrama, se actualiza en el área de vista previa a la derecha, permitiéndote ver los cambios en tiempo real.

La aplicación Mermaid incluye varios diagramas de muestra, accesibles desde la esquina inferior izquierda del panel de la aplicación. Puedes seleccionar uno de estos ejemplos y luego personalizarlo para ajustarlo a tus necesidades.

Puedes cambiar el tamaño del panel del editor de código arrastrando su borde derecho.

Cambiar el tamaño del panel del editor de código

Cuando termines de construir tu diagrama, haz clic en Añadir al tablero. El diagrama se añadirá al tablero como una imagen.

Agregar un diagrama al tablero

Editar diagramas existentes

También puedes modificar diagramas de Mermaid que ya están en tu tablero de Miro.

1. Haz clic en la imagen del diagrama de Mermaid en tu tablero para seleccionarla.
2. Haz clic en el ícono de Mermaid en el menú contextual que aparece (o encuéntralo en la barra de herramientas de Creación).
3. El editor de Mermaid se abrirá con el código del diagrama. Realiza tus cambios en el editor de código.
4. Haz clic en Actualizar Diagrama.
5. Volverás a tu tablero de Miro, y el diagrama en el tablero se actualizará con tus cambios.

Información adicional

Aquí tienes algunos recursos y detalles adicionales para trabajar con diagramas de Mermaid en Miro.

Sintaxis y documentación de Mermaid

La aplicación Mermaid utiliza una sintaxis específica para generar diagramas a partir de texto. Para obtener información detallada sobre la sintaxis, incluyendo los tipos de diagramas y opciones soportadas, consulta la documentación oficial de Mermaid. También puedes acceder a un enlace a esta documentación desde la esquina inferior izquierda del panel de la aplicación Mermaid dentro de Miro.

Compartir y exportar diagramas

Una vez que se agrega un diagrama de Mermaid a tu tablero, funciona como una imagen. Puedes descargar esta imagen directamente desde el tablero si es necesario. Para colaborar con otros, puedes compartir el tablero de Miro que contiene el diagrama.