Mermaid2 diagrams with annotations shows half the (+) button and nothing happens when you click it

[elgalu]

Hi, thanks a lot for this plugin, it's extremely useful<3

The mkdocs.yml -> features: content.code.annotate almost works except that the button is half-visible and more importantly click doesn't trigger the annotation even with securityLevel: loose

Please find a minimal working example with code at:
Demo: https://elgalu.github.io/mermaid2-content.code.annotate/
Code: https://github.com/elgalu/mermaid2-content.code.annotate/

[fralau]

Thanks for your message. I am not sure what I can do from my level of expertise, since the plugin merely calls the mermaid.js library.

But looking at the HTML page actually generated, I see something a bit weird in it:

<div class="highlight"><pre><span></span><code>&lt;div class="annotate" markdown&gt;
<span class="sb">```mermaid</span>
<span class="s">graph TD</span>
<span class="s">A[Client (1)] --&gt; B[Server]</span>
<span class="sb">```</span>
&lt;/div&gt;

At least, we have a clue on why the tag is not executed.

One thing I might advise you (just in case) would be to skip a line between the div and the triple quotes:

 <div class="annotate" markdown>

```mermaid
 graph TD
 A[Client (1)] --> B[Server]
 ```
 </div>

[elgalu]

Thanks. Yeah I tried all sort of combinations wrt adding/removing between the div and the triple quotes.

[fralau]

If you remove the <div>, it will work, right?

Here is what I would do, if I were you: deactivate the mermaid2 plugin, and then see if you see the same anomaly in the HTML generated (i.e. the HTML markers are transformed into entities)?

Do that while keeping the mermaid2 custom-fence; and then change it to the standard recommended for Material. That should give us more information on where the problem comes from.

[elgalu]

Thanks, added to the demo Without the div, annotate does nothing

[fralau]

The point now is to determine who could help you since it is a "holistic" problem of multiple interactions that involves:

• Annotate extension
• Material theme
• Mermaid2 plugin
• mermaid.js
• and mkdocs itself.

So, where does the problem come from?

Perhaps a problem to be discussed on mkdocs/community?

[elgalu]

yeah I also raised it at mermaid-js/mermaid#4865

[fralau]

Here is @squidfunk's advice on the community room:

Annotations are not supported in Mermaid diagrams.
Reason: with Mermaid, you're in SVG space, which has entirely different layout and positioning semantics than HTML. It is probably possible to make it work, but from my research trying to make tooltips work in SVG, it's quite an effort.

[fralau]

Should we consider this an issue or a discussion?

[fralau]

Even though this issue was closed as an issue, I believe it is still useful to keep it open as a discussion, if someone wants to add to it.