Task description
Develop a robust workflow visualizer for the Arazzo Designer VS Code extension. This includes rendering workflow steps, step dependencies, data flows, error handlers, and conditional branches using Mermaid diagrams or a similar approach. The visualizer should dynamically update in response to edits in the YAML/JSON source, allow interaction (selection/highlighting/inspection of steps), and provide contextual options for edits or navigation from the diagram. Ensure full synchronization between the workflow code and the visualization pane, with visual cues for validation issues, dead-ends, and cycles.
- Render Arazzo workflow constructs (steps, branches, handlers, etc.) as diagrams
- Enable interactivity and inspection within the diagram view
- Auto-sync and real-time update with YAML/JSON workflow edits
- Contextual menu support for edit/navigate from diagram
- Visual feedback for errors or invalid workflow states
- Use Mermaid or equivalent engine for cross-platform diagrams
Acceptance criteria
- All workflow constructs are accurately shown as interactive diagrams
- Users can navigate and inspect workflow structure visually
- Diagrams reflect changes in source files immediately
- Validation issues (cycles, unconnected nodes, etc.) are visually indicated
- Contextual actions available from diagram (e.g., navigate to step)
- Visualizer integrates seamlessly with the VS Code extension UI
Additional context
This task is a sub-issue of #1357 (Arazzo Designer Extension). Focus on high-quality UX, robust synchronization, and support for real-world Arazzo scenarios. Reuse or extend existing visualizer code if available on the project. Cross-platform consistency required (Windows, macOS, Linux).
Task description
Develop a robust workflow visualizer for the Arazzo Designer VS Code extension. This includes rendering workflow steps, step dependencies, data flows, error handlers, and conditional branches using Mermaid diagrams or a similar approach. The visualizer should dynamically update in response to edits in the YAML/JSON source, allow interaction (selection/highlighting/inspection of steps), and provide contextual options for edits or navigation from the diagram. Ensure full synchronization between the workflow code and the visualization pane, with visual cues for validation issues, dead-ends, and cycles.
Acceptance criteria
Additional context
This task is a sub-issue of #1357 (Arazzo Designer Extension). Focus on high-quality UX, robust synchronization, and support for real-world Arazzo scenarios. Reuse or extend existing visualizer code if available on the project. Cross-platform consistency required (Windows, macOS, Linux).