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

Merge pull request #3880 from ZenUml/defects/issue-3878

Browse Source 
Defects/issue 3878
This commit is contained in:
Sidharth Vinod 2022-12-06 15:52:15 +05:30 committed by GitHub
commit f2ee20fdf5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,9 +53,20 @@ 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 });
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>