Azure DevOps Mermaid diagram subgraph links fail/flowchart NOT supported

[stefanstranger]

When you publish your Logic App or Power Automate Flow markdown documentation on an Azure DevOps wiki the mermaid diagram does not supports subgraphs.

See https://github.com/MicrosoftDocs/azure-devops-docs/issues/12028

Fix: Change graph to flowchart.

[acieslik]

Here is also a graph that fails to be rendered:

graph TB
    When the incoming activity triggers the flow (don't edit or delete this step)
    subgraph account_and_contact_found-False
    direction TB
        Create_case_for_unknown_customer
        Set_variable_3
    end
    subgraph account_and_contact_found-True
    direction TB
        Create_case_for_known_customer
        Set_variable_2
    end
    subgraph Condition-False
    direction TB
        Set_variable_6
    end
    subgraph Condition-True
    direction TB
        Set_variable
        Set_variable_4
    end
    Initialize_variable --> Initialize_variable_2
    Initialize_variable_2 --> Initialize_variable_4
    Initialize_variable_4 --> Initialize_variable_5
    Initialize_variable_5 --> Compose
    Compose --> Condition
    Condition --> Set_variable
    Set_variable --> Set_variable_4
    Condition --> Set_variable_6
    Condition --> Get_customer_contact_and_account
    Get_customer_contact_and_account --> Initialize_variable_3
    Initialize_variable_3 --> account_and_contact_found
    account_and_contact_found --> Create_case_for_known_customer
    Create_case_for_known_customer --> Set_variable_2
    account_and_contact_found --> Create_case_for_unknown_customer
    Create_case_for_unknown_customer --> Set_variable_3
    account_and_contact_found --> Connect_the_record_to_the_incoming_activity__don't_edit_or_delete_this_step_
    When the incoming activity triggers the flow (don't edit or delete this step) --> Initialize_variable

Loading

[stefanstranger]

@acieslik As a solution I could add support for converting Mermaid mmd Diagram File To SVG as documented here: https://github.com/mermaid-js/mermaid-cli?tab=readme-ov-file#transform-a-markdown-file-with-mermaid-diagrams

What do you think?

[stefanstranger]

I did some tests and if I just convert to mermaid diagram to png using the mermaid-cli it can be used in an Azure DevOps Wiki. I'll continue to do some more tests and if everything works I will add a parameter that converts the mermaid to png if required for Azure DevOps Wiki.

[stefanstranger]

Fixed with latest release v1.1.5.