sync

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>