sync

docs/syntax/classDiagram.md

@@ -256,15 +256,15 @@ 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) |
+| ------- | ------------- |
+| `<\|--` | Inheritance   |
+| `\*--`  | Composition   |
+| `o--`   | Aggregation   |
+| `-->`   | Association   |
+| `--`    | Link (Solid)  |
+| `..>`   | Dependency    |
+| `..\|>` | Realization   |
+| `..`    | Link (Dashed) |
 
 ```mermaid-example
 classDiagram
@@ -361,13 +361,13 @@ Here is the syntax:
 Where `Relation Type` can be one of:
 
 | Type  | Description |
-| ---- | ----------- | ----------- |
-| <    |             | Inheritance |
-| \*   | Composition |
-| o    | Aggregation |
-| >    | Association |
-| <    | Association |
-|      | >           | Realization |
+| ----- | ----------- |
+| `<\|` | Inheritance |
+| `\*`  | Composition |
+| `o`   | Aggregation |
+| `>`   | Association |
+| `<`   | Association |
+| `\|>` | Realization |
 
 And `Link` can be one of:
 

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>`;

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>