Change set to add mermaid support!

mermaid.md

Listing each file with respective change to support mermaid without tweaking some minified version of extra-****.js.

In superfence.py

    self.config = {
        'disable_indented_code_blocks': [False, "Disable indented code blocks - Default: False"],
        'uml_flow': [True, "Enable flowcharts - Default: True"],
        'uml_sequence': [True, "Enable sequence diagrams - Default: True"],
        'mermaid': [True, "Enable mermaid diagrams - Default: True"],
        'custom_fences': [
            [
                {'name': 'flow', 'class': 'uml-flowchart'},
                {'name': 'sequence', 'class': 'uml-sequence-diagram'},
                {'name': 'mermaid', 'class': 'mermaid'},
            ],
            'Specify custom fences. Default: See documentation.'
        ],
        'highlight_code': [True, "Highlight code - Default: True"],
        'css_class': [
            '',
            "Set class name for wrapper element. The default of CodeHilite or Highlight will be used"
            "if nothing is set. - "
            "Default: ''"
        ]
    }

In uml.js

for (let i = 0; i < blocks.length; i++) {
      const parentEl = blocks[i]
      const el = document.createElement("div")
      el.className = className
      el.style.visibility = "hidden"
      el.style.position = "absolute"

      const text = (parentEl.tagName.toLowerCase() === "pre") ? getFromCode(parentEl) : getFromDiv(parentEl)

      // Insert our new div at the end of our content to get general
      // typeset and page sizes as our parent might be `display:none`
      // keeping us from getting the right sizes for our SVG.
      // Our new div will be hidden via "visibility" and take no space
      // via `position: absolute`. When we are all done, use the
      // original node as a reference to insert our SVG back
      // into the proper place, and then make our SVG visible again.
      // Lastly, clean up the old node.
      article[0].appendChild(el)

     if (className === "mermaid") {
       const mConfig = {startOnLoad: false}
       converter.mermaidAPI.initialize(mConfig)
       const insertSvg = function(svgCode) {
         el.innerHTML = svgCode
       }
       converter.mermaidAPI.render(`${className}-${i}`, text, insertSvg)
      } else {
        const diagram = converter.parse(text)
        diagram.drawSVG(el, config)
      }
    
      el.style.visibility = "visible"
      el.style.position = "static"
      parentEl.parentNode.insertBefore(el, parentEl)
      parentEl.parentNode.removeChild(parentEl)
  }

In .eslintrc

"globals": {
  "Clipboard": true,
  "flowchart": true,
  "Diagram": true,
  "mermaid": true,
},

In _uml.scss

.uml-sequence-diagram,
.uml-flowchart,
.mermaid {
  width: 100%;
  padding: 1rem 0;
  overflow: auto;

  svg {
    max-width: initial;
  }
}

In extra.js

  onReady(() => {
    if (typeof flowchart !== "undefined") {
      uml(flowchart, "uml-flowchart")
    }

    if (typeof Diagram !== "undefined") {
      uml(Diagram, "uml-sequence-diagram", {theme: "simple"})
    }

    if (typeof mermaid !== "undefined") {
      uml(mermaid, "mermaid")
    }
  })

In uml.md

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.1.2/mermaid.js"></script>