Mit Mermaid können Sie Diagramme als einfachen Text – mit nur wenigen Zeilen einfacher Syntax – erstellen und diese als übersichtliche Flussdiagramme, Sequenzdiagramme oder Gantt-Diagramme darstellen lassen. In WordPress steht Ihnen dafür ein kleines Plugin zur Verfügung, sodass Sie Diagramme direkt in einem Beitrag erstellen und bearbeiten können, anstatt Bilder von Hand zu entwerfen.
Hier erfahren Sie, wie Sie dies im Block-Editor, im klassischen Editor und in Page-Buildern einrichten – mit einem Live-Beispiel sowie einem ehrlichen Hinweis darauf, wann ein Plugin die richtige Wahl ist und wann ein statisches Bild einfacher ist.
Wichtigste Erkenntnisse
- Mermaid wandelt Klartext-Syntax in Diagramme um, sodass Sie ein Flussdiagramm bearbeiten können, indem Sie den Text ändern, anstatt ein Bild neu zu zeichnen.
- Die WP Meerjungfrau Das Plugin fügt die Unterstützung hinzu; anschließend fügst du den Mermaid-Code in einen Code-Block ein, einen
[Meerjungfrau]Shortcode oder ein Shortcode-Block. - Die Diagramme werden im Browser aus Ihrem Text gerendert, wodurch sie weiterhin bearbeitbar bleiben, was jedoch zu einer geringen zusätzlichen Skriptlast auf diesen Seiten führt.
- Bei einem einmaligen Diagramm, das Sie nur selten ändern, können Sie durch den Export eines statischen Bildes aus dem Mermaid Live Editor ganz auf die Installation eines Plugins verzichten.
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 genauso schnell geht wie das Bearbeiten eines Satzes – was besonders bei Prozessabläufen oder Inhaltsstrukturen wichtig ist, die sich im Laufe der Zeit ändern.
So fügen Sie Schritt für Schritt ein Mermaid-Diagramm in WordPress ein
Schritt 1: Installieren Sie das WP Mermaid-Plugin
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, suche nach WP Meerjungfrau, dann installieren und aktivieren Sie es. Sobald es aktiviert ist, ermöglicht es die Verwendung der Mermaid-Syntax in Ihren Beiträgen und Seiten.
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 bezeichnet ein Top-Down-Flussdiagramm), und jede Pfeillinie stellt eine Verbindung dar. Sie können TD für LR um es von links nach rechts darzustellen, und dasselbe Prinzip gilt auch für Ablauf- und Gantt-Diagramme; die vollständige Dokumentation über die Meerjungfrau enthält die Syntax für jeden Typ.
Schritt 3: Fügen Sie es im Block-Editor (Gutenberg) ein
Klicken Sie im Block-Editor auf die + Um einen neuen Block hinzuzufügen, wählen Sie die Code Block und fügen Sie dort Ihre Mermaid-Syntax ein. WP Mermaid 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
Wenn Sie den klassischen Editor oder einen Page-Builder verwenden, nutzen Sie stattdessen den Shortcode. Schließen Sie Ihren Mermaid-Code in die Shortcode-Tags ein, und das Plugin rendert ihn auf dieselbe Weise:
[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. Diese Vorgehensweise gilt auch für alle WordPress-Versionen unter 5.0, in denen der Block-Editor noch nicht verfügbar ist.
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 beim Laden von Skripten sehr strenge Vorgaben haben.
Das ist eine einfache Faustregel. Wenn Sie häufig Diagramme veröffentlichen und diese bearbeitbar sein sollen, ist das Plugin eindeutig das richtige Werkzeug. Wenn du nur ein einziges Diagramm benötigst, das du kaum noch bearbeiten wirst, kannst du es im kostenlosen Mermaid Live Editor erstellen, als SVG oder PNG exportieren und das Bild einfügen – 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, würde ich WP Mermaid sofort installieren, sobald ich wüsste, dass ich regelmäßig Diagramme erstellen werde, denn wenn man sie als bearbeitbaren Text speichert, spart man im Vergleich zum Neuzeichnen von Bildern viel Zeit. Der geringe Aufwand für die clientseitige Darstellung ist ein fairer Preis für diese Flexibilität auf einer normalen Content-Website.
Das einzige Mal, dass ich darauf verzichten würde, wäre ein echter Einzelfall: eine einzelne Grafik, die ich nie bearbeiten werde und bei der das Exportieren eines statischen Bildes die Website ein wenig schlanker hält. In allen anderen Fällen ist das Plugin langfristig die sauberere Wahl.
Änderungsprotokolle
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.
Want our posts to show up more often on Google?
One step & Google will surface this site in your Top Stories.
