Add D2 as a diagramming tool

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 .env
 .env.production
 
+# Ignore automatic generated diagrams from D2
+public/assets/d2/
+

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",
+      },
+    }),
   ],
 });

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"
   },

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