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);