Mermaid kostenlos in PNG umwandeln

Mermaid-Code einfügen, das Diagramm im Browser darstellen und als PNG oder SVG herunterladen. Text, Pfeile und Gruppen bleiben in einem Bild zusammen, das sich auch ohne Codeeditor teilen lässt.

Starten Sie mit bis zu 150 kostenlosen Credits|Keine Kreditkarte erforderlich

Mit einer Einladung erhalten Sie am ersten Tag bis zu 350 kostenlose Credits.

3 Abbildungs-Engines · 500+ VorlagenJede Beschriftung editierbar · 60+ FarboptionenEditierbares PPTX · Geschichtetes SVG · 8K PNG / JPG

Mermaid in PNG und SVG umwandeln

Fügen Sie unterstützten Mermaid-Quelltext ein, etwa für ein Fluss- oder Sequenzdiagramm. Darstellung und Export erfolgen lokal im Browser.

Mermaid-Quelltext

ExporthintergrundPNG-Ausgabeskalierung

Maximal 20.000 Quelltextzeichen, 150 Verbindungen und 4096 Pixel pro Diagrammseite. PNGs verwenden die gewählte Skalierung bis zu einer längsten Seite von 8192 Pixeln. Die Darstellung erfolgt in diesem Browser.

Mermaid kostenlos in PNG umwandeln— Vorlagen & Beispiele

Aktualisiert 2026-10-19

Werkzeuge für Mermaid-Diagramme

Mermaid kostenlos in PNG umwandeln

Name: SciFig
Author: SciFig

Verwandle Diagrammcode in ein klares Bild mit passendem Hintergrund und gewünschter Ausgabeskalierung.

Die Umwandlung von Mermaid in PNG erstellt aus textbasiertem Diagrammcode ein Rasterbild für Dokumente und Präsentationen. Mermaid-Code einfügen, das Diagramm im Browser darstellen und als PNG oder SVG herunterladen. Text, Pfeile und Gruppen bleiben in einem Bild zusammen, das sich auch ohne Codeeditor teilen lässt.

Mermaid-Diagramm erstellen

Mermaid-Flussdiagramm von der Forschungsfrage über Experiment und Analyse zur wissenschaftlichen Abbildung

Diagrammcode einfügen
Ausgabeskalierung wählen
Transparenten Hintergrund nutzen
Dargestelltes SVG exportieren

Funktionen des Mermaid-Konverters

Verwandle Diagrammcode in ein klares Bild mit passendem Hintergrund und gewünschter Ausgabeskalierung.

Diagramme aus Mermaid-Code darstellen

Beginnen Sie mit vorhandenem Diagrammcode. SciFig stellt Knoten, Beziehungen und Beschriftungen als Vorschau dar. Das Bild folgt dem Quelltext und behält dessen Struktur bei. Mit einem Fluss-, Sequenz- oder Klassendiagramm wird eine textbasierte Erklärung zur Abbildung für Ihr Dokument.

Diagrammcode einfügen
Verbundene Knoten und Beschriftungen prüfen
Unterdiagramme und Beziehungen beibehalten

Mermaid-Code darstellen

Gut lesbare PNG-Bilder exportieren

Wählen Sie die Ausgabeskalierung passend zur benötigten Größe in Dokument oder Präsentation. PNG eignet sich für Ziele, die Bilder akzeptieren, aber Mermaid nicht ausführen. Geometrie und Text werden gemeinsam gespeichert, damit die Aussage auch beim Teilen mit anderen erhalten bleibt.

Ausgabeskalierung wählen
Das vollständige Diagramm erhalten
Rasterbilder in Präsentationen nutzen

PNG vorbereiten

Einen Hintergrund für das Diagramm wählen

Ein transparenter Export lässt sich auf farbige Folien legen; ein weißer Hintergrund gibt dem Bild eine eigene Fläche. Wählen Sie die Variante passend zum Einsatzort. SciFig übernimmt den gewählten Hintergrund in die Ausgabe und behält Struktur und Inhalt des Diagramms bei.

Transparenten Hintergrund nutzen
Weißen Hintergrund wählen
Ergebnis auf einer Folie platzieren

