Provided the sorted sequence but the flowchart diagram does not display as expected.

[dc20220329-debug]

This is what I passed to mermaid.
Mermaid Code:
flowchart TD
term0(["Start"])
step1["1: The Agent navigates to the Documents tab in the subscription view to access C..."]
step2["2: The Agent views the list of documents associated with the subscription."]
alt2_alt_hub{{"2: Choose Flow"}}
stepAFI_2a_1["AFI-2a.1: The Agent uploads a new Contract document by selecting the appropriate docume..."]
stepAFI_2a_2["AFI-2a.2: The document may be associated with a specific Offer Name"]
stepAFI_2a_3["AFI-2a.3: The Agent confirms the upload, and the Contract document is saved to the subs..."]
termAFI_2a_3(["End"])
stepAFII_2b_1["AFII-2b.1: The Agent uploads a new Service document by selecting the appropriate documen..."]
stepAFII_2b_2["AFII-2b.2: The Agent confirms the upload, and the Service document is saved to the subsc..."]
termAFII_2b_2(["End"])
stepAFIII_2c_1["AFIII-2c.1: The Agent selects the document for removal."]
stepAFIII_2c_2["AFIII-2c.2: The Agent provides confirmation for the document removal."]
termAFIII_2c_2(["End"])
step3["3: The Agent selects the desired document from the list to view its contents."]
cond4_decision{"4: Preview not available?"}
step4["4: The Agent downloads the document to view its contents."]
term0 --> step1
step1 --> alt2_alt_hub
alt2_alt_hub -->|View Contract and Se| step2
alt2_alt_hub -->|Add Contract Documen| stepAFI_2a_1
alt2_alt_hub -->|Add Service Document| stepAFII_2b_1
alt2_alt_hub -->|Remove Contract or S| stepAFIII_2c_1
stepAFI_2a_1 --> stepAFI_2a_2
stepAFI_2a_2 --> stepAFI_2a_3
stepAFI_2a_3 --> termAFI_2a_3
stepAFII_2b_1 --> stepAFII_2b_2
stepAFII_2b_2 --> termAFII_2b_2
stepAFIII_2c_1 --> stepAFIII_2c_2
stepAFIII_2c_2 --> termAFIII_2c_2
step2 --> step3
step3 --> cond4_decision
cond4_decision -->|Yes| step4
cond4_decision -->|No| termend_4
step4 --> termend_4
termend_4(["End"])

classDef regularStep fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#000,font-size:10px
classDef conditionalFlow fill:#fff9c4,stroke:#f9a825,stroke-width:2px,color:#000,font-size:10px
classDef startEndFlow fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff,font-size:10px
classDef invalidStep fill:#ffcccc,stroke:#ff0000,stroke-width:2px,color:#000000,font-size:10px
classDef optionalStep fill:#f0fcff,stroke:#90caf9,stroke-width:2px,stroke-dasharray: 6 6,color:#000,font-size:10px
classDef alternateFlow fill:#fff3e0,stroke:#ff9800,stroke-width:3px,color:#000,font-size:10px
classDef subgraphStyle fill:none,stroke:none,stroke-width:0px,color:#666

class step1,step2,stepAFI_2a_1,stepAFI_2a_3,stepAFII_2b_1,stepAFII_2b_2,stepAFIII_2c_1,stepAFIII_2c_2,step3,step4 regularStep
class cond4_decision conditionalFlow
class term0,termAFI_2a_3,termAFII_2b_2,termAFIII_2c_2,termend_4 startEndFlow
class stepAFI_2a_2 optionalStep
class alt2_alt_hub alternateFlow

I expected it should show the branch as the follow

branch 1 branch 2 branch 3 branch 4
Step 2 AFI-2a.1 AFI-2b.1 AFI-2c.1

I added the macro to my confluence page html

<script type="module"> // Import mermaid v10 from CDN (v10 has better htmlLabels:false support than v11) // v11 has a known bug where htmlLabels:false doesn't work for node labels import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.9.3/dist/mermaid.esm.min.mjs'; const diagramHost = document.getElementById('baselineDiagramContainer'); // Export the mermaid and diagram container in a scoped object for use in external JS window.mermaidScoped = { mermaid, diagramHost }; </script>

Question 1:
Is there a way to ensure when calling mermaid it will follow the mermaid code what I provided.

Question 2: Do we have a fix on the v11 known bug where htmlLabel:false does not work for node labels.

Thanks for your help in advance.
VC