WIP

Author: AugustinMauroy

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

@@ -0,0 +1,32 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+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 Default: Story = {
+  args: {
+    children: `\`\`\`mermaid
+graph LR
+A[Client] --> B(Load Balancer)
+B --> C{Server 1}
+B --> D{Server 2}
+\`\`\``,
+  },
+};
+
+export default {
+  title: 'Design System/Mermaid',
+  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
+  // !!! This plugin must be before `rehypeShikiji` !!!
+  rehypeMermaid,
   // Generates `id` attributes for headings (H1, ...)
   rehypeSlug,
   // Automatically add anchor links to headings (H1, ...)

apps/site/package.json

@@ -65,6 +65,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",