feat: add mermaid support to documentation via custom vue component slots

docs/.vitepress/theme/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>

package.json

@@ -47,10 +47,11 @@
     "jquery": "^3.7.0",
     "lint-staged": "^13.2.0",
     "markdown-it-link-preview": "^1.1.3",
+    "markdown-it-mermaid": "^0.2.5",
     "markdown-it-table-captions": "^1.0.4",
     "markdown-it-task-lists": "^2.1.1",
     "medium-zoom": "^1.0.8",
-    "mermaid": "^9.3.0",
+    "mermaid": "^9.4.3",
     "prettier": "2.8.4",
     "sass": "^1.58.3",
     "sitemap": "^7.1.1",

pnpm-lock.yaml

@@ -75,6 +75,9 @@ devDependencies:
   markdown-it-link-preview:
     specifier: ^1.1.3
     version: 1.1.3
+  markdown-it-mermaid:
+    specifier: ^0.2.5
+    version: 0.2.5
   markdown-it-table-captions:
     specifier: ^1.0.4
     version: 1.0.4
@@ -85,7 +88,7 @@ devDependencies:
     specifier: ^1.0.8
     version: 1.0.8
   mermaid:
-    specifier: ^9.3.0
+    specifier: ^9.4.3
     version: 9.4.3
   prettier:
     specifier: 2.8.4
@@ -110,7 +113,7 @@ devDependencies:
     version: 4.3.3(@types/node@18.16.3)(sass@1.62.1)
   vitepress:
     specifier: ^1.0.0-alpha.46
-    version: 1.0.0-alpha.75(@algolia/client-search@4.17.0)(@types/node@18.16.3)(react-dom@15.7.0)(react@15.7.0)(sass@1.62.1)
+    version: 1.0.0-alpha.75(@types/node@18.16.3)(react-dom@15.7.0)(react@15.7.0)(sass@1.62.1)
   vitepress-plugin-nprogress:
     specifier: ^0.0.4
     version: 0.0.4
@@ -135,14 +138,16 @@ packages:
       '@algolia/autocomplete-shared': 1.8.2
     dev: true
 
