Collapsed admonitions does not display mermaid properly

[AndersSteenNilsen]

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.

[github-actions]

Thank you for your contribution! This is very appreciated.

[fralau]

This is interesting, since it is the first time someone reported testing the case of collapsible notes in combination with mermaid.

Just to be sure, did you try this with mermaid2? It is now quite a different beast than the original plugin.

It is hard to say if the problem is any of the two (admonition or mermaid2). The question might be "how are they interfering with each other, and what could be done to make them work together?"

It would help if you showed a) markdown, b) raw HTML section (in the page served), c) HTML section after javascript execution, in each of the 4 cases:

1. Without the admonition plugin
2. Normal admonition use
3. Collapsible open
4. Collapsible closed

I realize it's 12 items, but we would have a "scientific study", which would give us a pretty good picture...

Also, which browser are you using? Just in case it could be a problem.

[AndersSteenNilsen]

Hi, yes, the reason I did it with mermaid2 is that the original plugin had the same problem.
I sat up a new project, clean project to investigate further.

So here is the files.
###docs/index.md

# Welcome to MkDocs

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

site/index.html

From mkdocs build

<h1 id="welcome-to-mkdocs">Welcome to MkDocs</h1>
<details class="note" open="open"><summary>Collapsable but open</summary><div class="mermaid">graph TD
A[Client] --&gt; B[Load Balancer]
</div>
</details>
<details class="note"><summary>Collapsed</summary><div class="mermaid">graph TD
A[Client] --&gt; B[Load Balancer]
</div>
</details>

output from mkdocs serve

Using Chrome Version 84.0.4147.135
I diffed the two blocks (after redacting the mermaid-id) so it would be easier to see the difference.

-    <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">
?                                                             ^           ^^^^^     ^
                  <style>
                      #mermaid-159781860xxxx {
                          font-family: "trebuchet ms", verdana, arial;
                          font-size: 16px;
                          fill: #333;
                      }

                      #mermaid-159781860xxxx .error-icon {
                          fill: #552222;
                      }

                      #mermaid-159781860xxxx .error-text {
                          fill: #552222;
                          stroke: #552222;
                      }

                      #mermaid-159781860xxxx .edge-thickness-normal {
                          stroke-width: 2px;
                      }

                      #mermaid-159781860xxxx .edge-thickness-thick {
                          stroke-width: 3.5px;
                      }

                      #mermaid-159781860xxxx .edge-pattern-solid {
                          stroke-dasharray: 0;
                      }

                      #mermaid-159781860xxxx .edge-pattern-dashed {
                          stroke-dasharray: 3;
                      }

                      #mermaid-159781860xxxx .edge-pattern-dotted {
                          stroke-dasharray: 2;
                      }

                      #mermaid-159781860xxxx .marker {
                          fill: #333333;
                      }

                      #mermaid-159781860xxxx .marker.cross {
                          stroke: #333333;
                      }

                      #mermaid-159781860xxxx svg {
                          font-family: "trebuchet ms", verdana, arial;
                          font-size: 16px;
                      }

                      #mermaid-159781860xxxx .label {
                          font-family: "trebuchet ms", verdana, arial;
                          color: #333;
                      }

                      #mermaid-159781860xxxx .label text {
                          fill: #333;
                      }

                      #mermaid-159781860xxxx .node rect,
                      #mermaid-159781860xxxx .node circle,
                      #mermaid-159781860xxxx .node ellipse,
                      #mermaid-159781860xxxx .node polygon,
                      #mermaid-159781860xxxx .node path {
                          fill: #ECECFF;
                          stroke: #9370DB;
                          stroke-width: 1px;
                      }

                      #mermaid-159781860xxxx .node .label {
                          text-align: center;
                      }

                      #mermaid-159781860xxxx .node.clickable {
                          cursor: pointer;
                      }

                      #mermaid-159781860xxxx .arrowheadPath {
                          fill: #333333;
                      }

                      #mermaid-159781860xxxx .edgePath .path {
                          stroke: #333333;
                          stroke-width: 1.5px;
                      }

                      #mermaid-159781860xxxx .flowchart-link {
                          stroke: #333333;
                          fill: none;
                      }

                      #mermaid-159781860xxxx .edgeLabel {
                          background-color: #e8e8e8;
                          text-align: center;
                      }

                      #mermaid-159781860xxxx .edgeLabel rect {
                          opacity: 0.5;
                          background-color: #e8e8e8;
                          fill: #e8e8e8;
                      }

                      #mermaid-159781860xxxx .cluster rect {
                          fill: #ffffde;
                          stroke: #aaaa33;
                          stroke-width: 1px;
                      }

                      #mermaid-159781860xxxx .cluster text {
                          fill: #333;
                      }

                      #mermaid-159781860xxxx div.mermaidTooltip {
                          position: absolute;
                          text-align: center;
                          max-width: 200px;
                          padding: 2px;
                          font-family: "trebuchet ms", verdana, arial;
                          font-size: 12px;
                          background: hsl(80, 100%, 96.2745098039%);
                          border: 1px solid #aaaa33;
                          border-radius: 2px;
                          pointer-events: none;
                          z-index: 100;
                      }

                      #mermaid-159781860xxxx:root {
                          --mermaid-font-family: "trebuchet ms", verdana, arial;
                      }

                      #mermaid-159781860xxxx flowchart {
                          fill: apa;
                      }
                  </style>
                  <g>
                      <g class="output">
                          <g class="clusters"></g>
                          <g class="edgePaths">
                              <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
-                                 <path class="path" d="M93.7734375,65.5L93.7734375,90.5L93.7734375,115.5"
-                                     marker-end="url(#arrowhead7)" style="fill:none"></path>
?                                 ^^^                           ^                     -------
+                                 <path class="path" d="M8,8L8,33L8,58" marker-end="url(#arrowhead14)" style="fill:none">
?                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^                           ^^
+                                 </path>
                                  <defs>
-                                     <marker id="arrowhead7" viewBox="0 0 10 10" refX="9" refY="5"
?                                                          ^
+                                     <marker id="arrowhead14" viewBox="0 0 10 10" refX="9" refY="5"
?                                                          ^^
                                          markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                                          <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
                                              style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                                      </marker>
                                  </defs>
                              </g>
                          </g>
                          <g class="edgeLabels">
