Diagramas con Mermaid
Mermaid es una herramienta que permite crear diferentes tipos de diagramas y gráficos usando texto y código de manera sencilla por su lenguaje similar al formato MarkDown.
Para poner toda la información del diagrama, se crea un archivo .html y se incluyen los siguientes comandos para inicializar mermaid:
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script> mermaid.initialize({startOnLoad:true}); </script>
Lo siguiente es agrupar el contenido donde se va a crear el diagrama, se tiene que especificar el tipo de gráfico que se va a realizar para luego agregar la información de este.
<div class="mermaid">
comando tipo de gráfico
</div>
Hay diferentes tipos de gráficos :
| Tipo de gráfico | Comando |
|---|---|
| Diagrama de flujo de abajo a arriba | graph TB |
| Diagrama de flujo de arriba a abajo | graph BT |
| Diagrama de flujo de derecha a izquierda | graph RL |
| Diagrama de flujo de izquierda a derecha | graph LR |
| Diagrama de Gantt | gantt |
| Diagrama de Clase | classDiagram |
| Gráfico de Git | gitGraph: |
| Diagrama de viaje del usuario | journey |
| Diagramas de secuencia | sequenceDiagram |
| Diagramas de gráfico circular | pieS |
Para tener la información más detallada sobre como seguir editando los diagramas, puede encontrar mayor información en este link
Cabe resaltar que los diagramas se pueden editar tambien en cuanto a cambio de colores, tamaños, incluir links, entre otras acciones.
Despues de tener el archivo html con el diagrama finalizado, bastará con ser “llamado” en un archivo MarkDown para poder ser visualizado de la sigueinte manera:
{{ < NombreArchivoHTML > }}
Se aclara que los símbolos {{, <, >, }} no deben tener espacios entre sí, es decir, se debe escribir: {{< … >}}
Tambien tiene disponible un editor en línea. para crear tus propios diagramas e ir visualizandolos en el proceso.