Визуализируйте несколько диаграмм русалок, добавленных javascript

function addDiagram() {
  return `
  <pre class = "mermaid">
    graph TD
    A[First diagram] --> B[Something]
  </pre>
  <pre class = "mermaid">
    graph TD
    A[Second diagram] --> B[Something]
  </pre>
  `;
}

$(".add-diagram").on("click", function() {
  $("#output").html(addDiagram())
})

const appendDiagramTo = (el) => (code) => el.outerHTML = code

function renderDiagram(id, el) {
  mermaid.render(
    id,
    el.textContent,
    appendDiagramTo(el)
  )
}

$(".make-diagrams").on("click", function() {
  $("pre.mermaid").each(function(i, e) {
    // creating the container ID -> this is NOT unique, so if you have
    // multiple places on your page rendering multiple diagrams, you
    // should update this to be really unique
    const containerId = `mermaid-${i}`

    // rendering the diagram with the unique ID
    renderDiagram(containerId, e)
  })

})

<div id = "output"></div>
<button class = "add-diagram">add diagram</button>
<button class = "make-diagrams">make diagrams</button>
<script src = "https://unpkg.com/mermaid@8/dist/mermaid.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>