-                             <g class="edgeLabel" style="opacity: 1;" transform="">
?                                                                     -------------
+                             <g class="edgeLabel" transform="" style="opacity: 1;">
?                                                  +++++++++++++
                                  <g transform="translate(0,0)" class="label">
                                      <rect rx="0" ry="0" width="0" height="0"></rect>
                                      <foreignObject width="0" height="0">
                                          <div xmlns="http://www.w3.org/1999/xhtml"
                                              style="display: inline-block; white-space: nowrap;"><span id="L-L-A-B"
                                                  class="edgeLabel L-LS-A' L-LE-B"></span></div>
                                      </foreignObject>
                                  </g>
                              </g>
                          </g>
                          <g class="nodes">
-                             <g class="node default" id="A" transform="translate(93.7734375,36.75)" style="opacity: 1;">
?                                                                                 ^^^^^^^^^^ ^^^^^
+                             <g class="node default" id="A" transform="translate(8,8)" style="opacity: 1;">
?                                                                                 ^ ^
-                                 <rect rx="0" ry="0" x="-42" y="-28.75" width="84" height="57.5" class="label-container">
?                                                         ^^      ^^^^^         ^^          ^^^^
+                                 <rect rx="0" ry="0" x="-10" y="-10" width="20" height="20" class="label-container">
?                                                         ^^      ^^         ^^          ^^
                                  </rect>
                                  <g class="label" transform="translate(0,0)">
-                                     <g transform="translate(-32,-18.75)">
?                                                             ^^^ ^^^^^^
+                                     <g transform="translate(0,0)">
?                                                             ^ ^
-                                         <foreignObject width="64.0078125" height="37.5">
?                                                               --- ------          ^^^^
+                                         <foreignObject width="0" height="0">
?                                                                          ^
                                              <div xmlns="http://www.w3.org/1999/xhtml"
                                                  style="display: inline-block; white-space: nowrap;">Client</div>
                                          </foreignObject>
                                      </g>
                                  </g>
                              </g>
-                             <g class="node default" id="B" transform="translate(93.7734375,144.25)" style="opacity: 1;">
?                                                                                 ^^^^^^^^^ ^^^^^^^
+                             <g class="node default" id="B" transform="translate(8,58)" style="opacity: 1;">
?                                                                                 ^^ ^
-                                 <rect rx="0" ry="0" x="-85.7734375" y="-28.75" width="171.546875" height="57.5"
-                                     class="label-container"></rect>
+                                 <rect rx="0" ry="0" x="-10" y="-10" width="20" height="20" class="label-container">
+                                 </rect>
                                  <g class="label" transform="translate(0,0)">
-                                     <g transform="translate(-75.7734375,-18.75)">
?                                                             ^^^^^^^^^^^ ^^^^^^
+                                     <g transform="translate(0,0)">
?                                                             ^ ^
-                                         <foreignObject width="151.546875" height="37.5">
?                                                               ^^^^^^^^^^          ^^^^
+                                         <foreignObject width="0" height="0">
?                                                               ^          ^
                                              <div xmlns="http://www.w3.org/1999/xhtml"
                                                  style="display: inline-block; white-space: nowrap;">Load Balancer</div>
                                          </foreignObject>
                                      </g>
                                  </g>
                              </g>
                          </g>
                      </g>
                  </g>
              </svg></div>

pip freeze

beautifulsoup4==4.9.1
click==7.1.2
EditorConfig==0.12.2
future==0.18.2
Jinja2==2.11.2
joblib==0.16.0
jsbeautifier==1.12.0
livereload==2.6.2
lunr==0.5.8
Markdown==3.2.2
MarkupSafe==1.1.1
mkdocs==1.1.2
mkdocs-material==5.5.7
mkdocs-material-extensions==1.0
mkdocs-mermaid2-plugin==0.3.1  
nltk==3.5
Pygments==2.6.1
pymdown-extensions==8.0
PyYAML==5.3.1
regex==2020.7.14
six==1.15.0
soupsieve==2.0.1
tornado==6.0.4
tqdm==4.48.2

mkdocs.yaml

site_name: My Docs

plugins:
    - search
    - mermaid2

extra_javascript:
    - https://unpkg.com/mermaid/dist/mermaid.min.js

theme:
  name: material

markdown_extensions:
  - admonition
  - pymdownx.details
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:mermaid2.fence_mermaid

[AndersSteenNilsen]

Sorry, read through your comment again. I will setup the 4 cases later today.
Anders.

[AndersSteenNilsen]

Ok, hopefully I understood what you ment.

I am using Chrome v. 84.0.4147.135

Setup

pip freeze

beautifulsoup4==4.9.1
click==7.1.2
EditorConfig==0.12.2
future==0.18.2
Jinja2==2.11.2
joblib==0.16.0
jsbeautifier==1.12.0
livereload==2.6.2
lunr==0.5.8
Markdown==3.2.2
MarkupSafe==1.1.1
mkdocs==1.1.2
mkdocs-material==5.5.7
mkdocs-material-extensions==1.0
mkdocs-mermaid2-plugin==0.3.1  
nltk==3.5
Pygments==2.6.1
pymdown-extensions==8.0
PyYAML==5.3.1
regex==2020.7.14
six==1.15.0
soupsieve==2.0.1
tornado==6.0.4
tqdm==4.48.2

mkdocs.yaml

site_name: My Docs

plugins:
    - search
    - mermaid2

extra_javascript:
    - https://unpkg.com/mermaid/dist/mermaid.min.js

theme:
  name: material

markdown_extensions:
  - admonition
  - pymdownx.details
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:mermaid2.fence_mermaid

So here is the cases.

1 Without the admonition plugin

