Mermaid support for the Backlog web site.

mermaid-for-backlog.user.js

// ==UserScript==
// @name         mermaid-for-backlog
// @namespace    https://gist.github.com/iso2022jp
// @version      0.4
// @description  Mermaid support for the Backlog web site.
// @author       USHIDO Hiroyuki
// @match        *://*.backlog.jp/*
// @match        *://*.backlog.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

+(() => {

    'use strict'

    const importedAssets = {}

    const loadScript = (url, callback) => {
        if (url in importedAssets) return importedAssets[url]
        var s = document.createElement('script')
        s.src = url
        s.onerror = () => {
            console.log('Failed to load script from ' + url)
        }
        document.body.appendChild(s)
        return importedAssets[url] = s
    }

    const loadCss = url => {
        if (url in importedAssets) return importedAssets[url]
        var l = document.createElement('link')
        l.rel = 'stylesheet'
        l.href = url
        document.head.appendChild(l)
        return importedAssets[url] = l
    }

    const waitfor = (condition, callback) => {
        if (condition()) {
            callback()
            return
        }
        setTimeout(waitfor.bind(null, condition, callback), 100)
    }

    const monitorfor = (condition, callback) => {
        if (condition()) {
            callback()
        }
        setTimeout(monitorfor.bind(null, condition, callback), 1000)
    }

    monitorfor(() => {

        return document.querySelectorAll('.lang-mermaid').length > 0

    }, () => {

        console.log('target graph detected')

        // code hack
        const hasMermaid = $('.lang-mermaid').replaceWith(function () {
            return $('<pre class="mermaid">').text($(this).text())
        }).length > 0

        if (hasMermaid) {

            if (window.mermaid) {

                console.log('mermaid: run')
                mermaid.run()

            } else {

                const theme = document.querySelector('html.dark-mode') ? 'dark' : 'default'

                console.log('mermaid: loading script')

                loadScript('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js')
                // loadScript('https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.4.3/mermaid.min.js')
                // loadScript('https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.14/mermaid.min.js')
                // loadCss(`https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.14/themes/mermaid.${theme}.min.css`)

                waitfor(() => window.mermaid, () => {
                    console.log('mermaid: init')
                    mermaid.initialize({ startOnLoad: false, logLevel: 1, securityLevel: 'loose', theme })
                    mermaid.run()
                })
            }

        }

    })

})();