Switch out @theguild/remark-mermaid to for rehype-mermaid

Author: hasparus

next.config.js

@@ -1,10 +1,12 @@
 /* eslint-env node */
+// @ts-check
 
 import nextra from "nextra"
 import path from "node:path"
 import withLess from "next-with-less"
 import nextBundleAnalyzer from "@next/bundle-analyzer"
 import fs from "fs"
+import rehypeMermaid from "rehype-mermaid"
 
 import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
 import { syntaxHighlightingThemes } from "./src/_design-system/syntax/index.js"
@@ -17,6 +19,7 @@ const withNextra = nextra({
   themeConfig: "./theme.config.tsx",
   mdxOptions: {
     remarkPlugins: [remarkGraphiQLComment],
+    rehypePlugins: [mermaidConfig()],
     rehypePrettyCodeOptions: {
       theme: syntaxHighlightingThemes,
     },
@@ -173,6 +176,35 @@ const config = {
 
 const withBundleAnalyzer = nextBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
+  analyzerMode: "json",
 })
 
 export default withBundleAnalyzer(withLess(withNextra(config)))
+
+function mermaidConfig() {
+  return [
+    rehypeMermaid,
+    /** @type {import("rehype-mermaid").RehypeMermaidOptions} */ ({
+      mermaidConfig: {
+        fontFamily: "var(--font-mono, monospace)",
+        theme: "base",
+        look: "classic",
+        themeVariables: {
+          background: "var(--color-neu-0)",
+          primaryColor: "var(--color-sec-base)",
+          primaryTextColor: "var(--color-neu-900)",
+          primaryBorderColor: "var(--color-pri-base)",
+          secondaryColor: "var(--color-pri-base)",
+          secondaryTextColor: "var(--color-neu-900)",
+          secondaryBorderColor: "var(--color-pri-base)",
+          tertiaryColor: "var(--color-pri-base)",
+          tertiaryTextColor: "var(--color-neu-900)",
+          tertiaryBorderColor: "var(--color-pri-base)",
+          textColor: "var(--color-neu-900)",
+          mainBkg: "var(--color-neu-100)",
+          lineColor: "var(--color-neu-400)",
+        },
+      },
+    }),
+  ]
+}

package.json

@@ -63,6 +63,7 @@
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
     "react-use-measure": "^2.1.7",
+    "rehype-mermaid": "^3.0.0",
     "rss": "1.2.2",
     "server-only": "0.0.1",
     "string-similarity": "^4.0.4",

patches/nextra.patch

@@ -9,6 +9,28 @@ index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e21
  import { forwardRef } from "react";
  const Image = forwardRef((props, ref) => {
    const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
+diff --git a/dist/client/components/index.js b/dist/client/components/index.js
+index 9d05118d3d10e746cd2c020785a0f34465bb8570..218107600d7efed1b5f9d49f0a696b166917d1ce 100644
+--- a/dist/client/components/index.js
++++ b/dist/client/components/index.js
+@@ -14,7 +14,7 @@ import { Tabs } from "./tabs/index.js";
+ import { Td } from "./td.js";
+ import { Th } from "./th.js";
+ import { Tr } from "./tr.js";
+-import { Mermaid } from "@theguild/remark-mermaid/mermaid";
++// import { Mermaid } from "@theguild/remark-mermaid/mermaid";
+ import { MathJax, MathJaxContext } from "better-react-mathjax";
+ import { Playground } from "./playground.js";
+ import { Popup } from "./popup.js";
+@@ -29,7 +29,7 @@ export {
+   ImageZoom,
+   MathJax,
+   MathJaxContext,
+-  Mermaid,
++  // Mermaid, // disabled to use rehype-mermaid and remove cytoscape from the bundle
+   Playground,
+   Popup,
+   Pre,
 diff --git a/dist/client/normalize-pages.js b/dist/client/normalize-pages.js
 index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384d5f63845 100644
 --- a/dist/client/normalize-pages.js
@@ -24,3 +46,24 @@ index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384
        if (!isValid) {
          throw new Error(
            `Validation of "_meta" file has failed.
+diff --git a/dist/server/compile.js b/dist/server/compile.js
+index c266efec3fe344a81c6d5791b93ab1b2bd268782..4866148a725800ef2326732f78807cca0f04cb7b 100644
+--- a/dist/server/compile.js
++++ b/dist/server/compile.js
+@@ -1,6 +1,6 @@
+ import path from "path";
+ import { createProcessor } from "@mdx-js/mdx";
+-import { remarkMermaid } from "@theguild/remark-mermaid";
++// import { remarkMermaid } from "@theguild/remark-mermaid";
+ import { remarkNpm2Yarn } from "@theguild/remark-npm2yarn";
+ import rehypeKatex from "rehype-katex";
+ import rehypePrettyCode from "rehype-pretty-code";
+@@ -143,7 +143,7 @@ async function compileMdx(source, {
+       development: process.env.NODE_ENV === "development",
+       remarkPlugins: [
+         ...remarkPlugins || [],
+-        remarkMermaid,
++        // remarkMermaid, // disabled to use rehype-mermaid and remove cytoscape from the bundle
+         // should be before remarkRemoveImports because contains `import { Mermaid } from ...`
+         [
+           remarkNpm2Yarn,