Marp permet de créer des présentations à partir d'un fichier Markdown.
Dans ces présentations, il est souhaitable de pouvoir gérer des graphes créés par Mermaid.

Pour cela, ajouter dans le markdown :

<style>
  img.mermaid-100h {
    margin: 10px;
    padding: 10px;
    max-height: 100%;
  } 
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>
  // Replaces <pre class="mermaid"> blocks with <img> blocks, to make mermaid render properly.
  // Preserves classes and styling so they can be used to fix sizing if necessary.

  mermaid.initialize({ startOnLoad: false });

  window.addEventListener('load', async function () {
    const mermaidEls = document.querySelectorAll('pre.mermaid');

    for (const el of mermaidEls) {
      const { svg } = await mermaid.render('asd', el.textContent);

      const img = document.createElement('img');
      img.setAttribute('src', `data:image/svg+xml;base64,${btoa(svg)}`);
      img.setAttribute('class', el.getAttribute('class'));
      img.setAttribute('style', el.getAttribute('style') || '');

      el.parentNode.replaceChild(img, el);
    }
  });
</script>

<pre class="mermaid mermaid-100h">
  graph LR;
  Serveur1 --> Services1;
  Serveur2 --> Services2;
  Serveur3 --> Services3;
  Serveur4 --> Services4;
  Services1 --> SchemasNormaux;
  Services2 --> SchemasNormaux;
</pre>

Et compiler avec l'option marp --html file.md