So betten Sie Mermaid-Diagramme ein
Manche Tools zeichnen Mermaid aus reinem Text für Sie; andere benötigen ein exportiertes Bild. Hier erfahren Sie, wo es nativ gerendert wird, wie Sie es auf jeder Plattform einbetten und welche Ausweichlösung greift, wenn ein Tool es nicht kann.
- 01
Diagramm erstellen
Öffnen Sie den Editor, schreiben Sie Ihr Mermaid oder fügen Sie es ein und prüfen Sie, ob es so gerendert wird, wie Sie es möchten.
- 02
Quelltext kopieren oder Bild exportieren
Für Plattformen, die Mermaid nativ rendern, kopieren Sie den umschlossenen ```mermaid Markdown-Block. Für alle anderen exportieren Sie ein SVG oder PNG.
- 03
Dort einfügen, wo es hingehört
Fügen Sie den Mermaid-Block in eine native Plattform ein oder ziehen Sie das exportierte Bild in ein Dokument, eine Folie oder eine E-Mail. Behalten Sie den Quelltext in Ihrem Repository, damit er bearbeitbar bleibt.
Wo Mermaid gerendert wird — Plattform für Plattform
| Plattform | Mermaid-Unterstützung | So betten Sie ein |
|---|---|---|
| GitHub | Nativ | Fügen Sie einen umschlossenen ```mermaid Block in jede README, Markdown-Datei, jedes Issue, jeden Pull Request, jede Diskussion oder jedes wiki ein. GitHub zeichnet es automatisch. |
| GitLab | Nativ | Derselbe umschlossene ```mermaid Block funktioniert in Markdown, Issues und Merge Requests auf GitLab.com sowie selbstverwalteten Instanzen. |
| Obsidian | Nativ | Schreiben Sie einen ```mermaid Code-Block in eine beliebige Notiz; Obsidian rendert ihn im Lese- und Live-Vorschau-Modus — ohne Plugin. |
| Notion | Nativ (Code-Block) | Fügen Sie einen /code-Block ein, setzen Sie dessen Sprache auf "Mermaid", fügen Sie den Quelltext ein und nutzen Sie dann die Vorschau-/Split-Ansicht des Blocks, um das Diagramm anzuzeigen. |
| Confluence | Benötigt eine App | Confluence hat kein integriertes Mermaid. Installieren Sie eine Marketplace-App (z. B. ein Mermaid-Makro) und fügen Sie den Quelltext darin ein oder betten Sie ein exportiertes SVG/PNG ein. |
| Ihre eigene Website | Nativ (Skript hinzufügen) | Legen Sie den Quelltext in ein "pre"-Tag mit der Klasse "mermaid" und laden Sie mermaid.js von einem CDN — siehe das Snippet unten. Oder betten Sie ein exportiertes SVG für null JavaScript ein. |
| Slack, Google Docs, E-Mail, PDF | Bild exportieren | Diese rendern Mermaid nicht. Exportieren Sie ein SVG (gestochen scharf in jeder Größe) oder PNG aus dem Editor und fügen Sie dieses Bild ein. |
Plattform-Funktionen ändern sich — überprüfen Sie es in Ihrem eigenen Konto, insbesondere bei Notion-Vorschauen und Confluence-Apps. "Nativ" bedeutet, dass das Diagramm aus dem Quelltext gerendert wird, ohne Bild-Upload.
Auf Ihrer eigenen Website einbetten
Fügen Sie den Mermaid-Quelltext in ein "pre"-Element mit der Klasse "mermaid" ein und laden Sie den Renderer von einem CDN. Dies ist die offizielle ESM-Einbettung — kopieren Sie sie unverändert:
<pre class="mermaid">
flowchart TD
A[Start] --> B{OK?}
B -->|Yes| C[Ship]
B -->|No| A
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>Fixieren Sie eine Hauptversion (hier mermaid@11), damit ein künftiges Release Ihre Diagramme nicht unerwartet verändern kann. Für eine statische Seite ohne JavaScript exportieren Sie ein SVG aus dem Editor und referenzieren Sie es stattdessen als Bild.
GitHub README, Schritt für Schritt
GitHub ist das häufigste Ziel. Die vollständige Anleitung — einschließlich der Erklärung, warum ein Block manchmal als Code statt als Diagramm angezeigt wird — finden Sie unter So betten Sie ein Mermaid-Diagramm in eine GitHub README ein.
Erstellen Sie zuerst ein Diagramm: Mermaid-Editor öffnen, fertige Beispiele.
Häufig gestellte Fragen
Welche Plattformen rendern Mermaid ohne Plugin?
GitHub, GitLab und Obsidian rendern umschlossene ```mermaid Blöcke nativ. Notion rendert es in einem Code-Block, der auf die Mermaid-Sprache gesetzt ist, mit seiner Vorschau-Ansicht. Die meisten anderen Tools — Slack, Google Docs, E-Mail — benötigen stattdessen ein exportiertes SVG- oder PNG-Bild.
Wie bette ich ein Mermaid-Diagramm in Notion ein?
Fügen Sie einen Code-Block hinzu (tippen Sie /code), ändern Sie dessen Sprache auf "Mermaid" und fügen Sie Ihren Diagramm-Quelltext ein. Notion zeigt am Block einen Vorschau-/Split-Umschalter, der das Diagramm rendert. Für eine statische Kopie exportieren Sie ein Bild aus dem Editor und betten Sie dieses stattdessen ein.
Wie zeige ich ein Mermaid-Diagramm auf meiner eigenen Website an?
Legen Sie den Quelltext in ein "pre"-Element mit der Klasse "mermaid" und laden Sie mermaid.js von einem CDN mit mermaid.initialize({ startOnLoad: true }). Das Snippet auf dieser Seite ist ein vollständiges, funktionierendes Beispiel. Wenn Sie lieber ganz auf JavaScript verzichten möchten, exportieren Sie ein SVG und verwenden Sie es als Bild.
Sollte ich den Quelltext oder ein exportiertes Bild einbetten?
Wo die Plattform Mermaid rendert (GitHub, GitLab, Obsidian, Ihre eigene Website), betten Sie den Quelltext ein — er bleibt in der Versionsverwaltung bearbeitbar und vergleichbar. Wo nicht, exportieren Sie ein SVG oder PNG. SVG skaliert ohne Unschärfe; PNG eignet sich für Folien.
Unterstützt Confluence Mermaid?
Nicht von Haus aus. Sie benötigen eine Marketplace-App, die ein Mermaid-Makro hinzufügt, oder Sie können ein exportiertes SVG/PNG-Bild einfügen. Fragen Sie Ihren Confluence-Administrator nach der App, die Sie installieren dürfen.