.NET: Conditional edges generate invalid Mermaid syntax (-.conditional.-->)

[joslat]

Summary

Workflow visualizations generate invalid Mermaid syntax for conditional edges. The framework outputs -.conditional.--> which is not recognized by Mermaid parsers and renders incorrectly (or not at all) in Mermaid viewers.
The correct Mermaid syntax for conditional/labeled edges is -->|"label"|, but the framework uses a custom dotted line syntax that doesn't exist in the Mermaid specification.

This makes conditional workflow diagrams unusable in:
• Mermaid Live Editor
• GitHub/GitLab markdown renderers
• Documentation sites that support Mermaid
• Any standard Mermaid visualization tool

---

Current Behavior

When building a workflow with conditional edges, the generated Mermaid diagram uses invalid syntax:

var workflow = new WorkflowBuilder(spamDetectionExecutor)
    .AddEdge(spamDetectionExecutor, emailAssistantExecutor, 
        condition: result => result.IsSpam == false)
    .AddEdge(spamDetectionExecutor, handleSpamExecutor, 
        condition: result => result.IsSpam == true)
    .AddEdge(emailAssistantExecutor, sendEmailExecutor)
    .Build();

Console.WriteLine(workflow.ToMermaidString());

Actual Output (Invalid Mermaid):

flowchart TD
    SpamDetectionExecutor["SpamDetectionExecutor (Start)"];
    EmailAssistantExecutor["EmailAssistantExecutor"];
    SendEmailExecutor["SendEmailExecutor"];
    HandleSpamExecutor["HandleSpamExecutor"];
    
    SpamDetectionExecutor -.conditional.--> EmailAssistantExecutor;
    SpamDetectionExecutor -.conditional.--> HandleSpamExecutor;
    EmailAssistantExecutor --> SendEmailExecutor;

Problems:

1. Syntax -.conditional.--> does not exist in Mermaid specification
2. Renders incorrectly in Mermaid viewers (may show as broken edge or not render at all)
3. No semantic information - all conditional edges look identical
4. Copy-paste doesn't work - users can't use generated diagrams directly in documentation

Verification: Copy the generated output into Mermaid Live Editor - the conditional edges will not render correctly.

---

Expected Behavior

Conditional edges should use the standard Mermaid syntax for labeled arrows: -->|"label"|
Corrected Mermaid Output:

flowchart TD
    SpamDetectionExecutor["SpamDetectionExecutor (Start)"];
    EmailAssistantExecutor["EmailAssistantExecutor"];
    SendEmailExecutor["SendEmailExecutor"];
    HandleSpamExecutor["HandleSpamExecutor"];
    
    SpamDetectionExecutor -->|"not spam"| EmailAssistantExecutor;
    SpamDetectionExecutor -->|"spam"| HandleSpamExecutor;
    EmailAssistantExecutor --> SendEmailExecutor;

Why this is correct:

1. ✅ Valid Mermaid syntax - -->|"text"| is the official syntax for labeled edges
2. ✅ Renders correctly in all Mermaid viewers and parsers
3. ✅ Shows edge labels - conditions are visible on the diagram
4. ✅ Copy-paste ready - users can directly use generated diagrams

Official Mermaid Documentation:
• Labeled edges: https://mermaid.js.org/syntax/flowchart.html#links-between-nodes
• Syntax: A -->|text| B or A -->|"text with spaces"| B

[joslat]

Fixed by PR: #1507

[joslat]

Hi @lokitoth & @alliscode, any opinion & feedback on this? I believe the PR fixes this but if you´d like to approach this in a different way, let me know... happy to dive in...