How to use the mermaid.render function in mermaid

To help you get started, we’ve selected a few mermaid examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github BackMarket / github-mermaid-extension / src / scripts / contentscript.js View on Github external
function render(code, target, id) {
  mermaidAPI.render(id, code, (svgCode, bindFunctions) => {
    target.innerHTML = svgCode
    bindFunctions(target)
  }, target)
}
github BoostIO / Boostnote / browser / components / render / MermaidRender.js View on Github external
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
  }
}
github ory / kratos / docs / src / theme / Mermaid.js View on Github external
useEffect(() => {
    mermaid.render(id, chart, (svg) => {
      setSvg(svg)
    })
  }, [])