Closed
Description
Description
When I upgraded to 11.4.0, I found that there was a problem with rendering multiple charts simultaneously. However, there was no such problem in 9.4.0. Then I found that in version 11.4.0, there would be no problem if multiple charts were rendered at intervals（settimeout）.
such as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mermaid11.4.0</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<body>
<img src="" id="img1" alt="">
<img src="" id="img2" alt="">
<script>
mermaid.mermaidAPI.render("randomId111", `
flowchart TD
A[开始] --> B[部门概况]
B --> C[制作部门架构图]
C --> D[标明部门职责和关键联系人]
`).then(({ svg: svgCode }) => {
console.log(svgCode)
document.querySelector("#img1").src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgCode)))}`
}).catch((e) => {
console.log("ender error", e)
})
setTimeout(() => {
mermaid.mermaidAPI.render("randomId222", `
flowchart TD
A[开始] --> B[部门概况]
B --> C[制作部门架构图]
C --> D[标明部门职责和关键联系人]
`).then(({ svg: svgCode }) => {
console.log(svgCode)
document.querySelector("#img2").src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgCode)))}`
}).catch((e) => {
console.log("render error", e)
})
}, 2000);
</script>
</body>
</html>
it is as expected
Steps to reproduce
11.4.0 it has a ui display error, The mermaid codes before and after are the same, but the style of the first mermaid chart is messed up.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mermaid11.4.0</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<body>
<img src="" id="img1" alt="">
<img src="" id="img2" alt="">
<script>
mermaid.mermaidAPI.render("randomId111", `
flowchart TD
A[开始] --> B[部门概况]
B --> C[制作部门架构图]
C --> D[标明部门职责和关键联系人]
`).then(({ svg: svgCode }) => {
console.log(svgCode)
document.querySelector("#img1").src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgCode)))}`
}).catch((e) => {
console.log("ender error", e)
})
mermaid.mermaidAPI.render("randomId222", `
flowchart TD
A[开始] --> B[部门概况]
B --> C[制作部门架构图]
C --> D[标明部门职责和关键联系人]
`).then(({ svg: svgCode }) => {
console.log(svgCode)
document.querySelector("#img2").src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgCode)))}`
}).catch((e) => {
console.log("render error", e)
})
</script>
</body>
</html>it is not as expected
9.4.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mermaid9.4.0</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<body>
<img src="" id="img1" alt="">
<img src="" id="img2" alt="">
<script>
mermaid.mermaidAPI.render("randomId111", `
flowchart TD
A[开始] --> B[部门概况]
B --> C[制作部门架构图]
C --> D[标明部门职责和关键联系人]
`, (svgCode) => {
console.log(svgCode)
document.querySelector("#img1").src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgCode)))}`
})
mermaid.mermaidAPI.render("randomId222", `
flowchart TD
A[开始] --> B[部门概况]
B --> C[制作部门架构图]
C --> D[标明部门职责和关键联系人]
`, (svgCode) => {
console.log(svgCode)
document.querySelector("#img2").src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgCode)))}`
})
</script>
</body>
</html>it is as expected
Screenshots
error
Suggested Solutions
No response
Additional Context
No response