Jak dołączyć diagramy syren do projektu GitHub

Popularna platforma do udostępniania kodu, GitHub, ogłosiła wsparcie dla nowego typu treści osadzonych. W plikach przecen można teraz używać składni Mermaid do łatwego tworzenia schematów blokowych, diagramów sekwencji i nie tylko.

Smak przecen w GitHub już obsługuje obrazy, listy zadań i krótkie kody emoji. Dzięki obsłudze popularnych diagramów GitHub robi swoje, aby uzyskać bardziej pouczającą i przydatną dokumentację.

Co nowego w GitHub?

Możesz teraz osadzić kod Syrenki w swoim README.md i inne pliki przecen. Jeśli to zrobisz, GitHub wyrenderuje diagram opisany przez ten kod. Kod Mermaid używa prostej składni, która opisuje poszczególne części każdego diagramu w postaci zwykłego tekstu.

Zobacz też: Co to jest GitHub? Wprowadzenie do jego podstawowych funkcji

Jak dołączyć diagramy?

1. Wybierz istniejący plik przecen lub utwórz nowy, aby dodać go do swojego repozytorium. Użyj albo .md lub .obniżka cen rozszerzenia.
2. Dodaj trochę kodu Mermaid do tego pliku. Dokładnie jaki kod należy do Ciebie; oto prosty przykład na początek:

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

instagram viewer
3. Wyświetl plik w serwisie GitHub. Powinieneś zobaczyć ładny rendering twojego diagramu.

Teraz wystarczy poznać bogactwo diagramów, jakie ma do dyspozycji Syrenka. Możesz też po prostu odwołać się do Syrena dokumentacja jak i kiedy potrzebujesz diagramu.

Jakie rodzaje diagramów mogę używać?

Mermaid obsługuje następujące rodzaje diagramów:

• Schemat blokowy
• Sekwencja
• Klasa
• Stan
• Związek z podmiotami
• Podróż użytkownika
• Gantta
• Ciasto
• Wymóg

Zobacz też: Wykres Gantta a Wykres PERT: Jakie są różnice?

Każdy ma własną składnię, aby odzwierciedlić typ danych wyświetlanych na diagramie. Na przykład, oto kod prostego diagramu sekwencji:

diagram sekwencyjny
 Bart->>Homer: Nie miej krowy, stary.

Po wyrenderowaniu wygląda to tak:

A oto kod podstawowego diagramu stanów:

diagram stanu-v2
 [*] --> Nowy
 Nowe --> Gotowe: dopuszczone
 Gotowy --> Uruchomiony: wysyłka harmonogramu
 Działa --> Gotowy: przerwać
 Działa --> Oczekiwanie: oczekiwanie na wejście/wyjście lub zdarzenie
 Oczekiwanie --> Gotowe: I/O lub zakończenie zdarzenia
 Działa --> Zakończono: wyjście
 Zakończono --> [*]

Który renderuje jako taki:

Dodaj wartość do swoich projektów GitHub dzięki diagramom syren

Diagramy syreny są użytecznym dodatkiem do GitHub, zwłaszcza że uważamy, że zachęcają do lepszej dokumentacji. Wiele projektów można wzbogacić o kilka wizualnych objaśnień bezpośrednio w dokumentacji lub plikach README.

GitHub jest teraz tak popularną usługą, jej funkcje i zmiany wpływają na wielu programistów na całym świecie. Na szczęście obsługa diagramów Mermaid jest dostępna, jeśli jej potrzebujesz, i niewidoczna, jeśli jej nie potrzebujesz. Ale miejmy nadzieję, że zaczniesz widzieć przynajmniej ładniejszą dokumentację.

Jak hostować witrynę za darmo za pomocą stron GitHub

Jeśli masz prostą stronę internetową, nie musisz płacić za hosting. Możesz korzystać ze stron GitHub za darmo!

Czytaj dalej

O autorze