How to use mermaid - 10 common examples

elms.forEach((elm) => {
      Object.assign(elm.style, {
        visibility: 'initial'
      });

      mermaid.init();
      // this.encode(elm);
    });
  }

initMermaid () {
    const {
      code,
      history,
      match: { url }
    } = this.props
    try {
      mermaid.parse(code)
      // Replacing special characters '<' and '>' with encoded '<' and '>'
      let _code = code
      _code = _code.replace(//g, '>')
      // Overriding the innerHTML with the updated code string
      this.container.innerHTML = _code
      mermaid.init(undefined, this.container)
    } catch (e) {
      // {str, hash}
      const base64 = Base64.encodeURI(e.str || e.message)
      history.push(`${url}/error/${base64}`)
    }
  }

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 () {
    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
      })
    }
  }

// console.log("Rendering");
    // console.log(input);
    // mermaidAPI.render(title, "graph TB;Loading;", diagram => {
    //   console.log("Rendered");
    //   setTimeout(
    //     () =>
    //       mermaidAPI.render(title, input, diagram => {
    //         console.log("Rendered");
    //         console.log(diagram);
    //         callback(diagram);
    //       }),
    //     200
    //   );
    // });

    mermaidAPI.render(title, input, diagram => {
      // console.log("Rendered");
      // console.log(diagram);
      callback({ diagram, input });
    });
  } catch (e) {
    console.log("Failed to generate diagram");
    console.log(e);
  }
}

function getDiagram(title, input, callback) {
  try {
    mermaidAPI.initialize({
      startOnLoad: true
    });

    mermaidAPI.parseError = function(err, hash) {
      // console.log("parseError");
      // console.log(err.messsage);
    };
    // console.log("Rendering");
    // console.log(input);
    // mermaidAPI.render(title, "graph TB;Loading;", diagram => {
    //   console.log("Rendered");
    //   setTimeout(
    //     () =>
    //       mermaidAPI.render(title, input, diagram => {
    //         console.log("Rendered");
    //         console.log(diagram);

initMermaid () {
    const {
      code,
      history,
      match: { url }
    } = this.props
    try {
      mermaid.parse(code)
      // Replacing special characters '<' and '>' with encoded '<' and '>'
      let _code = code
      _code = _code.replace(//g, '>')
      // Overriding the innerHTML with the updated code string
      this.container.innerHTML = _code
      mermaid.init(undefined, this.container)
    } catch (e) {
      // {str, hash}
      const base64 = Base64.encodeURI(e.str || e.message)
      history.push(`${url}/error/${base64}`)
    }
  }

import mermaid from 'mermaid';
import * as svgPng from 'save-svg-as-png';

console.log( 'mermaid', mermaid.version() );

// 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);
  }
});