feat(md): support mermaid

Author: AugustinMauroy

apps/site/components/__design__/mermaid.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import dedent from 'dedent';
+import { VFile } from 'vfile';
+
+import { compile } from '@/next.mdx.compiler.mjs';
+
+type Props = { children: string };
+
+type Story = StoryObj<Props>;
+type Meta = MetaObj<Props>;
+
+export const Mermaid: Story = {
+  args: {
+    children: dedent`\`\`\`mermaid
+                    graph LR
+                    A[Client] --> B(Load Balancer)
+                    B --> C{Server 1}
+                    B --> D{Server 2}
+                    \`\`\``,
+  },
+};
+
+export default {
+  title: 'Design System',
+  render: (_, { loaded: { Content } }) => Content,
+  loaders: [
+    async ({ args }) => {
+      const { content } = await compile(new VFile(args.children), 'mdx', {});
+
+      return { Content: content };
+    },
+  ],
+} as Meta;

apps/site/next.mdx.plugins.mjs

@@ -2,6 +2,7 @@
 
 import remarkHeadings from '@vcarl/remark-headings';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeMermaid from 'rehype-mermaid';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import readingTime from 'remark-reading-time';
@@ -14,6 +15,9 @@ import rehypeShikiji from './next.mdx.shiki.mjs';
  * @type {Array<import('unified').Plugin>}
  */
 export const REHYPE_PLUGINS = [
+  // Transforms Mermaid code blocks into SVGs
+  // note: needs to be imported before rehype-shiki to prevent transforming into code-blocks
+  [rehypeMermaid, { strategy: 'inline-svg', dark: true }],
   // Generates `id` attributes for headings (H1, ...)
   rehypeSlug,
   // Automatically add anchor links to headings (H1, ...)

apps/site/package.json

@@ -56,6 +56,7 @@
     "next": "15.2.0",
     "next-intl": "~3.26.5",
     "next-themes": "~0.4.4",
+    "playwright": "^1.51.0",
     "postcss": "~8.5.3",
     "postcss-calc": "~10.1.1",
     "postcss-import": "~16.1.0",
@@ -65,6 +66,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "rehype-autolink-headings": "~7.1.0",
+    "rehype-mermaid": "^3.0.0",
     "rehype-slug": "~6.0.0",
     "remark-gfm": "~4.0.1",
     "remark-reading-time": "~2.0.1",