mermaid component

package.json

@@ -36,6 +36,7 @@
     "eslint-plugin-testing-library": "^3.9.0",
     "framer-motion": "^2.9.4",
     "lite-youtube-embed": "^0.1.2",
+    "mermaid": "^8.8.3",
     "next": "10.0.0",
     "prism-themes": "^1.5.0",
     "react": "16.14.0",

src/pages/exercises/exercise-1/notes.mdx

@@ -1,6 +1,15 @@
 import EmbedYoutube from '_reusable/EmbedYoutube';
+import EmbedDiagram from '_reusable/EmbedDiagram';
 
-## Goals of this Exercise
+<EmbedDiagram chart={`
+  graph TD;
+  A-->C;
+  A-->C;
+  B-->D;
+  C-->D;
+`}/>
+
+## Goals of this Exercises
 
 #### Goal 1 - Practice building blocks of React
 

src/reusable/EmbedDiagram.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import mermaid from 'mermaid/dist/mermaid.min.js';
+
+function EmbedDiagram(props) {
+  const { chart } = props;
+
+  useEffect(() => {
+    console.log('yolo');
+    mermaid.initialize({ startOnLoad: true });
+    mermaid.contentLoaded()
+  }, []);
+
+  // useEffect(() => {
+  //   mermaid.initialize({ startOnLoad: true });
+  // }, [chart]);
+
+  console.log('dah');
+
+  return <div className="mermaid">{chart}</div>;
+}
+
+export default EmbedDiagram;