57 lines
1.4 KiB
HTML
57 lines
1.4 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">{ margin: 0; padding: 0; }</style>
|
|
<script type="text/javascript" src="./assets/mermaid.min.js"></script>
|
|
<script type="text/javascript" src="./assets/jquery.js"></script>
|
|
|
|
<link rel="stylesheet" href="./assets/mermaid.css"/>
|
|
<script>
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
cloneCssStyles: true,
|
|
flowchart: {
|
|
htmlLabels: false,
|
|
useMaxWidth:false
|
|
},
|
|
});
|
|
|
|
function renderToSvg(mermaidCode) {
|
|
|
|
var container = document.getElementById("container")
|
|
var holder = document.getElementById("mermaid-holder");
|
|
|
|
while (holder.firstChild) {
|
|
holder.removeChild(holder.firstChild);
|
|
}
|
|
|
|
el = document.createElement("div");
|
|
el.innerHTML = mermaidCode;
|
|
el.className = 'mermaid';
|
|
|
|
holder.appendChild(el);
|
|
|
|
mermaid.init();
|
|
var xmlSerializer = new XMLSerializer()
|
|
svgValue = xmlSerializer.serializeToString(container)
|
|
|
|
return svgValue;
|
|
}
|
|
|
|
// for debug and test rendering directly in browser
|
|
//$( document ).ready(function() {
|
|
// var mm = "graph LR\nA[Hard edge] -->|Link text| B(Round edge)\nB --> C{Decision}\nC -->|One| D[Result one]\nC -->|Two| E[Result two]";
|
|
// renderToSvg(mm);
|
|
//});
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div id="container" class="mermaid-container">
|
|
<div id="mermaid-holder"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|