GitHub har lagt till möjligheten att lägga till dynamiska diagram till md-filer med hjälp av Mermaid-generatorn. Dessförinnan infogades diagram som bilder eller "ritades" med hjälp av tecken från en ASCII-tabell. Nu har fullt stöd för scheman lagts till markupsyntaxen för Markdown.

Mermaid är ett JavaScript-baserat kart- och grafverktyg. Med den kan du dynamiskt skapa flödesscheman, UML-diagram, commit-diagram och Gantt-diagram. GitHub-teamet slog sig ihop med utvecklarna på CommonMark för att få inbyggt Mermaid-syntaxstöd till plattformen.

Varje gång ett kodblock markerat som sjöjungfru påträffas i md-filen, skapar systemet en ny iframe, tar råkoden från blocket, skickar den till Mermaid.js och förvandlar koden till ett diagram. Allt detta sker lokalt i användarens webbläsare.

Följande kodblock kommer att renderas till ett fullfjädrat diagram, vars innehåll kan ändras dynamiskt:

``` sjöjungfru graf TD; A--B; A--C; B--D; C--D;``` Att innesluta ett diagram i en iframe-tagg gör att du kan rendera sidan korrekt och inte bryta innehållet i filen, och asynkron rendering gör det lättare att visa flera diagram samtidigt.

bbabo.Net