Use mermaid in jsdoc tutorials

example.md

<script src="./jsdoc-tuts-mermaid.js"></script>

This is an example on how to add an mermaid in a JSDoc-Tutorial.

Make sure to add the script in the markdown, add the script in the staticFiles folder and set it up accodingly in the jsdoc config file as shown in the gist.

You then can add mermaids in the same way as in GitLab:

graph TB
  A --> C
  A --> D
  B --> C
  B --> D

jsdoc-tuts-mermaid.js

function renderMermaidLangs () {
  [...document.querySelectorAll('.lang-mermaid')]
    .forEach((markdownGraphEl, i) => {
      const graphDefinition = markdownGraphEl.innerText

      const cb = function (graphHTML) {
        const graphContainerEl = document.createElement('div')
        graphContainerEl.innerHTML = graphHTML
        const graphEl = graphContainerEl.querySelector('svg')

        graphEl.style.display = 'block'
        graphEl.style.margin = '0 auto'
        graphContainerEl.style.margin = '50px 0'

        markdownGraphEl.replaceWith(graphContainerEl)
      }

      window.mermaid.render(`mermaid_graph_${i}`, graphDefinition, cb)
    })
}

function loadMermaid () {
  const mermaidjs = document.createElement('script')
  mermaidjs.src = 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.9.0/mermaid.min.js'
  document.body.appendChild(mermaidjs)

  mermaidjs.addEventListener('load', renderMermaidLangs)
}

document.addEventListener('DOMContentLoaded', loadMermaid)

jsdoc.config.json

{
  "opts": {
    "tutorials": "./tutorials"
  },
  "plugins": [
    "plugins/markdown"
  ],
  "templates": {
    "default": {
      "staticFiles": {
        "include": ["./tutorials/js"]
      }
    }
  }
}