1a docs/case1.md

    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```

1b site/case1/index.html

From mkdocs build

<div class="mermaid">graph TD
A[Client] --&gt; B[Load Balancer]
</div>

1c output after js

<div class="mermaid" data-processed="true"><svg id="mermaid-1597821871135" width="187.546875"
        xmlns="http://www.w3.org/2000/svg" height="181" viewBox="0 0 187.546875 181">
        <style>
            #mermaid-1597821871135 {
                font-family: "trebuchet ms", verdana, arial;
                font-size: 16px;
                fill: #333;
            }

            #mermaid-1597821871135 .error-icon {
                fill: #552222;
            }

            #mermaid-1597821871135 .error-text {
                fill: #552222;
                stroke: #552222;
            }

            #mermaid-1597821871135 .edge-thickness-normal {
                stroke-width: 2px;
            }

            #mermaid-1597821871135 .edge-thickness-thick {
                stroke-width: 3.5px;
            }

            #mermaid-1597821871135 .edge-pattern-solid {
                stroke-dasharray: 0;
            }

            #mermaid-1597821871135 .edge-pattern-dashed {
                stroke-dasharray: 3;
            }

            #mermaid-1597821871135 .edge-pattern-dotted {
                stroke-dasharray: 2;
            }

            #mermaid-1597821871135 .marker {
                fill: #333333;
            }

            #mermaid-1597821871135 .marker.cross {
                stroke: #333333;
            }

            #mermaid-1597821871135 svg {
                font-family: "trebuchet ms", verdana, arial;
                font-size: 16px;
            }

            #mermaid-1597821871135 .label {
                font-family: "trebuchet ms", verdana, arial;
                color: #333;
            }

            #mermaid-1597821871135 .label text {
                fill: #333;
            }

            #mermaid-1597821871135 .node rect,
            #mermaid-1597821871135 .node circle,
            #mermaid-1597821871135 .node ellipse,
            #mermaid-1597821871135 .node polygon,
            #mermaid-1597821871135 .node path {
                fill: #ECECFF;
                stroke: #9370DB;
                stroke-width: 1px;
            }

            #mermaid-1597821871135 .node .label {
                text-align: center;
            }

            #mermaid-1597821871135 .node.clickable {
                cursor: pointer;
            }

            #mermaid-1597821871135 .arrowheadPath {
                fill: #333333;
            }

            #mermaid-1597821871135 .edgePath .path {
                stroke: #333333;
                stroke-width: 1.5px;
            }

            #mermaid-1597821871135 .flowchart-link {
                stroke: #333333;
                fill: none;
            }

            #mermaid-1597821871135 .edgeLabel {
                background-color: #e8e8e8;
                text-align: center;
            }

            #mermaid-1597821871135 .edgeLabel rect {
                opacity: 0.5;
                background-color: #e8e8e8;
                fill: #e8e8e8;
            }

            #mermaid-1597821871135 .cluster rect {
                fill: #ffffde;
                stroke: #aaaa33;
                stroke-width: 1px;
            }

            #mermaid-1597821871135 .cluster text {
                fill: #333;
            }

            #mermaid-1597821871135 div.mermaidTooltip {
                position: absolute;
                text-align: center;
                max-width: 200px;
                padding: 2px;
                font-family: "trebuchet ms", verdana, arial;
                font-size: 12px;
                background: hsl(80, 100%, 96.2745098039%);
                border: 1px solid #aaaa33;
                border-radius: 2px;
                pointer-events: none;
                z-index: 100;
            }

            #mermaid-1597821871135:root {
                --mermaid-font-family: "trebuchet ms", verdana, arial;
            }

            #mermaid-1597821871135 flowchart {
                fill: apa;
            }
        </style>
        <g>
            <g class="output">
                <g class="clusters"></g>
                <g class="edgePaths">
                    <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
                        <path class="path" d="M93.7734375,65.5L93.7734375,90.5L93.7734375,115.5"
                            marker-end="url(#arrowhead7)" style="fill:none"></path>
                        <defs>
                            <marker id="arrowhead7" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth"
                                markerWidth="8" markerHeight="6" orient="auto">
                                <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
                                    style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                            </marker>
                        </defs>
                    </g>
                </g>
                <g class="edgeLabels">
                    <g class="edgeLabel" style="opacity: 1;" transform="">
                        <g transform="translate(0,0)" class="label">
                            <rect rx="0" ry="0" width="0" height="0"></rect>
                            <foreignObject width="0" height="0">
                                <div xmlns="http://www.w3.org/1999/xhtml"
                                    style="display: inline-block; white-space: nowrap;"><span id="L-L-A-B"
                                        class="edgeLabel L-LS-A' L-LE-B"></span></div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
                <g class="nodes">
                    <g class="node default" id="A" transform="translate(93.7734375,36.75)" style="opacity: 1;">
                        <rect rx="0" ry="0" x="-42" y="-28.75" width="84" height="57.5" class="label-container"></rect>
                        <g class="label" transform="translate(0,0)">
                            <g transform="translate(-32,-18.75)">
                                <foreignObject width="64.0078125" height="37.5">
                                    <div xmlns="http://www.w3.org/1999/xhtml"
                                        style="display: inline-block; white-space: nowrap;">Client</div>
                                </foreignObject>
                            </g>
                        </g>
                    </g>
                    <g class="node default" id="B" transform="translate(93.7734375,144.25)" style="opacity: 1;">
                        <rect rx="0" ry="0" x="-85.7734375" y="-28.75" width="171.546875" height="57.5"
                            class="label-container"></rect>
                        <g class="label" transform="translate(0,0)">
                            <g transform="translate(-75.7734375,-18.75)">
                                <foreignObject width="151.546875" height="37.5">
                                    <div xmlns="http://www.w3.org/1999/xhtml"
                                        style="display: inline-block; white-space: nowrap;">Load Balancer</div>
                                </foreignObject>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg></div>

##2
Normal admonition use

2a docs/index.md

!!! note
    Just a note

2b site/case2/index.html

<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Just a note</p>
</div>

2c output after js

<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Just a note</p>
</div>

3 Collapsible open

3a docs/case3.md

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

3b site/case3/index.html

<details class="note" open="open"><summary>Collapsible open</summary><div class="mermaid">graph TD
A[Client] --&gt; B[Load Balancer]
</div>

3c output after js

<details class="note" open="open">
  <summary>Collapsible open</summary>
  <div class="mermaid" data-processed="true"><svg id="mermaid-1597822260940" width="187.546875"
      xmlns="http://www.w3.org/2000/svg" height="181" viewBox="0 0 187.546875 181">
      <style>
        #mermaid-1597822260940 {
          font-family: "trebuchet ms", verdana, arial;
          font-size: 16px;
          fill: #333;
        }

        #mermaid-1597822260940 .error-icon {
          fill: #552222;
        }

        #mermaid-1597822260940 .error-text {
          fill: #552222;
          stroke: #552222;
        }

        #mermaid-1597822260940 .edge-thickness-normal {
          stroke-width: 2px;
        }

        #mermaid-1597822260940 .edge-thickness-thick {
          stroke-width: 3.5px;
        }

        #mermaid-1597822260940 .edge-pattern-solid {
          stroke-dasharray: 0;
        }

        #mermaid-1597822260940 .edge-pattern-dashed {
          stroke-dasharray: 3;
        }

        #mermaid-1597822260940 .edge-pattern-dotted {
          stroke-dasharray: 2;
        }

        #mermaid-1597822260940 .marker {
          fill: #333333;
        }

        #mermaid-1597822260940 .marker.cross {
          stroke: #333333;
        }

        #mermaid-1597822260940 svg {
          font-family: "trebuchet ms", verdana, arial;
          font-size: 16px;
        }

        #mermaid-1597822260940 .label {
          font-family: "trebuchet ms", verdana, arial;
          color: #333;
        }

        #mermaid-1597822260940 .label text {
          fill: #333;
        }

        #mermaid-1597822260940 .node rect,
        #mermaid-1597822260940 .node circle,
        #mermaid-1597822260940 .node ellipse,
        #mermaid-1597822260940 .node polygon,
        #mermaid-1597822260940 .node path {
          fill: #ECECFF;
          stroke: #9370DB;
          stroke-width: 1px;
        }

        #mermaid-1597822260940 .node .label {
          text-align: center;
        }

        #mermaid-1597822260940 .node.clickable {
          cursor: pointer;
        }

        #mermaid-1597822260940 .arrowheadPath {
          fill: #333333;
        }

        #mermaid-1597822260940 .edgePath .path {
          stroke: #333333;
          stroke-width: 1.5px;
        }

        #mermaid-1597822260940 .flowchart-link {
          stroke: #333333;
          fill: none;
        }

        #mermaid-1597822260940 .edgeLabel {
          background-color: #e8e8e8;
          text-align: center;
        }

        #mermaid-1597822260940 .edgeLabel rect {
          opacity: 0.5;
          background-color: #e8e8e8;
          fill: #e8e8e8;
        }

        #mermaid-1597822260940 .cluster rect {
          fill: #ffffde;
          stroke: #aaaa33;
          stroke-width: 1px;
        }

        #mermaid-1597822260940 .cluster text {
          fill: #333;
        }

        #mermaid-1597822260940 div.mermaidTooltip {
          position: absolute;
          text-align: center;
          max-width: 200px;
          padding: 2px;
          font-family: "trebuchet ms", verdana, arial;
          font-size: 12px;
          background: hsl(80, 100%, 96.2745098039%);
          border: 1px solid #aaaa33;
          border-radius: 2px;
          pointer-events: none;
          z-index: 100;
        }

        #mermaid-1597822260940:root {
          --mermaid-font-family: "trebuchet ms", verdana, arial;
        }

        #mermaid-1597822260940 flowchart {
          fill: apa;
        }
      </style>
      <g>
        <g class="output">
          <g class="clusters"></g>
          <g class="edgePaths">
            <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
              <path class="path" d="M93.7734375,65.5L93.7734375,90.5L93.7734375,115.5" marker-end="url(#arrowhead7)"
                style="fill:none"></path>
              <defs>
                <marker id="arrowhead7" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8"
                  markerHeight="6" orient="auto">
                  <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
                    style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                </marker>
              </defs>
            </g>
          </g>
          <g class="edgeLabels">
            <g class="edgeLabel" style="opacity: 1;" transform="">
              <g transform="translate(0,0)" class="label">
                <rect rx="0" ry="0" width="0" height="0"></rect>
                <foreignObject width="0" height="0">
                  <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span
                      id="L-L-A-B" class="edgeLabel L-LS-A' L-LE-B"></span></div>
                </foreignObject>
              </g>
            </g>
          </g>
          <g class="nodes">
            <g class="node default" id="A" transform="translate(93.7734375,36.75)" style="opacity: 1;">
              <rect rx="0" ry="0" x="-42" y="-28.75" width="84" height="57.5" class="label-container"></rect>
              <g class="label" transform="translate(0,0)">
                <g transform="translate(-32,-18.75)">
                  <foreignObject width="64.0078125" height="37.5">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Client
                    </div>
                  </foreignObject>
                </g>
              </g>
            </g>
            <g class="node default" id="B" transform="translate(93.7734375,144.25)" style="opacity: 1;">
              <rect rx="0" ry="0" x="-85.7734375" y="-28.75" width="171.546875" height="57.5" class="label-container">
              </rect>
              <g class="label" transform="translate(0,0)">
                <g transform="translate(-75.7734375,-18.75)">
                  <foreignObject width="151.546875" height="37.5">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Load
                      Balancer</div>
                  </foreignObject>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg></div>
</details>

4 Collapsible closed

4a docs/case4.md

??? note "Collapsible closed"
    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    ```

