diff --git a/.gitignore b/.gitignore
index 7f45cd8..8118bd2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,6 @@ pnpm-debug.log*
 .env
 .env.production
 
+# Ignore automatic generated diagrams from D2
+public/assets/d2/
+
diff --git a/astro.config.mjs b/astro.config.mjs
index 8673b2d..a10eb0c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,7 +1,7 @@
 import { defineConfig } from "astro/config";
 import icon from "astro-icon";
-
 import sitemap from "@astrojs/sitemap";
+import d2 from "astro-d2";
 
 // https://astro.build/config
 export default defineConfig({
@@ -15,5 +15,18 @@ export default defineConfig({
       },
     }),
     sitemap(),
+    // Refer to: https://astro-d2.vercel.app/configuration/
+    d2({
+      // Outputs to `public/assets/d2`
+      output: "assets/d2",
+      sketch: true,
+      pad: 50,
+      layout: "dagre",
+      // https://d2lang.com/tour/themes/
+      theme: {
+        default: "3",
+        dark: "200",
+      },
+    }),
   ],
 });
diff --git a/bun.lockb b/bun.lockb
index dd45413..2d24ea2 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2bf141f..5490109 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/sitemap": "^3.4.0",
     "astro": "^5.8.1",
+    "astro-d2": "^0.8.0",
     "astro-icon": "^1.1.5",
     "typescript": "^5.8.3"
   },
diff --git a/src/content/blog/DecouplingElixirGenServers.md b/src/content/blog/DecouplingElixirGenServers.md
index 158466d..a79c1dd 100644
--- a/src/content/blog/DecouplingElixirGenServers.md
+++ b/src/content/blog/DecouplingElixirGenServers.md
@@ -37,9 +37,11 @@ We skip all of that for the sake of making this very simple, but I think having
 
 Let's look at a simple diagram.
 
+```d2 title="Door IoT Ws client"
+direction: right
 
-
-Let's look at some code:
+Documentation -> Starlight -> Website: {style.animated: true}
+```
 
 ## Let's get into code