GitHub heeft de mogelijkheid toegevoegd om dynamische grafieken aan md-bestanden toe te voegen met behulp van de Mermaid-generator. Voordien werden grafieken ingevoegd als afbeeldingen of "getekend" met tekens uit een ASCII-tabel. Nu is volledige ondersteuning voor schema's toegevoegd aan de markup-syntaxis van Markdown.

Mermaid is een op JavaScript gebaseerde tool voor grafieken. Hiermee kunt u dynamisch stroomdiagrammen, UML-diagrammen, vastleggingsgrafieken en Gantt-diagrammen maken. Het GitHub-team werkte samen met de ontwikkelaars van CommonMark om native Mermaid-syntaxisondersteuning naar het platform te brengen.

Elke keer dat een blok code gemarkeerd als zeemeermin wordt aangetroffen in het md-bestand, maakt het systeem een ​​nieuw iframe, haalt de onbewerkte code uit het blok, geeft het door aan Mermaid.js en verandert de code in een grafiek. Dit gebeurt allemaal lokaal in de browser van de gebruiker.

Het volgende codeblok wordt omgezet in een volwaardige grafiek, waarvan de inhoud dynamisch kan worden gewijzigd:

```zeemeermin grafiek TD; A--B; A--C; B--D; C--D;```Door een diagram in een iframe-tag te plaatsen, kunt u de pagina correct weergeven en de inhoud van het bestand niet breken, en asynchrone weergave maakt het gemakkelijker om meerdere diagrammen tegelijkertijd weer te geven.

bbabo.Net