Add support for mermaidjs when initialized with config
Mermaidjs creates diagrams in a markdown way.
When writing this issue i already found a solution. Maybe worth a mention in your wiki. Guess you can close the issue immediately.
Situation
When a mermaid diagram is initialized with a custom configuration it is not compiled when using pagedjs: https://jsfiddle.net/ztej0upy/1/
If pagedjs is not involved this does work: https://jsfiddle.net/ztej0upy/3/
Solution
Execute mermaid.init()
after mermaid.initialize(config)
:
https://jsfiddle.net/ztej0upy/2/
Using mermaid.init()
only works out of the box.
Related
The same thing happens with prismjs, which also needs to be initialized a second time: Prism.highlightAll()
My former, petty attempt
Just FYI. I extended the Paged.Handler to
- remove any data-refs that pagedjs would add to the mermaid diagram, as mermaid is really not happy about it
- initialize mermaid again, before the page layout
// Original mermaid initialization
var config = {
startOnLoad: true,
theme: 'neutral',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'basis',
},
securityLevel: 'loose',
};
mermaid.initialize(config);
class fixMermaid extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterParsed(content) {
// remove data-refs from <br /> in mermaid. Horrible code...
$(content).find('.mermaid').each(function () {
this.innerHTML = this.innerHTML.replace(/<br.*?\/?>/g, "<br>");
});
}
beforePageLayout(pages) {
// Second mermaid initialization
mermaid.init();
}
}
// Handler registration
Paged.registerHandlers(fixMermaid);