Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Support
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
pagedjs
pagedjs
  • Project
    • Project
    • Details
    • Activity
    • Releases
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 150
    • Issues 150
    • List
    • Boards
    • Labels
    • Milestones
  • Merge Requests 10
    • Merge Requests 10
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Tools
  • pagedjspagedjs
  • Issues
  • #230

Closed
Open
Opened Jul 08, 2020 by Sebastian Raffel@sebastianraffel
  • Report abuse
  • New issue
Report abuse New issue

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);
Edited Jul 08, 2020 by Sebastian Raffel
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
0
Labels
None
Assign labels
  • View project labels
Reference: tools/pagedjs#230