Diagramme in Markdown-Files GitHub integriert Mermaid-Funktionen

GitHub hat das JavaScript-basierte Diagramm- und Charting-Tool Mermaid fest integriert. Development-Teams können fortan ihre Fluss-, UML-, Git- oder auch Gantt-Diagramme inline mithilfe der Mermaid-Syntax erstellen.

Anbieter zum Thema

Confluent Germany GmbH

Mermaid ist ein JavaScript-basiertes Diagramm- und Charting-Tool, das Markdown-inspirierte Textdefinitionen übernimmt und Diagramme dynamisch im Browser erstellt. Es wird von Knut Sveidqvist gepflegt und unterstützt eine Reihe verschiedener gängiger Diagrammtypen für Softwareprojekte, darunter Flussdiagramme, UML, Git-Diagramme, User-Journey-Diagramme und sogar das gefürchtete Gantt-Diagramm.

An der integrierten Diagramm-Funktion hat GitHub gemeinsam mit Knut Sveidqvist, Betreuer des Mermaid-Projekts, sowie der CommonMark-Community gearbeitet. Enthält ein GitHub-Projekt Codeblöcke mit Mermaid-Markierung, so zeigen Clients, die Inhalte mit eingebettetem Mermaid in einer Nicht-JavaScript-Umgebung anfordern (z. B. eine API-Anfrage), den ursprünglichen Markdown-Code.

In einer JavaScript-fähigen Umgebung wird hingegen ein iFrame erzeugt, der die Syntax übernimmt und an Mermaid.js weitergibt, um den Code in ein Diagramm im lokalen Browser zu verwandeln. Dieser zweistufige Prozess läuft unter Zuhilfenahme der HTML-Pipeline von GitHub und dem Dateirendering-Dienst Viewscreen ab. Nachdem der Ursprungscode verarbeitet wurde, verweist das src-Attribut des iFrame auf den Viewscreen-Dienst.

GitHub zufolge hat das gleich mehrere Vorteile. So wird die JavaScript Payload dank der ausgelagerten Bibliothek klein gehalten. Außerdem reduziere das asynchrone Rendering der Diagramme den Overhead, der durch die Darstellung mehrerer Diagramme vor dem Senden der kompilierten ERB-Ansicht an den Client entsteht. Und zu guter Letzt hätten die in ein iFrame gepackten Inhalte weniger Schadpotenzial.

Im Endergebnis entstünden schnelle, leicht bearbeitbare und vektorbasierte Diagramme direkt in der Dokumentation. Wer mehr darüber erfahren möchte, kann die Mermaid-Webseite besuchen oder den offiziellen Mermaid Guide (Paperback) bestellen (Mermaid-eBook bei Amazon erhältlich).

(ID:48015745)