rehypeMermaid

contentlayer.config.ts

@@ -23,6 +23,7 @@ import rehypePrismPlus from 'rehype-prism-plus'
 import rehypePresetMinify from 'rehype-preset-minify'
 import siteMetadata from './data/siteMetadata'
 import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer.js'
+import rehypeMermaid from 'rehype-mermaid'
 
 const root = process.cwd()
 const isProduction = process.env.NODE_ENV === 'production'
@@ -157,6 +158,7 @@ export default makeSource({
       remarkAlert,
     ],
     rehypePlugins: [
+      rehypeMermaid,
       rehypeSlug,
       [
         rehypeAutolinkHeadings,

data/blog/code-sample.mdx

@@ -36,3 +36,13 @@ def fib():
 for index, fibonacci_number in zip(range(10), fib()):
      print('{i:3}: {f:3}'.format(i=index, f=fibonacci_number))
 ```
+
+mermaid:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```

package.json

@@ -34,6 +34,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-citation": "^2.0.0",
     "rehype-katex": "^7.0.0",
+    "rehype-mermaid": "^2.1.0",
     "rehype-preset-minify": "7.0.0",
     "rehype-prism-plus": "^2.0.0",
     "rehype-slug": "^6.0.0",