Cómo crear diagramas en Notion con Mermaid 😬

Mermaid es una herramienta que permite crear diagramas y visualizaciones utilizando únicamente texto. Está basada en JavaScript y renderiza el texto escrito en diagramas, muy al estilo de Markdown.

En una reciente actualización de Notion se introdujo la compatibilidad con Mermaid. Haciendo a Notion más poderoso de lo que ya era, cada actualización que recibe es como un powerup nuevo para ayudarlo a luchar contra la improductividad.

A continuación, te enseñaré cómo crear diagramas de flujo con Notion.

¿Dónde está Mermaid?

Mermaid se encuentra dentro del bloque de código de Notion, para encontrarlo solo tienes que seguir estos pasos:

1. Activa el menú de bloques en el cuerpo de cualquier página con el comando /.
2. Busca el bloque de código llamado code.
3. Cambia el lenguaje del bloque por Mermaid.

En el bloque de código que estará listo para crear los diagramas se tienen tres opciones:

1. Code: en esta opción solo se verá el código utilizado para crear el diagrama.
2. Preview: es el opuesto a la opción de código, aquí únicamente se verá el diagrama.
3. Split: esta, a mi parecer, es la mejor opción porque te permite ver el diagrama al mismo tiempo que vas escribiendo el código.

Empieza a crear tus diagramas

Antes de empezar a escribir un diagrama, es importante elegir el tipo de diagrama que necesitas. Mermaid tiene soporte para diferentes tipos de diagramas como: flujo, secuencia, entidad o relación, entre otros.

En la documentación de Mermaid puedes leer en detalle sobre los diagramas disponibles. En general, todos se crean de la misma forma. A modo de ejemplo, a lo largo de este blog crearemos diagramas de flujo para ilustrar mejor el proceso de construcción.

Una vez selecciones el tipo de diagrama que quieres crear, es momento de elegir la dirección que va a tener dicho diagrama. Las direcciones que están disponibles son:

1. De izquierda a derecha: LR
2. De derecha a izquierda: RL
3. De arriba a abajo: TB
4. De abajo a arriba: BT

Con esto decidido, puedes empezar a construir tu diagrama, por lo cual la primera línea de código para iniciar es la siguiente:

Ahora sí, vamos a crear diagramas en Notion siguiendo 8 sencillos pasos:

Paso 1. Conecta dos nodos

Los diagramas están construidos con nodos, los nodos son los bloques con información y cada nodo tiene un ID y una etiqueta. Si quieres conectar dos o más nodos se necesitan los conectores o también llamados enlaces.

Supongamos que estás creando un diagrama de flujo para la gestión de un proyecto en Notion. Para iniciar, necesitas dos nodos, uno para objetivos y otro para proyectos. Estos se crean de forma separada así:

flowchart LR
	G(Objetivos)
	P(Proyectos)

Pero no los quieres por separado, en realidad uno depende del otro. Por lo que es necesario utilizar los conectores, estos los puedes añadir usando guiones -.

flowchart LR
	G(Objetivos) ---> P(Proyectos)

El hecho de usar ID es una forma muy cómoda de trabajar, ya que te permite referirte a un nodo de forma sencilla. Solo es necesario etiquetar los nodos una sola vez.

Paso 2. Añade más nodos, todos los que necesites

Hay dos formas de encadenar los nodos:

1. Encadenar un nodo detrás de otro:

   flowchart LR
   G(Objetivos) ---> P(Proyectos) ---> Tsk(Tareas)
   

   

2. Separarlos por secciones:

   flowchart LR
   G(Objetivos) ---> P(Proyectos)
   P ---> Tsk(Tareas)
   

   

Como ves, con ambas formas se obtiene el mismo resultado, pero hay una tercera que en realidad es la que yo prefiero, ya que primero declaras todos los nodos que vas a emplear y después los enlazas.

flowchart LR
	G(Objetivos)
	P(Proyectos)
	Tsk(Tareas)

	G ---> P
	P ---> Tsk

Puedes añadir tantos nodos como necesites.

