GitHub hat die Möglichkeit hinzugefügt, mithilfe des Mermaid-Generators dynamische Diagramme zu md-Dateien hinzuzufügen. Zuvor wurden Diagramme als Bilder eingefügt oder mit Zeichen aus einer ASCII-Tabelle „gezeichnet“. Jetzt wurde die Markup-Syntax von Markdown um volle Unterstützung für Schemas erweitert.
Mermaid ist ein JavaScript-basiertes Diagramm- und Grafiktool. Damit können Sie dynamisch Flussdiagramme, UML-Diagramme, Commit-Diagramme und Gantt-Diagramme erstellen. Das GitHub-Team hat sich mit den Entwicklern von CommonMark zusammengetan, um native Mermaid-Syntaxunterstützung auf die Plattform zu bringen.
Jedes Mal, wenn ein als Meerjungfrau markierter Codeblock in der md-Datei gefunden wird, erstellt das System einen neuen Iframe, nimmt den Rohcode aus dem Block, übergibt ihn an Mermaid.js und wandelt den Code in ein Diagramm um. All dies geschieht lokal im Browser des Benutzers.
Der folgende Codeblock wird in ein vollwertiges Diagramm gerendert, dessen Inhalt dynamisch geändert werden kann:
„Meerjungfrau-Grafik TD; A--B; A--C; B--D; C--D;```Durch das Einschließen eines Diagramms in ein Iframe-Tag können Sie die Seite richtig rendern und den Inhalt der Datei nicht beschädigen, und das asynchrone Rendering erleichtert die gleichzeitige Anzeige mehrerer Diagramme.
bbabo.Net