mermaid.js

Rendering mermaid.js to a custom div

by Eugene Trounev

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="https://appcdn2.docsie.io/js/manager/staging/css/manager.css">
<main class="pure docsie docsie-blue">
  <div class="docsie-g docsie-g-nowrap">
    <pre class="docsie-u-1-2" id="www">
		graph LR
				A --- B
				B-->C[fa:fa-ban forbidden]
				B-->D(fa:fa-spinner);
		</pre>
    <div class="docsie-u-1-2" id="xxx"></div>
  </div>
</main>

JavaScript

document.addEventListener("DOMContentLoaded", function(){
	const spec = document.getElementById("www").innerText;
	mermaid.parse(spec).then((result) => {
		if(result)
		mermaid.render("graph",spec).then(result => {
			document.getElementById("xxx").innerHTML = result.svg;
		});
	}).catch((err) => {
		document.getElementById("xxx").innerHTML =err.message;
	});
});