implanting mermaid and mermaid example page

components/mermaid.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="mermaid">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    import("mermaid/dist/mermaid").then(m => {
+      m.initialize({
+        startOnLoad: true
+      });
+      m.init();
+    });
+  }
+};
+</script>

content/en/mermaid example.md

@@ -0,0 +1,20 @@
+---
+title: mermaid-example
+description: ''
+position: 1
+category: ''
+---
+
+<mermaid>
+  sequenceDiagram
+      participant Alice
+      participant Bob
+      Alice->>John: Hello John, how are you?
+      loop Healthcheck
+          John->>John: Fight against hypochondria
+      end
+      Note right of John: Rational thoughts <br/>prevail!
+      John-->>Alice: Great!
+      John->>Bob: How about you?
+      Bob-->>John: Jolly good!
+</mermaid>

nuxt.config.js

@@ -1,7 +1,21 @@
 import theme from '@nuxt/content-theme-docs'
 
 export default theme({
+    server: {
+        host: '0.0.0.0',
+        posrt: 3000
+    },
+
+    colorMode: {
+        preference: 'dark',
+        fallback: 'dark',
+    },
+
     docs: {
-      primaryColor: '#E24F55'
-    }
+        primaryColor: '#00cd81'
+    },
+
+    content: {
+
+    },
 })

package.json

@@ -10,6 +10,7 @@
 	},
 	"dependencies": {
 		"@nuxt/content-theme-docs": "^0.11.0",
+		"mermaid": "^8.14.0",
 		"nuxt": "^2.15.8"
 	}
 }