4b site/case4/index.html

<h1>Case4</h1>
<details class="note"><summary>Collapsible closed</summary><div class="mermaid">graph TD
A[Client] --&gt; B[Load Balancer]
</div>

4c output after js

<details class="note">
  <summary>Collapsible closed</summary>
  <div class="mermaid" data-processed="true"><svg id="mermaid-1597822423940" width="16"
      xmlns="http://www.w3.org/2000/svg" height="16" viewBox="-8 -8 16 16">
      <style>
        #mermaid-1597822423940 {
          font-family: "trebuchet ms", verdana, arial;
          font-size: 16px;
          fill: #333;
        }

        #mermaid-1597822423940 .error-icon {
          fill: #552222;
        }

        #mermaid-1597822423940 .error-text {
          fill: #552222;
          stroke: #552222;
        }

        #mermaid-1597822423940 .edge-thickness-normal {
          stroke-width: 2px;
        }

        #mermaid-1597822423940 .edge-thickness-thick {
          stroke-width: 3.5px;
        }

        #mermaid-1597822423940 .edge-pattern-solid {
          stroke-dasharray: 0;
        }

        #mermaid-1597822423940 .edge-pattern-dashed {
          stroke-dasharray: 3;
        }

        #mermaid-1597822423940 .edge-pattern-dotted {
          stroke-dasharray: 2;
        }

        #mermaid-1597822423940 .marker {
          fill: #333333;
        }

        #mermaid-1597822423940 .marker.cross {
          stroke: #333333;
        }

        #mermaid-1597822423940 svg {
          font-family: "trebuchet ms", verdana, arial;
          font-size: 16px;
        }

        #mermaid-1597822423940 .label {
          font-family: "trebuchet ms", verdana, arial;
          color: #333;
        }

        #mermaid-1597822423940 .label text {
          fill: #333;
        }

        #mermaid-1597822423940 .node rect,
        #mermaid-1597822423940 .node circle,
        #mermaid-1597822423940 .node ellipse,
        #mermaid-1597822423940 .node polygon,
        #mermaid-1597822423940 .node path {
          fill: #ECECFF;
          stroke: #9370DB;
          stroke-width: 1px;
        }

        #mermaid-1597822423940 .node .label {
          text-align: center;
        }

        #mermaid-1597822423940 .node.clickable {
          cursor: pointer;
        }

        #mermaid-1597822423940 .arrowheadPath {
          fill: #333333;
        }

        #mermaid-1597822423940 .edgePath .path {
          stroke: #333333;
          stroke-width: 1.5px;
        }

        #mermaid-1597822423940 .flowchart-link {
          stroke: #333333;
          fill: none;
        }

        #mermaid-1597822423940 .edgeLabel {
          background-color: #e8e8e8;
          text-align: center;
        }

        #mermaid-1597822423940 .edgeLabel rect {
          opacity: 0.5;
          background-color: #e8e8e8;
          fill: #e8e8e8;
        }

        #mermaid-1597822423940 .cluster rect {
          fill: #ffffde;
          stroke: #aaaa33;
          stroke-width: 1px;
        }

        #mermaid-1597822423940 .cluster text {
          fill: #333;
        }

        #mermaid-1597822423940 div.mermaidTooltip {
          position: absolute;
          text-align: center;
          max-width: 200px;
          padding: 2px;
          font-family: "trebuchet ms", verdana, arial;
          font-size: 12px;
          background: hsl(80, 100%, 96.2745098039%);
          border: 1px solid #aaaa33;
          border-radius: 2px;
          pointer-events: none;
          z-index: 100;
        }

        #mermaid-1597822423940:root {
          --mermaid-font-family: "trebuchet ms", verdana, arial;
        }

        #mermaid-1597822423940 flowchart {
          fill: apa;
        }
      </style>
      <g>
        <g class="output">
          <g class="clusters"></g>
          <g class="edgePaths">
            <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
              <path class="path" d="M8,8L8,33L8,58" marker-end="url(#arrowhead7)" style="fill:none"></path>
              <defs>
                <marker id="arrowhead7" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8"
                  markerHeight="6" orient="auto">
                  <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath"
                    style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                </marker>
              </defs>
            </g>
          </g>
          <g class="edgeLabels">
            <g class="edgeLabel" transform="" style="opacity: 1;">
              <g transform="translate(0,0)" class="label">
                <rect rx="0" ry="0" width="0" height="0"></rect>
                <foreignObject width="0" height="0">
                  <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span
                      id="L-L-A-B" class="edgeLabel L-LS-A' L-LE-B"></span></div>
                </foreignObject>
              </g>
            </g>
          </g>
          <g class="nodes">
            <g class="node default" id="A" transform="translate(8,8)" style="opacity: 1;">
              <rect rx="0" ry="0" x="-10" y="-10" width="20" height="20" class="label-container"></rect>
              <g class="label" transform="translate(0,0)">
                <g transform="translate(0,0)">
                  <foreignObject width="0" height="0">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Client
                    </div>
                  </foreignObject>
                </g>
              </g>
            </g>
            <g class="node default" id="B" transform="translate(8,58)" style="opacity: 1;">
              <rect rx="0" ry="0" x="-10" y="-10" width="20" height="20" class="label-container"></rect>
              <g class="label" transform="translate(0,0)">
                <g transform="translate(0,0)">
                  <foreignObject width="0" height="0">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Load
                      Balancer</div>
                  </foreignObject>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg></div>
