[Bugs]`mermaid-docsify v2.0.0` does not work

[editfund-founder]

graph TD
    docsify[mermaid-docsify v2]  --> HomePage
    HomePage --> mermaidPage1 
    mermaidPage1  --> doesNotWork[fa fa-book mermaid-docsify does not work]
    mermaidPage1--> switchToAnotherPage;
    switchToAnotherPage --> mermaidPage2[mermaidPage1]
    mermaidPage2[mermaidPage1] --> doesNotWork[does not work]
    doesNotWork[does not work]-->reloadThisPage[Reload This Page]
    reloadThisPage[Reload This Page]--> itWorks[it works]
    itWorks[it works]-->switchToAnotherPage

Thank you💞

[editfund-founder]

Solutions

change hook.ready(function() to hook.doneEach(function ()

<script>
    window.$docsify = {
      name: "",
      repo: "",
      loadSidebar: true,

      coverpage: true,
      plugins: [
        function (hook) {
          var footer = [
            "<hr/>",
            "<footer>",
            '<span><a href="https://codeberg.org/editfund">Edit.Fund</a> &copy;2020~2023</span>',
            "</footer>",
          ].join("");

          hook.afterEach(function (html) {
            return html + footer;
          });
          hook.afterEach(function (html, next) {
            // We load the HTML inside a DOM node to allow for manipulation
            const htmlElement = document.createElement("div");
            htmlElement.innerHTML = html;

            htmlElement
              .querySelectorAll("pre[data-lang=mermaid]")
              .forEach((element) => {
                // Create a <div class="mermaid"> to replace the <pre>
                const replacement = document.createElement("div");
                replacement.textContent = element.textContent;
                replacement.classList.add("mermaid");

                // Replace
                element.parentNode.replaceChild(replacement, element);
              });

            next(htmlElement.innerHTML);
          });
          hook.doneEach(function () {
            let mermaidConfig = {
              querySelector: ".mermaid",
            };
            mermaid.run(mermaidConfig);
          });
        },
      ],
    };
</script>

[TallBaldGeek]

Thanks for the workaround @editfund-founder ! I can verify that I was also seeing bad behavior until adding the .doneEach code as you had it.

Prior to that, when the page initially rendered I was seeing the markup dumped on the page such as sequenceDiagram a->>b, etc.

[Crown0815]

I can also confirm the issue and that adding

<script>
    window.$docsify = {
      plugins: [
        function (hook) {
          hook.doneEach(function () {
            let mermaidConfig = {
              querySelector: ".mermaid",
            };
            mermaid.run(mermaidConfig);
          });
        },
      ],
    };
</script>

into the docsify configuration resolves the issue.
Is there any chance this fix can become part of the plugin?

[Leward]

This has been fixed in the following MR: #32

A new version (2.0.1) has been released.