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

Question

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

\n

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

\n

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

\n

我是这样初始化的：

\n

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

\n

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

\n

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

\n

\r\n

\r\n

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

\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    A --> B`*/\n  // it doesn\xe2\x80\x99t work with event listener\n}\nedit(); // it works\ndocument.body.addEventListener("click", edit)

\r\n

\r\n

\r\n

\n

Answer 1

看来，我知道答案了。看下面的解决方案：

  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>