Mermaid zu PowerPoint: vier Wege – und was jeder davon kostet
Kurze Antwort: In PowerPoint gibt es keinen nativen Mermaid-Renderer, also ist jeder Weg von Mermaid nach PowerPoint ein Konvertierungsschritt. Sie haben vier realistische Optionen — ein PNG exportieren, ein SVG exportieren, ein Mermaid-Add-in installieren oder das Diagramm als native PowerPoint-Formen nachbauen. Jede davon geht einen anderen Kompromiss zwischen Bearbeitbarkeit, Auflösung und Einrichtungsaufwand ein. Ein fünfter Weg — aus derselben Mermaid-Quelle eine animierte Version generieren — kommt infrage, wenn der Grund für das Diagramm auf der Folie darin besteht, dass Sie ein Publikum hindurchführen müssen.
In diesem Leitfaden geht es darum, den richtigen Weg zu wählen, statt reflexhaft zum Screenshot zu greifen.
Warum kann PowerPoint Mermaid nicht direkt rendern?
Mermaid ist eine JavaScript-Bibliothek. Sie parst eine Textdefinition im Browser und zeichnet SVG. PowerPoint ist kein Browser und bringt keinen Mermaid-Parser mit — wenn Sie `graph TD` in ein Textfeld einfügen, erscheint genau das, was Sie getippt haben: die Wörter `graph TD`.
Diese eine Tatsache bestimmt jede Entscheidung weiter unten. Irgendetwas außerhalb von PowerPoint muss Ihren Text zuerst in Pixel oder Vektoren verwandeln, und dieses Etwas legt fest, was Sie später noch ändern können.
Der eigentliche Preis steckt in den Folgewirkungen. Ihre Mermaid-Quelle liegt unter Versionskontrolle, direkt neben dem Code, den sie beschreibt. In dem Moment, in dem sie zu einem Bild im Foliensatz wird, verliert der Foliensatz den Anschluss an das Repository. Nichts warnt Sie, wenn sich die Architektur ändert. Das Diagramm auf Folie 14 ist beim nächsten Review schlicht falsch, und es fällt niemandem auf, bis jemand im Raum das System gut genug kennt, um zu widersprechen.
Welche vier Wege führen ein Mermaid-Diagramm nach PowerPoint?
Weg 1: PNG exportieren und als Bild einfügen
Der Standardweg. Auf mermaid.live oder mit der Mermaid-CLI rendern, das PNG herunterladen, dann Einfügen, Bilder, Dieses Gerät.
PNG ist ein Rasterformat, seine Qualität steht also zum Zeitpunkt des Exports fest. Ein in Browserbreite exportiertes Diagramm sieht auf Ihrem Laptop gut aus und auf dem Beamer weich. Wenn Sie diesen Weg gehen, exportieren Sie in zwei- bis dreifacher Größe der benötigten Foliengröße und skalieren herunter, niemals hoch.
Weg 2: SVG exportieren und als Bild einfügen
Gleicher Ablauf, besseres Ergebnis. PowerPoint unterstützt das Einfügen von SVG seit Jahren, und SVG ist ein Vektorformat — es bleibt in jeder Projektionsgröße scharf.
SVG eröffnet außerdem einen Kniff, den der PNG-Weg nicht kann: eingefügtes SVG markieren, Rechtsklick, In Form konvertieren. PowerPoint zerlegt den Vektor in native Formen, die Sie einzeln umfärben, umgestalten oder animieren können. Die Verbindung zur Mermaid-Quelle ist damit endgültig weg, dafür bekommen Sie ein Diagramm, das zur Farbpalette Ihrer Vorlage passt.
Achten Sie auf die Schriften. Wenn Ihr Mermaid-Render eine Schrift verwendet hat, die auf dem vortragenden Rechner fehlt, ersetzt das SVG sie durch eine andere — und Kästchen, die vorher genau um ihre Beschriftung passten, passen nicht mehr.
Weg 3: Ein PowerPoint-Add-in
Es gibt Community-Add-ins, die einen Mermaid-Editor in PowerPoint einbetten, den Quellcode zusammen mit der Datei speichern und ein erneutes Rendern nach einer Änderung erlauben. Das Add-in von Accion Labs ist das bekannteste davon.
Das ist der einzige Weg, der Textdefinition und Folie an einem Ort hält — entscheidend, wenn das Diagramm im Foliensatz wiederholt überarbeitet wird. Der Preis ist eher organisatorisch als technisch: Add-ins brauchen eine Installationsberechtigung, und in den meisten Unternehmen ist das ein Ticket, kein Klick. Außerdem bindet es den Foliensatz daran, dass jede Person, die ihn öffnet, dasselbe Add-in hat.
Weg 4: Als native Formen nachbauen
Das Mermaid-Diagramm lesen und mit PowerPoint-Formen und -Verbindern neu zeichnen.
Alle winken bei dieser Variante ab, und alle machen sie am Ende doch — denn sie ist der einzige Weg zu einem Diagramm, das vollständig dem Designsystem des Foliensatzes folgt, im Animationsbereich vollständig animierbar ist und von Kolleginnen und Kollegen bearbeitet werden kann, die noch nie von Mermaid gehört haben. Sie ist auch die langsamste, und die Kopie läuft sofort von der Quelle der Wahrheit weg.
Heben Sie sie sich für die ein, zwei Diagramme auf, die das Argument der Präsentation tragen.
Welchen Weg sollte ich wählen?
| Weg | Einrichtung | Bleibt auf dem Beamer scharf | In PowerPoint bearbeitbar | Behält die Mermaid-Quelle | Am besten für | |---|---|---|---|---|---| | PNG-Export | Keine | Nein, feste Auflösung | Nein | Nein | Einen schnellen internen Foliensatz | | SVG-Export | Keine | Ja | Nach In Form konvertieren | Nein | Die meisten Fälle, der vernünftige Standard | | Add-in | Installation nötig | Ja | Über den Editor des Add-ins | Ja | Foliensätze, die über Monate überarbeitet werden | | Als Formen nachbauen | Manuell, langsam | Ja | Vollständig | Nein | Die zwei Folien, auf die es ankommt | | Animierte Version generieren | Keine | Ja | Eingebettet als Medium | Ja, die Definition bleibt erhalten | Diagramme, die Sie erklären müssen |
Wenn Sie eine einzige Regel wollen: SVG exportieren. Es ist kostenlos, braucht keine Berechtigung, und In Form konvertieren deckt den Fall ab, dass Sie später umgestalten müssen.
Was, wenn nicht das Format das Problem ist, sondern der Durchlauf?
Es gibt eine Sorte Mermaid-Diagramm, bei der keiner der vier Wege hilft — und sie verdient einen Namen, denn wahrscheinlich hat sie Sie hierher gebracht.
Sie haben ein Sequenzdiagramm mit zwölf Nachrichten oder einen Architekturgraphen mit zwanzig Knoten. Er ist korrekt. Er rendert wunderbar. Und wenn er auf der Folie landet, erscheint alles auf einmal, das Publikum liest die untere rechte Ecke, während Sie oben links erklären, und Sie verbringen die erste Minute Ihres Slots mit „diesen Teil bitte erst mal ignorieren".
Das ist kein Auflösungsproblem. Hochwertigeres SVG macht es schlimmer, weil jetzt alles gleichzeitig lesbar ist.
Die Lösung ist Abfolge: Zeigen Sie das Diagramm in der Reihenfolge, in der Sie es erklären. Weg 4 bringt Sie per Hand dorthin, eine Eingangsanimation pro Form — genau deshalb machen Leute es trotz des Aufwands. Die Alternative: direkt aus der Mermaid-Definition eine animierte Version generieren und das entstandene GIF oder MP4 auf der Folie einbetten. Diesen Ablauf haben wir ausführlich beschrieben in Mermaid-Diagramme in animierte Präsentationsvisuals verwandeln, und das breitere Argument fürs Aufbauen statt Einblenden in So präsentieren Sie Systemarchitektur.
Der Mermaid-Konverter von FluxDiagram liest eine Mermaid- oder PlantUML-Definition — Flowchart, Sequenz, Klasse, Gantt oder Kreisdiagramm —, extrahiert Knoten und Kanten und gibt Ihnen eine Beschreibung, aus der Sie eine animierte Version generieren können. Exportieren Sie als GIF für eine Schleife oder als MP4 für kontrollierte Wiedergabe und fügen Sie die Datei genauso in die Folie ein, wie Sie ein Bild einfügen würden. Die Mermaid-Quelle bleibt dort, wo sie hingehört, im Repository — genau die Eigenschaft, die der PNG- und der SVG-Weg beide zerstören.
Ein Ablauf, der die nächste Überarbeitung übersteht
Welchen Weg Sie auch wählen: Zwei Gewohnheiten verhindern, dass Diagramme in Foliensätzen veralten.
Halten Sie die Definition in den Notizen fest. Fügen Sie die Mermaid-Quelle in das Notizenfeld der Folie ein, auf der sie gerendert wird. Das kostet nichts, reist mit der Datei mit, und die nächste Person, die diese Folie bearbeitet, kann neu generieren statt zu raten.
Neu exportieren statt flicken. Wenn sich das System ändert, ändern Sie das Mermaid und exportieren neu. Das Bild zu bearbeiten oder ein einzelnes nachgebautes Kästchen zu verschieben — so endet ein Foliensatz damit, eine Architektur zu beschreiben, die es nicht mehr gibt.
FAQ
Kann ich Mermaid-Code direkt in PowerPoint einfügen?
Nein. Office bringt keinen Mermaid-Renderer mit, die Syntax bleibt also wörtlicher Text. Sie brauchen einen Exportschritt oder ein Add-in, das ihn für Sie rendert.
Ist SVG oder PNG besser für Mermaid-Diagramme auf Folien?
SVG, in fast jedem Fall. Es skaliert ohne Qualitätsverlust auf dem Beamer und lässt sich in bearbeitbare PowerPoint-Formen umwandeln. Nutzen Sie PNG nur, wenn die Office-Version einer empfangenden Person zu alt für SVG ist, oder wenn Sie das Diagramm bewusst einfrieren wollen.
Kann ich ein Mermaid-Diagramm in PowerPoint animieren?
Nicht aus der Mermaid-Quelle heraus. Mermaid hat keine Animationsausgabe. Ihre zwei Optionen: ein eingefügtes SVG in Formen konvertieren und jede davon im Animationsbereich animieren, oder aus derselben Definition ein animiertes GIF oder Video generieren und das als Medium einbetten. Die zweite lässt die Textdefinition intakt, die erste nicht.
Probieren Sie es mit Ihrem eigenen Diagramm
Wenn Sie das Diagramm, das Sie gleich in eine Folie einfügen wollen, später erklären müssen: konvertieren Sie es, statt es zu screenshotten.
Fügen Sie Ihren Mermaid-Code in den Konverter ein.
FluxDiagram generiert animierte Diagramme, die Sie in den Foliensatz einbetten, den Sie bereits haben — in PowerPoint, Google Slides oder Keynote.