How to use the mermaid.mermaidAPI function in mermaid

const renderMermaidCharts = () => {
        const pres = document.querySelectorAll('pre[lang=mermaid]')
        for (const pre of pres) {
            const el = pre as HTMLElement
            if (el.style.display === 'none') {
                // already rendered
                continue
            }
            el.style.display = 'none'
            const chartDefinition = pre.getElementsByTagName('code')[0].textContent || ''
            const chartID = `mermaid_${id++}`
            mermaid.mermaidAPI.render(chartID, chartDefinition, svg => el.insertAdjacentHTML('afterend', svg))
        }
    }

try {
          tex += katex.renderToString(line, {
            displayMode: true
          });
        } catch (err) {
          tex += '<pre>' + err + '</pre>';
        }
      }
    });
    return '<div data-line="' + line_number + '">' + tex + '</div>';
  } else if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' ||
    firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) {
    if (firstLine === 'sequenceDiagram') {
      code += '\n'; // 如果末尾没有空行，则语法错误
    }
    if (mermaid.mermaidAPI.parse(code)) {
      return '<div data-line="' + line_number + '" class="mermaid">' + code +
        '</div>';
    } else {
      return '<pre data-line="' + line_number + '">' + mermaidError +
        '</pre>';
    }
  } else {
    return markdown.Renderer.prototype.code.apply(this, arguments);
  }
};
renderer.html = function(html) {

// TODO This is very ugly, but for now it renders. This SVG creation should be
// done in the build step.
let ss = document.getElementById( 'js-stage' );
let btn = document.getElementById( 'save-png-button' );
btn.addEventListener('click', function() {
  let svgList = ss.getElementsByTagName('svg');
  let options = {
    scale: 2,
    backgroundColor: '#ffffff',
  };
  if (svgList.length) {
    svgPng.saveSvgAsPng(svgList[0], document.title+'.png', options);
  }
});

mermaid.mermaidAPI.render(
  'js-stage',
  ss.textContent.replace(/\n/g, '\\n'),
  function ( c ) {
    ss.innerHTML = c;
  }
);

() => {
      try {
        console.log('redrawing')
        mermaid.mermaidAPI.parse(content)
        mermaid.mermaidAPI.render(id, content, setChart)
        setError(null)
      } catch (err) {
        console.log(err)
        setChart(null)
        setError(err.str)
      }
    },
    [id, content]

import React, {useState, useEffect} from 'react'
import mermaid from 'mermaid'

import './Mermaid.css'

mermaid.mermaidAPI.initalize({startOnLoad: false})

interface Props {
  id: string
  content: string
}

const Mermaid = ({id, content}: Props) => {
  const [chart, setChart] = useState(null)
  const [error, setError] = useState(null)

  useEffect(
    () => {
      try {
        console.log('redrawing')
        mermaid.mermaidAPI.parse(content)
        mermaid.mermaidAPI.render(id, content, setChart)

renderDiagram(code) {
    try {
      this.cleanupMermaidDiv();

      _mermaid.mermaidAPI.render(this.mermaidId, code, svg => this.setState({
        svg,
        error: null
      }));
    } catch (e) {
      this.setState({
        error: e,
        svg: ''
      });
    }
  }

activate() {
    _mermaid.mermaidAPI.initialize({
      startOnLoad: false,
      theme: inkdrop.config.get('mermaid.theme')
    });

    if (_inkdrop.markdownRenderer) {
      _inkdrop.markdownRenderer.remarkCodeComponents.mermaid = Mermaid;
    }
  },

import React, { ReactText, PropTypes, Component } from 'react';
import { Modal, Button } from 'react-bootstrap';
import _ from 'lodash';

const mermaidAPI = require('mermaid').mermaidAPI;

export default class PreviewModal extends Component {
  constructor(props) {
    super(props);
    mermaidAPI.initialize({
      startOnLoad:false
    });
  }

  static propTypes = {
    name: PropTypes.string,
    state: PropTypes.string,
    collection: PropTypes.array.isRequired,
    close: PropTypes.func.isRequired
  }