Mermaid es una herramienta en línea de generación de diagramas y gráficos basada en JavaScript que permite crear visualizaciones complejas utilizando código. El objetivo de esta guía es explicar cómo usarlo sin necesidad de saber programar en JavaScript.

Link de la herramienta: https://mermaid.js.org/

Para empezar a usarla:

1. Dirigirse a la sección superior derecha hasta la opción “Live Editor”

1. Eliminar el código por defecto y escribir el código para el diagrama deseado.

<aside> 💡 Tengamos en cuenta que el código para el diagrama deseado puede ser generado con inteligencias artificiales como ChatGPT o Claude. Es decir, podemos solicitar a ChatGPT que genere o modifique un diagrama describiendo nuestros requerimientos en lenguaje natural (escribiendo prompts). ChatGPT, comprendiendo nuestra solicitud, genera el código Mermaid correspondiente. Luego, al pegar este código en el editor de Mermaid, obtenemos el diagrama visual deseado. Este proceso se puede repetir cuantas veces sea necesario hasta obtener el diagrama a gusto.

</aside>

1. Copiar el código y pegarlo en el editor de Mermaid.

1. En la pestaña de “Actions”, se encuentran las opciones para descargar el diagrama. Aunque usar la opción “Full Screen” en la parte superior derecha y hacer una captura de pantalla podría ser una solución más rápida para obtener el diagrama como imagen.

Ventaja al usarlo con Claude

Es importante dar a conocer que, con la reciente actualización de Claude se ha introducido una nueva funcionalidad: un visor en tiempo real para los diagramas de Mermaid. Y es en este punto que la herramienta de Mermaid toma un valor sumamente alto pues permite mostrar los avances dentro de Claude directamente, de esta manera agiliza en gran medida la creación de los diagramas, incluso diagramas complejos. Esta herramienta está disponible para todos los usuarios independientemente de su plan de suscripción (incluyendo el gratuito).

Para activarlo hay que seguir estos pasos.