How to use the mermaid.initialize function in mermaid

renderMermaid () {
    const codes = this.exportContainer.querySelectorAll('code.language-mermaid')
    for (const code of codes) {
      const preEle = code.parentNode
      const mermaidContainer = document.createElement('div')
      mermaidContainer.innerHTML = code.innerHTML
      mermaidContainer.classList.add('mermaid')
      preEle.replaceWith(mermaidContainer)
    }
    // We only export light theme, so set mermaid theme to `default`, in the future, we can choose whick theme to export.
    mermaid.initialize({
      theme: 'default'
    })
    mermaid.init(undefined, this.exportContainer.querySelectorAll('div.mermaid'))
    if (this.muya){
      mermaid.initialize({
        theme: this.muya.options.mermaidTheme
      })
    }
  }

renderMermaid () {
    const codes = this.exportContainer.querySelectorAll('code.language-mermaid')
    for (const code of codes) {
      const preEle = code.parentNode
      const mermaidContainer = document.createElement('div')
      mermaidContainer.innerHTML = code.innerHTML
      mermaidContainer.classList.add('mermaid')
      preEle.replaceWith(mermaidContainer)
    }
    // We only export light theme, so set mermaid theme to `default`, in the future, we can choose whick theme to export.
    mermaid.initialize({
      theme: 'default'
    })
    mermaid.init(undefined, this.exportContainer.querySelectorAll('div.mermaid'))
    if (this.muya) {
      mermaid.initialize({
        theme: this.muya.options.mermaidTheme
      })
    }
  }

renderMermaid () {
    const codes = this.exportContainer.querySelectorAll('code.language-mermaid')
    for (const code of codes) {
      const preEle = code.parentNode
      const mermaidContainer = document.createElement('div')
      mermaidContainer.innerHTML = code.innerHTML
      mermaidContainer.classList.add('mermaid')
      preEle.replaceWith(mermaidContainer)
    }
    // We only export light theme, so set mermaid theme to `default`, in the future, we can choose whick theme to export.
    mermaid.initialize({
      theme: 'default'
    })
    mermaid.init(undefined, this.exportContainer.querySelectorAll('div.mermaid'))
    if (this.muya){
      mermaid.initialize({
        theme: this.muya.options.mermaidTheme
      })
    }
  }

renderMermaid () {
    if (this.mermaidCache.size) {
      mermaid.initialize({
        theme: this.muya.options.mermaidTheme
      })
      mermaid.init(undefined, document.querySelectorAll(Array.from(this.mermaidCache).join(', ')))
      this.mermaidCache.clear()
    }
  }

componentDidMount () {
    mermaid.initialize(this.json.mermaid)
    mermaid.init(undefined, this.container)
  }
}

graphDefinition += `\n${frame.name}-->${showLable ? '|' + (i + 1) + '|' : ''}${n.name}`;
                queue.push(n);
            });
        }
    }

    if (queue.length === 1 && !Array.isArray(queue[0].next)) {
        const frame = queue[0];
        graphDefinition += `\n${frame.name}`;
    }

    element.innerHTML = graphDefinition;

    document.body.appendChild(element);

    mermaid.initialize({
        theme: 'default',
        rightAngles: false
    });
    mermaid.init(undefined, element);
}

function render (element, content, theme, enableHTMLLabel) {
  try {
    const height = element.attributes.getNamedItem('data-height')
    if (height && height.value !== 'undefined') {
      element.style.height = height.value + 'vh'
    }
    const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
    mermaidAPI.initialize({
      theme: isDarkTheme ? 'dark' : 'default',
      themeCSS: isDarkTheme ? darkThemeStyling : '',
      useMaxWidth: false,
      flowchart: { htmlLabels: enableHTMLLabel }
    })
    mermaidAPI.render(getId(), content, (svgGraph) => {
      element.innerHTML = svgGraph
    })
  } catch (e) {
    element.className = 'mermaid-error'
    element.innerHTML = 'mermaid diagram parse error: ' + e.message
  }
}

constructor() {
    mermaid.initialize({
      startOnLoad: false
    });
  }