</details>

[fralau]

Wow, thank's a lot! I cross-referenced the issue on the mkdocs-material repo, as this may be an interaction issue.

[fralau]

See answer from the maintainer of the material project :
squidfunk/mkdocs-material#1875 (comment)

[facelessuser]

Sorry, I responded in the wrong issue.

[fralau]

Actually it's even better :-)

I am tracking: you set startOnLoad: false, and then you use your own javascript loader. I need to understand the details, but that should be the general idea?

[facelessuser]

Yes, I'm basically handling the load myself by disabling it and using my own. I render the content under a parent of my choice and then replace the original content. There may or may not be subtle differences. While I source the payload from pre/code tags, the same concept works when applied to Mermaid's default expectation of div tags.

[fralau]

@facelessuser What would you have in your mkdocs.yml?

Something like this:

extra_javascript:
     - https://unpkg.com/[email protected]/dist/mermaid.min.js
     - js/extra.js

With the uml.js in the same js directory?

Another question would be: is there an elegant way to keep aligned with your versions of these javascript directories ? 🤔

[facelessuser]

Mermaid has to load first, config next, and lastly the loader. Now, I load both the Mermaid library and the config at the foot of the page I intend to have UMLs on (via the Snippets extension). I do this to avoid loading heavy JS libraries that I only actually need on a few pages. But if I were loading them in all pages, I'd probably setup the config in my extra.js before I call the loader, and include mermaid before I include my extra.js.

I'm not sure what the best way to sync up would be.

[facelessuser]

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.

[fralau]

@AndersSteenNilsen I've got a strange behavior.

I use:

## First Note (collapsible open)

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