Paso 3. Crear múltiples direcciones

Siguiendo con el diagrama de gestión de proyectos, supón que las tareas pueden tener dos resultados: completas o incompletas. Si quieres crear esta relación hacia dos caminos diferentes, utiliza el símbolo & como puedes ver a continuación:

flowchart LR
	Tsk(Tareas) --- Tic(Incompletas) & Tc(Completas)

También se puede obtener el mismo resultado de esta forma:

flowchart LR
	Tsk(Tareas) --- Tic(Incompletas)
	Tsk(Tareas) --- Tc(Completas)

Elige la opción que sea más cómoda para ti, según la estructura que estés dando al código de tu diagrama.

Ahora sabes cómo ir en más de una dirección en tus diagramas, lo cual te permite conectar múltiples nodos a uno mismo. El diagrama de proyectos se ve de la siguiente forma, hasta el momento:

flowchart LR
	G(Objetivos)
	P(Proyectos)
	Tsk(Tareas)
	Tic(Incompletas)
	Tc(Completas)
	R(Revisión)

	G ---> P
	P ---> Tsk
	Tsk --- Tic & Tc
	Tc ---> R
	R ---> G

Paso 4. Incluye comentarios

Mermaid también permite añadir un poco de contexto a las conexiones entre los nodos. La forma de hacerlo es con el símbolo |, tanto al inicio como al final del comentario, después del conector:

flowchart LR
	G(Objetivos)
	P(Proyectos)
	Tsk(Tareas)

	G ---> |tienen| PP ---> Tsk

Paso 5. Personaliza la forma de cada nodo

Los nodos no tienen por qué ser siempre rectángulos, los diagramas de flujo tienen diferentes formas para facilitar su interpretación y esto Mermaid lo sabe. Por ello, pone un puñado de estilos a tu disposición, para que construyas los diagramas.

Algunas de estas formas son:

• Bases de datos

  flowchart LR
  	G[(Objetivos)]

  

• Bordes redondeados

  flowchart LR
  	Tic([Incompletas])
  

  

• Subrutina

  flowchart LR
  	R[[Revisión]]

  

• Rombo

  flowchartLR
  	Rh{Decisión}
  

  

Estas formas te permiten crear diagramas más detallados. El que hemos usado como ejemplo se ve de la siguiente manera:

flowchart LR
	G[(Objetivos)]
	P[(Proyectos)]
	Tsk(Tareas)
	Tic([Incompletas])
	Tc([Completas])
	R[[Revisión]]

	G ---> |conecta| P
	P ---> |tienen| Tsk
	Tsk --- |estan| Tic & Tc
	Tc ---> |necesitan| R
	R ---> |crea| G

Paso 6. Personaliza los conectores

Además de los nodos, también se pueden personalizar los conectores. Hay varias opciones, las cuales puedes revisar en la siguiente tabla:

Los conectores no solo van en un sentido, también tienen dos vías, líneas simples, paradas de flujo y otras características. Siguiendo con el diagrama que hemos utilizado como ejemplo a lo largo de este blog, con los conectores personalizados se ve de la siguiente forma:

flowchart LR
	G[(Objetivos)]
	P[(Proyectos)]
	Tsk(Tareas)
	Tic([Incompletas])
	Tc([Completas])
	R[[Revisión]]

	G <===> |conecta| P
	P ---o |tienen| Tsk
	Tsk ---x |estan| Tic
	Tsk --- |estan| Tc
	Tc ---> |necesitan| R
	R -..-> |crea| G

Paso 7. Organiza el código

Es recomendable que organices el código de tu diagrama a medida que este va creciendo y las conexiones se multiplican. Para esto puedes utilizar la funcionalidad de comentarios.

Los comentarios se crean utilizando %% al inicio y al final del comentario. Así se logran crear diferentes secciones dentro del flujo.

Por ejemplo, puedes separar todas las conexiones de la base de datos de Objetivos de la base de datos de Proyectos, organizando el diagrama de la siguiente forma:

