Mermaid graphs on multiple pages only render on first synchronous load

[jfmou]

Hi all,

Thanks a lot for the awesome work done on docsify, love it !
I'm having troubles with 2 mermaid graphs on two separate pages.
When I access each of these pages synchronously, each graph renders correctly.
But when I try to navigate from one page to the other, the second one asynchronously loaded doesn't have any graph rendered.
On click, it does go through the following snippet :

<script>
  mermaid.initialize({ startOnLoad: false });
  window.$docsify = {
    name: 'COP Front',
    coverpage: true,
    loadSidebar: true,
    subMaxLevel: 3,
    auto2top: true,
    themeColor: '#4e93a5',
    markdown: {
      renderer: {
        code: function(code, lang) {
          if (lang === "mermaid") {
            return (
              '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
            );
          }
          return this.origin.code.apply(this, arguments);
        }
      }
    }
  }
</script>

Mermaid seems to generate the proper svg graph based on raw text.
But when the destination page is rendered it looks like it didn't replace raw text by svg graph in place resulting in the page rendered without any graph.
I guess i'm missing something, thanks for your help.

[sprungknoedl]

Hi,

This seems to be caused by the variable lang being used as an ID for mermaid. If you generate a random ID for the first parameter of mermaid.render it works:

<script>
    function makeid(len) {
        var text = new Array(len);
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
        for (var i = 0; i < len; i++) text[i] = possible.charAt(Math.floor(Math.random() * possible.length));
        return text.join("");
    }

    mermaid.initialize({ startOnLoad: false });
    window.$docsify = {
    markdown: {
        renderer: {
            code: function(code, lang) {
                if (lang === "mermaid") {
                var id = makeid(10);
                var svg = mermaid.render(id, code)
                return (
                    '<div class="mermaid">' + svg + '</div>'
                );
                }
                return this.origin.code.apply(this, arguments);
            }
            }
        },
    }
</script>

[jfmou]

Well thank you very much, it did solve my case. I didn't notice mermaid #render method took an id as first param wasn't obvious for me while reading the demo and/or doc.

Thank you very much !

[upupming]

Thanks a lot, I have encountered this problem too after following docsify's documentation.

This is the problem:

I see the element tab on Chrome, there are several graphs with same id mermaid, so this is the root of this problem:

But could anyone explain the reason why this happens?