我使用 Javascript 从我的数据(来自数组)创建美人鱼思维导图的语法。该图在 https://mermaid.live/edit 中呈现得很漂亮。 我将美人鱼 API 与“await mermaid.renderAsync”一起使用。 (附代码)。 现在的问题是,我第一次调用它时,出现错误“图表中的语法错误”,并且在控制台中出现错误:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'h')
at cF.run (cytoscape.umd.js
如果我现在改变我的主题(例如基本或中性或黑暗),思维导图会在第二次调用时正确显示。 这里的错误在哪里?
渲染图形的代码:
async function makeGraph(id) {
let data = localStorage.getItem("mermaidMindMapInput");
var svg = await mermaid.renderAsync("svg_" + id, data);
var elem = document.getElementById(id);
elem.innerHTML = svg;
}
html:
<div id="g2"></div>
更改主题的代码:
function changeTheme() {
// Get a reference to the select element
var themeSelect = document.querySelector("#theme-select");
// Add an event listener to the select element to change the theme
console.log(document.querySelector("#theme-select"));
document
.querySelector("#theme-select")
.addEventListener("change", function () {
// Get the selected theme
var selectedTheme = event.target.value;
// Check if the selected theme is different from the current theme
if (selectedTheme !== currentTheme) {
// Update the current theme
currentTheme = selectedTheme;
// Reinitialize Mermaid with the new theme
mermaid.initialize({ startOnLoad: true, theme: currentTheme });
var diagrams = document.querySelectorAll(".g2");
diagrams.forEach((diagram) => {
var svg = diagram.querySelector("svg");
if (svg) {
diagram.removeChild(svg);
}
});
makeGraph("g2");
}
});
}
我解决了我的问题。首先,我将 changeTheme("neutral") 称为固定主题。然后我调用 make_graph() 函数。它有效。!