Hintergrund festlegen

Zusätzlich zu PNG eine Vektorversion aufbewahren

Laden Sie SVG herunter, wenn Sie ein skalierbares Diagramm benötigen. Die Vektordatei erhält Linien und Text, während PNG als Bild für alltägliche Dokumente dient. Beide Ausgaben stammen aus demselben dargestellten Mermaid-Quelltext. So können Sie ein teilbares Bild zusammen mit dem zugehörigen Code aufbewahren.

Dargestelltes SVG exportieren
Vektorlinien erhalten
Code und Ausgabe gemeinsam verwalten

Mermaid-Diagramm exportieren

Diagramm erstellen

Bereiten Sie ein Mermaid-Diagramm mit den Werkzeugen auf dieser Seite vor und laden Sie das Ergebnis herunter.

Mermaid-Quelltext einfügen
Öffnen Sie den Konverter und fügen Sie den Diagrammcode ein. Beginnen Sie mit einem unterstützten Fluss-, Sequenz- oder Klassendiagramm. Nehmen Sie die Beschriftungen und Beziehungen auf, die im fertigen Bild erscheinen sollen; diese Anweisungen bestimmen die dargestellte Struktur.
Diagramm darstellen
Starten Sie die Vorschau, um Knoten, Gruppen und Verbindungen aus dem Code zu sehen. Bei einem Syntaxfehler prüfen Sie die angezeigte Meldung und den Quelltext, korrigieren den Code und starten die Darstellung erneut.
Hintergrund und Skalierung wählen
Wählen Sie Hintergrund und Ausgabeskalierung passend zum Ziel. Transparenz eignet sich für farbige Folien, Weiß für ein eigenständiges Bild. Eine höhere PNG-Skalierung liefert mehr Pixel für Beschriftungen bei gleichbleibenden Proportionen.
PNG oder SVG herunterladen
Laden Sie PNG für Präsentationen, Berichte oder Dokumente herunter. SVG liefert eine Vektorkopie desselben Diagramms. Bewahren Sie den Mermaid-Quelltext zusammen mit den exportierten Dateien auf, um spätere Strukturänderungen am ursprünglichen Code vorzunehmen.

Einsatzmöglichkeiten für Mermaid-Diagramme

Verbinden Sie die Erklärung in Ihrem Material mit einem beschrifteten, sichtbaren Diagramm.

Einen Ablauf in einen Bericht einfügen

Ein Methodenbericht enthält möglicherweise einen in Mermaid beschriebenen Prozess. Wandeln Sie den Quelltext in PNG um, damit Leser die Entscheidungspunkte ohne Codeeditor sehen. Bewahren Sie das Diagramm zusammen mit dem Dokument auf und erstellen Sie es neu, wenn sich der Ablauf ändert.

Dieses Beispiel ansehen

Mermaid-Sequenzdiagramm: Eine forschende Person fügt Quelltext ein, prüft die Vorschau und exportiert PNG

Eine Sequenz mit anderen teilen

Ein Sequenzdiagramm zeigt, welcher Beteiligte welche Nachricht sendet. Stellen Sie den Code dar und exportieren Sie die vollständige Interaktion für eine Teambesprechung. Ein statisches Bild macht die Reihenfolge auch in Präsentationen und Besprechungsunterlagen ohne Mermaid-Integration sichtbar.

Dieses Beispiel ansehen

Mermaid-Klassendiagramm mit den Feldern, Methoden und Beziehungen von Experiment und Figure

Klassenbeziehungen dokumentieren

Ein technischer Anhang braucht manchmal ein Klassendiagramm statt eines Screenshots des Quelltexts. Stellen Sie Beziehungen, Beschriftungen und Bereiche aus Mermaid dar. Exportieren Sie SVG für eine skalierbare Abbildung oder PNG für Dokumente mit Rasterbildern.

Dieses Beispiel ansehen

Mermaid-Flussdiagramm mit Quelltext, einem Schritt für transparentes PNG und Folienhintergrund

Ein Diagramm auf eine Folie abstimmen

