Mermaid - Text out of the box

[blavad]

How to display mermaid diagrams properly ?

I discovered Marp last week and since I can't stop using it 🤩 It helps me to create my course slides and quality technical documents very quickly. However, I'm having an issue displaying mermaid diagrams.

However, I have a slight problem when displaying mermaid diagrams. The text comes out of the box (see image below).

I followed @jschlenker's tip to handle the problem and it works in my vscode preview, but when I try to export in PDF, the problem persists.

Any idea how to fix this issue ?

Reproduction code (after allowing HTML):

---
marp: true
theme: default
---

<pre class="mermaid">
%%{init: {'theme': 'base',
    'themeVariables': {
      'primaryColor': '#fff',
      'primaryTextColor': '#1f1b30',
      'primaryBorderColor': '#FF2453',
      'lineColor': '#1f1b30',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff',
      'fontFamily':'verdana'
    }, "flowchart" : { "curve" : "basis" } } }%%
classDiagram
    Class1 *-- Class2
</pre>


<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });

window.addEventListener('vscode.markdown.updateContent', function() { mermaid.init() });
</script>

[yhatt]

Marp slides will be scaled for fitting to the screen/parent element. However, the initial rendering of mermaid.js on the browser seems not to scale text according to the scale. This is still a blocker of mermaid.js integration.

For stable mermaid rendering, I recommend to use pre-rendered image of mermaid. https://gist.github.com/yhatt/8931dd98769bcc1c5b4b92fd1234a190 is powered by kroki diagram renderer, that supports a lot of diagram libraries including mermaid.js.
https://github.com/orgs/marp-team/discussions/207#discussioncomment-2182916

[blavad]

Thanks for the explanation and advises.