Admonition: side effect of collapsed note with mermaid2 diagram

Note: Sorry for the misfiling, as it is only a cross referenced issue on fralau/mkdocs-mermaid2-plugin#8 . I would not want to call it a bug and the problem is in a customization (plugin). Actually, it’s one heck of a boundary case, but it might be interesting because of what we could learn from it 😄.

Material is becoming more or less a de facto standard with mkdocs. Perhaps we would need a specific category for these inevitable INTERACTION issues between material and other downstream extensions and plugins, i.e. where it is not at a question of any “bug” on either side, but rather to coordinate our efforts in order to improve interoperability? This might also be an opportunity to attract good will people with a wide range of skill sets?

Here is the short description: the combination of Adminition collapsible notes + mermaid2 diagram does work, while collapsed notes + mermaid2 diagram does not work.

???+ note "Collapsable but open"
    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```
??? note "Collapsed"
    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```

According to tests performed by the person who reported the issue, the html page served by mkdocs serve differs in heigh and viewbox between the “collapsible” and “collasped cases”.

-    <details class="note" open="open">
?                                ----
+     <details class="note" open="">
? +
-         <summary>Collapsable but open</summary>
?                         --- ^^^^^^^^^
+         <summary>Collapsed</summary>
?                          ^
-         <div class="mermaid" data-processed="true"><svg id="mermaid-159781860xxxx" width="187.546875"
?                                                                                            ----- ---
+         <div class="mermaid" data-processed="true"><svg id="mermaid-159781860xxxx" width="16"
-                 xmlns="http://www.w3.org/2000/svg" height="181" viewBox="0 0 187.546875 181">
?                                                             ^^           ^^^  ----- ---  ^^
+                 xmlns="http://www.w3.org/2000/svg" height="16" viewBox="-8 -8 16 16">
?                                                             ^           ^^^^^     ^

Though I am a little out of my depth here, it intuitively makes sense. My working hypothesis is that when the user is trying to “uncollapse” the note in the browser, something should happen also to the diagram that is inside, which is not happening.

The code of the mermaid2 plugin does not interfere with those CSS parameters. My previous experience (with SuperFences) is, however, that a tweak is sometimes neeeded in the plugin so that it correctly catches the ball.

If you have any hints, thoughts or comments, let me know? A lot of more information is available on: fralau/mkdocs-mermaid2-plugin#8

[squidfunk]

I just bumped into another reason why a native and deep integration makes sense - I now have it successfully running with instant loading and without the need for any config or extra JS. When there’s a mermaid block in the source, the theme will automatically inject the necessary JavaScript and set Mermaid up itself 😊

[squidfunk]

I’ve been playing around with Mermaid and finally have a good proof of concept for an integration which works in conjunction with the mkdocs-minify-plugin and will adjust to the chosen color palette, including dark mode:

It doesn’t use any plugins besides Superfences and will be activated just by including the Mermaid JavaScript. No configuration required albeit overrides will be possible.

My testing shows that this does also solve the original issue (not working as part of details).