{"id":3409,"date":"2024-09-08T03:11:19","date_gmt":"2024-09-08T03:11:19","guid":{"rendered":"https:\/\/wpconsults.com\/?p=3409"},"modified":"2026-07-18T23:01:28","modified_gmt":"2026-07-19T04:01:28","slug":"meerjungfrauen-diagramm-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpconsults.com\/de\/mermaid-diagram-in-wordpress\/","title":{"rendered":"Wie man ein Meerjungfrauen-Diagramm in einem WordPress-Post oder einer Seite anzeigt"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">There are three ways to put a Mermaid diagram in WordPress: a block-editor plugin like <strong>MerPress<\/strong>, a shortcode plugin like <strong>WP Mermaid<\/strong>, or skipping plugins entirely and exporting a static image from the Mermaid Live Editor. Which one you want depends on your editor and on how often the diagram will change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mermaid itself lets you write diagrams as plain text, a few lines of simple syntax, and have them render as clean flowcharts, sequence diagrams, or Gantt charts. Below I walk through each route, with a live example and an honest note on when a plugin is overkill.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-takeaways is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Key Takeaways<\/h3>\n<ul class=\"wp-block-list\">\n<li>Mermaid turns plain-text syntax into diagrams, so you edit a flowchart by editing text, not by redrawing an image.<\/li>\n<li><strong>MerPress<\/strong> is the native block route: it adds one block, you open it by typing <code>\/MermaidJS<\/code> in the block editor, and it previews the diagram live while you write it.<\/li>\n<li><strong>WP Mermaid<\/strong> is the shortcode route: paste Mermaid code into a Code block, or wrap it in <code>[mermaid]<\/code> tags for the classic editor and page builders.<\/li>\n<li>Diagrams render in the visitor&#8217;s browser from your text, which keeps them editable but loads the Mermaid script on those pages.<\/li>\n<li>For a one-off diagram you will never touch again, export an SVG or PNG from the Mermaid Live Editor and add no plugin at all.<\/li>\n<\/ul>\n<\/div>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:15px 15px 0px 0px rgba(160, 152, 255, 0.31);}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-contents-title{font-weight:600;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette4, #2D3748);font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:var(--global-palette1, #3182CE);}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry{color:var(--global-palette1, #3182CE);}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}<\/style>\n\n\n<h2 class=\"wp-block-heading\">What Mermaid is, and why use it in WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mermaid is a diagramming tool that reads a markdown-like syntax and draws the diagram for you. Instead of dragging boxes around in a design tool, you describe the structure in text (for example, A points to B, B points to C) and Mermaid lays it out. It supports flowcharts, sequence diagrams, Gantt charts, class diagrams, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The reason it is worth using inside WordPress is editability. A diagram saved as an image is frozen; changing one step means reopening a design tool and re-exporting. A Mermaid diagram is just text in your post, so updating it is as quick as editing a sentence, which matters a lot for process flows or content structures that change over time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Which Mermaid plugin should you use in WordPress?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pick by the editor you actually work in. Both plugins are free and on WordPress.org, and they solve the same problem from opposite ends.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Route<\/th><th>How you add the diagram<\/th><th>Best for<\/th><\/tr><\/thead><tbody>\n<tr><td><a href=\"https:\/\/wordpress.org\/plugins\/merpress\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>MerPress<\/strong><\/a> (block plugin)<\/td><td>Type <code>\/MermaidJS<\/code> in the block editor to insert its block. You write the syntax in the upper pane and the diagram renders in the lower pane as you type.<\/td><td>The block editor, and anyone who wants to see the diagram while writing it.<\/td><\/tr>\n<tr><td><a href=\"https:\/\/wordpress.org\/plugins\/wp-mermaid\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>WP Mermaid<\/strong><\/a> (shortcode plugin)<\/td><td>Paste Mermaid code into a Code block, or wrap it in <code>[mermaid] ... [\/mermaid]<\/code> for the classic editor or a page builder&#8217;s Shortcode element. Source: <a href=\"https:\/\/github.com\/terrylinooo\/wp-mermaid\" rel=\"nofollow noopener\" target=\"_blank\">terrylinooo\/wp-mermaid<\/a>.<\/td><td>The classic editor, page builders, and any site still on WordPress below 5.0, where the shortcode is the only option.<\/td><\/tr>\n<tr><td><strong>No plugin:<\/strong> Mermaid Live Editor<\/td><td>Build the diagram at the free Mermaid Live Editor, export an SVG or PNG, and place it as a normal image.<\/td><td>A single diagram you will rarely or never edit.<\/td><\/tr>\n<\/tbody><\/table><figcaption class=\"wp-element-caption\">The three real routes to a Mermaid diagram in WordPress, and the editor each one suits.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to add a Mermaid diagram in WordPress, step by step<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install a Mermaid plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress does not render Mermaid on its own, so you need a plugin that loads the Mermaid library and handles the markup. From your dashboard, go to <strong>Plugins &gt; Add New<\/strong>, then search for <strong>MerPress<\/strong> if you work in the block editor, or <a href=\"https:\/\/wordpress.org\/plugins\/wp-mermaid\/\" rel=\"nofollow noopener\" target=\"_blank\">WP Mermaid<\/a> if you need the shortcode. Install and activate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Write your diagram in Mermaid syntax<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mermaid syntax is short and readable. Here is a basic flowchart that maps a main topic down to its parts:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>graph TD\n    A[Fitness] --> B[Strength Training]\n    A --> C[Cardio]\n    A --> D[Nutrition]\n    B --> E[Weightlifting]\n    C --> F[Running]\n    D --> G[Meal Planning]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The first line sets the diagram type and direction (<code>graph TD<\/code> means a top-down flowchart), and each arrow line draws a connection. Swap <code>TD<\/code> for <code>LR<\/code> to lay it out left to right; the full <a href=\"https:\/\/mermaid.js.org\/intro\/\" rel=\"nofollow noopener\" target=\"_blank\">Mermaid documentation<\/a> has the syntax for every diagram type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add it in the block editor (Gutenberg)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With <strong>MerPress<\/strong>, type <code>\/MermaidJS<\/code> where you want the diagram and pick its block. Write the syntax in the top area and the diagram draws itself underneath as you type; while the block is unselected it displays exactly as visitors will see it. Until the syntax is valid you will see a syntax error in the preview, which is the plugin telling you the truth rather than failing silently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With <strong>WP Mermaid<\/strong> instead, add a plain <strong>Code<\/strong> block and paste the Mermaid syntax into it. The plugin picks up the code block and renders the diagram on the front end, so what looks like plain text in the editor becomes a drawn chart on the live page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Add it in the classic editor or a page builder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Outside the block editor, use WP Mermaid&#8217;s shortcode. Wrap your Mermaid code in the shortcode tags and it renders the same way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[mermaid] graph TD; A[Start] --> B[End]; [\/mermaid]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In a page builder, drop in a Shortcode element (or a shortcode widget) and paste the same thing. This is also the only route on any WordPress version below 5.0, where the block editor does not exist.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What that diagram looks like<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the flowchart from Step 2, drawn out so you can see how the text maps to the shape:<\/p>\n\n\n\n<figure class=\"svg-chart-graph\">\n<svg viewBox=\"0 0 760 340\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Flowchart with Fitness branching into Strength Training, Cardio, and Nutrition, each with a sub-step\">\n<defs><marker id=\"arr-tip\" markerWidth=\"8\" markerHeight=\"8\" refX=\"6\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L7,3 L0,6 z\" fill=\"context-stroke\"\/><\/marker><\/defs>\n<rect class=\"live\" x=\"310\" y=\"20\" width=\"140\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl on-dark\" x=\"380\" y=\"48\" text-anchor=\"middle\">Fitness<\/text>\n<rect class=\"box\" x=\"20\" y=\"140\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"110\" y=\"168\" text-anchor=\"middle\">Strength Training<\/text>\n<rect class=\"box\" x=\"290\" y=\"140\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"380\" y=\"168\" text-anchor=\"middle\">Cardio<\/text>\n<rect class=\"box\" x=\"560\" y=\"140\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"650\" y=\"168\" text-anchor=\"middle\">Nutrition<\/text>\n<rect class=\"box\" x=\"20\" y=\"260\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"110\" y=\"288\" text-anchor=\"middle\">Weightlifting<\/text>\n<rect class=\"box\" x=\"290\" y=\"260\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"380\" y=\"288\" text-anchor=\"middle\">Running<\/text>\n<rect class=\"box\" x=\"560\" y=\"260\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"650\" y=\"288\" text-anchor=\"middle\">Meal Planning<\/text>\n<line class=\"arr-accent\" x1=\"380\" y1=\"66\" x2=\"115\" y2=\"138\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"380\" y1=\"66\" x2=\"380\" y2=\"138\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"380\" y1=\"66\" x2=\"645\" y2=\"138\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"110\" y1=\"186\" x2=\"110\" y2=\"258\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"380\" y1=\"186\" x2=\"380\" y2=\"258\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"650\" y1=\"186\" x2=\"650\" y2=\"258\" marker-end=\"url(#arr-tip)\"\/>\n<\/svg>\n<figcaption>The Step 2 Mermaid code shown as the flowchart it produces, with Fitness branching into three areas, each leading to a sub-step.<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Diagrams like this are handy for showing structure visually, which is exactly why they fit content-planning work such as a <a href=\"https:\/\/wpconsults.com\/topical-map-seo-guide\/\" target=\"_blank\" rel=\"noopener nofollow\">topical map for SEO<\/a>, where a pillar topic branches into clusters.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin or static image: which should you use?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The one trade-off worth knowing is that Mermaid renders client-side, in the visitor&#8217;s browser, so any page with a diagram loads the Mermaid script to draw it. On a handful of pages that is nothing to worry about, but it is a real consideration if you are strict about script load.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That gives a simple rule of thumb. If you publish diagrams often and want them editable, a plugin is clearly the right tool. If you just need a single diagram you will rarely touch, build it in the free Mermaid Live Editor, export it as an SVG or PNG, and place that image, no plugin required. Both are valid; pick by how often the diagram will change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">So, is the Mermaid plugin the right way to add diagrams?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If this were my site and I were on the block editor, I would reach for MerPress, because seeing the diagram render while you write the syntax removes the guesswork, and keeping diagrams as editable text saves real time over redrawing images. If I were maintaining an older site on the classic editor or a page builder, WP Mermaid and its shortcode is the one that actually fits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The only time I would skip both is a true one-off: a single chart I will never edit, where exporting a static image keeps the site that bit leaner. For everything else, the small client-side render cost is a fair price for diagrams you can update in a sentence.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-changelog is-layout-flow wp-block-group-is-layout-flow\" id=\"article-update-logs\">\n<h2 class=\"wp-block-heading\">Update Logs<\/h2>\n<p class=\"wp-block-paragraph\"><strong>12 Jul 2026<\/strong><\/p>\n<ul class=\"wp-block-list\"><li>Widened the guide to cover all three real routes rather than one plugin: MerPress for the block editor (with its <code>\/MermaidJS<\/code> block and live preview), WP Mermaid for the shortcode and older sites, and a plugin-free static export. Added a comparison table and a clearer recommendation for each editor.<\/li><\/ul>\n<p class=\"wp-block-paragraph\"><strong>28 Jun 2026<\/strong><\/p>\n<ul class=\"wp-block-list\"><li>Refreshed the walkthrough with clearer block and shortcode steps, a cleaner rendered example, and guidance on when to use the plugin versus a static exported image.<\/li><\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Erfahren Sie, wie Sie ein Mermaid-Diagramm in WordPress einf\u00fcgen und Flussdiagramme sowie Diagramme aus reinem Text im Block-Editor, im klassischen Editor oder in einem Page-Builder darstellen k\u00f6nnen.<\/p>","protected":false},"author":1,"featured_media":7281,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kb_optimizer_status":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","rank_math_title":"How to Add a Mermaid Diagram in WordPress (Guide)","rank_math_description":"Add a Mermaid diagram in WordPress: render flowcharts from plain text in the block editor, classic editor, or page builder, plus when to skip the plugin.","rank_math_focus_keyword":"Mermaid Diagram in WordPress","_colophon_preset":"regular","_colophon_fc_on":"","_colophon_edited_on":"","_colophon_editor_on":"","_colophon_editor_id":0,"_colophon_editor_name":"","_wpc_translation_mode":"keep","_wpc_translation_visited":"2026-07-21 08:33 UTC (backfill)","_wpc_keep_translation":false,"_wpc_lastmod":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-3409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tips-tutorials"],"_links":{"self":[{"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/posts\/3409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/comments?post=3409"}],"version-history":[{"count":0,"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/posts\/3409\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/media\/7281"}],"wp:attachment":[{"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/media?parent=3409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/categories?post=3409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wpconsults.com\/de\/wp-json\/wp\/v2\/tags?post=3409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}