Test mermaid.

Author: nikoshell

astro.config.mjs

@@ -11,6 +11,7 @@ import metaTags from "astro-meta-tags";
 import pagefind from "astro-pagefind";
 import deleteUnusedImages from "astro-delete-unused-images";
 import preload from "astro-preload";
+import rehypeMermaid from "rehype-mermaid";
 import { execSync } from "node:child_process";
 
 let gitVersion = String(process.env.GIT_VERSION ?? "").slice(0, 7);
@@ -54,6 +55,10 @@ export default defineConfig({
     },
   },
   markdown: {
+    syntaxHighlight: {
+      type: "shiki",
+      excludeLangs: ["mermaid", "math"],
+    },
     remarkPlugins: [
       [
         remarkToc,
@@ -63,6 +68,7 @@ export default defineConfig({
       ],
     ],
     rehypePlugins: [
+      rehypeMermaid,
       rehypeSlug,
       [
         rehypeAutolinkHeadings,

package.json

@@ -33,10 +33,14 @@
     "hastscript": "^9.0.1",
     "js-yaml": "^4.1.0",
     "marked": "^15.0.11",
+    "mermaid": "^11.6.0",
+    "mermaid-isomorphic": "^3.0.4",
     "pagefind": "^1.3.0",
+    "playwright": "^1.52.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rehype-autolink-headings": "^7.1.0",
+    "rehype-mermaid": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",
     "sharp": "^0.34.1",
@@ -47,8 +51,8 @@
     "@types/js-yaml": "^4.0.9",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
-    "tsx": "^4.19.4",
     "puppeteer": "^24.7.2",
+    "tsx": "^4.19.4",
     "typescript": "^5.8.3"
   },
   "prettier": {