uncaged/workflow
10
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dashboard workflow graph visualization (React Flow) #198

New Issue
Closed
opened 2026-05-12 01:33:37 +00:00 by xingyue · 0 comments
xingyue commented 2026-05-12 01:33:37 +00:00
Owner
Copy Link
Copy Source

What

在 Dashboard 中可视化 workflow 的 ModeratorTable 转换图，让用户直观看到：

  • workflow 的角色流转结构（节点 = role，边 = transition）
  • 当前 thread 执行到哪个 role（高亮）
  • 条件边 vs FALLBACK 边的区别

Why

ModeratorTable 本质是有向图邻接表，但目前 Dashboard 只能看 thread 的文本记录，无法一眼看出流程全貌和当前进度。可视化能大幅提升 debug 和理解效率。

Approach

  • 使用 React Flow + dagre 自动布局
  • 从 workflow descriptor 的 ModeratorTable 提取图结构
  • 节点：START / role / END，边：transition（condition 作 label）
  • FALLBACK 边虚线，条件边实线
  • 当前执行 role 高亮

Scope

  • Phase 1: 静态图渲染（从 descriptor 提取 + React Flow 展示）
  • Phase 2: 运行时高亮（thread 当前 step 映射到节点状态）
  • Phase 3: 交互增强（点击节点查看 role 输出、边点击查看 condition 详情）

References

  • ModeratorTable 定义: packages/workflow-protocol/src/types.ts:181
  • 示例: packages/workflow-template-develop/src/moderator.ts:73
  • Dashboard: packages/workflow-dashboard/
## What 在 Dashboard 中可视化 workflow 的 ModeratorTable 转换图，让用户直观看到： - workflow 的角色流转结构（节点 = role，边 = transition） - 当前 thread 执行到哪个 role（高亮） - 条件边 vs FALLBACK 边的区别 ## Why ModeratorTable 本质是有向图邻接表，但目前 Dashboard 只能看 thread 的文本记录，无法一眼看出流程全貌和当前进度。可视化能大幅提升 debug 和理解效率。 ## Approach - 使用 **React Flow** + **dagre** 自动布局 - 从 workflow descriptor 的 ModeratorTable 提取图结构 - 节点：START / role / END，边：transition（condition 作 label） - FALLBACK 边虚线，条件边实线 - 当前执行 role 高亮 ## Scope - Phase 1: 静态图渲染（从 descriptor 提取 + React Flow 展示） - Phase 2: 运行时高亮（thread 当前 step 映射到节点状态） - Phase 3: 交互增强（点击节点查看 role 输出、边点击查看 condition 详情） ## References - `ModeratorTable` 定义: `packages/workflow-protocol/src/types.ts:181` - 示例: `packages/workflow-template-develop/src/moderator.ts:73` - Dashboard: `packages/workflow-dashboard/`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
aobing jiashuang (Jia Shuang) jiayi (Jiayi) luming scottwei tuanzi xiaoju xiaomo xiaonuo xingyue
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: uncaged/workflow#198
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?