作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 mermaid用于构建流程图的库。其工作原理是在 block 内有一个伪代码 - 特殊语法的命令,在此基础上在 block 中构建流程图。
我希望能够动态更改 block 的内容,并且脚本每次都重建 block 图。
我应该如何设置初始化?也许我应该在设置中添加一些回调函数?
我是这样初始化的:
mermaid.init({/*what setting parameters should be here?*/}, ".someClass"/*selector*/);
但该脚本不会呈现任何新命令。它仅呈现加载文档时存在的命令。
function edit() {
const new_mermaid = document.createElement("div");
new_mermaid.classList.add("mermaid");
new_mermaid.classList.add(".someClass");
/*new_mermaid.innerHTML =
`graph TD
1[point 1] --> 2[point 2]`;*/
// it doesn't work when I append the new element dynamically!
new_mermaid.innerHTML = document.querySelector(".mermaid").innerHTML;
// it works always.
document.body.append(new_mermaid);
/* document.querySelector(".mermaid").innerHTML =
`
graph TD
A --> B`*/
// it doesn’t work with event listener
}
edit(); // it works
document.body.addEventListener("click", edit)
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
// how to do it correctly?
mermaid.init({
noteMargin: 10
}, ".someClass");
</script>
<div class="mermaid someClass">
graph TD
1--> 2
3 --> 2
2 --> 1
</div>
最佳答案
看来,我知道答案了。看看下面的解决方案:
document.querySelector("button").addEventListener("click", (e) => {
const output = document.querySelector(".flowchart");
if (output.firstChild !== null) {
output.innerHTML = "";
}
const code = document.querySelector(" textarea").value.trim();
let insert = function (code) {
output.innerHTML = code;
};
mermaid.render("preparedScheme", code, insert);
});
<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
<p>Input your data:</p>
<div class="input">
<textarea style="width:300px; height:200px"></textarea>
<br>
<button>render</button>
</div>
<div>
<p>output:</p>
<div class="render_container" style = "width:300px; height:200px; border:thin solid silver" >
<div class="flowchart"></div>
</div>
</div>
关于javascript - 如何动态渲染美人鱼流程图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65212332/
我在 markdown 中使用美人鱼。我不知道如何连接子图。 鉴于下面的程序,我需要能够用箭头连接一和二。 - ```mermaid graph LR; subgraph on
努力争取美人鱼 - https://github.com/knsv/mermaid跟...共事已标记 - https://github.com/chjj/marked 据我所知,我应该能够在 mark
我是一名优秀的程序员,十分优秀!