Sådan inkluderes havfruediagrammer i dit GitHub-projekt

Den populære kodedelingsplatform, GitHub, har annonceret understøttelse af en ny type indlejret indhold. I markdown-filer kan du nu bruge Mermaid-syntaks til nemt at oprette flowdiagrammer, sekvensdiagrammer og mere.

GitHubs smag af markdown håndterer allerede billeder, opgavelister og emoji-kortkoder. Med understøttelse af almindelige diagrammer gør GitHub sit til mere informativ, nyttig dokumentation.

Hvad er nyt med GitHub?

Du kan nu indlejre Mermaid-kode i din README.md og andre markdown-filer. Hvis du gør det, vil GitHub gengive et diagram beskrevet af den kode. Havfruekode bruger en simpel syntaks, der beskriver de enkelte dele af hvert diagram i almindelig tekst.

Se også: Hvad er GitHub? En introduktion til dens grundlæggende funktioner

Hvordan inkluderer du diagrammer?

1. Vælg enten en eksisterende markdown-fil, eller opret en ny for at tilføje til dit lager. Brug enten .md eller .markdown udvidelser.
2. Tilføj noget Mermaid-kode til den fil. Præcis hvilken kode er op til dig; her er et simpelt eksempel for at komme i gang:

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

instagram viewer
3. Se filen på GitHub. Du bør se en flot gengivelse af dit diagram.

Nu skal du bare lære det væld af diagrammer, som Mermaid har til rådighed. Eller du kan blot henvise til Havfrue dokumentation, når og når du har brug for et diagram.

Hvilken slags diagrammer kan jeg bruge?

Mermaid understøtter følgende typer diagrammer:

• Flowchart
• Sekvens
• klasse
• Stat
• Entitetsforhold
• Brugerrejse
• Gantt
• Pie
• Krav

Se også: Gantt-diagram vs. PERT-diagram: Hvad er forskellene?

Hver har sin egen syntaks for at afspejle den type data, som diagrammet viser. For eksempel, her er koden til et simpelt sekvensdiagram:

sekvensdiagram
 Bart->>Homer: Hav ikke en ko, mand.

Som ser sådan ud, når det gengives:

Og her er koden til et grundlæggende tilstandsdiagram:

stateDiagram-v2
 [*] --> Ny
 Ny --> Klar: optaget
 Klar --> Kører: planlægger afsendelse
 Kører --> Klar: afbryde
 Kører --> Venter: I/O eller begivenhedsvent
 Venter --> Klar: I/O eller hændelse fuldført
 Kører --> Afsluttet: exit
 Afsluttet --> [*]

Hvilket gengiver som sådan:

Tilføj værdi til dine GitHub-projekter med havfruediagrammer

Havfruediagrammer er en nyttig tilføjelse til GitHub, især da vi mener, at de tilskynder til bedre dokumentation. Mange projekter kunne forbedres med nogle visuelle forklaringer direkte i deres dokumentation eller README-filer.

GitHub er nu så populær en tjeneste, dens funktioner og ændringer påvirker mange udviklere rundt om i verden. Heldigvis er støtte til havfruediagrammer der, hvis du har brug for det, og usynlig, hvis du ikke gør det. Men forhåbentlig begynder du i det mindste at se noget pænere dokumentation.

Sådan hoster du et websted gratis ved hjælp af GitHub-sider

Hvis du har en simpel hjemmeside, behøver du ikke betale for webhosting. Du kan bruge GitHub-sider gratis!

Læs Næste

Om forfatteren