Diagramas de Mermaid en Loop: novedad ya disponible.

¿Alguna vez te has encontrado con una montaña de texto que necesita un toque visual para ser entendido? Con la nueva función de Mermaid en Microsoft Loop, puedes transformar ideas en diagramas limpios y elegantes en cuestión de minutos. ¡Y no necesitas ser diseñador! Flowcharts, mapas mentales, diagramas de usuario… tienes una colección completa al alcance.

Imagínate lo fácil que es: abres Loop, activas Mermaid, y si necesitas un empujón, ahí está Copilot para echarte una mano con el código (sí, el gratuito). Visualizar procesos, representar flujos o estructurar conceptos ahora es pan comido, y queda genial en cualquier presentación o informe.

Aquí abajo te dejo un vídeo explicando todo y unos ejemplos para que veas lo fácil que es aplicarlo en tu día a día.

¿Por Qué Usar Diagramas en Mermaid?

Los diagramas son una herramienta potente para organizar y transmitir ideas complejas de manera clara y visual. Mermaid simplifica la creación de diagramas, permitiéndote pasar de texto o conceptos sueltos a visuales impactantes que aportan claridad a tu contenido. Desde diagramas de flujo hasta mapas mentales, esta herramienta ofrece una gran variedad de opciones adaptadas a las necesidades de cualquier profesional.

¿Cómo Crear Diagramas en Loop con Mermaid?

Para empezar, solo necesitas abrir un documento en Loop y activar la función de Mermaid. Esto es lo que debes hacer:

Escribe el comando “/” en Loop para abrir las opciones y selecciona «Mermaid».
Inicia un diagrama básico: automáticamente, se generará un diagrama de flujo sencillo.
Edita el código en el espacio que aparece, o utiliza Copilot para crear diagramas más complejos con tan solo copiar y pegar el código que te proporciona.
Elige el tipo de diagrama que necesitas: si tienes dudas, puedes pedirle a Copilot que traduzca un texto a diagramas de Mermaid; por ejemplo, un mapa mental para conceptos o un flujo de proceso para normativas.

Ejemplos de Diagramas Mermaid en Loop

Mermaid te permite crear una amplia gama de diagramas, cada uno con su propio propósito y aplicación. Desde procesos secuenciales hasta arquitecturas de sistema, los ejemplos de Mermaid se adaptan a diferentes necesidades.

Tienes todo el detalle disponible en la documentación oficial de Mermaid

FlowChart

Ideal para representar procesos paso a paso o flujos de decisiones

graph TD
    A[Inicio] --> B[Consulta de Informacion]
    B --> C[Evaluacion de Elegibilidad]
    C -- Elegible --> D[Seleccion de Plan]
    C -- No Elegible --> E[Notificacion de Rechazo]
    D --> F[Presentacion de Documentos]
    F --> G[Revision de Documentos]
    G -- Documentos Aprobados --> H[Pago]
    G -- Documentos Rechazados --> I[Correccion de Documentos]
    I --> F[Presentacion de Documentos]
    H --> J[Confirmacion de Suscripcion]
    J --> K[Fin]

Sequence Diagram

Útil para ilustrar interacciones entre diferentes componentes o actores en una secuencia de tiempo

sequenceDiagram
    Alice->>Bob: Hola Bob, ¿como estas?
    Bob->>Alice: Bien, gracias. ¿Y tu?
    create participant Carl
    Alice->>Carl: ¡Hola Carl!
    create actor D as Donald
    Carl->>D: ¡Hola!
    destroy Carl
    Alice-xCarl: Somos demasiados
    destroy Bob
    Bob->>Alice: Estoy de acuerdo

Class Diagram

Perfecto para mostrar relaciones de herencia o estructuras en sistemas orientados a objetos.

