Search code examples
promisemarkdownmermaiddocsify

Mermaid in docsify return [Object Promise]

Implement mermaid in docsify doc without success

Hello i'm trying to implement mermaid flowchart in my docsify project but my html return [Object Promise]

I try with differents version of mermaid but always without success.

Here my conf html

  <body>
    <div id="app"></div>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css" />
    <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      var num = 0;
      mermaid.initialize({ startOnLoad: false });
      window.$docsify = {
        name: "", // TODO: Update.
        auto2top: true,
        coverpage: true,
        loadSidebar: true,
        subMaxLevel: 2,
        themeColor: "#3170a7",
        markdown: {
          smartypants: false,
          renderer: {
            code: function (code, lang) {
              if (lang == "mermaid") {
                return `<div class="mermaid">${mermaid.render("mermaid-svg-" + num++, code)}</div>`;
              }
              return this.origin.code.apply(this, arguments);
            },
          },
        },
      };
    </script>
  </body>

The result:

enter image description here

I don't know what i'm doing wrong and i'don't find many solutions. If someone here can helpe me :) Thanks

Solution

  • Solve this by changing cdn version:

    Use this one: //cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js

    But if someone as a solution to fix the [object promise] it will be better