Stable -FlowChart Mermaid html populate

by bilbobaggins

HTML

<script src="https://cdn.jsdelivr.net/gh/knsv/[email protected]/dist/mermaid.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/knsv/[email protected]/dist/mermaid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="mermaid">

</div>

JavaScript

let firstset=`graph TB
n1[new]-->|usertype cancels|c3[cancels]
c3-->c2

n1-->|usertype submit |2[awaiting usertype2]
`
let lastset=`a1-->|usertype execution failed |f1[failure]
f1-->|capture failure investigation|f2[Failure Investigation]
f2-->|reviews and closes|c2

a1-->|usertype execution success |s1[success]
s1-->|capture success closure notes|c1[Completed]
c1-->c2[Closed]`



const sortAlphaNum = (a, b) => a.localeCompare(b, 'en', { numeric: true })

let arUsertypes=['usertype2', 'usertype1', 'usertype3']

arUsertypes=arUsertypes.sort(sortAlphaNum)
arUsertypes.shift()
let isFinalApprover=arUsertypes[arUsertypes.length-1]


let middleset='';
arUsertypes.forEach((item,index) => {
 
 if(item==isFinalApprover)
 {

 middleset=`${middleset}
 ${index+2}-->|${item} action reviews and reject |r1[rejected]
r1-->c2
${index+2}-->|${item} action reviews and approves |a1[Approved]`

 
 }else
 {
 middleset=`${middleset}
 ${index+2}-->|${item} action reviews and reject |r1[rejected]
r1-->c2
${index+2}-->|${item} action reviews and approves |${index+3}[awaiting ${arUsertypes[index+1]}]`


 }
 
});



let grpliteral = `${firstset}
${middleset}

${lastset}
`

console.log(grpliteral)
$(".mermaid").html(grpliteral)

mermaid.initialize({
    startOnLoad: true,
        htmlLabels: true,
        flowchart: {
            useMaxWidth: false,
            curve: 'basis'
        },
        mermaid: {
            callback:function(id) {
                $('.mermaid').css('opacity', '');
            }
        }
});