---

This tutorial shows how to enable Mermaid diagrams in WordPress so that Mermaid code automatically converts into graphs.

Works with:

• WordPress.org (self-hosted) ✅
• Gutenberg editor ✅
• Classic editor ✅
• Any theme ✅

---

🎯 What You Will Achieve

After completing this tutorial, you will be able to write:

graph TD
A[User] --> B[WordPress]
B --> C[Mermaid]
C --> D[Graph]

And WordPress will automatically render:

➡️ Professional diagrams

• Architecture diagrams
• Flow diagrams
• DevOps diagrams
• Monitoring diagrams
• System design diagrams

Perfect for your Graphite, Prometheus, Grafana, DevOps labs.

---

⚙️ Step 1 — Add Mermaid JavaScript to WordPress

We load Mermaid from CDN.

Method A (Recommended): Using “Insert Headers and Footers” Plugin

Install plugin:

1. Go to:

Dashboard → Plugins → Add New

2. Search:

WPCode

(or Insert Headers and Footers)

3. Install and Activate

---

Add Mermaid Script

Go to:

Code Snippets → Header & Footer

Paste this in Footer:

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    mermaid.initialize({
        startOnLoad: true,
        theme: "default"
    });
});
</script>

Click:

Save Changes

✅ Mermaid is now enabled globally.

---

🧪 Step 2 — Test First Mermaid Diagram

Open:

Posts → Add New

Add:

Custom HTML block

Paste:

<div class="mermaid">
graph TD
A[Start] --> B[Install Mermaid]
B --> C[Test Diagram]
C --> D[Success]
</div>

Click:

Preview

You should now see:

➡️ Rendered Diagram

Not text.

---

📊 Step 3 — Create Real DevOps Diagram

Example useful for your monitoring labs:

<div class="mermaid">
graph LR

A[Linux Server]
B[StatsD]
C[Carbon]
D[Graphite]
E[Grafana]

A --> B
B --> C
C --> D
D --> E
</div>

This is useful for:

• Graphite monitoring labs
• Grafana architecture diagrams
• Linux monitoring tutorials

---

🎨 Step 4 — Enable Auto Conversion for Markdown Mermaid Blocks

(Optional but powerful)

Add this below the first script:

<script>
document.addEventListener("DOMContentLoaded", function () {

  var blocks = document.querySelectorAll("pre code.language-mermaid");

  blocks.forEach(function (block) {

    var div = document.createElement("div");
    div.className = "mermaid";

    div.textContent = block.textContent;

    block.parentNode.replaceWith(div);

  });

  mermaid.init();
});
</script>

Now you can write:

```mermaid
graph TD
A --> B
B --> C
```

And it will auto-render.

---

🎯 Step 5 — Create Common DevOps Diagram Templates

Linux Monitoring Flow

<div class="mermaid">
graph TD

Node[Linux Node]
Agent[Monitoring Agent]
Collector[Metrics Collector]
Storage[Time-Series DB]
Dashboard[Grafana]

Node --> Agent
Agent --> Collector
Collector --> Storage
Storage --> Dashboard
</div>

---

Kubernetes Monitoring Flow

<div class="mermaid">
graph LR

Pod --> Prometheus
Prometheus --> Alertmanager
Prometheus --> Grafana
</div>

---

CI/CD Pipeline

<div class="mermaid">
graph LR

Dev --> Git
Git --> CI
CI --> Build
Build --> Deploy
Deploy --> Production
</div>

---

🧰 Step 6 — Optional Styling (Better Look)

Add CSS:

.mermaid {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
}

Add via:

Appearance → Customize → Additional CSS

---

🧪 Step 7 — Verify Installation

Test with:

<div class="mermaid">
graph TD
Test --> Working
</div>

If graph renders:

✅ Setup successful

---

🧯 Troubleshooting

Diagram Not Rendering?

Check:

1 — Script Loaded

Open browser console:

F12 → Console

Check:

mermaid is defined

---

2 — Wrong HTML block

Must use:

Custom HTML

Not Paragraph block.

---

3 — Cache Issue

Clear:

• WordPress cache
• CDN cache
• Browser cache

---

🏆 Best Use Cases for You

Based on your current work (Grafana, Graphite, monitoring labs), Mermaid is perfect for:

• Monitoring architecture diagrams
• StatsD → Graphite flows
• Grafana pipeline diagrams
• Kubernetes monitoring
• DevOps tutorials

---

⭐ Recommended Next Step

After enabling Mermaid, create:

• Graphite Architecture Diagram
• Grafana Dashboard Flow
• Prometheus Monitoring Flow