99

C贸mo crear diagramas en Notion con Mermaid 馃槵

41309Puntos

hace un mes

Curso de Organizaci贸n y Productividad con Notion
Curso de Organizaci贸n y Productividad con Notion

Curso de Organizaci贸n y Productividad con Notion

Aprende Notion, la herramienta con la que puedes escribir, planear y organizar todo en un solo lugar. Construye un espacio de trabajo tan robusto como lo necesites y adec煤alo de acuerdo a las necesidades de tu equipo. Visualiza el roadmap de tu producto, coordina deploys, codifica procesos, construye tu propio CRM o publica un sistema de dise帽o con Notion.

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.

Untitled.png

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.
mermaid1.gif

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.
Screen_Shot_2022-03-29_at_16.36.30.png

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:

Screen_Shot_2022-03-29_at_18.30.44.png

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)
Untitled 1.png

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)
Untitled 2.png

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)
    
    Untitled 3.png
  2. Separarlos por secciones:

    flowchart LR
    G(Objetivos) ---> P(Proyectos)
    P ---> Tsk(Tareas)
    
    Untitled 4.png

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
Screen_Shot_2022-03-29_at_19.49.55.png

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)
Untitled 5.png

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
Untitled 6.png

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
Untitled 7.png

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)]
    Untitled 8.png
  • Bordes redondeados

    flowchart LR
    	Tic([Incompletas])
    
    Untitled 9.png
  • Subrutina

    flowchart LR
    	R[[Revisi贸n]]
    Untitled 10.png
  • Rombo

    flowchartLR
    	Rh{Decisi贸n}
    
    Untitled 11.png

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
Untitled 12.png

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:

Length123
Normal---------
Normal with arrow鈥>鈥>---->
Thick============
Thick with arrow==>===>====>
Dotted-.--鈥--鈥-
Dotted with arrow-.->-鈥->-鈥->

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
Untitled 13.png

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
Untitled 14.png

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
Untitled 15.png

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
Untitled 16.png

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 馃挌

Curso de Organizaci贸n y Productividad con Notion
Curso de Organizaci贸n y Productividad con Notion

Curso de Organizaci贸n y Productividad con Notion

Aprende Notion, la herramienta con la que puedes escribir, planear y organizar todo en un solo lugar. Construye un espacio de trabajo tan robusto como lo necesites y adec煤alo de acuerdo a las necesidades de tu equipo. Visualiza el roadmap de tu producto, coordina deploys, codifica procesos, construye tu propio CRM o publica un sistema de dise帽o con Notion.
Alex
Alex
alexcamachogz

41309Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7
6245Puntos

Notion me cambi贸 la vida, super recomendado aprender a utilizar esta herramienta!

4
1779Puntos

No conoc铆a Mermaid, puede ser una herramienta muy 煤til para la automatizaci贸n de la creaci贸n de diagramas

2
9495Puntos

隆Gran funcionalidad!

No la conoc铆a鈥 gracias

2
4716Puntos

Wooooooo est谩 fenomenal!! muchas gracias por este tremendo art铆culo.

2
4413Puntos

Que buena. Uso Notion desde hace unos meses pero desconoc铆a por completo esta funci贸n

2
34464Puntos

Notion es hermoso

2
38291Puntos

OMG!!! Notion la est谩 rompiendo, muchas gracias Alex por ense帽arme este super poder, me sirve much铆simo 馃挌

1
1931Puntos

Hola Alex, me encanto este aporte鈥 pero pregunta
驴si quiero meter un p谩rrafo como puedo hacerlo?, lo que quiero es hacer un mapa mental que es m谩s o menos la misma estructura.

1
1931Puntos
un mes

ya vi, eso funciona igual que HTML con un <br/> se pueden dar espacios para crear mapas mentales.

1
1931Puntos
un mes

ejemplo

Nodo1(linea uno <br/> linea dos);

1
41309Puntos
un mes

隆Justo as铆 que bueno que encontraste la forma! 馃挌

1
15083Puntos

Excelente herramienta.

1
20877Puntos

Notion es un gran arma del dia a dia woh

1
4211Puntos

No conoc铆a esta forma de hacer mapas mentales, muchas gracias 鉁岋笍

1
3217Puntos

Muy interesante art铆culo, ahora a ponerlo en pr谩ctica.

1
675Puntos

Notion es una herramienta bastante vers谩til y 煤til. Con el tiempo ha ido adaptando nuevas mejoras, tal c贸mo se indica en este art铆culo, lo que uno podr铆a llamar 鈥渟uper poderes鈥. Esperemos que adapte mejoras orientadas a los desarrolladores estilo coda. Sin embargo, me quedo con Notion por que ofrece versiones crossplatform muy estables y es bastante f谩cil de utilizar.

1

驴Entonces ya se encuentra actualizado el curso de Notion con estas nuevas funcionalidades?

1
28379Puntos

Que herramienta mas incre铆ble, gracias por el tuto ya hice mi chart. Notion y Platzi en sinergia son increibles.

1
41309Puntos
un mes

Que cool, yo disfruto mucho de todas las bondades que trae Notion para uno.