Mermaid zu GIF: So wird aus einem Diagramm etwas, das sich bewegt
Kurze Antwort: Mermaid exportiert kein GIF und animiert nicht. Der Weg von Mermaid zum GIF bedeutet, das Diagramm außerhalb von Mermaid zu rendern und die Frames selbst zusammenzusetzen, eines der Community-Skripte laufen zu lassen, das genau das automatisiert, oder aus derselben Definition mit einem dafür gebauten Werkzeug eine animierte Fassung zu generieren. Die Wahl hängt vollständig davon ab, ob Sie ein bewegtes Bild wollen oder ein Diagramm, das sich in der Reihenfolge aufbaut, in der Sie es erklären.
Das sind nicht dieselben Anliegen, und die meisten Werkzeuge verwechseln sie.
Warum exportiert Mermaid kein GIF?
Mermaid rendert im Browser zu SVG. Das ist seine ganze Aufgabe. Die gerenderte Ausgabe hat keine Zeitleiste, keine Keyframes und keinen Begriff davon, dass ein Schritt nach einem anderen passiert — die Pfeile in einem Sequenzdiagramm werden in Quelltextreihenfolge gezeichnet, alle auf einmal, in einem einzigen Durchgang.
Der Wunsch nach Animation ist alt und gut dokumentiert. Im Mermaid-Repository liegen seit Jahren offene Issues, die animierte Diagramme sowie Export nach PowerPoint und Google Slides fordern, und Umgehungslösungen aus der Community haben die Lücke gefüllt: Skripte, die ein Diagramm wiederholt mit jeweils mehr Knoten neu rendern, selbstgebaute CSS-Hacks gegen das gerenderte SVG und kleine CLI-Werkzeuge, die die entstandenen PNGs zu einem GIF zusammensetzen.
Sie funktionieren alle. Und sie haben alle dieselbe Form: N-mal rendern, N Bilder sammeln, kodieren. Wer diese Form verstanden hat, kann die Optionen beurteilen.
Welche Wege führen von Mermaid zu einem animierten GIF?
Frames zusammensetzen
Nehmen Sie Ihre Mermaid-Definition. Erzeugen Sie mehrere Fassungen davon, jede mit einem Knoten oder einer Nachricht mehr als die vorige. Rendern Sie jede mit der Mermaid-CLI zu PNG. Übergeben Sie die PNGs an einen Encoder wie ImageMagick oder ffmpeg, mit einer Verzögerung pro Frame.
Genau das automatisieren die Community-Skripte, und es ist tatsächlich der Weg mit der meisten Kontrolle: Sie entscheiden exakt, was jeder Frame enthält.
Zwei Dinge beißen. Erstens legt Mermaid das Layout bei jedem Rendern neu fest, sodass ein Diagramm, das zwischen zwei Frames einen Knoten dazugewinnt, sein gesamtes Layout verschieben kann — und die „Animation" wird zum Gezappel. Sie vermeiden das, indem Sie jedes Mal das vollständige Diagramm rendern und die noch nicht enthüllten Elemente ausblenden, statt sie wegzulassen. Zweitens ist GIF auf 256 Farben beschränkt, und Diagrammtext in kleinen Größen zeigt hässliches Dithering. Exportieren Sie größer, als Sie brauchen.
CSS-Animation auf dem gerenderten SVG
Mermaid gibt SVG mit einigermaßen vorhersehbaren Klassennamen aus, sodass Sie nach dem Rendern CSS-Animationen an Knoten und Kanten hängen können. Das ist der Weg hinter den meisten „schreckliche Hacks"-Blogbeiträgen, und er liefert im Browser wirklich gute Ergebnisse.
Er liefert keine Datei. Ein CSS-animiertes SVG läuft dort, wo ein Browser es abspielt — was PowerPoint, Keynote und die meisten Orte ausschließt, an denen man das Diagramm tatsächlich braucht. Sie landen wieder beim Abfilmen des Bildschirms, und das ist der Frame-Weg mit zusätzlichen Schritten.
Ein Werkzeug, das die Animation generiert
Der dritte Weg überspringt die Frames komplett: die Mermaid-Definition lesen, die Struktur verstehen und daraus eine Animation erzeugen. Der Mermaid-Konverter von FluxDiagram nimmt eine Mermaid- oder PlantUML-Definition — Flowchart, Sequenz, Klasse, Gantt oder Kreis —, extrahiert Knoten und Kanten und generiert eine animierte Fassung, die das Diagramm in der Flussrichtung aufbaut, die Ihre Quelle ohnehin schon deklariert. Export als GIF für eine Schleife oder als MP4 und WebM, wenn Sie kontrollierte Wiedergabe wollen.
Der Kompromiss ist ehrlich: Sie haben weniger Kontrolle auf Frame-Ebene als mit einem Skript, und Sie haben ein Ergebnis in Sekunden statt an einem Nachmittag.
Welcher Ansatz passt zu welcher Aufgabe?
| Ansatz | Einrichtungsaufwand | Ausgabe | Layout-Stabilität | Einbettbar in Folien | Am besten für | |---|---|---|---|---|---| | Frames zusammensetzen mit CLI + ffmpeg | Hoch, skriptgesteuert | GIF oder MP4 | Schlecht, außer Sie blenden aus statt wegzulassen | Ja | Wiederholbare Pipelines in CI | | CSS auf dem gerenderten SVG | Mittel | Nur Browser | Gut | Nein | Doku-Seiten und Webseiten | | Bildschirmaufnahme eines Live-Editors | Niedrig | GIF oder MP4 | Gut | Ja | Einmalige Sache, in Qualität mit sichtbarem Cursor | | Generierung aus der Definition | Niedrig | GIF, MP4, WebM | Gut | Ja | Folien, die Sie kommentieren müssen |
GIF, MP4 oder WebM — was sollten Sie wirklich exportieren?
Wer nach einem GIF fragt, bekommt meist eines, aber es ist selten der richtige Container.
GIF läuft automatisch in Schleife, spielt überall und braucht keine Bedienelemente. Es ist auf 256 Farben begrenzt und die Dateigrößen steigen schnell, sodass ein 20-sekündiger Diagrammaufbau eine schwere Datei ergibt, die schlechter aussieht als eine 3-sekündige. Gut für ein README-Badge oder eine Schleife, die hinter Ihnen läuft, während Sie sprechen.
MP4 gibt Ihnen volle Farbtiefe, kleine Dateien und Kontrolle über die Wiedergabe. Auf einer Folie zählt Kontrolle mehr, als man erwartet: Der Aufbau soll starten, wenn Sie die Taste drücken, nicht wenn die Folie erscheint, und er soll auf dem letzten Bild stehen bleiben, statt hinter Ihrer Erklärung neu zu starten.
WebM ist das Web-Äquivalent, nützlich für eine Doku-Seite oder eine Landingpage, wo Sie Transparenz oder eine kleinere Datenlast wollen.
Die Faustregel: GIF für eine Schleife, MP4 für eine Präsentation, WebM fürs Web.
Hilft ein animiertes GIF überhaupt?
Nicht immer, und es lohnt sich, deutlich zu werden, denn „animier das Diagramm" ist oft die falsche Lösung.
Ein GIF in Endlosschleife, in dem sich ein Flowchart hinter einem Vortragenden immer wieder selbst zeichnet, ist Dekoration. Es zieht den Blick immer wieder an und sagt dem Publikum beim zweiten Durchlauf nichts Neues.
Was hilft, ist eine an den Vortrag gebundene Abfolge: Das Diagramm erscheint in der Reihenfolge, in der Sie es erklären, sodass in jedem Moment nur das sichtbar ist, worüber Sie gerade sprechen. Deshalb gibt es die Frame-Skripte, und das ist der eigentliche Grund, warum man aus einem Mermaid-Diagramm überhaupt Animation will. Den zugrunde liegenden Fall haben wir ausführlich behandelt in Mermaid-Diagramme in animierte Präsentationsvisuals verwandeln, und die formatseitigen Entscheidungen in Mermaid zu PowerPoint.
Wenn das Diagramm klein genug ist, um es auf einen Blick zu erfassen, lassen Sie die Animation weg. Exportieren Sie ein SVG und machen Sie weiter.
FAQ
Kann die Mermaid-CLI direkt ein GIF exportieren?
Nein. `mmdc` gibt SVG, PNG und PDF aus. Alles Animierte erfordert, mehrere Einzelbilder zu rendern und selbst zu kodieren — oder ein separates Werkzeug.
Wie verhindere ich, dass das Diagramm zwischen den Frames springt?
Rendern Sie in jedem Frame das vollständige Diagramm und blenden Sie die noch nicht enthüllten Elemente aus, statt sie aus der Definition zu löschen. Mermaid berechnet das Layout aus den vorhandenen Knoten, also verschiebt das Entfernen eines Knotens alles andere.
Läuft ein animiertes GIF in PowerPoint und Google Slides?
Ja. Beide behandeln ein GIF als Bild und spielen es im Präsentationsmodus automatisch in Schleife, wenn auch nicht immer in der Bearbeitungsansicht. Für einen Aufbau, den Sie auslösen und halten wollen, fügen Sie stattdessen ein MP4 als Medium ein: Das gibt Ihnen eine Wiedergabesteuerung und stoppt die Schleife.
Probieren Sie es mit Ihrer eigenen Definition
Wenn Sie ein Mermaid-Diagramm haben, das sich bewegen soll, fangen Sie beim Quelltext an, nicht beim Screenshot.
Fügen Sie Ihren Mermaid-Code in den Konverter ein.
FluxDiagram generiert animierte Diagramme, die Sie in das Deck einbetten, das Sie bereits haben — in PowerPoint, Google Slides oder Keynote.