Resumen
Crea diagramas Mermaid para mostrar procesos, secuencias, mapas mentales y otros tipos de información visual en una página. Escribe la sintaxis Mermaid y consulta la vista previa del diagrama mientras trabajas.
También puedes pedirle a Lara que genere el código Mermaid a partir de una descripción. Usa una plantilla para empezar, copia el código o exporta el diagrama como SVG o PNG.
Cuándo usarlo
Explica las etapas de un proceso con un diagrama de flujo.
Representa cómo se comunican distintos servicios en un diagrama de secuencia.
Organiza ideas y conceptos en un mapa mental.
Muestra tareas y plazos de un proyecto con un diagrama de Gantt.
Funciones y ajustes
Ajuste
Mostrar u ocultar el código
Oculta el código Mermaid para dejar visible solo el diagrama, o vuelve a mostrarlo para editarlo. Usa «Hide code» y «Show code» para cambiar entre las dos vistas.
Integrado
Representa procesos paso a paso
Escribe la sintaxis Mermaid para crear un diagrama de flujo, por ejemplo, para mostrar las etapas de una compra en línea y qué ocurre si falla el pago.
Integrado
Explica secuencias e interacciones
Usa un diagrama de secuencia para documentar cómo intercambian mensajes un usuario, una aplicación y un servicio de autenticación.
Integrado
Ordena ideas en un mapa mental
Crea un mapa mental para agrupar temas y conceptos relacionados, como las áreas de trabajo de un proyecto.
Cómo usarlo
Añade un diagrama a la página
Pide a Lara que añada un diagrama Mermaid a tu página y describe qué quieres representar.
Elige cómo empezar
Selecciona una opción de «Templates» para partir de una plantilla o escribe la sintaxis en «Mermaid code».
Genera el diagrama con Lara
Para crear el código a partir de una descripción, selecciona «Generate with AI», describe el diagrama y pulsa «Generar diagrama».
Revisa y exporta el resultado
Comprueba la vista previa, copia el código con «Copy» o exporta el diagrama con «Exportar SVG» o «Exportar PNG».
Dónde funciona
En cualquier página
En el menú /
Dentro de tarjetas de tablero
Convierte otros bloques en él
Panel de ajustes propio
Lara puede añadirlo por ti
Ejemplos
Proceso de compra en línea
Representa los pasos desde el carrito hasta el pago y añade una rama para los pagos rechazados.
Autenticación de usuario
Muestra en un diagrama de secuencia cómo interactúan el usuario, la aplicación y el servicio de autenticación.
Mapa mental de un proyecto
Agrupa objetivos, tareas y temas de investigación alrededor del nombre del proyecto.
Consejos · Limitaciones
Consejos
Describe con claridad los participantes y las etapas si le pides a Lara que genere el código.
Usa una plantilla para empezar con una estructura de diagrama.
Deja visible el código mientras haces cambios para revisar la sintaxis junto a la vista previa.
Exporta como SVG o PNG cuando necesites usar el diagrama fuera de la página.
Limitaciones
El diagrama solo se muestra si el código Mermaid se puede procesar; si no se puede representar, aparece «Could not render this Mermaid diagram.»
El contenido detectado como inseguro no se representa.
Preguntas frecuentes
¿Cómo puedo crear un diagrama Mermaid en mis notas?
Pide a Lara que añada un diagrama Mermaid y describe lo que quieres mostrar. También puedes escribir la sintaxis Mermaid directamente en el bloque.
¿Qué tipos de diagramas puedo hacer con Mermaid?
Puedes crear, entre otros, diagramas de flujo, diagramas de secuencia, mapas mentales y diagramas de Gantt.
¿Cómo genero un diagrama Mermaid con IA?
Selecciona «Generate with AI», escribe una descripción del diagrama y pulsa «Generar diagrama» para que Lara cree el código Mermaid.
¿Cómo veo el código de un diagrama Mermaid?
Si el código está oculto, selecciona «Show code». Para volver a mostrar solo el diagrama, selecciona «Hide code».
¿Puedo exportar un diagrama Mermaid?
Sí. Usa «Exportar SVG» o «Exportar PNG» para exportar el diagrama en uno de esos formatos.
Crea tu próxima página con Diagramas de Mermaid
Abre Workspace, escribe / y añádelo en un segundo. Gratis para empezar, sin tarjeta.