## Second note (collapsed)

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

    ```

The first graph displays properly, but second one actually gives me an... error when I uncollapse, even though the initial code identical. It's not what you observe?

[facelessuser]

Hmm. I may have to update things for 8.6.4. Things have changed....

[fralau]

@facelessuser I've not used your code yet for this test, so perhaps it's perfectly OK?

[facelessuser]

I just get a tiny image for the closed one on Mermaid-js 8.7.0. Themeing also broke 😭. I'll have to look into all of this again. The small SVG is most likely because I need to render it under some different element. Pretty sure I had this right at one point...

[fralau]

😕 Let's try to backtrack a little. Which version of the library works for you, so at least we have a working approach for the moment?

[facelessuser]

It works in 8.4.8 and 8.7.0, but when in a hidden element (like closed details) the diagram is tiny.

8.7.0 Additionally breaks my custom styling, but that is unrelated to your issue.

[facelessuser]

I'm thinking maybe some styling with MkDocs threw off the size the diagrams in hidden elements, because I'm positive I had this working in 8.4.8...

[facelessuser]

I have them rendering in 8.7.0 now. I'll have to revisit themeing as they totally rewrote all of that.

[facelessuser]

8.4.8

8.7.0 (Obviously need to adjust theme)

[facelessuser]

Here's my current fix: facelessuser/pymdown-extensions@2777e81

[facelessuser]

@fralau, last of my fixes are in. Got themes working again (albeit couldn't get everything exactly the same, but 🤷). The official docs are now running 8.7.0, and I verified it works in Details and Tabs.

[fralau]

@facelessuser Thanks a lot for the quick response ! Now is my turn to attempt to package those fixes in the plugin...

What seemed initially a simple, "no-brainer" plugin is getting increasingly more sophisticated. 🙂

[fralau]

Wow. I'm a little flustered.

Default situation: At least I realized that the dot appears in Chrome and Safari, but not in Firefox, which seems to start the mermaid script, but to create an error... So behavior varies across browsers.

I'm trying to get a setup that works with @facelessuser's solution. I set up startOnLoad: false and in mkdocs.yml:

extra_javascript:
     - https://unpkg.com/[email protected]/dist/mermaid.min.js
     - js/loader.js

And the two files, loader.js and uml.js in the js directory.

I get that error in the browser's console:
SyntaxError: Unexpected identifier 'uml'. import call expects exactly one argument.

This is swampy terrain. Am I far away from the target or close? I don't know.

[facelessuser]

I don't know what's in your loader.

[facelessuser]

I think I may have mentioned this before, but I compile my code source into one file extra-<some hash>.js. I never directly use extra.js and uml.js. If you try to do so, not all browsers may support it. I write my source like that and use babel to convert it to JavaScript that will work in browsers. I use babel as it lets you use new JavaScript features that may not be supported in browsers yet. It makes writing JavaScript a little less of a chore.

I imagine you tried to grab the source directly and try it?

This is the actual compiled source before compressing it. This is what you should use as it is what babel spits out when it is done. You can edit this one to your liking.

(function () {
  'use strict';

  /**
   * Targets special code or div blocks and converts them to UML.
   * @param {string} className is the name of the class to target.
   * @return {void}
   */
  var uml = (function (className) {
    // Themes themes 99% of what we want, but there are still some stubborn things that require CSS
    // `https://github.com/facelessuser/pymdown-extensions/blob/master/docs/src/scss/js/_mermaid_dracula.scss`
    var configDark = {
      startOnLoad: false,
      theme: "base",
      themeVariables: {
        darkMode: true,
        background: "#323443",
        mainBkg: "#604b7d",
        textColor: "#bf95f9",
        lineColor: "#bf95f9",
        errorBkgColor: "#802c2c",
        errorTextColor: "#ff5757",
        primaryColor: "#604b7d",
        primaryTextColor: "#bf95f9",
        primaryBorderColor: "#bf95f9",
        secondaryColor: "#297d3e",
        secondaryTextColor: "#52fa7c",
        secondaryBorderColor: "#52fa7c",
        tertiaryColor: "#303952",
        tertiaryTextColor: "#6071a4",
        tertiaryBorderColor: "#6071a4",
        noteBkgColor: "#797d45",
        noteTextColor: "#f1fa89",
        noteBorderColor: "#f1fa89",
        edgeLabelBackground: "#604b7d",
        edgeLabelText: "#604b7d",
        actorLineColor: "#6071a4",
        activeTaskBkgColor: "#803d63",
        activeTaskBorderColor: "#ff7ac6",
        doneTaskBkgColor: "#297d3e",
        doneTaskBorderColor: "#52fa7c",
        critBkgColor: "#802c2c",
        critBorderColor: "#ff5757",
        taskTextColor: "#bf95f9",
        taskTextOutsideColor: "#bf95f9",
        taskTextLightColor: "#bf95f9",
        sectionBkgColor: "#bf95f9b3",
        sectionBkgColor2: "#bf95f966",
        altSectionBkgColor: "#323443",
        todayLineColor: "#ff7ac6",
        gridColor: "#6071a4",
        defaultLinkColor: "#8be8fd",
        altBackground: "#bf95f9",
        classText: "#bf95f9",
        fillType0: "#406080",
        fillType1: "#46747f",
        fillType2: "#297d3e",
        fillType3: "#805c36",
        fillType4: "#803d63",
        fillType5: "#604b7d",
        fillType6: "#802c2c",
        fillType7: "#797d45",
        fillType8: "#7c7c79"
      },
      flowchart: {
        htmlLabels: false
      },
      sequence: {
        useMaxWidth: false
      },
      "class": {
        textHeight: 16,
        dividerMargin: 16
      }
    };
    var configLight = {
      startOnLoad: false,
      theme: "base",
      flowchart: {
        htmlLabels: false
      },
      sequence: {
        useMaxWidth: false
      },
      "class": {
        textHeight: 16,
        dividerMargin: 16
      }
    };

    var getFromCode = function getFromCode(parent) {
      // Handles <pre><code> text extraction.
      var text = "";

      for (var j = 0; j < parent.childNodes.length; j++) {
        var subEl = parent.childNodes[j];

        if (subEl.tagName.toLowerCase() === "code") {
          for (var k = 0; k < subEl.childNodes.length; k++) {
            var child = subEl.childNodes[k];
            var whitespace = /^\s*$/;

            if (child.nodeName === "#text" && !whitespace.test(child.nodeValue)) {
              text = child.nodeValue;
              break;
            }
          }
        }
      }

      return text;
    }; // Get the proper theme color


    if (document.querySelector("[data-md-color-primary^=\"drac-\"]")) {
      mermaid.initialize(configDark);
    } else {
      mermaid.initialize(configLight);
    } // Find all of our Mermaid sources and render them.


    var config = mermaid.mermaidAPI.getConfig();
    var blocks = document.querySelectorAll("pre.".concat(className));
    var surogate = document.querySelector("html");

    var _loop = function _loop(i) {
      var parentEl = blocks[i]; // Create a temporary element with the typeset and size we desire.
      // Insert it at the end of our parent to render the SVG.

      var temp = document.createElement("div");
      temp.style.visibility = "hidden";
      temp.style.width = "100%";
      temp.style.minWidth = "100%";
      temp.style.fontSize = config.themeVariables.fontSize || "16px";
      surogate.appendChild(temp);
      mermaid.mermaidAPI.render("_mermaind_".concat(i), getFromCode(parentEl), function (content) {
        var el = document.createElement("div");
        el.className = className;
        el.innerHTML = content;
        var child = el.childNodes[0]; // Some mermaid items have no height assigned, fix this for sane sizes. Mainly for state diagrams.
        //
        // Notes (as of Mermaid 8.4.8):
        // - Gantt: width is always relative to the parent, if you have a small parent, the chart will be squashed.
        //   Can't help it.
        // - Pie: These charts have no default height or width. Good luck pinning them down to a reasonable size.
        // - Git: The render portion is agnostic to the size of the parent element. But padding of the SVG is relative
        //   to the parent element. You will never find a happy size.
        // - State/Class: These two are rendered with references internally in the SVG that certain elements link to.
        //   The problem is that they link to internal elements that use the same IDs that are in other sibling SVG
        //   of these types. All other diagrams use unique IDs. So if the first of these gets hidden due to being in an
        //   inactive tab, or hidden under a closed details element the browser will not be able to find the ID as it
        //   only searches for the first. This will cause certain visual elements (arrow heads etc.) to disappear.

        if (!child.hasAttribute("height") && child.hasAttribute("width")) {
          child.setAttribute("height", temp.childNodes[0].getBoundingClientRect().height);
        } // Insert the render where we want it and remove the original text source.
        // Mermaid will clean up the temporary element.


        parentEl.parentNode.insertBefore(el, parentEl);
        parentEl.parentNode.removeChild(parentEl);
      }, temp);
    };

    for (var i = 0; i < blocks.length; i++) {
      _loop(i);
    }
  });

  (function () {
    var onReady = function onReady(fn) {
      if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", fn);
        document.addEventListener("DOMContentSwitch", fn);
      } else {
        document.attachEvent("onreadystatechange", function () {
          if (document.readyState === "interactive") {
            fn();
          }
        });
      }
    };

    onReady(function () {
      if (typeof mermaid !== "undefined") {
        uml("mermaid");
      }
    });
  })();

}());

