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>` 标签。