Mermaid tags using << >> as delimiter get interpreted as html

[malkav30]

When using mermaid.js to integrate graphics as described in the wiki, some classDiagram options using <<>> delimiters break the rendering, even when correctly escaped e.g :

Problem

<div class="mermaid">
classDiagram
    class Collection {
        &lt;&lt;interface&gt;&gt;
    }
</div>

is rendered like this by remark (note the <interface html element) :

<div class="mermaid">
classDiagram
    class Collection {
        &lt;<interface>&gt;
    }
</interface></div>

Subsequently, it breaks mermaid.js rendering.

Expected behavior:

It should be rendered as this :

<div class="mermaid">
classDiagram
    class Collection {
        &lt;&lt;interface&gt;&gt;
    }
</div>

Version used : remark latest (https://remarkjs.com/downloads/remark-latest.min.js), mermaid.js 8.8.4 (https://cdn.jsdelivr.net/npm/mermaid@8.8.4/dist/mermaid.min.js)