Then all you have to do is include mermaid and then this. You would edit the configs above to get styling the way you want.

[facelessuser]

Also, do prepare yourself, for when you run into this issue. mermaid-js/mermaid#1318

This stems from them (in certain diagram types) using the same ID (non-unique IDs) for certain defs that they reuse throughout a diagram. Because certain diagram types don't use unique IDs per render,
if you define multiple of those diagram types, or even some of different types tha that happen to define defs with already used IDs, they will share the first defs in the first diagram. This is because browsers expect IDs to be unique, and will only search for the first instance.

What this means is that if you hide the first diagram of that uses the same defs IDs of other diagrams, all others that use those defs will think the defs are hidden. And they'll disappear. The linked issue above demonstrates this in the screecap.

What they need to do is namespace their IDs to reduce the chance of people accidentally reusing those IDs, and secondly, use unique IDs for each diagram (increment some kind of counter or something every time they attempt to use an already used ID).

Mermaid, while powerful, isn't without some hiccups.

[facelessuser]

My loader looks for classes on pre you are putting them on code. So, I updated your custom fence, and your BeautifulSoup logic to account for that, it now works. (I also updated to Mermaid 8.7.0).

mkdocs-mermaid2.zip

[fralau]

Oh this was so simple. Sometime small mistakes can have vast consequences 👍
Thanks a lot!

[facelessuser]

Yeah, I had already tested in a bare bones mkdocs project, so I knew the issue had to be specific to what you are doing, it's just hard to debug without seeing the code. So, seeing what you are doing made it easy.

[fralau]

@facelessuser Alas 😢 on that test repo, I am still having problems

• The first diagram is truncated on Firefox and displayed too small on Safari and Chrome.
• The others are not interpreted.

[fralau]

@facelessuser By the way, would you be in a position to provide a permalink for your mermaid loader library, e.g. by distributing it through npm/unpkg?

[fralau]

@facelessuser I updated the project on github and pypi to facilitate testing (a git clone should do it). Version is 0.4.1.

The custom loader mode is alpha (semi-working). It activates only if two conditions are cumulatively met in the config file:

1. Superfences declared in plugins.
2. custom_fences contains format:!!python/name:mermaid2.fence_mermaid_custom

[facelessuser]

Two things I discovered:

1. My loader doesn't support HTML tags inside. You probably need to update this. With that said, 8.7.0 either has a regression, or removed HTML tag rendering, but that would be a Mermaid issue, I believe, but this works in 8.6.4.

     var getFromCode = function getFromCode(parent) {
       // Handles <pre><code> text extraction.
       var text = "";
   
       for (var j = 0; j < parent.childNodes.length; j++) {
         var subEl = parent.childNodes[j];
   
         if (subEl.tagName.toLowerCase() === "code") {
           var text = subEl.innerHTML
           console.log(text)
           text = text.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&')
           // for (var k = 0; k < subEl.childNodes.length; k++) {
           //   var child = subEl.childNodes[k];
           //   var whitespace = /^\s*$/;
   
           //   text = text.concat(child.nodeValue);
           //   // break;
           // }
           console.log(text)
           break
         }
       }
   
       return text;
     };

2. If you use html as the surrogate instead of body it the text is no longer truncated and such. So look for that.

   var surrogate = document.querySelector("html");

[facelessuser]

@facelessuser By the way, would you be in a position to provide a permalink for your mermaid loader library, e.g. by distributing it through npm/unpkg?

This would probably be too much work for me. I'm not familiar with the process, and as you are starting to see, what you need differs a bit from what I need.

[facelessuser]

Also, it may be good to change to this in the loader. The shadow DOM needs to be styled as block, and I found setting the initial line height helps any weird cutoff as well.

style.textContent = ":host {display: block; line-height: initial;} div.mermaid {margin: 0; overflow: visible;}";

[facelessuser]

I updated my script with all the above changes accept reading loose HTML blocks. I also added a try/catch so that if one diagram fails, we also keep parsing the others. I also clean up temp divs. I thought at one point Mermaid cleaned those up automatically, but it appears that maybe it doesn't...maybe I imagined it 🤷.