flowchart LR
	%% Nodos %%
	G[(Objetivos)]
	P[(Proyectos)]
	Tsk(Tareas)
	Dl(Deadline)
	Mt([A tiempo])
	Ov([Atrasado])
	Ovf{2 días}
	Tic([Incompletas])
	Tc([Completas])
	R[[Revisión]]

	%% Objetivos y proyectos %%
	G <===> |conecta| P

	%% Projectos %%
	%% Deadline %%
	P ---o |tienen| Dl
	Dl ---x |está| Mt
	Dl ---- |está| Ov
	Ov ---> |push| Ovf
	
	%% Tareas %%
	P ---o |tienen| Tsk
	Tsk ---x |estan| Tic
	Tsk --- |estan| Tc
	Tc ---> |necesitan| R

	%% Revisiones y objetivos %%
	R -..-> |crea| G

Paso 8. Usa colores

Mermaid no solo te permite crear diagramas de flujo en blanco y negro, también puedes personalizar los colores que van a tener los nodos, con el fin de que tus diagramas sean fáciles de entender.

Lo primero que tienes que hacer es crear una sección únicamente para los colores. A continuación, añadir la definición de estilos que deseas tener. Por ejemplo:

%% Colors %%
classDef blue fill:#2374f7, stroke:#000, stroke-width:2px, color:#fff

Este código te permite manipular cómo va a lucir cada nodo. classDef es la definición de la clase a utilizar, la cual contiene:

• fill es el relleno del nodo.
• stroke es color del borde.
• stroke-width es el ancho del borde.
• color es el color de la letra.

Sabiendo esto, puedes crear tantas clases como requieras para personalizar tu diagrama.

Una vez que tengas las clases creadas, solo debes asignarlas al nodo que quieras afectar.

flowchartLR
	%% Nodos %%
	G[(Objetivos)]:::blue

	%% Colors %%
	classDef blue fill:#2374f7, stroke:#000, stroke-width:2px, color:#fff

Siguiendo con el diagrama de ejemplo, al incluir colores quedaría de esta forma:

flowchart LR
	%% Nodos %%
	G[(Objetivos)]:::blue
	P[(Proyectos)]:::blue
	Tsk(Tareas):::orange
	Dl(Deadline):::orange
	Mt([A tiempo]):::green
	Ov([Atrasado]):::red
	Ovf{2 días}
	Tic([Incompletas]):::red
	Tc([Completas]):::green
	R[[Revisión]]:::pink

	...

	%% Colores %%
	classDef bluefill:#2374f7, stroke:#000, stroke-width:2px, color:#fff
	classDef pink  fill:#eb3dd6,stroke:#000, stroke-width:2px, color:#fff
	classDef orange  fill:#fc822b,stroke:#000,stroke-width:2px,color:#fff
	classDef redfill:#ed2633,stroke:#000,stroke-width:2px,color:#fff
	classDef greenfill:#16b522,stroke:#000,stroke-width:2px,color:#fff

Información extra para los diagramas

Además de todo lo que ya te mostré, Mermaid también permite que los nodos contengan enlaces en caso de que así lo requieras. Eso es útil si necesitas hacer referencia a alguna página o base de datos que consideres importante.

Para añadir enlaces, utiliza la palabra reservada click y entre “” añade la url:

flowchart LR
	G[(Objetivos)]
	click G"https://www.notion.so/product"

Ahora es tu turno

Ya aprendiste cómo crear diagramas de flujo con Mermaid en Notion. Pero estos no son los únicos tipos de diagramas que puedes crear, experimenta con diferentes opciones y prueba todas las posibilidades que Mermaid ofrece.

Además de eso, puedes crear diagramas para apoyar tus notas de los cursos que hayas tomado recientemente y también de los próximos cursos que seguramente tomarás en estos días. El límite en Notion depende de tú creatividad.

Por último, comparte en los comentarios si ya conocías esta característica de Notion y cómo la has usado. Si no, cómo piensas sacarle provecho a partir de ahora. Recuerda nunca parar de aprender 💚