Cómo incluir diagramas de sirena en tu proyecto de GitHub

La popular plataforma de código compartido, GitHub, ha anunciado soporte para un nuevo tipo de contenido incrustado. En los archivos Markdown, ahora puede usar la sintaxis de Mermaid para crear fácilmente diagramas de flujo, diagramas de secuencia y más.

El estilo de rebajas de GitHub ya maneja imágenes, listas de tareas y códigos cortos de emoji. Con soporte para diagramas comunes, GitHub está haciendo su parte para obtener documentación más informativa y útil.

¿Qué hay de nuevo con GitHub?

Ahora puede incrustar el código Mermaid en su LÉAME.md y otros archivos de rebajas. Si lo hace, GitHub generará un diagrama descrito por ese código. El código Mermaid usa una sintaxis simple que describe las partes individuales de cada diagrama en texto sin formato.

Ver también: ¿Qué es GitHub? Una introducción a sus características básicas

¿Cómo se incluyen diagramas?

1. Elija un archivo Markdown existente o cree uno nuevo para agregarlo a su repositorio. Utilizar cualquiera .Maryland o .reducción extensiones
instagram viewer
2. Agrega algo de código Mermaid a ese archivo. Exactamente qué código depende de usted; Aquí hay un ejemplo simple para comenzar:

   gráfico DT;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

3. Ver el archivo en GitHub. Debería ver una buena representación de su diagrama.

Ahora solo necesita aprender la gran cantidad de diagramas que Mermaid tiene disponibles. O simplemente puede referirse a la Sirena documentación como y cuando necesite un diagrama.

¿Qué tipos de diagramas puedo usar?

Mermaid admite los siguientes tipos de diagramas:

• diagrama de flujo
• Secuencia
• Clase
• Estado
• Relación entre entidades
• Viaje del usuario
• Gantt
• Tarta
• Requisito

Ver también: Diagrama de Gantt vs. Gráfico PERT: ¿Cuáles son las diferencias?

Cada uno tiene su propia sintaxis, para reflejar el tipo de datos que muestra el diagrama. Por ejemplo, aquí está el código para un diagrama de secuencia simple:

diagrama de secuencia
 Bart->>Homer: No tengas una vaca, hombre.

Que se ve así cuando se representa:

Y aquí está el código para un diagrama de estado básico:

diagrama de estado-v2
 [*] --> Nuevo
 Nuevo --> Listo: admitido
 Listo --> Ejecutando: envío del planificador
 Ejecutando --> Listo: interrupción
 En ejecución --> Esperando: E/S o espera de evento
 En espera --> Listo: E/S o finalización del evento
 En ejecución --> Terminado: salir
 Terminado --> [*]

Lo que se traduce como tal:

Agregue valor a sus proyectos de GitHub con diagramas de sirena

Los diagramas de sirena son una adición útil a GitHub, especialmente porque creemos que fomentan una mejor documentación. Muchos proyectos podrían mejorarse con algunas explicaciones visuales directamente en su documentación o archivos README.

GitHub es ahora un servicio tan popular que sus funciones y cambios afectan a muchos desarrolladores de todo el mundo. Afortunadamente, el soporte para los diagramas de sirena está ahí si lo necesita, y es invisible si no lo necesita. Pero, con suerte, comenzará a ver una documentación más agradable al menos.

Cómo alojar un sitio web de forma gratuita utilizando las páginas de GitHub

Si tiene un sitio web simple, no necesita pagar alojamiento web. ¡Puedes usar Páginas de GitHub gratis!

Leer siguiente

Sobre el Autor