Cómo usar diagramas Mermaid en Obsidian

Los diagramas creados gracias a Mermaid son una bendición. Nadie puede negarlo. Puedes crear diagramas visuales mediante texto. Y lo mejor de todo es que Mermaid está integrado en el programa de toma de notas Obsidian. ¿Lo sabías?

Estos diagramas Mermaid son especialmente interesantes si quieres visualizar relaciones o hacer que tus ideas cobren vida. Y solo tienes que estudiarte un poco cómo funciona su sintaxis.

¿Cómo podemos incluir un diagrama Mermaid en Obsidian?

Muy sencillo. Solo tienes que poner al principio de la nota tres comillas seguidas de la palabra mermaid y terminar el documento con 3 comillas.

Y ahora solo tienes que poner el texto del gráfico entre las comillas. Tienes más referencias en help.obsidian.md. Esta orden sirve también en editores Markdown como el de GitHub.

¿Qué tipos de gráficos puedes poner?

¡Ojo! Antes de meter el texto en la nota de Obsidian, puedes jugar con él en mermaid-js.github.io/mermaid-live-editor. Es el editor oficial. Pero puedes usar también mermaidchart.com para guardar tus trabajos.

Tienes diagramas secuenciales, Gantt, líneas de tiempo, Kanban, XY, relacionales, cuadrantes, diagramas de estado… Hay muchos diferentes, pero me gustan especialmente dos tipos:

Flowchart (y Graph)

Puedes crear un diagrama Flowchart que crea conexiones que indican el flujo de un proceso (aquí puedes consultar toda la sintaxis que puedes cambiar para poner diferentes tipos de figuras, flechas y demás), tienes que poner lo siguiente (recuerda que tienes que poner siempre este código entre la llamada a Mermaid del principio):

flowchart LR
    E[Inicio] --> F["¿Se completaron todas las tareas a tiempo?"]
    F --Sí--> G[Ejecutar evento]
    F --No--> H["Reasignar tareas o ajustar el cronograma"]
    H --> E

Y sale algo como esto:

Cómo puedes comprobar, la sintaxis es bastante sencilla. Puedes cambiar las líneas y las formas.

• Cambiado TD (top-down) a LR (left-to-right) puedes cambiar la dirección del gráfico.

En mermaidchart.com tienes una interfaz más clara y puedes guardar los gráficos. Aquí tienes un ejemplo diagrama Graph para representar relaciones generales entre nodos, sin una secuencia predeterminada:

graph TD;
    A((Inicio)) --> B[/Entrada de datos/]
    B --> C[Procesar datos]
    C --> D{¿Condición?}
    D -- Sí --> E[Acción positiva]
    D -- No --> F[Otra acción]
    E --> G((Fin))
    F --> G

También puedes usar diferentes tipos de flechas:

• A --> B → Flecha normal
• A --- B → Línea punteada
• A -- Texto --> B → Flecha con etiqueta

También puedes aplicar diferentes colores a tus formas y flechas añadiendo las siguientes líneas:

classDef azul stroke:#1E90FF,stroke-width:2px;

classDef rojo stroke:#FF4500,stroke-width:2px;

classDef verde stroke:#32CD32,stroke-width:2px;

classDef morado stroke:#800080,stroke-width:2px;

classDef dorado stroke:#FFD700,stroke-width:2px;

classDef gris stroke:#808080,stroke-width:2px;

classDef rosa stroke:#FF69B4,stroke-width:2px;

classDef negro stroke:#000000,stroke-width:2px;

classDef cian stroke:#00CED1,stroke-width:2px;

classDef marron stroke:#8B4513,stroke-width:2px;

classDef naranja stroke:#FFA500,stroke-width:2px;

Quedando así el diagrama y su código:

graph TD;
    A((Inicio/Fin)):::azul
    B[Proceso]:::rojo
    C{Decisión}:::verde
    D[/Entrada/Salida/]:::morado
    E[[Subproceso]]:::dorado
    F((Nodo circular)):::gris

    A --> B
    B --> C
    C -- Sí --> D
    C -- No --> E
    D --> F
    E --> F

    classDef azul stroke:#1E90FF,stroke-width:2px;
    classDef rojo stroke:#FF4500,stroke-width:2px;
    classDef verde stroke:#32CD32,stroke-width:2px;
    classDef morado stroke:#800080,stroke-width:2px;
    classDef dorado stroke:#FFD700,stroke-width:2px;
    classDef gris stroke:#808080,stroke-width:2px;

Las posibilidades son infinitas. Es cuestión de ir jugando un poco con la sintaxis.

Mindmap

Me encanta esta opción, Mindmap, porque es muy sencilla de implementar. Solo tienes que ir cambiando la tabulación de los nodos.

mindmap
  root(Inicio)
    Tema1 )Tema 1(
      Desarrollo tema 1
        anexo tema 1
    Tema2 )Tema 2(
      Desarrollo tema 2
        anexo tema 2
    Tema3 )Tema 3(
      Desarrollo tema 3
        anexo tema 3

Solo tienes que cambiar las tabulaciones para modificar las relaciones. También puedes modificar la forma de las figuras cambiando los símbolos. Yo he cambiado en este diagrama las () por )( para poner nubes. Aquí tienes más formas que puedes aplicar:

mindmap
    Formas
        Predeterminado
        [Cuadrado]
        (Redondeado)
        ((Círculo))
        ))Explosión((
        )Nube(
        {{Hexágono}}

¿Quieres hacer más complicado? Puedes hacer algo así:

mindmap
  root(Inicio)
    Tema1 )Tema 1(
      Desarrollo tema 1
        anexo tema 1
        ejemplo tema 1
        aplicación tema 1
      Relación con otros temas
        conexión con tema 2
        conexión con tema 3
    Tema2 )Tema 2(
      Desarrollo tema 2
        anexo tema 2
        caso práctico tema 2
        implicaciones tema 2
      Relación con otros temas
        conexión con tema 1
        conexión con tema 3
    Tema3 )Tema 3(
      Desarrollo tema 3
        anexo tema 3
        variaciones tema 3
        perspectivas tema 3
      Relación con otros temas
        conexión con tema 1
        conexión con tema 2

La sintaxis es muy sencilla. Perfecta para usar directamente en Obsidian y no complicarte mucho la vida. En cuanto te vas del modo edición y pasas al modo de lectura, puedes ver el gráfico.

Te puede interesar leer Mi configuración de Obsidian o Cómo usar Obsidian y MkDocs para publicar tu web online.

Conclusión

Es muy sencillo comenzar a realizar diagramas Mermaid y su sintaxis no es muy complicada. Son una fuente muy importante para entender tus notas en Obsidian o para mejorar tu entendimiento de determinados temas.

¿Tienes más trucos que puedas compartir con todos? Me interesa saber algo más.