.NET: Rendering errors occur in the output of the WorkflowVisualizer.ToMermaidString method.

[mas-sdb]

Description

I found two issues with workflow visualization feature (WorkflowVisualizer.ToMermaidString method).

• This method outputs the identifier as is. If the Executor identifier contains spaces or non-ASCII characters (such as Japanese), Mermaid will generate a rendering error.
• Second, if you define it as a conditional edge, an error will occur in Mermaid's arrow output (.-->).

Reproduction Steps

Uses Microsoft.Agents.AI.Workflows 1.0.0-preview.251009.1.
Run the following code:

// NuGet\Install-Package Microsoft.Agents.AI.Workflows -Version 1.0.0-preview.251009.1
using Microsoft.Agents.AI.Workflows;
using Microsoft.Agents.AI.Workflows.Reflection;

var userInput1 = RequestPort.Create<string, string>("1. User input");
var executor1 = new TestExecutor("2. If less than 50");
var executor2 = new TestExecutor("3. If greater than or equal to 50");
var executor3 = new TestExecutor("4. Send confirmation message");

// The following executors use Japanese characters in its identifiers.
//var userInput1 = RequestPort.Create<string, string>("1. ユーザー入力");
//var executor1 = new TestExecutor("2. 50 未満の場合");
//var executor2 = new TestExecutor("3. 50 以上の場合");
//var executor3 = new TestExecutor("4. 確認メッセージ送信");

var builder = new WorkflowBuilder(userInput1);
builder.AddEdge<int>(userInput1, executor1, static r => r < 50);
builder.AddEdge<int>(userInput1, executor2, static r => r >= 50);
builder.AddEdge(executor1, executor3);
builder.AddEdge(executor2, executor3);

var workflow = builder.Build();

Console.WriteLine(workflow.ToMermaidString());

// This class is intended for mermaid visualization, not workflow execution.
public class TestExecutor(string id) :
  ReflectingExecutor<TestExecutor>(id, ExecutorOptions.Default)
{
}

Actual behavior

flowchart TD
  1. User input["1. User input (Start)"];
  2. If less than 50["2. If less than 50"];
  3. If greater than or equal to 50["3. If greater than or equal to 50"];
  4. Send confirmation message["4. Send confirmation message"];
  1. User input -. conditional .--> 2. If less than 50;
  1. User input -. conditional .--> 3. If greater than or equal to 50;
  2. If less than 50 --> 4. Send confirmation message;
  3. If greater than or equal to 50 --> 4. Send confirmation message;

• use Japanese identifiers.

flowchart TD
  1. ユーザー入力["1. ユーザー入力 (Start)"];
  2. 50 未満の場合["2. 50 未満の場合"];
  3. 50 以上の場合["3. 50 以上の場合"];
  4. 確認メッセージ送信["4. 確認メッセージ送信"];
  1. ユーザー入力 -. conditional .--> 2. 50 未満の場合;
  1. ユーザー入力 -. conditional .--> 3. 50 以上の場合;
  2. 50 未満の場合 --> 4. 確認メッセージ送信;
  3. 50 以上の場合 --> 4. 確認メッセージ送信;

Known Workarounds

• I think this can be resolved by using an alias for the Executor identifier (e.g., a sequential number like executor1...executorN).

flowchart TD
  executor0["unicode text"]
  executor1["1. ユーザー入力 (Start)"]
  executor2["2. If less than 50"]

• I confirmed that changing .--> to .-> resolved the issue.

// NG (.-->)
executor01 -. conditional .--> executor02
// OK (.->)
executor01 -. conditional .-> executor02

The following is an example of the expected output.

flowchart TD
  executor01["1. User input (Start)"];
  executor02["2. If less than 50"];
  executor03["3. If greater than or equal to 50"];
  executor04["4. Send confirmation message"];
  executor01 -. conditional .-> executor02
  executor01 -. conditional .-> executor03
  executor02 --> executor04
  executor03 --> executor04

flowchart TD
  executor01["1. ユーザー入力 (Start)"]
  executor02["2. 50未満の場合"]
  executor03["3. 50以上の場合"]
  executor04["4. 確認メッセージ送信"]
  executor01 -. conditional .-> executor02
  executor01 -. conditional .-> executor03
  executor02 --> executor04
  executor03 --> executor04