diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index 5870d0743..62ce5125e 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -267,16 +267,16 @@ A relationship is a general term covering the specific types of logical connecti
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
-| Type    | Description   |
-| ------- | ------------- |
-| `<\|--` | Inheritance   |
-| `\*--`  | Composition   |
-| `o--`   | Aggregation   |
-| `-->`   | Association   |
-| `--`    | Link (Solid)  |
-| `..>`   | Dependency    |
-| `..\|>` | Realization   |
-| `..`    | Link (Dashed) |
+| Type | Description   |
+| ---- | ------------- | ----------- |
+| <    | --            | Inheritance |
+| \*-- | Composition   |
+| o--  | Aggregation   |
+| -->  | Association   |
+| --   | Link (Solid)  |
+| ..>  | Dependency    |
+| ..   | >             | Realization |
+| ..   | Link (Dashed) |
 
 ```mermaid-example
 classDiagram
@@ -372,14 +372,14 @@ Here is the syntax:
 
 Where `Relation Type` can be one of:
 
-| Type  | Description |
-| ----- | ----------- |
-| `<\|` | Inheritance |
-| `\*`  | Composition |
-| `o`   | Aggregation |
-| `>`   | Association |
-| `<`   | Association |
-| `\|>` | Realization |
+| Type | Description |
+| ---- | ----------- | ----------- |
+| <    |             | Inheritance |
+| \*   | Composition |
+| o    | Aggregation |
+| >    | Association |
+| <    | Association |
+|      | >           | Realization |
 
 And `Link` can be one of:
 
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index c157cf679..5dff951e9 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -34,10 +34,17 @@ const MermaidExample = async (md: MarkdownRenderer) => {
       </div>`;
     } else if (token.info.trim() === 'mermaid') {
       const key = index;
-      return `
-      ${key}
+      return ` ${key}
+      <Suspense> 
+      <template #default>
       <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(token.content)}"></Mermaid>
-      `;
+      </template>
+        <!-- loading state via #fallback slot -->
+        <template #fallback>
+          Loading...
+        </template>
+      </Suspense>
+`;
     }
     if (token.info.trim() === 'warning') {
       return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index 90ece11a6..fe2510efd 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -5,7 +5,11 @@
 <script setup>
 import { onMounted, onUnmounted, ref, toRaw } from 'vue';
 import mermaid from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
 import { useData } from 'vitepress';
+try {
+  await mermaid.registerExternalDiagrams([mindmap]);
+} catch (e) {}
 
 const props = defineProps({
   graph: {
@@ -32,7 +36,7 @@ let mermaidConfig = {
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
-  renderChart();
+  await renderChart();
 
   //refresh images on first render
   const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
@@ -59,7 +63,7 @@ onMounted(async () => {
 
 onUnmounted(() => mut.disconnect());
 
-const renderChart = () => {
+const renderChart = async () => {
   console.log('rendering chart' + props.id + props.graph);
   let hasDarkClass = document.documentElement.classList.contains('dark');
   mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
@@ -69,6 +73,6 @@ const renderChart = () => {
     ...mermaidConfig,
     theme: hasDarkClass ? 'dark' : mermaidPageTheme,
   });
-  svg.value = mermaid.render(props.id, decodeURIComponent(props.graph));
+  svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
 };
 </script>