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

@@ -1,15 +1,16 @@
 {
-  "name": "doc-init",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate"
-  },
-  "dependencies": {
-    "@nuxt/content-theme-docs": "^0.11.0",
-    "nuxt": "^2.15.8"
-  }
+	"name": "doc-init",
+	"version": "1.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "nuxt",
+		"build": "nuxt build",
+		"start": "nuxt start",
+		"generate": "nuxt generate"
+	},
+	"dependencies": {
+		"@nuxt/content-theme-docs": "^0.11.0",
+		"mermaid": "^8.14.0",
+		"nuxt": "^2.15.8"
+	}
 }