Spike: Design for workflow diagram

[lornakelly]

Description

Investigate and define the visual design for the workflow diagram for the read-only MVP. Since custom node shapes are out of scope, task types must be differentiated through icons and optionally colour. The design should also consider how to visually represent switch branches, error transitions, and nested flows in a way that is lean and easy to understand at a glance.

Motivation

Without an agreed design for the diagram, decisions around icons and colours will be confusing. This spike defines that foundation before implementation begins.

Proposed Implementation

• Identify an icon per task type that clearly communicates its purpose
• Evaluate whether colour coding per task type adds clarity
• Define how switch branches, error paths, and nested flows should be visually distinguished
• Produce visual design that implementation tickets can follow
• Design should be lean, desktop-focused, and work in both light and dark theme

Definition of Done

• Implementation: Fully implemented according to the Serverless Workflow spec.
• Unit Tests: Comprehensive unit tests are included and passing.
• Integration Tests: Verified within the monorepo and target environments (Web/VS Code).
• Documentation: Updated README.md, ADRs, or official docs.
• Performance: No significant regression in editor responsiveness.
• Accessibility: UI changes comply with accessibility standards.