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

【问题标题】：How to render a mermaid flowchart dynamically?如何动态渲染美人鱼流程图？
【发布时间】：2020-12-09 07:25:40
【问题描述】：

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

我希望能够动态改变块的内容，脚本每次都重建块图。

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

我是这样初始化的：

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>

【问题讨论】：

我给你做了一个sn-p。请提供minimal reproducible example - 在“someclass”存在之前，您的美人鱼 init 将无法在头脑中工作
谢谢。我已经编辑了 HTML-sn-p，所以现在它是正确的，我希望。
那么你到底想要什么事件来触发渲染？
“美人鱼”类对块的textContent 的任何更改。或者，更好的是，单击一个特殊按钮。（页面上会有一个表单，用户可以在其中输入他的数据 - 流程图在线编辑器。我的代码会监听输入事件或按钮点击并更改块的内容。我想每次触发渲染. 如果我可以在我的表单事件处理程序中编写类似mermaid.render() 的指令或类似的指令，那就足够了！）
你看过 mermaidJS 自己的实时编辑器吗？ github.com/mermaid-js/mermaid-live-editor。你是这样想的吗？

标签： javascript mermaid

【解决方案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>

【讨论】：