[fralau]

@facelessuser

@facelessuser By the way, would you be in a position to provide a permalink for your mermaid loader library, e.g. by distributing it through npm/unpkg?

This would probably be too much work for me. I'm not familiar with the process, and as you are starting to see, what you need differs a bit from what I need.

I will take it on myself to look for a solution for publishing the library and propose it to you. Trying is the least that I can do, after all your efforts.

I'm afraid that my knowledge of css and javascript is not very deep (I'm far more comfortable with Python)... in which way do the needs of the plugin differ from your usual cases? Would you see a way to reconcile the plugin a little more with your view of things?

[facelessuser]

1. I don't need to handle HTML tags, but maybe I can make it handle things that way. The way I currently get the code is that I grab the first text node from the code block. That usually has everything I need with entities already unescaped etc. I don't have to handle unescaping entities or any such things. Maybe the cost is low for me to add that in. I can maybe at least do that. But, for the case of 8.7.0 not processing your loose HTML tags, I'm not sure. But it works on 8.6.4 🤷 . Maybe they changed something, maybe they didn't and something is just broken. Not sure if I'll spend any time on that. I've always found the support for HTML labels to cause other side effects.

2. I may not always be on the latest Mermaid. While every once in a while, I may check out the latest version and check if it is easy to upgrade, or if I'd like to hold off until I'm motivated, I'm not striving to be up to date per se. If you directly depend on me for the source, that means I have to field related issues update more frequently, debug...basically, I'm a lot more involved.

3. My scripts are currently Mermaid specific, but they may not always be.

One thing I'd like to avoid is having to support this work. I support a number of projects, and adding yet another one, especially one like loading Mermaid, which requires some fancy workarounds for issues that should have already been fixed in the main library, just isn't attractive to me. It's one of the reasons why I am just documenting the work I've done and then saying "have at it, you are on your own".

I don't mind spending some time on it when I'm motivated, but having other projects depending on my work directly, with the expectation that I'm going to promptly fix those issues is not currently a road I want to go down. I'm also much more comfortable with Python, though I've taught myself a lot about front end web stuff.

[facelessuser]

I was looking into securityLevel: "loose". What I've realized is that my current script handles HTML tags out of the box without me doing anything special for 8.6.4. The current iteration can be used by just using my Javascript and no special mkdocs plugin.

It fails in 8.7.0, because there is a bug: mermaid-js/mermaid#1607.

So, basically, what I have currently works all by itself.

Here we have two blocks, one with HTML labels disabled and one with HTML labels enabled. I have securityLevel set to "loose"

```mermaid
graph LR
    hello["<b>Hello</b>"] --> world["<big><i>World</i></big>"]
    world --> mermaid[mermaid web site]
    click mermaid "https://mermaid-js.github.io/mermaid" "Website"
```

```mermaid
%%{init: { 'flowchart': {'htmlLabels': true} } }%%
graph LR
    hello["<b>Hello</b>"] --> world["<big><i>World</i></big>"]
    world --> mermaid[mermaid web site]
    click mermaid "https://mermaid-js.github.io/mermaid" "Website"
```

With 8.7.0, it breaks due to the bug:

So I think that all your package has to do now is just handle the yaml stuff and include the loader. 8.7.0 is not our concern as Mermaid needs to fix it in their next release.

[fralau]

@facelessuser I should have pointed out this bug of 8.7.0 more clearly (mermaid-js/mermaid#1607). Mermaid's team are going to fix it, but that's the reason why I had to introduce this management of versions in my files. That was the reason why I deliberately used 8.6.4.

One thing I'd like to avoid is having to support this work. I support a number of projects, and adding yet another one, especially one like loading Mermaid, which requires some fancy workarounds for issues that should have already been fixed in the main library, just isn't attractive to me. It's one of the reasons why I am just documenting the work I've done and then saying "have at it, you are on your own".

You're right about this. To me, Mermaid has also been a side project (I just took over the project because I wanted to fix something and it was no longer maintained). Also, as I said, I'm not expert with javascript and css.

Here are my takeaways:

1. Mermaid is a spectacular technology, and injecting javascript/HTML/css into pages is useful to create interactive effects (typically to make clickable links, etc. that a static image cannot provide).
2. The downside is that javascript and css can be fickle, so things can easily break down or turn into rabbit holes.
3. The Mermaid team are working hard, but they are currently having difficulty keeping the quality of the code watertight (it's a bit "leaky"). It's something they can progressivley solve in time, but right now, a significant part of the code of my plugin (and much of the documentation) were aimed at working around those issues (typically introducting a managment of library versions.

Clearly, you and I spent an inordinate amount of time. What we got out of it is useful experience 🙂

[fralau]

Perhaps the best thing is that we feed this work back upstream to Mermaid's project. I will

1. Wrap up the work on the plugin (i.e. insert your last version of the javascript library)
2. Open an issue on their github repo, with a summary of what we did, with pointers to your documentation and mine.

Hopefully it might have some value for them, and encourage some cross-pollination?

[facelessuser]

I've already fed the most of it up to Mermaid. I have an open issue that goes into details about the IDs, and I've mentioned that wrapping things in shadow DOMs fixes it. What they do with it is up to them. As far as I'm concerned, the loader is now probably more robust than its ever been before. Hopefully, I don't have to touch it for a while, but time will tell 🙂 .

[fralau]

Oh, perfect: just give me the link, I will have a look at it! In the event, I will refer to it if I open my own issue.

[facelessuser]

I referenced it earlier in the thread: mermaid-js/mermaid#1318. It's probably my biggest complaint. That and the loader not rendering properly if it's in a details or something similar. Now that I've finally worked around all of that, I'm pretty happy. Maybe one day I won't have to around that stuff.

[fralau]

Agreed.

Sorry for missing your reference about the issue. It's the same as with version 8.6.4: you and I produced so much text in this thread that we both have trouble keeping up with each other 😄

[fralau]

This issue is fixed in 9557eed (v. 0.5.0).

This has been tested in the project in /test/superfences.

This is an experimental fix, which requires the use of @facelessuser's javascript loader (see instructions in README).

Unless there are observations, this issue will be closed.

[fralau]

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

[AndersSteenNilsen]

Thank you for resolving this issue! @fralau, @facelessuser