From c7471f17558856c8f91dec7b8e4908f84c4df350 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 3 Dec 2022 19:10:05 +1100
Subject: [PATCH 1/3] Fixed the issue that theme-switch does not work on docs.

---
 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index b287346f9..fef090ea9 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -8,7 +8,9 @@ try {
 }
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
-  mermaid.initialize(config);
+  // make a clone of config, so we don't mutate the original
+  const mermaidConfig = { ...config };
+  mermaid.initialize(mermaidConfig);
   const svg = await mermaid.renderAsync(id, code);
   return svg;
 };

From a1e4ffb3f08e38bb02945e33f02b7992c3f99a2c Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 3 Dec 2022 19:30:09 +1100
Subject: [PATCH 2/3] Fixed an issue that diagrams disappear from docs pages
 when switching themes or reloading pages

---
 packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index 9ae9c9f3b..c99141601 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -61,6 +61,13 @@ const renderChart = async () => {
   mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
 
   console.log({ mermaidConfig });
-  svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  // This is a hack to force v-html to re-render, otherwise the diagram disappears
+  // when **switching themes** or **reloading the page**.
+  // The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
+  // Because svgCode does NOT change, v-html does not re-render.
+  // This is not required for all diagrams, but it is required for c4c, mindmap and zenuml.
+  const salt = Math.random().toString(36).substring(7);
+  svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
 };
 </script>

From 7a086890fd180545f774a82ad08e15a0f2939894 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Tue, 6 Dec 2022 19:44:14 +1100
Subject: [PATCH 3/3] Made mermaidConfig a local variable so that it cannot be
 shared cross rendering.

---
 .../mermaid/src/docs/.vitepress/theme/Mermaid.vue     | 11 +++++------
 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts |  4 +---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index c99141601..566543001 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -20,11 +20,6 @@ const props = defineProps({
 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 });
@@ -58,7 +53,11 @@ 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';
+  const mermaidConfig = {
+        securityLevel: 'loose',
+        startOnLoad: false,
+        theme: hasDarkClass ? 'dark' : 'default',
+      };
 
   console.log({ mermaidConfig });
   let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index fef090ea9..b287346f9 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -8,9 +8,7 @@ try {
 }
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
-  // make a clone of config, so we don't mutate the original
-  const mermaidConfig = { ...config };
-  mermaid.initialize(mermaidConfig);
+  mermaid.initialize(config);
   const svg = await mermaid.renderAsync(id, code);
   return svg;
 };