在Docsify中集成Mermaid失败：页面返回[Object Promise]求助

问题根源 #

mermaid.render() 是异步方法，返回的是Promise对象，直接把它插入模板字符串中会被强制转为字符串[Object Promise]，这就是页面显示异常的原因。

解决方案1：异步处理渲染结果 #

修改Markdown渲染器的code方法为异步函数，通过await获取渲染后的SVG内容：

<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: async function (code, lang) {
          if (lang == "mermaid") {
            const { svg } = await mermaid.render(`mermaid-svg-${num++}`, code);
            return `<div class="mermaid">${svg}</div>`;
          }
          return this.origin.code.apply(this, arguments);
        },
      },
    },
  };
</script>

解决方案2：使用Mermaid自动渲染（更简洁） #

不需要手动调用mermaid.render()，只需输出带mermaid类的容器，让Mermaid自动识别并渲染：

<script>
  mermaid.initialize({ startOnLoad: true });
  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">${code}</div>`;
          }
          return this.origin.code.apply(this, arguments);
        },
      },
    },
    // 可选：页面动态加载内容时，添加钩子触发重新渲染
    hooks: {
      mounted() {
        mermaid.contentLoaded();
      },
      async ready() {
        await mermaid.run();
      }
    }
  };
</script>

说明 #

• 方案1适合需要手动控制渲染过程、自定义SVG输出的场景；
• 方案2更简洁，依赖Mermaid的自动渲染机制，适合大部分常规使用场景。

内容的提问来源于stack exchange，提问作者Anthony