Use astro mermaid instead of kroki (not available)

astro.config.mjs

@@ -1,12 +1,10 @@
-import { defineConfig, fontProviders } from 'astro/config';
-import icon from 'astro-icon';
-import mdx from '@astrojs/mdx';
-//import { remarkModifiedTime } from './src/remark-modified-time.mjs';
+import { defineConfig, fontProviders } from "astro/config";
+import icon from "astro-icon";
+import mdx from "@astrojs/mdx";
 import remarkMath from "remark-math";
 import rehypeMathjax from "rehype-mathjax"
 import rehypeCallouts from "rehype-callouts";
-// @ts-ignore
-import { remarkKroki } from "remark-kroki";
+import mermaid from "astro-mermaid";
 
 export default defineConfig({
   fonts: [{
@@ -15,25 +13,29 @@ export default defineConfig({
     cssVariable: "--font-cascadia-code",
     fallbacks: ["monospace"],
   }],
-  integrations: [icon(), mdx()],
-  markdown: {
-    remarkPlugins: [
-//      remarkModifiedTime,
-      remarkMath, [
-        remarkKroki, { 
-          alias: ["mermaid", "tikz"],
-          server: process.env.KROKI_SERVER || "https://kroki.io",
-          target: "mdx3",
-          output: "inline-svg"
+  integrations: [
+    mermaid({
+      theme: "dark",
+      autoTheme: false,
+      mermaidConfig: {
+        flowchart: {curve:"linear"},
+        startOnLoad: false,
+        logLevel: "error",
+        securityLevel: "strict"
       }
-    ]],
+    }),
+    icon(),
+    mdx()
+  ],
+  markdown: {
+    remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeMathjax, [rehypeCallouts, { theme: "obsidian" }]],
     shikiConfig: {
         theme: "one-dark-pro",
     },
     syntaxHighlight: {
-      type: 'shiki',
-      excludeLangs: ['mermaid', 'math'],
+      type: "shiki",
+      excludeLangs: ["mermaid", "math"],
     },
   }
 });

package.json

@@ -15,11 +15,13 @@
     "@astrojs/mdx": "^5.0.2",
     "@iconify-json/lucide": "^1.2.98",
     "@iconify-json/simple-icons": "^1.2.74",
+    "@mermaid-js/layout-elk": "^0.2.3",
     "astro": "^6.0.8",
     "astro-icon": "^1.1.5",
+    "astro-mermaid": "^2.1.0",
+    "mermaid": "^11.17.2",
     "rehype-callouts": "^2.1.2",
     "rehype-mathjax": "^7.1.0",
-    "remark-kroki": "^0.3.8",
     "remark-math": "^6.0.0"
   },
   "devDependencies": {

src/content/book/grundlagen/0-3_addieren_mit_bits.mdx

@@ -35,7 +35,6 @@ Am Ende können wir also sagen, dass eine Addition von zwei Bits $a$ und $b$ fol
 Wenn wir das nun als Schaubild darstellen, sieht das so aus:
 
 ```mermaid
-%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%% 
 flowchart TD
     A@{ shape: circle, label: "a" } --> XOR1[XOR]
     B@{ shape: circle, label: "b" } --> XOR1
@@ -72,7 +71,6 @@ Statt nur $a$ und $b$ zu addieren, addieren wir nun $a$, $b$ und den Übertrag $
 Unser Schaltplan, sieht dann wieder genauso aus, nur dass wir jetzt noch einen weiteren Eingang für den Übertrag haben:
 
 ```mermaid
-%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%% 
 flowchart TD
     A@{ shape: circle, label: "a" } --> XOR1
     B@{ shape: circle, label: "b" } --> XOR1
@@ -97,7 +95,6 @@ Das vorher (ohne Übertragseingang) ist ein Halbaddierer.
 Wir sehen hier auch, dass unser Volladdierer (FA) aus zwei Halbaddierern (HA) und einem ODER-Gatter besteht:
 
 ```mermaid
-%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%% 
 flowchart TD
     A0@{ shape: circle, label: "a" } --> HA1
     B0@{ shape: circle, label: "b" } --> HA1
@@ -122,9 +119,9 @@ Und genau so machen wir das auch im Binären.
 
 Wenn wir nun also zwei 4-Bit-Zahlen addieren wollen, brauchen wir 4 Volladdierer, die hintereinander geschaltet und deren Überträge miteinander verbunden sind:
 
-<div style="overflow-x: auto;width: 100%;">
+<div style="overflow-x: auto; width: 100%;">
+    <div style="min-width: 700px;">
 ```mermaid
-%%{ init: { 'flowchart': { 'curve': 'linear' }, 'theme': 'dark' } }%%
 flowchart TD
     subgraph FA3
         A3@{ shape: circle, label: "a_3" } --> FA31
@@ -152,6 +149,7 @@ flowchart TD
         FA01 -- c_0 --> FA11
     end
 ```
+    </div>
 </div>
 
 > [!info] Nomenklatur