Tools · Diagramme
Mermaid-Diagramm zu Bild Konverter
Wandle Mermaid-Diagramme direkt im Browser in PNG-, WebP- oder SVG-Bilder um. Erstelle Flowcharts, Sequenzdiagramme, Gantt-Charts und mehr — live ansehen, dann herunterladen oder SVG kopieren.
Beispieldiagramme
Vorschau erscheint hier
Export-Einstellungen
PNG und WebP werden im Browser aus der SVG-Vorschau gerastert. Nutze 2× oder 3× für scharfe Bilder in Docs und Wikis. SVG behält Vektorqualität und transparente Hintergründe.
Was ist Mermaid?
Mermaid ist eine textbasierte Diagrammsprache. Statt Formen per GUI zu ziehen, schreibst du Klartext-Definitionen, die zu SVG-Diagrammen gerendert werden. Weit verbreitet in GitHub-READMEs, Notion, Obsidian, Confluence und Entwickler-Docs, weil Diagramme mit dem Code synchron bleiben und in Versionskontrolle diffbar sind.
| Diagrammtyp | Schlüsselwort | Anwendungsfall |
|---|---|---|
| Flowchart | flowchart TD | Entscheidungsbäume, Server-Join-Flows |
| Sequenz | sequenceDiagram | Vote → Votifier → Belohnungs-Flows |
| Gantt | gantt | Backup- und Neustart-Zeitpläne |
| Zustand | stateDiagram-v2 | Server-Lebenszyklus (gestoppt → online) |
| Klasse / ER | classDiagram / erDiagram | Plugin-Berechtigungen, Datenbankschemas |
| Kreis | pie | Gamemode- oder Spielerverteilung |
Mermaid-Diagramme für Minecraft-Server-Admins
- Netzwerk-Topologie — Hub → Gamemode-Routing für BungeeCord- oder Velocity-Proxies
- Vote-Reward-Pipeline — vom Serverlisten-Vote zur Ingame-Belohnung (mit unserem Votifier-Tester kombinieren)
- Wartungsfenster — Gantt-Charts für Backup- und Neustart-Zeitpläne (siehe auch Cron-Generator)
- Berechtigungsstufen — Klassendiagramme für LuckPerms oder Gruppenvererbung
- Wiki-Einbettungen — PNG oder WebP für MediaWiki, GitBook oder Discord-Pins exportieren
Diagramme synchron halten
Server-Netzwerke, Plugin-Entwickler und Hosting-Teams nutzen Diagramme, um Architektur für Staff und Spieler zu erklären. Schreibe das Diagramm als Text im Repo, exportiere hier ein Bild für Plattformen ohne natives Mermaid-Rendering und halte die Quelle synchron, wenn sich dein Netzwerk ändert. Kombiniere Vote-Flows mit unserem Votifier-Tester und Wartungspläne mit dem Cron-Generator.
PNG vs. WebP vs. SVG — welches Format?
| Format | Am besten für | Hinweise |
|---|---|---|
| PNG | Universelle Kompatibilität | Funktioniert überall — Wikis, Foren, Discord. 2× Skalierung für scharfen Text. |
| WebP | Kleinere Dateigröße im Web | Gut für Seiten und Embeds, wo Ladezeit zählt. |
| SVG | Skalierbare Vektorausgabe | Unendlicher Zoom, bearbeitbar in Inkscape/Figma. Beste für Druck und Docs. |
Häufig gestellte Fragen
Rendert GitHub Mermaid automatisch?
Ja — GitHub rendert Mermaid in Markdown-Codeblöcken. Für Discord, ältere Wikis oder PDF-Exporte ohne Mermaid-Unterstützung erzeuge hier stattdessen ein PNG- oder SVG-Bild.
Warum ist mein exportiertes PNG unscharf?
Erhöhe die Skalierung auf 2× oder 3× vor dem Export. Rasterformate kodieren ein festes Pixelraster — höhere Skalierung liefert mehr Pixel und schärferen Text auf Retina-Displays.
Kann ich Mermaid aus ChatGPT oder Notion einfügen?
Ja. Füge den rohen Mermaid-Quelltext (ohne Markdown-Fences) in den Editor ein. Wenn die Quelle in ```mermaid-Blöcken steckt, entferne die Fence-Zeilen zuerst.