mkdocs-mermaid2-plugin: Collapsed admonitions does not display mermaid properly

Do not know if this problem is in this plugin or in admonitions. But collapsible admonitions (that are already closed) only shows a small rectangle.

!!! note "This Works
    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```

???+ note "This Also"
    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```

??? note "But not this"
    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```

HTML output

I’m no expert in HTML, but I believe the main problem is the size. Output for the two last examples:

<svg id="mermaid-1597753460847" width="187.546875" xmlns="http://www.w3.org/2000/svg" height="181" viewBox="0 0 187.546875 181">

<svg id="mermaid-1597753460911" width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="-8 -8 16 16">

PS: Tried this with the original plugin and it didn’t work.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 71 (30 by maintainers)

Commits related to this issue

Make default configuration compatible with other themes (issue #16) - convert tags from <pre><code class='mermaid'> to <div><class='mermaid> as this is more robust. - amend documentation (use... — committed to fralau/mkdocs-mermaid2-plugin by deleted user 4 years ago

Most upvoted comments

@AndersSteenNilsen To make it clear, the collapsed “admonition” now works correctly with the diagram, providing one follows the instructions.

Collapsed

Uncollapsed

fralau on Sep 7, 2020

Notice the last screenshot, it can accept configs just like before. It’ll call initialize on those configs. In the example above it default is the config. So we set the forest theme on that page. Default relates to schemes, so it is the config for the default scheme. For most people, that would be what they define, it’s mainly done this way so I can toggle light and dark mode at some point.

facelessuser on Aug 21, 2020

Currently, all our extra.js does is UML stuff, but that is not guaranteed to be the case forever. If something I wish to include in the future catches my eye, then I may update extra to do more. The uml.js though is really what you want, you could easily construct what you want around that, but I imagine you want it to work on div tags, which I don’t currently have it supporting. It also is using whatever es20XX format that babel uses by default. So it isn’t already in the most ideal, old school JS format either.

Maybe if I get some time, I can play with your plugin a bit, and see if there is an easy way to get yours doing what I do. Something fairly easy for you to maintain.

facelessuser on Aug 19, 2020