FlowChart Mermaid Updated

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">
graph TB
     A[New] -->|CHG Requestor/Owner cancels CHG |D[Cancelled]
     D-->G
     A -->|CHG Requestor/Owner Submits CHG | B(Awaiting Approval)
     B-->|BSO/ISO/*Director Reviews and Rejects |H[Rejected]
     H-->G
     B-->|BSO/ISO/*Director Reviews and Approves| C(Awaiting ITCM Approval)
     C-->|ITCM Reviews and Rejects |H
     C-->|ITCM Reviews and Approves| E(Approved)
     
     E-->|CHG execution failed|I(Failed)
     E-->|CHG execution success|IF(Success)
     I-->|CHG participant provide PCIR Details|J(PCIR)
     J-->|ITCM Reviews and Closes the CHG|G
     IF-->|CHG Participant provide Closure notes | F(Completed)
     F-->|ITCM Reviews and Closes the CHG | G(Closed)
 
 </div>

JavaScript

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