So binden Sie Mermaid-Diagramme in Ihr GitHub-Projekt ein

Die beliebte Code-Sharing-Plattform GitHub hat die Unterstützung einer neuen Art eingebetteter Inhalte angekündigt. In Markdown-Dateien können Sie jetzt die Mermaid-Syntax verwenden, um auf einfache Weise Flussdiagramme, Sequenzdiagramme und mehr zu erstellen.

Die Markdown-Variante von GitHub verarbeitet bereits Bilder, Aufgabenlisten und Emoji-Kurzcodes. Mit der Unterstützung allgemeiner Diagramme trägt GitHub seinen Teil zu einer informativeren und nützlicheren Dokumentation bei.

Was ist neu bei GitHub?

Sie können jetzt Mermaid-Code in Ihre einbetten README.md und andere Markdown-Dateien. Wenn Sie dies tun, rendert GitHub ein Diagramm, das durch diesen Code beschrieben wird. Mermaid-Code verwendet eine einfache Syntax, die die einzelnen Teile jedes Diagramms im Klartext beschreibt.

Siehe auch: Was ist GitHub? Eine Einführung in die grundlegenden Funktionen

Wie fügt man Diagramme ein?

1. Wählen Sie entweder eine vorhandene Markdown-Datei aus oder erstellen Sie eine neue, um sie Ihrem Repository hinzuzufügen. Benutze das eine oder das andere .md oder .abschlag Erweiterungen.
instagram viewer
2. Fügen Sie dieser Datei etwas Mermaid-Code hinzu. Welcher Code genau ist, liegt bei Ihnen; Hier ist ein einfaches Beispiel für den Anfang:

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

3. Zeigen Sie die Datei auf GitHub an. Sie sollten eine schöne Darstellung Ihres Diagramms sehen.

Jetzt müssen Sie nur noch die Fülle an Diagrammen kennenlernen, die Mermaid zur Verfügung stellt. Oder Sie beziehen sich einfach auf die Meerjungfrau Dokumentation, wann immer Sie ein Diagramm benötigen.

Welche Arten von Diagrammen kann ich verwenden?

Mermaid unterstützt die folgenden Arten von Diagrammen:

• Flussdiagramm
• Reihenfolge
• Klasse
• Bundesland
• Entitätsbeziehung
• Benutzerreise
• Gantt
• Kuchen
• Erfordernis

Siehe auch: Gantt-Diagramm vs. PERT-Diagramm: Was sind die Unterschiede?

Jede hat ihre eigene Syntax, um den Datentyp widerzuspiegeln, den das Diagramm anzeigt. Hier ist zum Beispiel der Code für ein einfaches Sequenzdiagramm:

Sequenzdiagramm
 Bart->>Homer: Ich habe keine Kuh, Mann.

Was so aussieht, wenn es gerendert wird:

Und hier ist der Code für ein grundlegendes Zustandsdiagramm:

stateDiagram-v2
 [*] --> Neu
 Neu --> Bereit: zugelassen
 Bereit --> Läuft: Scheduler-Dispatch
 Läuft --> Bereit: Interrupt
 Running --> Waiting: E/A- oder Ereigniswartezeit
 Waiting --> Ready: E/A- oder Ereignisabschluss
 Läuft --> Beendet: Beenden
 Beendet --> [*]

Was als solches rendert:

Werten Sie Ihre GitHub-Projekte mit Mermaid-Diagrammen auf

Mermaid-Diagramme sind eine nützliche Ergänzung zu GitHub, zumal wir glauben, dass sie eine bessere Dokumentation fördern. Viele Projekte könnten mit einigen visuellen Erklärungen direkt in ihrer Dokumentation oder README-Dateien verbessert werden.

GitHub ist heute ein so beliebter Dienst, dass seine Funktionen und Änderungen viele Entwickler auf der ganzen Welt betreffen. Glücklicherweise ist die Unterstützung für Mermaid-Diagramme da, wenn Sie sie brauchen, und unsichtbar, wenn Sie dies nicht tun. Aber hoffentlich werden Sie zumindest eine schönere Dokumentation sehen.

So hosten Sie kostenlos eine Website mit GitHub-Seiten

Wenn Sie eine einfache Website haben, müssen Sie nicht für das Webhosting bezahlen. Sie können GitHub Pages kostenlos nutzen!

Lesen Sie weiter

Über den Autor