Platzieren Sie ein transparentes PNG auf dem Folienhintergrund und behalten Sie Beschriftungen und Pfeile bei. Wenn das Diagramm viel Platz einnimmt, wählen Sie eine höhere Ausgabeskalierung. Strukturelle Änderungen erfolgen weiterhin im Originalcode, bevor Sie das nächste Bild erstellen.

Dieses Beispiel ansehen

Mermaid-Ablauf mit einer Untergruppe zur Probenvorbereitung sowie anschließender Messung und Vergleich

Zusammengehörige Phasen erklären

Unterdiagramme zeigen zusammengehörige Schritte innerhalb eines größeren Ablaufs. Exportieren Sie Gruppengrenzen und vollständige Beschriftungen, damit Leser einzelne Schritte vom Gesamtprozess unterscheiden können. Das hilft bei Verfahren mit mehreren beteiligten Teams.

Dieses Beispiel ansehen

Eine portable Projektabbildung aufbewahren

Speichern Sie Mermaid-Quelltext, PNG und SVG gemeinsam im Projektordner. Das Bild eignet sich zum täglichen Teilen, während der Code die Beziehungen knapp dokumentiert. Für ein neues Prozessdiagramm aus einer Beschreibung können Sie SciFig FlowChart verwenden.

Dieses Beispiel ansehen

So nutzen Forschende SciFig

Unser Methodendokument enthielt einen Workflow, der in einer Mermaid-Datei lag. Ich wandelte Mermaid in PNG um, damit dieselben Entscheidungspunkte ohne weiteren Editor im Bericht erscheinen konnten. Der Code blieb bei der exportierten Abbildung. So wusste unsere Gruppe, wo sie den Prozess ändern musste, wenn das Protokoll weiterentwickelt wurde.

Lena W.

Forschungssoftware-Ingenieurin, Universität Cambridge

Das Sequenzdiagramm in meinen Projektnotizen sollte auch auf einer Präsentationsfolie funktionieren. Der Mermaid-zu-PNG-Konverter von SciFig hielt Beteiligte und Nachrichten zusammen. Ich wählte eine höhere Ausgabeskalierung für die Folie und behielt den Quelltext. Dadurch blieb der Zusammenhang zwischen den Notizen und der Abbildung klar.

Owen P.

Doktorand in computergestützter Biologie, Universität Oxford

Für ein Arbeitsblatt sollten die Studierenden zunächst die gruppierten Phasen sehen, statt zuerst den Diagrammcode zu lesen. Die Umwandlung von Mermaid in PNG bewahrte Unterdiagramme und Beschriftungen in einem Bild. Ich stellte die Abbildung neben den Code, damit wir besprechen konnten, wie jede Anweisung den sichtbaren Ablauf veränderte.

Camille R.

Dozentin für wissenschaftliches Rechnen, Sorbonne Université

Mein Diagramm musste sowohl in einen Bericht als auch in ein Posterlayout passen. Die Option Mermaid zu SVG lieferte mir eine Vektorkopie des dargestellten Quelltexts, zusätzlich zum PNG für die tägliche Weitergabe. Weil ich beide Ausgaben zusammen aufbewahrte, konnte ich die passende Datei wählen, ohne die Beziehungen zwischen den Knoten zu verändern.

Nora S.

Analystin für Forschungsdatensysteme, Universität Amsterdam

Ich erklärte ein Klassendiagramm und wollte, dass dessen Text auch außerhalb der Entwicklungsumgebung klar lesbar blieb. Mit SciFig konnte ich das Mermaid-Diagramm in passender Skalierung als PNG exportieren. Ich behielt die gesamte Abbildung statt eines zugeschnittenen Editor-Screenshots, damit das Arbeitsblatt alle besprochenen Verbindungen enthielt.

Julian A.

Dozent für Informatik, Universität Southampton

Kostenlose Tools

Ein Tool für jede wissenschaftliche Abbildung

120 spezialisierte Generatoren für die wissenschaftliche Abbildung, die Sie brauchen — jeder öffnet sich im passenden Arbeitsbereich mit einem Beispiel.

Illustrationen, Strukturen und Konzeptdiagramme

60 Tools