Merge pull request #3846 from mermaid-js/sidv/mermaidDocs

Use current mermaid version in docs.

packages/mermaid/package.json

@@ -57,7 +57,6 @@
     "d3": "^7.0.0",
     "dagre-d3-es": "7.0.4",
     "dompurify": "2.4.1",
-    "fast-clone": "^1.5.13",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "moment-mini": "^2.24.0",
@@ -81,7 +80,6 @@
     "coveralls": "^3.1.1",
     "cspell": "^6.14.3",
     "globby": "^13.1.2",
-    "identity-obj-proxy": "^3.0.0",
     "jison": "^0.4.18",
     "js-base64": "^3.7.2",
     "jsdom": "^20.0.2",
@@ -95,7 +93,9 @@
     "typedoc": "^0.23.18",
     "typedoc-plugin-markdown": "^3.13.6",
     "typescript": "^4.8.4",
-    "unist-util-flatmap": "^1.0.0"
+    "unist-util-flatmap": "^1.0.0",
+    "vitepress": "^1.0.0-alpha.28",
+    "vitepress-plugin-search": "^1.0.4-alpha.15"
   },
   "files": [
     "dist",

packages/mermaid/src/docs/.vitepress/config.ts

@@ -1,6 +1,5 @@
 import { version } from '../../../package.json';
 import MermaidExample from './mermaid-markdown-all';
-import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
 import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
@@ -8,7 +7,6 @@ const allMarkdownTransformers: MarkdownOptions = {
   theme: 'github-dark',
   config: async (md) => {
     await MermaidExample(md);
-    MermaidMarkdown(md);
   },
 };
 
@@ -108,6 +106,7 @@ function sidebarSyntax() {
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
         { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
+        { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },

packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts

@@ -21,17 +21,30 @@ const MermaidExample = async (md: MarkdownRenderer) => {
 
       // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported
       const langAttrs = '';
-      return `<h5>Code:</h5>
-          <div class="language-mermaid">
-            <button class="copy"></button>
-            <span class="lang">mermaid</span>
-            ${
-              // html is pre-escaped by the highlight function
-              // (it also adds `v-pre` to ignore Vue template syntax)
-              md.options.highlight(token.content, 'mermaid', langAttrs)
-            }
-          </div>
-          <h5>Diagram:</h5>`;
+      return `
+      <h5>Code:</h5>
+      <div class="language-mermaid">
+        <button class="copy"></button>
+        <span class="lang">mermaid</span>
+        ${
+          // html is pre-escaped by the highlight function
+          // (it also adds `v-pre` to ignore Vue template syntax)
+          md.options.highlight(token.content, 'mermaid', langAttrs)
+        }
+      </div>`;
+    } else if (token.info.trim() === 'mermaid') {
+      const key = index;
+      return `
+      <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>`;

packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-html="svg"></div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { render } from './mermaid';
+
+const props = defineProps({
+  graph: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+});
+
+const svg = ref(null);
+let mut = null;
+
+const mermaidConfig = {
+  securityLevel: 'loose',
+  startOnLoad: false,
+};
+
+onMounted(async () => {
+  mut = new MutationObserver(() => renderChart());
+  mut.observe(document.documentElement, { attributes: true });
+  await renderChart();
+
+  //refresh images on first render
+  const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
+  if (hasImages)
+    setTimeout(() => {
+      let imgElements = document.getElementsByTagName('img');
+      let imgs = Array.from(imgElements);
+      if (imgs.length) {
+        Promise.all(
+          imgs
+            .filter((img) => !img.complete)
+            .map(
+              (img) =>
+                new Promise((resolve) => {
+                  img.onload = img.onerror = resolve;
+                })
+            )
+        ).then(() => {
+          renderChart();
+        });
+      }
+    }, 100);
+});
+
+onUnmounted(() => mut.disconnect());
+
+const renderChart = async () => {
+  console.log('rendering chart' + props.id + props.graph);
+  const hasDarkClass = document.documentElement.classList.contains('dark');
+  mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
+
+  console.log({ mermaidConfig });
+  svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+};
+</script>

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 import DefaultTheme from 'vitepress/theme';
-// @ts-ignore
-import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
+// @ts-ignore
+import Mermaid from './Mermaid.vue';
 import { getRedirect } from './redirect';
 
 export default {

packages/mermaid/src/docs/.vitepress/theme/mermaid.ts

@@ -0,0 +1,14 @@
+import mermaid, { type MermaidConfig } from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
+
+try {
+  await mermaid.registerExternalDiagrams([mindmap]);
+} catch (e) {
+  console.error(e);
+}
+
+export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
+  mermaid.initialize(config);
+  const svg = await mermaid.renderAsync(id, code);
+  return svg;
+};

packages/mermaid/src/docs/vite.config.ts

@@ -31,6 +31,11 @@ export default defineConfig({
   resolve: {
     alias: {
       mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
+
+      '@mermaid-js/mermaid-mindmap': path.join(
+        __dirname,
+        '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs'
+      ), // Use this one to build
     },
   },
   server: {