Mermaid 🧜‍♀️, kramdown und der Schockwellenreiter

Weil ich gerade sowieso wegen P5.js an den Quellen des Schockwellenreiters herumschraubte, wollte ich auch gleich noch Mermaid in dieses Blog Kritzelheft integrieren. Ich dachte mir »JavaScript ist JavaScript«, so schwer kann das doch nicht sein. Ganz so einfach war es aber leider nicht, aber mit diesen Schritten habe ich es dann doch noch hinbekommen:

Erst Mermaid irgendwo im Seitenquelltext mit dieser Zeile aufrufen (bei mir ist dieser Aufruf am Ende der Seite):

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

[Update]: Wenn Ihr nach dieser Zeile noch dieses Stück JavaScript einfügt,

<script>mermaid.initialize({ startOnLoad: true });</script>

wird das Herausrendern des Diagramms unten angeblich noch einmal erheblich beschleunigt (ich konnte allerdings bestenfalls eine »gefühlte Beschleunigung« feststellen). [Ende Update]

Und dann dieses <div>‘ erzeugen:

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

Und schon – nach einer kurzen Pause – erscheint wie durch Zauberei statt des div dieses Diagramm (kurz blinkt der Quellcode meist doch noch auf):

Solltet Ihr mehrere Diagramme in einer Seite einbinden wollen, benötigt jedes Diagramm übrigens (s)ein eigenes <div>.

Natürlich habe ich es auch versucht, das Skript lokal einzubinden, aber das von GitHub heruntergeladene Skript (dist/mermaid.js, eine minimierte Version habe ich in den Quellen nicht gefunden) stieg mit einer mir unverständlichen Fehlermeldung aus. Da ich Mermaid direkt im Schockwellenreiter vermutlich nicht allzu häufig verwenden werde, kann ich erst einmal damit leben. Die Programme, in denen ich Mermaid öfter verwende (MacDown, MkDocs etc.) besitzen eigene Mermaid-Plugins, die dann auch lokal funktionieren.

Allerdings … ein wenig wurmt mich das schon. Wenn also jemand von Euch da draußen eine Idee hat, wie ich Mermaid lokal mit kramdown verkuppeln kann, der möge mir in meinen (Email-) Kommentaren oder über die anderen sozialen Kanäle einen Tip hinterlassen.

What’s next? Wo ich schon einmal an RubyFrontier herumschraube, würde ich – zumindest testweise – das bisher von mir verwendete MathJax gerne noch durch KaTeX ersetzen. Still digging!

(Kommentieren)