add mermaid support

README.md

@@ -50,14 +50,17 @@
 - [x] 文章显示宽度与关于页保持一致
 - [x] 移动端在点击链接后菜单自动回缩
 - [x] 重整排序逻辑代码
-- [x] 网站地图（sitemap）
-- [ ] 文档内联 React 代码支持
+- [x] 网站地图（Sitemap）
+- [x] 使用 SSR 进行 SEO 优化
+- [x] Mermaid 支持
+- [x] 文档内联 HTML 代码支持
 - [ ] 打印友好适配
 
 ### 已知问题
 
 - [x] 复制按钮存在复制按钮随代码滚动的问题
 - [x] 锚点需要给定偏移量
+- [ ] remark 插件依赖过时
 
 #### 内容问题
 

next.config.mjs

@@ -1,13 +1,14 @@
 // next.config.mjs
 import withMDX from "@next/mdx";
 import remarkGfm from "remark-gfm";
-import rehypeSlug from "rehype-slug";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeToc from "rehype-toc";
-import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 import rehypeRaw from "rehype-raw";
+import rehypeKatex from "rehype-katex";
+import rehypeMermaid from "rehype-mermaidjs";
 import rehypePrism from "rehype-prism-plus";
+import rehypeToc from "rehype-toc";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import { visit } from "unist-util-visit";
 
 /** @type {import('next').NextConfig} */
@@ -37,18 +38,28 @@ export default withMDX({
         });
         return null;
       },
-      [rehypePrism, { ignoreMissing: true, showLineNumbers: true }],
+      rehypeRaw,
       rehypeKatex,
-      rehypeSlug,
+      [
+        rehypeMermaid,
+        {
+          launchOptions: {
+            executablePath: process.platform === "darwin"
+              ? "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" // for my macOS device
+              : "/opt/google/chrome/google-chrome", // for GitHub Actions Ubuntu
+          },
+        },
+      ],
+      [rehypePrism, { ignoreMissing: true, showLineNumbers: true }],
       [rehypeToc, { headings: ["h2", "h3", "h4", "h5", "h6"] }],
+      rehypeSlug,
       [
         rehypeAutolinkHeadings,
         {
           behavior: "wrap",
           test: ["h2", "h3", "h4", "h5", "h6"],
         },
       ],
-      rehypeRaw,
     ],
     // If you use `MDXProvider`, uncomment the following line.
     providerImportSource: "@mdx-js/react",

package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18.2.0",
     "rehype-autolink-headings": "^7.0.0",
     "rehype-katex": "^7.0.0",
+    "rehype-mermaidjs": "^2.0.0",
     "rehype-prism-plus": "^1.6.3",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",