Come includere i diagrammi della sirena nel tuo progetto GitHub

La popolare piattaforma di code-sharing, GitHub, ha annunciato il supporto per un nuovo tipo di contenuto incorporato. Nei file markdown, ora puoi utilizzare la sintassi di Mermaid per creare facilmente diagrammi di flusso, diagrammi di sequenza e altro.

Il sapore di markdown di GitHub gestisce già immagini, elenchi di attività e codici brevi emoji. Con il supporto per i diagrammi comuni, GitHub sta facendo la sua parte per una documentazione più informativa e utile.

Cosa c'è di nuovo con GitHub?

Ora puoi incorporare il codice Mermaid nel tuo LEGGIMI.md e altri file di markdown. Se lo fai, GitHub visualizzerà un diagramma descritto da quel codice. Il codice Mermaid utilizza una semplice sintassi che descrive le singole parti di ogni diagramma in testo normale.

Guarda anche: Cos'è GitHub? Un'introduzione alle sue caratteristiche di base

Come si includono i diagrammi?

1. Scegli un file markdown esistente o creane uno nuovo da aggiungere al tuo repository. Usa entrambi .md o .ribasso estensioni.
instagram viewer
2. Aggiungi del codice Mermaid a quel file. Esattamente quale codice dipende da te; ecco un semplice esempio per iniziare:

   grafico TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

3. Visualizza il file su GitHub. Dovresti vedere un bel rendering del tuo diagramma.

Ora devi solo imparare la ricchezza di diagrammi che Mermaid ha a disposizione. Oppure puoi semplicemente fare riferimento a Sirena documentazione come e quando è necessario un diagramma.

Che tipo di diagrammi posso usare?

Mermaid supporta i seguenti tipi di diagrammi:

• Diagramma di flusso
• Sequenza
• Classe
• Stato
• Relazione tra entità
• Viaggio dell'utente
• Gantt
• Torta
• Requisiti

Guarda anche: Diagramma di Gantt vs. Grafico PERT: quali sono le differenze?

Ciascuno ha la propria sintassi, per riflettere il tipo di dati visualizzati nel diagramma. Ad esempio, ecco il codice per un semplice diagramma di sequenza:

diagramma di sequenza
 Bart->>Homer: Non avere una mucca, amico.

Che appare così quando viene visualizzato:

Ed ecco il codice per un diagramma di stato di base:

stateDiagram-v2
 [*] --> Nuovo
 Nuovo --> Pronto: ammesso
 Pronto --> In esecuzione: invio pianificatore
 In esecuzione --> Pronto: interruzione
 In esecuzione --> In attesa: I/O o evento in attesa
 In attesa --> Pronto: completamento I/O o evento
 In esecuzione --> Terminato: esci
 Terminato --> [*]

Che rende come tale:

Aggiungi valore ai tuoi progetti GitHub con i diagrammi a sirena

I diagrammi a sirena sono un'utile aggiunta a GitHub, soprattutto perché riteniamo che incoraggino una migliore documentazione. Molti progetti possono essere migliorati con alcune spiegazioni visive direttamente nella loro documentazione o nei file README.

GitHub è ora un servizio così popolare, le sue funzionalità e modifiche interessano molti sviluppatori in tutto il mondo. Per fortuna, il supporto per i diagrammi Mermaid è disponibile se ne hai bisogno e invisibile se non lo fai. Ma, si spera, inizierai a vedere almeno una documentazione migliore.

Come ospitare un sito Web gratuitamente utilizzando le pagine GitHub

Se hai un sito web semplice, non devi pagare per l'hosting web. Puoi utilizzare le pagine GitHub gratuitamente!

Leggi Avanti

Circa l'autore