Zeemeermindiagrammen opnemen in uw GitHub-project

Het populaire platform voor het delen van codes, GitHub, heeft ondersteuning aangekondigd voor een nieuw type embedded content. In markdown-bestanden kunt u nu de Mermaid-syntaxis gebruiken om eenvoudig stroomdiagrammen, sequentiediagrammen en meer te maken.

GitHub's smaak van markdown verwerkt al afbeeldingen, takenlijsten en emoji-korte codes. Met ondersteuning voor algemene diagrammen draagt ​​GitHub bij aan meer informatieve, nuttige documentatie.

Wat is er nieuw met GitHub?

U kunt nu Mermaid-code in uw README.md en andere markdown-bestanden. Als je dat doet, zal GitHub een diagram weergeven dat door die code wordt beschreven. Zeemeermincode gebruikt een eenvoudige syntaxis die de afzonderlijke delen van elk diagram in platte tekst beschrijft.

Zie ook: Wat is GitHub? Een inleiding tot de basisfuncties ervan

Hoe voeg je diagrammen toe?

1. Kies een bestaand afwaarderingsbestand of maak een nieuw bestand om aan uw repository toe te voegen. Gebruik een van beide .md of .markdown uitbreidingen.
instagram viewer
2. Voeg wat Mermaid-code toe aan dat bestand. Welke code precies is aan jou; hier is een eenvoudig voorbeeld om te beginnen:

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

3. Bekijk het bestand op GitHub. U zou een mooie weergave van uw diagram moeten zien.

Nu hoef je alleen nog maar de schat aan diagrammen te leren die Mermaid beschikbaar heeft. Of u kunt gewoon verwijzen naar de Meermin documentatie als en wanneer u een diagram nodig heeft.

Welke soorten diagrammen kan ik gebruiken?

Mermaid ondersteunt de volgende soorten diagrammen:

• Stroomdiagram
• Reeks
• Klas
• Staat
• Entiteit relatie
• Gebruikersreis
• Gantt
• Taart
• Vereiste

Zie ook: Gantt-diagram vs. PERT-kaart: wat zijn de verschillen?

Elk heeft zijn eigen syntaxis om het type gegevens weer te geven dat het diagram weergeeft. Hier is bijvoorbeeld de code voor een eenvoudig sequentiediagram:

volgordeDiagram
 Bart->>Homer: Heb geen koe, man.

Dat ziet er zo uit als het wordt weergegeven:

En hier is de code voor een basisstatusdiagram:

stateDiagram-v2
 [*] --> Nieuw
 Nieuw --> Klaar: toegelaten
 Gereed --> Actief: verzending planner
 Actief --> Gereed: onderbreken
 Actief --> Wachten: I/O of gebeurtenis wachten
 Wachten --> Gereed: I/O of voltooiing van gebeurtenis
 Actief --> Beëindigd: exit
 Beëindigd --> [*]

Wat als zodanig wordt weergegeven:

Voeg waarde toe aan uw GitHub-projecten met zeemeermindiagrammen

Zeemeermindiagrammen zijn een nuttige toevoeging aan GitHub, vooral omdat we denken dat ze betere documentatie aanmoedigen. Veel projecten kunnen worden verbeterd met enkele visuele uitleg in hun documentatie of README-bestanden.

GitHub is nu zo'n populaire service, de functies en wijzigingen zijn van invloed op veel ontwikkelaars over de hele wereld. Gelukkig is er ondersteuning voor Mermaid-diagrammen als je het nodig hebt, en onzichtbaar als je dat niet doet. Maar hopelijk zul je op zijn minst wat mooiere documentatie zien.

Een gratis website hosten met GitHub-pagina's

Als u een eenvoudige website heeft, hoeft u niet te betalen voor webhosting. Je kunt GitHub-pagina's gratis gebruiken!

Lees volgende

Over de auteur