GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Fixed an issue that diagrams disappear from docs pages when switching themes or reloading pages

Browse Source
This commit is contained in:
MrCoder 2022-12-03 19:30:09 +11:00
parent c7471f1755
commit a1e4ffb3f0
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
View File

@ -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>