-  /@algolia/autocomplete-preset-algolia@1.8.2(@algolia/client-search@4.17.0)(algoliasearch@4.17.0):
+  /@algolia/autocomplete-preset-algolia@1.8.2(algoliasearch@4.17.0):
     resolution: {integrity: sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
+    peerDependenciesMeta:
+      '@algolia/client-search':
+        optional: true
     dependencies:
       '@algolia/autocomplete-shared': 1.8.2
-      '@algolia/client-search': 4.17.0
       algoliasearch: 4.17.0
     dev: true
 
@@ -347,10 +352,10 @@ packages:
     resolution: {integrity: sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA==}
     dev: true
 
-  /@docsearch/js@3.3.4(@algolia/client-search@4.17.0)(react-dom@15.7.0)(react@15.7.0):
+  /@docsearch/js@3.3.4(react-dom@15.7.0)(react@15.7.0):
     resolution: {integrity: sha512-Xd2saBziXJ1UuVpcDz94zAFEFAM6ap993agh0za2e3LDZLhaW993b1f9gyUL4e1CZLsR076tztG2un2gVncvpA==}
     dependencies:
-      '@docsearch/react': 3.3.4(@algolia/client-search@4.17.0)(react-dom@15.7.0)(react@15.7.0)
+      '@docsearch/react': 3.3.4(react-dom@15.7.0)(react@15.7.0)
       preact: 10.13.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -359,7 +364,7 @@ packages:
       - react-dom
     dev: true
 
-  /@docsearch/react@3.3.4(@algolia/client-search@4.17.0)(react-dom@15.7.0)(react@15.7.0):
+  /@docsearch/react@3.3.4(react-dom@15.7.0)(react@15.7.0):
     resolution: {integrity: sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -374,7 +379,7 @@ packages:
         optional: true
     dependencies:
       '@algolia/autocomplete-core': 1.8.2
-      '@algolia/autocomplete-preset-algolia': 1.8.2(@algolia/client-search@4.17.0)(algoliasearch@4.17.0)
+      '@algolia/autocomplete-preset-algolia': 1.8.2(algoliasearch@4.17.0)
       '@docsearch/css': 3.3.4
       algoliasearch: 4.17.0
       react: 15.7.0
@@ -2499,6 +2504,10 @@ packages:
       d3-transition: 3.0.1(d3-selection@3.0.0)
     dev: true
 
+  /d3@3.5.17:
+    resolution: {integrity: sha512-yFk/2idb8OHPKkbAL8QaOaqENNoMhIaSHZerk3oQsECwkObkCpJyjYwCe+OHiq6UEdhe1m8ZGARRRO3ljFjlKg==}
+    dev: true
+
   /d3@7.8.4:
     resolution: {integrity: sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==}
     engines: {node: '>=12'}
@@ -2542,6 +2551,22 @@ packages:
       lodash-es: 4.17.21
     dev: true
 
+  /dagre-d3-renderer@0.4.26:
+    resolution: {integrity: sha512-vOWj1uA4/APTrfDyfHaH/xpfXhPh9rszW+HOaEwPCeA6Afl06Lobfh7OpESuVMQW2QGuY4UQ7pte/p0WhdDs7w==}
+    dependencies:
+      d3: 3.5.17
+      dagre-layout: 0.8.8
+      graphlib: 2.1.8
+      lodash: 4.17.21
+    dev: true
+
+  /dagre-layout@0.8.8:
+    resolution: {integrity: sha512-ZNV15T9za7X+fV8Z07IZquUKugCxm5owoiPPxfEx6OJRD331nkiIaF3vSt0JEY5FkrY0KfRQxcpQ3SpXB7pLPQ==}
+    dependencies:
+      graphlibrary: 2.2.0
+      lodash: 4.17.21
+    dev: true
+
   /dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -3365,6 +3390,18 @@ packages:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
 
+  /graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
+  /graphlibrary@2.2.0:
+    resolution: {integrity: sha512-XTcvT55L8u4MBZrM37zXoUxsgxs/7sow7YSygd9CIwfWTVO8RVu7AYXhhCiTuFEf+APKgx6Jk4SuQbYR0vYKmQ==}
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
   /gray-matter@4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
@@ -3474,6 +3511,11 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
   /heap@0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: true
@@ -4328,6 +4370,12 @@ packages:
       - utf-8-validate
     dev: true
 
+  /markdown-it-mermaid@0.2.5:
+    resolution: {integrity: sha512-ZUTFRX+cXEtWmn/9LMlpVklPJiDrHPWyHE/wamC2wm0Ojh1qOcuKWfWW3BqP83+7w6C59rS7M3OrGTs/u9mQTA==}
+    dependencies:
+      mermaid: 7.1.2
+    dev: true
+
   /markdown-it-table-captions@1.0.4:
     resolution: {integrity: sha512-EpUN5GJLdDbpWSSl0Qf51kwT1e4mUMDB60mitr8JH4Sciyzny7x80BcSG9vKk6MOmeYjmGJ4aBTQCnCf7Y1iZw==}
     dev: true
@@ -4384,6 +4432,17 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /mermaid@7.1.2:
+    resolution: {integrity: sha512-bDLu3fQuf3/R0fNkNzB0GTaF7+6SxnZpfTs9DVQF1ougsuP23MBzvEIGfL0ML8zeyg7+J2D+0AaoLVhskW5ulw==}
+    dependencies:
+      d3: 3.5.17
+      dagre-d3-renderer: 0.4.26
+      dagre-layout: 0.8.8
+      he: 1.2.0
+      lodash: 4.17.21
+      moment: 2.29.4
+    dev: true
+
   /mermaid@9.4.3:
     resolution: {integrity: sha512-TLkQEtqhRSuEHSE34lh5bCa94KATCyluAXmFnNI2PRZwOpXFeqiJWwZl+d2CcemE1RS6QbbueSSq9QIg8Uxcyw==}
     dependencies:
@@ -4539,6 +4598,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /moment@2.29.4:
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
+    dev: true
+
   /mpd-parser@0.22.1:
     resolution: {integrity: sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==}
     hasBin: true
@@ -6264,12 +6327,12 @@ packages:
       nprogress: 0.2.0
     dev: true
 
-  /vitepress@1.0.0-alpha.75(@algolia/client-search@4.17.0)(@types/node@18.16.3)(react-dom@15.7.0)(react@15.7.0)(sass@1.62.1):
+  /vitepress@1.0.0-alpha.75(@types/node@18.16.3)(react-dom@15.7.0)(react@15.7.0)(sass@1.62.1):
     resolution: {integrity: sha512-twpPZ/6UnDR8X0Nmj767KwKhXlTQQM9V/J1i2BP9ryO29/w4hpxBfEum6nvfpNhJ4H3h+cIhwzAK/e9crZ6HEQ==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.4
-      '@docsearch/js': 3.3.4(@algolia/client-search@4.17.0)(react-dom@15.7.0)(react@15.7.0)
+      '@docsearch/js': 3.3.4(react-dom@15.7.0)(react@15.7.0)
       '@vitejs/plugin-vue': 4.2.1(vite@4.3.3)(vue@3.2.47)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.1.0(vue@3.2.47)