feat(mdx-loader): add mermaid attr

Author: hiroppy

packages/mdx-loader/__tests__/__snapshots__/index.js.snap

@@ -960,6 +960,62 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should convert mermaid using mermaid attr 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+export const slides = [props => <>
+              
+    <h1>{\`FlowChart\`}</h1>
+    
+            </>, props => <>
+              
+    <div className=\\"mermaid\\" id=\\"mermaid-1\\" data-value=\\"graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;\\" style={{
+    visibility: 'hidden'
+  }}>graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;</div>
+    
+            </>];
+export const backgrounds = [0, 0];
+export const fragmentSteps = [0, 0];
+export const fusumaProps = [{}, {}];
+
+const layoutProps = {
+  
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    <h1>{\`FlowChart\`}</h1>
+    <hr></hr>
+    <pre><code parentName=\\"pre\\" {...{
+        \\"className\\": \\"language-mermaid\\"
+      }}>{\`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+\`}</code></pre>
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should return normal md 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */

packages/mdx-loader/__tests__/index.js

@@ -93,6 +93,23 @@ graph TD;
     expect(await transformToJS(src)).toMatchSnapshot();
   });
 
+  test('should convert mermaid using mermaid attr', async () => {
+    const src = `
+# FlowChart
+---
+
+\`\`\`mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+\`\`\`
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
   test('should convert MathJax', async () => {
     const src = `
 # MathJax

packages/mdx-loader/src/mdxPlugin.js

@@ -148,7 +148,7 @@ function mdxPlugin() {
       }
 
       if (type === 'code') {
-        if (lang === 'chart') {
+        if (lang === 'chart' || lang === 'mermaid') {
           slide.push({
             ...n,
             ...transformChartToJSX(mermaidId, value),

samples/advanced/slides/01-chart.md

@@ -4,7 +4,7 @@
 
 <br />
 
-```chart
+```mermaid
 graph TD;
     A-->B;
     A-->C;
@@ -21,7 +21,7 @@ https://github.com/knsv/mermaid
 <br />
 
 ```txt
-\`\`\`chart
+\`\`\`mermaid
 graph TD;
     A-->B;
     A-->C;