Es gibt drei Möglichkeiten, ein Mermaid-Diagramm in WordPress einzufügen: ein Block-Editor-Plugin wie MerPress, ein Shortcode-Plugin wie WP Meerjungfrau, oder Sie verzichten ganz auf Plugins und exportieren ein statisches Bild aus dem Mermaid Live Editor. Für welche Variante Sie sich entscheiden, hängt von Ihrem Editor ab und davon, wie oft sich das Diagramm ändern wird.
Mit Mermaid selbst können Sie Diagramme als einfachen Text – also mit wenigen Zeilen einfacher Syntax – erstellen und diese anschließend als übersichtliche Flussdiagramme, Sequenzdiagramme oder Gantt-Diagramme darstellen lassen. Im Folgenden gehe ich auf die einzelnen Möglichkeiten ein, mit einem Live-Beispiel und einem ehrlichen Hinweis darauf, wann ein Plugin überflüssig ist.
Wichtigste Erkenntnisse
- Mermaid wandelt Klartext-Syntax in Diagramme um, sodass Sie ein Flussdiagramm durch Bearbeiten des Textes bearbeiten können und nicht, indem Sie ein Bild neu zeichnen.
- MerPress Das ist die Standard-Blockroute: Sie fügt einen Block hinzu, den man durch Eingabe von
/MermaidJSim Block-Editor, und das Diagramm wird während des Erstellens in Echtzeit in der Vorschau angezeigt. - WP Meerjungfrau So geht’s mit dem Shortcode: Fügen Sie den Mermaid-Code in einen Code-Block ein oder umschließen Sie ihn mit
[Meerjungfrau]Tags für den klassischen Editor und Seitenersteller. - Die Diagramme werden im Browser des Besuchers aus Ihrem Text gerendert, wodurch sie weiterhin bearbeitbar bleiben, das Mermaid-Skript jedoch auf diesen Seiten geladen wird.
- Für ein einmaliges Diagramm, das Sie nie wieder bearbeiten werden, exportieren Sie einfach eine SVG- oder PNG-Datei aus dem Mermaid Live Editor – ganz ohne Plugin.
Was ist Mermaid und warum sollte man es in WordPress verwenden?
Mermaid ist ein Diagramm-Tool, das eine Markdown-ähnliche Syntax auswertet und das Diagramm für Sie erstellt. Anstatt in einem Design-Tool Kästchen hin und her zu ziehen, beschreiben Sie die Struktur in Textform (zum Beispiel: A verweist auf B, B verweist auf C) und Mermaid erstellt daraus das Diagramm. Es unterstützt Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme und vieles mehr.
Der Grund, warum sich die Verwendung innerhalb von WordPress lohnt, ist die Bearbeitbarkeit. Ein als Bild gespeichertes Diagramm ist festgeschrieben; um einen Schritt zu ändern, muss man das Design-Tool erneut öffnen und den Export wiederholen. Ein Mermaid-Diagramm ist lediglich Text in Ihrem Beitrag, sodass die Aktualisierung so schnell geht wie das Bearbeiten eines Satzes – was bei Prozessabläufen oder Inhaltsstrukturen, die sich im Laufe der Zeit ändern, von großer Bedeutung ist.
Welches Mermaid-Plugin sollten Sie in WordPress verwenden?
Wählen Sie das Plugin aus, mit dem Sie tatsächlich arbeiten. Beide Plugins sind kostenlos und auf WordPress.org verfügbar, und sie lösen dasselbe Problem auf unterschiedliche Weise.
| Route | So fügen Sie das Diagramm ein | Am besten geeignet für |
|---|---|---|
| MerPress (Block-Plugin) | Typ /MermaidJS im Block-Editor, um den entsprechenden Block einzufügen. Sie geben die Syntax im oberen Bereich ein, und das Diagramm wird während der Eingabe im unteren Bereich dargestellt. | Der Block-Editor und jeder, der das Diagramm während des Schreibens sehen möchte. |
| WP Meerjungfrau (Shortcode-Plugin) | Fügen Sie den Mermaid-Code in einen Code-Block ein oder umschließen Sie ihn mit [Meerjungfrau] … [/Meerjungfrau] für den klassischen Editor oder das Shortcode-Element eines Page Builders. Quelle: terrylinooo/wp-mermaid. | Der klassische Editor, Page-Builder und alle Websites, die noch mit einer WordPress-Version unter 5.0 laufen, bei denen der Shortcode die einzige Option ist. |
| Kein Plugin: Mermaid Live Editor | Erstellen Sie das Diagramm im kostenlosen Mermaid Live Editor, exportieren Sie es als SVG- oder PNG-Datei und fügen Sie es wie ein normales Bild ein. | Ein einzelnes Diagramm, das Sie selten oder gar nicht bearbeiten werden. |
So fügen Sie Schritt für Schritt ein Mermaid-Diagramm in WordPress ein
Schritt 1: Ein Mermaid-Plugin installieren
WordPress rendert Mermaid nicht von sich aus, daher benötigen Sie ein Plugin, das die Mermaid-Bibliothek lädt und die Markups verarbeitet. Gehen Sie in Ihrem Dashboard zu Plugins > Neu hinzufügen, dann suche nach MerPress wenn Sie im Block-Editor arbeiten oder WP Meerjungfrau Falls Sie den Shortcode benötigen: Installieren und aktivieren Sie das Plugin.
Schritt 2: Erstellen Sie Ihr Diagramm in der Mermaid-Syntax
Die Mermaid-Syntax ist kurz und übersichtlich. Hier ist ein einfaches Flussdiagramm, das ein Hauptthema in seine einzelnen Bestandteile aufschlüsselt:
graph TD
A[Fitness] --> B[Krafttraining]
A --> C[Ausdauertraining]
A --> D[Ernährung]
B --> E[Gewichtheben]
C --> F[Laufen]
D --> G[Ernährungsplanung]In der ersten Zeile werden der Diagrammtyp und die Richtung festgelegt (graph TD bedeutet ein Top-Down-Flussdiagramm), und jede Pfeillinie stellt eine Verbindung dar. Vertauschen TD für LR um es von links nach rechts anzuordnen; das vollständige Dokumentation über die Meerjungfrau enthält die Syntax für jeden Diagrammtyp.
Schritt 3: Fügen Sie es im Block-Editor (Gutenberg) ein
Mit MerPress, Geben Sie Folgendes ein: /MermaidJS Wählen Sie die Stelle aus, an der das Diagramm erscheinen soll, und wählen Sie den entsprechenden Block aus. Geben Sie die Syntax im oberen Bereich ein, und das Diagramm wird während der Eingabe automatisch darunter gezeichnet; solange der Block nicht ausgewählt ist, wird es genau so angezeigt, wie es den Besuchern erscheinen wird. Solange die Syntax nicht gültig ist, wird in der Vorschau ein Syntaxfehler angezeigt – das Plugin informiert Sie also offen darüber, anstatt stillschweigend zu scheitern.
Mit WP Meerjungfrau Fügen Sie stattdessen ein einfaches Code Markieren Sie den Mermaid-Code und fügen Sie ihn dort ein. Das Plugin erkennt den Code-Block und rendert das Diagramm auf der Benutzeroberfläche, sodass das, was im Editor wie reiner Text aussieht, auf der Live-Seite als gezeichnetes Diagramm angezeigt wird.
Schritt 4: Fügen Sie es im klassischen Editor oder in einem Page-Builder ein
Außerhalb des Block-Editors verwenden Sie den Shortcode von WP Mermaid. Umschließen Sie Ihren Mermaid-Code mit den Shortcode-Tags, und er wird auf dieselbe Weise dargestellt:
[mermaid] Graph TD; A[Start] --> B[End]; [/mermaid]Fügen Sie in einem Page Builder ein Shortcode-Element (oder ein Shortcode-Widget) ein und fügen Sie denselben Text ein. Dies ist auch die einzige Möglichkeit bei allen WordPress-Versionen unter 5.0, bei denen es noch keinen Block-Editor gibt.
Wie dieses Diagramm aussieht
Hier ist das Flussdiagramm aus Schritt 2, das ich für Sie aufgezeichnet habe, damit Sie sehen können, wie der Text der Form zugeordnet ist:
Diagramme wie dieses eignen sich gut, um Strukturen visuell darzustellen, und genau deshalb eignen sie sich für die Inhaltsplanung, wie zum Beispiel bei einer Thematische Karte für SEO, wo sich ein Hauptthema in verschiedene Cluster verzweigt.
Plugin oder statisches Bild: Was sollten Sie verwenden?
Ein wichtiger Kompromiss, den Sie beachten sollten, ist, dass Mermaid clientseitig im Browser des Besuchers gerendert wird. Daher wird auf jeder Seite, die ein Diagramm enthält, das Mermaid-Skript geladen, um dieses zu zeichnen. Auf einigen wenigen Seiten ist das kein Grund zur Sorge, aber es ist ein wichtiger Aspekt, den Sie berücksichtigen sollten, wenn Sie strenge Vorgaben hinsichtlich des Ladens von Skripten haben.
Das ergibt eine einfache Faustregel: Wenn Sie häufig Diagramme veröffentlichen und diese bearbeitbar sein sollen, ist ein Plugin eindeutig das richtige Werkzeug. Wenn du nur ein einziges Diagramm benötigst, das du kaum noch bearbeiten wirst, erstelle es im kostenlosen Mermaid Live Editor, exportiere es als SVG oder PNG und füge das Bild ein – ganz ohne Plugin. Beide Vorgehensweisen sind sinnvoll; entscheide dich je nachdem, wie oft sich das Diagramm ändern wird.
Ist das Mermaid-Plugin also die richtige Wahl, um Diagramme einzufügen?
Wäre dies meine Website und würde ich den Block-Editor verwenden, würde ich zu MerPress greifen, denn wenn man sieht, wie das Diagramm während des Schreibens der Syntax gerendert wird, entfällt das Rätselraten, und da die Diagramme als bearbeitbarer Text vorliegen, spart man im Vergleich zum Neuzeichnen von Bildern echte Zeit. Wenn ich eine ältere Website mit dem klassischen Editor oder einem Page-Builder betreuen würde, wären WP Mermaid und sein Shortcode die richtige Wahl.
Das einzige Mal, bei dem ich beides weglassen würde, ist ein echter Einzelfall: ein einzelnes Diagramm, das ich nie bearbeiten werde, bei dem das Exportieren eines statischen Bildes die Website ein wenig schlanker hält. In allen anderen Fällen ist der geringe Aufwand für die clientseitige Darstellung ein fairer Preis für Diagramme, die man mit einem Satz aktualisieren kann.
Änderungsprotokolle
12. Juli 2026
- Der Leitfaden wurde erweitert, sodass nun alle drei tatsächlichen Routen abgedeckt sind, anstatt nur ein Plugin: MerPress für den Block-Editor (mit seinen
/MermaidJS(Block- und Live-Vorschau), WP Mermaid für Shortcodes und ältere Websites sowie einen plugin-freien statischen Export. Es wurden eine Vergleichstabelle und eine klarere Empfehlung für jeden Editor hinzugefügt.
28. Juni 2026
- Die Anleitung wurde überarbeitet und enthält nun klarere Anweisungen zu Blöcken und Shortcodes, ein übersichtlicheres Beispiel sowie Hinweise dazu, wann das Plugin und wann ein statisch exportiertes Bild verwendet werden sollte.
Möchtest du, dass unsere Beiträge öfter bei Google erscheinen?
Ein Schritt – und Google zeigt diese Seite in Ihren „Top Stories“ an.
