Diagramas con mermaid

Como ya he comentado en otras entradas, estoy estudiando para mi examen de grado. He hecho varios intentos de sistematizar el estudio mediante software, pero la verdad es que me ha servido más el formato análogo (leer, destacar, releer, resumir, leer en voz alta, leer el primer texto, revisar código, leer repetir en voz alta, explicar al amigo imaginario, etc). Sin embargo, algo que sí he usado es el lenguaje Mermaid para hacer diagramas. Y precisamente a usar este lenguaje vengo a invitar ahora.

Uso el editor de textos atom.io al que instalé un paquete con el lenguaje mermaid propiamente tal y otro para previsualizar los diagramas escritos en mermaid. Otra opción y la que recomiendo para quienes no estén iniciados en estas prácticas, es Haroopad, que trae integrado el soporte para Mermaid (así que no hay que instalar nada más).

Entrando ya a picar con mermaid que es descrito en su propia página como una forma de generar diagramas y flujos de un modo similar a markdown (esto amerita otro post, pero por lo pronto, adelanto que es una forma muy sencilla de escribir documentos), es decir, está enfocado en la simplicidad. Siguiendo ese mismo ánimo, iré directo al grano.

A continuación, un ejemplo de código y resultado:

graph TB
 casa-->puerta
 casa-->ventanas
 puerta-.es de.-madera
 ventanas-.son de.-vidriosubgraph Materiales
 madera---café
 vidrio---transparente
 endtransparente-->transp[se puede ver a través de él]

La sintaxis, como se aprecia es muy intuitiva:

palabracualquiera
se puede usar como elemento cualquier palabra única (que no contenga espacios).
palabra[varias cosas más]
palabra será el elemento (para ser referida por otros elementos) pero será visible una frase más larga en el diagrama resultante.
-->
flecha continua entre un elemento y otro.
-.->
flecha punteada entre un elemento y otro.
--texto-->
flecha continua con texto entre un elemento y otro.
-.texto.->
flecha punteada con texto entre un elemento y otro.
---
línea continua entre un elemento y otro.
-.-
línea punteada entre un elemento y otro.
-.texto.-
línea punteada con texto entre un elemento y otro.

Al comienzo del código, como habrán notado, dice graph TB. Esto es porque mermaid permite también hacer otro tipo de gráficos (como cartas gant, por ejemplo pero en este tutorial me abocaré solo en los diagramas). Esta línea es imprescindible para que se vea el diagrama. TD significa Top Bottom, es decir, de arriba hacia abajo. Podrá usarse también LR (izquierda a derecha), RL (derecha a izquierda), BT (abajo hacia arriba). Ejemplos a continuación:

Lo último que queda por mencionar son los subgráficos, a los que se les llama con subgraph, seguido de un nombre si se desea (en el primer ejemplo, el subgráfico se llama Materiales; en el segundo, Conversación). Seguido del subgraph se indica todo lo que uno quiere que haya dentro y, para cerrarlo se agrega end. Para hacer un subgráfico dentro de otro basta con agregarlo teniendo su propio end, también dentro del que lo contiene:

graph LR
  animales-->perro
  animales-->elefante
  animales-->gato
  animales-->tigre
  subgraph que tienen cuatro patas
    perro
    elefante
    subgraph felinos
      gato
      tigre
    end
  end

Finalmente, ya teniendo listo el diagrama queda buscar alguna forma de guardarlo para conservarlo en la posterioridad. Las opciones son variadas.

  • Guardarlo en formato plano y compartirlo así: pesará muy poco y podrá ser editado en el futuro por quien tenga el archivo. Sin embargo, ese eventual lector tendrá que tener software para visualizar gráficamente el diagrama.
  • Pantallazo: siempre útil y ya sabemos como funciona. Tiene la desventaja de que si el diagrama no cabe en la pantalla, va a haber que sacar varios y después unirlos. Muy tedioso.
  • Exportar a PNG o SVG (con atom.io): esta opción está mejor. El resultado es de calidad y no pesa mucho (por el formato de los archivos).
  • Exportar a HTML (con haroopad): el archivo resultante es un html que puede subirse a un servidor (si tenemos) y ser visto sin mayor mediación por todos. Tiene una pequeña línea al final que dice “powered by Haroopad” o algo así, se quita borrando desde <footer> en adelante en el código html mismo.
  • Exportar a PDF (con haroopad): esta opción no está a primera vista, pero se llega a ella seleccionando Imprimir y eligiendo luego Imprimir como pdf.

La mejor opción, a mi parecer, es la del pantallazo. Para eso será necesario tener un programa bueno para tales efectos. Yo uso el screenshoter que trae por defecto XFCE4, pero hay muchos otros software que servirán.

Espero que les sirva este tutorial.

Links de interés

Lo último

  1. Los esquemas que estoy haciendo mientras estudio los estoy publicando en un canal de telegram Esquemas de Derecho.
  2. En atom.io, para ver el diagrama en tiempo real hay que presionar Ctrl+Alt+O (letra o).
  3. En haroopad, es necesario poner al comienzo
    ```mermaid

    y

    ```

    al final. No son comillas, son tildes invertidos, en un teclado en español se hacen presionando dos veces la tecla de “tilde francesa” (generalmente, al lado de la letra P).

  4. Respecto  todo este post: existen otros software que hacen esta labor con mucha más precisión y posibilidades, sin embargo, para alguien que no está enfocado en el aprendizaje profundo de nuevos sistemas, sino que éstos son solo herramientas para facilitar otra actividad y no son imprescindibles. Otras opciones? cMap, graphviz, visio. Si te interesa, busca más.

Deja un comentario

Nombre *
Correo electrónico *
Web

Esto es para confirmar que eres humano. * Time limit is exhausted. Please reload CAPTCHA.