{"id":12633,"date":"2026-04-24T09:50:31","date_gmt":"2026-04-24T09:50:31","guid":{"rendered":"https:\/\/www.wizbrand.com\/tutorials\/?p=12633"},"modified":"2026-04-24T09:50:31","modified_gmt":"2026-04-24T09:50:31","slug":"tutorial-enable-mermaid-diagrams-auto-graph-rendering-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.wizbrand.com\/tutorials\/tutorial-enable-mermaid-diagrams-auto-graph-rendering-in-wordpress\/","title":{"rendered":"Tutorial: Enable Mermaid Diagrams (Auto Graph Rendering) in WordPress"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>This tutorial shows how to enable <strong>Mermaid diagrams<\/strong> in WordPress so that Mermaid code automatically converts into graphs.<\/p>\n\n\n\n<p>Works with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress.org (self-hosted) \u2705<\/li>\n\n\n\n<li>Gutenberg editor \u2705<\/li>\n\n\n\n<li>Classic editor \u2705<\/li>\n\n\n\n<li>Any theme \u2705<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfaf What You Will Achieve<\/h1>\n\n\n\n<p>After completing this tutorial, you will be able to write:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>graph TD\nA&#91;User] --&gt; B&#91;WordPress]\nB --&gt; C&#91;Mermaid]\nC --&gt; D&#91;Graph]\n<\/code><\/pre>\n\n\n\n<p>And WordPress will automatically render:<\/p>\n\n\n\n<p>\u27a1\ufe0f <strong>Professional diagrams<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Architecture diagrams<\/li>\n\n\n\n<li>Flow diagrams<\/li>\n\n\n\n<li>DevOps diagrams<\/li>\n\n\n\n<li>Monitoring diagrams<\/li>\n\n\n\n<li>System design diagrams<\/li>\n<\/ul>\n\n\n\n<p>Perfect for your <strong>Graphite, Prometheus, Grafana, DevOps labs<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2699\ufe0f Step 1 \u2014 Add Mermaid JavaScript to WordPress<\/h1>\n\n\n\n<p>We load Mermaid from CDN.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method A (Recommended): Using &#8220;Insert Headers and Footers&#8221; Plugin<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Install plugin:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>Dashboard \u2192 Plugins \u2192 Add New\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Search:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>WPCode\n<\/code><\/pre>\n\n\n\n<p>(or <strong>Insert Headers and Footers<\/strong>)<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Install and Activate<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Add Mermaid Script<\/h2>\n\n\n\n<p>Go to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Code Snippets \u2192 Header &amp; Footer\n<\/code><\/pre>\n\n\n\n<p>Paste this in <strong>Footer<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.min.js\"&gt;&lt;\/script&gt;\n\n&lt;script&gt;\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    mermaid.initialize({\n        startOnLoad: true,\n        theme: \"default\"\n    });\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Click:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Save Changes\n<\/code><\/pre>\n\n\n\n<p>\u2705 Mermaid is now enabled globally.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\uddea Step 2 \u2014 Test First Mermaid Diagram<\/h1>\n\n\n\n<p>Open:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Posts \u2192 Add New\n<\/code><\/pre>\n\n\n\n<p>Add:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Custom HTML block\n<\/code><\/pre>\n\n\n\n<p>Paste:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"mermaid\"&gt;\ngraph TD\nA&#91;Start] --&gt; B&#91;Install Mermaid]\nB --&gt; C&#91;Test Diagram]\nC --&gt; D&#91;Success]\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Click:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Preview\n<\/code><\/pre>\n\n\n\n<p>You should now see:<\/p>\n\n\n\n<p>\u27a1\ufe0f <strong>Rendered Diagram<\/strong><\/p>\n\n\n\n<p>Not text.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udcca Step 3 \u2014 Create Real DevOps Diagram<\/h1>\n\n\n\n<p>Example useful for your monitoring labs:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"mermaid\"&gt;\ngraph LR\n\nA&#91;Linux Server]\nB&#91;StatsD]\nC&#91;Carbon]\nD&#91;Graphite]\nE&#91;Grafana]\n\nA --&gt; B\nB --&gt; C\nC --&gt; D\nD --&gt; E\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>This is useful for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Graphite monitoring labs<\/li>\n\n\n\n<li>Grafana architecture diagrams<\/li>\n\n\n\n<li>Linux monitoring tutorials<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfa8 Step 4 \u2014 Enable Auto Conversion for Markdown Mermaid Blocks<\/h1>\n\n\n\n<p>(Optional but powerful)<\/p>\n\n\n\n<p>Add this below the first script:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  var blocks = document.querySelectorAll(\"pre code.language-mermaid\");\n\n  blocks.forEach(function (block) {\n\n    var div = document.createElement(\"div\");\n    div.className = \"mermaid\";\n\n    div.textContent = block.textContent;\n\n    block.parentNode.replaceWith(div);\n\n  });\n\n  mermaid.init();\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Now you can write:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>```mermaid\ngraph TD\nA --&gt; B\nB --&gt; C\n```\n<\/code><\/pre>\n\n\n\n<p>And it will auto-render.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfaf Step 5 \u2014 Create Common DevOps Diagram Templates<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Linux Monitoring Flow<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"mermaid\"&gt;\ngraph TD\n\nNode&#91;Linux Node]\nAgent&#91;Monitoring Agent]\nCollector&#91;Metrics Collector]\nStorage&#91;Time-Series DB]\nDashboard&#91;Grafana]\n\nNode --&gt; Agent\nAgent --&gt; Collector\nCollector --&gt; Storage\nStorage --&gt; Dashboard\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Kubernetes Monitoring Flow<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"mermaid\"&gt;\ngraph LR\n\nPod --&gt; Prometheus\nPrometheus --&gt; Alertmanager\nPrometheus --&gt; Grafana\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CI\/CD Pipeline<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"mermaid\"&gt;\ngraph LR\n\nDev --&gt; Git\nGit --&gt; CI\nCI --&gt; Build\nBuild --&gt; Deploy\nDeploy --&gt; Production\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\uddf0 Step 6 \u2014 Optional Styling (Better Look)<\/h1>\n\n\n\n<p>Add CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.mermaid {\n    background: #ffffff;\n    padding: 20px;\n    border-radius: 10px;\n}\n<\/code><\/pre>\n\n\n\n<p>Add via:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Appearance \u2192 Customize \u2192 Additional CSS\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\uddea Step 7 \u2014 Verify Installation<\/h1>\n\n\n\n<p>Test with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"mermaid\"&gt;\ngraph TD\nTest --&gt; Working\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>If graph renders:<\/p>\n\n\n\n<p>\u2705 Setup successful<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\uddef Troubleshooting<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Diagram Not Rendering?<\/h2>\n\n\n\n<p>Check:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1 \u2014 Script Loaded<\/h3>\n\n\n\n<p>Open browser console:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>F12 \u2192 Console\n<\/code><\/pre>\n\n\n\n<p>Check:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>mermaid is defined\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2 \u2014 Wrong HTML block<\/h3>\n\n\n\n<p>Must use:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Custom HTML\n<\/code><\/pre>\n\n\n\n<p>Not Paragraph block.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3 \u2014 Cache Issue<\/h3>\n\n\n\n<p>Clear:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress cache<\/li>\n\n\n\n<li>CDN cache<\/li>\n\n\n\n<li>Browser cache<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfc6 Best Use Cases for You<\/h1>\n\n\n\n<p>Based on your current work (Grafana, Graphite, monitoring labs), Mermaid is perfect for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Monitoring architecture diagrams<\/li>\n\n\n\n<li>StatsD \u2192 Graphite flows<\/li>\n\n\n\n<li>Grafana pipeline diagrams<\/li>\n\n\n\n<li>Kubernetes monitoring<\/li>\n\n\n\n<li>DevOps tutorials<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 Recommended Next Step<\/h1>\n\n\n\n<p>After enabling Mermaid, create:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Graphite Architecture Diagram<\/li>\n\n\n\n<li>Grafana Dashboard Flow<\/li>\n\n\n\n<li>Prometheus Monitoring Flow<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to enable Mermaid diagrams in WordPress so that Mermaid code automatically converts into graphs. Works with: [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12633","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/posts\/12633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/comments?post=12633"}],"version-history":[{"count":1,"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/posts\/12633\/revisions"}],"predecessor-version":[{"id":12634,"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/posts\/12633\/revisions\/12634"}],"wp:attachment":[{"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/media?parent=12633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/categories?post=12633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wizbrand.com\/tutorials\/wp-json\/wp\/v2\/tags?post=12633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}