mirror of https://github.com/node-red/node-red.git
54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
RED.editor.mermaid = (function () {
|
|
let initializing = false
|
|
let loaded = false
|
|
let pendingEvals = []
|
|
let diagramIds = 0
|
|
|
|
function render(selector = '.mermaid') {
|
|
// $(selector).hide()
|
|
if (!loaded) {
|
|
pendingEvals.push(selector)
|
|
|
|
if (!initializing) {
|
|
initializing = true
|
|
$.getScript(
|
|
'vendor/mermaid/mermaid.min.js',
|
|
function (data, stat, jqxhr) {
|
|
mermaid.initialize({
|
|
startOnLoad: false
|
|
})
|
|
loaded = true
|
|
while(pendingEvals.length > 0) {
|
|
const pending = pendingEvals.shift()
|
|
render(pending)
|
|
}
|
|
}
|
|
)
|
|
}
|
|
} else {
|
|
const nodes = document.querySelectorAll(selector)
|
|
|
|
nodes.forEach(async node => {
|
|
if (!node.getAttribute('mermaid-processed')) {
|
|
const mermaidContent = node.innerText
|
|
node.setAttribute('mermaid-processed', true)
|
|
try {
|
|
const { svg } = await mermaid.render('mermaid-render-'+Date.now()+'-'+(diagramIds++), mermaidContent);
|
|
node.innerHTML = svg
|
|
} catch (err) {
|
|
$('<div>').css({
|
|
fontSize: '0.8em',
|
|
border: '1px solid var(--red-ui-border-color-error)',
|
|
padding: '5px',
|
|
marginBottom: '10px',
|
|
}).text(err.toString()).prependTo(node)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return {
|
|
render: render,
|
|
};
|
|
})();
|