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

У меня есть динамическая веб-страница, которая может содержать несколько диаграмм русалок. Эти диаграммы встроены в веб-страницу в виде исходного кода (например, в теги <pre>), а затем должны быть обработаны русалкой для замены реальными диаграммами. На данный момент у меня две проблемы:

Подход, который я нашел (адаптируя ответы на этот вопрос), не работает с последней версией mermaid.
Не работает с несколькими диаграммами, обрабатывается только последняя.

Вот что у меня есть сейчас. Я издеваюсь над скриптом, который добавляет диаграммы с add_diagram. Затем, если я запускаю make_diagrams(), отображается только второй. Кроме того, это не работает правильно, если я переключаюсь на последнюю версию русалки.

function add_diagram() {
  diagram_code = `
  <pre class = "mermaid">
    graph TD
    A[First diagram] --> B[Something]
  </pre>
  <pre class = "mermaid">
    graph TD
    A[Second diagram] --> B[Something]
  </pre>
  `;
  document.getElementById("output").innerHTML += diagram_code;
}
function make_diagrams() {
  $("pre.mermaid").each(function() {
    mermaid.render(
      "body", 
      this.textContent, 
      (function (code) {this.outerHTML = code}).bind(this))
  })
}

<div id = "output"/>
<button onclick = "add_diagram()">add diagram</button>
<button onclick = "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>

Как сделать это правильно?

🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Mermaid38 вопросов

Ответ:

Решено

Проблема, с которой вы столкнулись, заключается в том, что вторая диаграмма отображается с тем же идентификатором, что и первая, — это перезаписывает содержимое. Вам необходимо отображать все диаграммы с уникальным идентификатором.

Кроме того, я бы посоветовал не использовать onclick, особенно если вы уже используете jQuery.

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>

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

Ответ:

Интересные вопросы для изучения