feat(md): support mermaid

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",
@@ -111,5 +113,12 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "~8.25.0",
     "user-agent-data-types": "0.4.2"
+  },
+  "overrides": {
+    "rehype-mermaid": {
+      "dependencies": {
+        "mermaid-isomorphic": "*"
+      }
+    }
   }
 }

package.json

@@ -22,6 +22,7 @@
   "scripts": {
     "dev": "turbo run dev",
     "build": "turbo run build",
+    "storybook": "turbo run storybook",
     "storybook:build": "turbo run storybook:build",
     "start": "turbo run start",
     "check-types": "turbo check-types",

packages/mermaid-isomorphic/LICENSE.md

@@ -0,0 +1,18 @@
+# MIT License
+
+Copyright © 2023 Remco Haszing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the “Software”), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/mermaid-isomorphic/eslint.config.js

@@ -0,0 +1,19 @@
+import importX from 'eslint-plugin-import-x';
+import tseslint from 'typescript-eslint';
+
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import baseConfig from '../../eslint.config.js';
+
+export default [
+  ...baseConfig,
+  ...tseslint.configs.recommended,
+  importX.flatConfigs.typescript,
+  {
+    ignores: ['dist'],
+  },
+  {
+    rules: {
+      '@typescript-eslint/consistent-type-imports': 'error',
+    },
+  },
+];

packages/mermaid-isomorphic/fixtures/accessibility/input.mmd

@@ -0,0 +1,5 @@
+  graph LR
+      accTitle: Big Decisions
+      accDescr: Bob's Burgers process for making big decisions
+      A[Identify Big Descision] --> B{Make Big Decision}
+      B --> D[Be done]