小编Bor*_*ris的帖子

如何动态渲染美人鱼流程图?

我正在使用mermaid库来构建流程图。其工作原理是在块内有一个伪代码 - 特殊语法的命令,在此基础上在块中构建流程图。

\n

我希望能够动态更改块的内容,并且脚本每次都会重建框图。

\n

我应该如何设置初始化?也许我应该在设置中添加一些回调函数?

\n

我是这样初始化的:

\n
mermaid.init({/*what setting parameters should be here?*/}, ".someClass"/*selector*/);\n
Run Code Online (Sandbox Code Playgroud)\n

但该脚本不会\xe2\x80\x99t 呈现任何新命令。它仅呈现加载文档时存在的命令。

\n

换句话说,我想在线编辑流程图。

\n

\r\n
\r\n
mermaid.init({/*what setting parameters should be here?*/}, ".someClass"/*selector*/);\n
Run Code Online (Sandbox Code Playgroud)\r\n
function edit() {\n  const new_mermaid = document.createElement("div");\n  new_mermaid.classList.add("mermaid");\n  new_mermaid.classList.add(".someClass");\n  /*new_mermaid.innerHTML =\n            `graph TD\n   1[point 1] --> 2[point 2]`;*/\n  // it doesn\'t work when I append the new   element dynamically! \n  new_mermaid.innerHTML = document.querySelector(".mermaid").innerHTML;\n  // it works always.\n  document.body.append(new_mermaid);\n  /* document.querySelector(".mermaid").innerHTML = \n            `\n    graph TD\n …
Run Code Online (Sandbox Code Playgroud)

javascript mermaid

11
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×1

mermaid ×1