docs/requirements/2025-10-12-09-20-add-mermaid-workflow-visualization.md

需求：新增 Mermaid 流程图可视化

重要性: 中 (Medium)

1. 目标

在“工作流”标签页，将由副 Agent 提取出的文本工作流，实时渲染成一个可视化的 Mermaid 流程图。

2. 功能描述

1. UI 变更:

   • 在“工作流”标签页的右侧面板，即“当前工作流描述”下方，新增一个用于显示流程图的区域。
   • 此区域将使用 gr.HTML 组件实现。

2. 后端逻辑:

   • 需要创建一个辅助函数，其功能是将 Markdown 格式的步骤列表（例如 - step 1\n- step 2）转换成 Mermaid 的 graph TD 流程图语法（例如 graph TD; A["step 1"] --> B["step 2"];）。
   • handle_workflow_chat 函数需要调用此辅助函数，在生成文本工作流后，立即生成对应的 Mermaid 语法。
   • handle_workflow_chat 的返回值将增加一个，用于承载生成的 Mermaid HTML 代码。

3. 渲染实现:

   • 返回的 Mermaid 语法需要被包裹在一个完整的 HTML 结构中，该结构包含 Mermaid.js 库的 <script> 标签和一个用于渲染的 <div class="mermaid"> 容器。
   • 这个完整的 HTML 字符串将作为 gr.HTML 组件的值被更新。

3. 自动化测试方案

1. 执行现有测试: 复用 test_workflow_tab_dual_agent_interaction 测试用例，与 Agent 进行一次简单的交互。
2. 增加断言:
   • 在最终的快照中，定位到新增的 gr.HTML 组件。
   • 验证该组件的 value 是否包含有效的 Mermaid graph 定义。
   • 验证其 value 是否包含 Mermaid.js 的 <script> 标签。