From a88a467d4569837f491e67a97f1a70ca570e087b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 14 Nov 2022 22:14:27 +0530
Subject: [PATCH] sync

---
 docs/syntax/classDiagram.md                   | 36 +++++++++----------
 .../docs/.vitepress/mermaid-markdown-all.ts   | 13 ++-----
 .../src/docs/.vitepress/theme/Mermaid.vue     | 10 ++----
 3 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index b825f8671..d57125c84 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -255,16 +255,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
@@ -360,14 +360,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 a7c4f96c5..e2178a653 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -31,17 +31,10 @@ ${highlight}
           </div>`;
     } else if (token.info.trim() === 'mermaid') {
       const key = index;
-      return ` ${key}
-      <Suspense> 
-      <template #default>
+      return `
+      ${key}
       <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 fe2510efd..90ece11a6 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -5,11 +5,7 @@
 <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: {
@@ -36,7 +32,7 @@ let mermaidConfig = {
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
-  await renderChart();
+  renderChart();
 
   //refresh images on first render
   const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
@@ -63,7 +59,7 @@ onMounted(async () => {
 
 onUnmounted(() => mut.disconnect());
 
-const renderChart = async () => {
+const renderChart = () => {
   console.log('rendering chart' + props.id + props.graph);
   let hasDarkClass = document.documentElement.classList.contains('dark');
   mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
@@ -73,6 +69,6 @@ const renderChart = async () => {
     ...mermaidConfig,
     theme: hasDarkClass ? 'dark' : mermaidPageTheme,
   });
-  svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
+  svg.value = mermaid.render(props.id, decodeURIComponent(props.graph));
 };
 </script>