classDiagram
    note "Desde Pato hasta Cebra"
    Animal <|-- Pato
    note for Pato "puede volar\npuede nadar\npuede bucear\nayuda en depuracion"
    Animal <|-- Pez
    Animal <|-- Cebra
    Animal : +int edad
    Animal : +String genero
    Animal: +esMamifero()
    Animal: +aparearse()
    class Pato{
        +String colorPico
        +nadar()
        +parpar()
    }
    class Pez{
        -int tamanoEnPies
        -puedeComer()
    }
    class Cebra{
        +bool esSalvaje
        +correr()
    }

State Diagram

Excelente para describir estados y transiciones de un sistema.

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Entity Relationship Diagram (ERD)

Para representar bases de datos y relaciones entre entidades.

erDiagram
    CLIENTE ||--o{ PEDIDO : realiza
    PEDIDO ||--|{ LINEA_DE_ARTICULO : contiene
    CLIENTE }|..|{ DIRECCION_ENTREGA : utiliza

User Journey

Ideal para trazar el recorrido de un usuario a través de una experiencia o sistema.

journey
    title Mi dia de trabajo
    section Ir al trabajo
      Preparar te: 5: Yo
      Subir las escaleras: 3: Yo
      Trabajar: 1: Yo, Gato
    section Ir a casa
      Bajar las escaleras: 5: Yo
      Sentarse: 5: Yo

Gantt

Herramienta clásica para gestionar cronologías y planificación de proyectos.

gantt
    title Diagrama de Gantt
    dateFormat YYYY-MM-DD
    section Seccion
        Una tarea       :a1, 2014-01-01, 30d
        Otra tarea      :after a1, 20d
    section Otra seccion
        Tarea en otra   :2014-01-12, 12d
        otra tarea      :24d

Pie Chart

Representa datos de manera sencilla para mostrar proporciones o porcentajes.

pie title Mascotas adoptadas por voluntarios
    "Perros" : 386
    "Gatos" : 85
    "Ratas" : 15

Quadrant Chart

Ayuda en análisis situacionales o de posicionamiento en cuatro cuadrantes.

quadrantChart
    title Alcance y engagement de campañas
    x-axis Bajo Alcance --> Alto Alcance
    y-axis Bajo Engagement --> Alto Engagement
    quadrant-1 Deberiamos expandir
    quadrant-2 Necesita promocion
    quadrant-3 Re-evaluar
    quadrant-4 Puede mejorar
    Proyecto A: [0.3, 0.6]
    Proyecto B: [0.45, 0.23]
    Proyecto C: [0.57, 0.69]
    Proyecto D: [0.78, 0.34]
    Proyecto E: [0.40, 0.34]
    Proyecto F: [0.35, 0.78]

Requirement Diagram

Útil para definir y desglosar requisitos de sistemas.

requirementDiagram
    requirement functional_req {
    id: 1
    text: El sistema debe permitir el acceso seguro
    risk: high
    verifymethod: inspection
    }
    requirement performance_req {
    id: 2
    text: La aplicacion debe procesar 1000 solicitudes por minuto
    risk: medium
    verifymethod: test
    }
    element system_entity {
    type: software
    }
    system_entity - satisfies -> functional_req
    system_entity - satisfies -> performance_req

Gitgraph (Git) Diagram

Ideal para visualizar ramas y commits en flujos de trabajo Git.

gitGraph
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit

Mindmaps

Perfecto para estructurar ideas y desglosar conceptos en una vista global.

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Timeline

Genial para mostrar cronologías de eventos.

timeline
    title Evolucion de los modelos de lenguaje de OpenAI
    2018 : GPT-1
    2019 : GPT-2
    2020 : GPT-3
    2021 : Codex (enfocado en programacion)
    2022 : GPT-3.5 (ChatGPT)
    2023 : GPT-4
         : GPT-4-turbo
         : Whisper (modelo de transcripcion de audio)
    2024 : GPT-4o (multimodal avanzado)
         : o1 (modelo de razonamiento avanzado)

XY Chart

Representa datos en un sistema de coordenadas para análisis comparativos.

xychart-beta
    title "Ingresos por Ventas"
    x-axis [ene, feb, mar, abr, may, jun, jul, ago, sep, oct, nov, dic]
    y-axis "Ingresos (en $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]