Claimit Workflow Visualizer
The Workflow Visualizer is a developer intelligence tool that automatically scans Claimit's Temporal workflow codebase and produces interactive visual documentation. It bridges the gap between raw C# workflow code and business-understandable flow diagrams — keeping documentation alive as the code evolves.
Why It Exists
Claimit's claim processing engine runs on Temporal, with courier-specific workflows (DPD, Asendia, Royal Mail) that each contain hundreds of lines of orchestration logic — activity calls, decision branches, reminder loops, timer waits, and signal handlers. Understanding how a claim flows through the system previously meant reading the code directly.
The Workflow Visualizer solves three problems:
- Onboarding — New team members can see visual claim flows instead of deciphering 500+ line workflow files
- Knowledge transfer — Courier-specific variations become explicit: which hooks are overridden, which activities are unique to DPD vs Asendia
- Living documentation — Diagrams are generated from code, so they never go stale
How It Works
The backend runs on Bun with a Hono server. On startup it scans the entire backend/Temporal directory using tree-sitter for C# AST parsing. The frontend connects via REST API and renders everything interactively.
Key Features
Workflow Explorer
The left sidebar presents all Temporal workflows in a searchable, categorized tree — grouped by courier (DPD, Asendia, Royal Mail) and function (Email Processing, Claim Submission, KPI). Selecting a workflow loads its full metadata: signals, queries, activities called, child workflows, and input/output types.
Interactive Flow Diagrams
Each workflow gets a visual business flow diagram showing:
Diagrams are rendered with ReactFlow, support zoom/pan, and persist manual layout adjustments in a local cache.
Activity Catalog
The right palette lists all 100+ activities organized into a categorized tree:
| Category | Examples |
|---|---|
| Email Processing / DPD | SearchDPDEmails, ExtractInvestigationDays, GetDPDInvestigatingClaims |
| Email Processing / Royal Mail | SearchRoyalMailEmails, ClassifyRoyalMailResponse |
| Email Submission / EVRi | SendEVRiClaimEmail, BuildEVRiEmailBody |
| Claim Submission / UPS | SubmitUPSClaimForm, GetUPSPortalCredentials |
| KPI & Reporting | CalculateClaimMetrics, GenerateKPIReport |
| Infrastructure | SlackNotification, RetryWithBackoff |
Clicking any activity opens a detail panel showing its input/output type schemas, source file location, and which workflows use it.
Anatomy View
For courier workflows that use the template method pattern (a base class with virtual hooks), the Anatomy tab breaks down:
- Which hooks from the base class each courier overrides
- What activities each hook executes
- A "hook customization ratio" showing how much is courier-specific vs shared
- LLM-generated narrative explanations of each hook's business purpose
This is particularly useful for understanding how DPD and Asendia workflows customize the shared claim processing pipeline.
Architecture
Who Benefits
- New engineers — Visual onboarding to complex claim processing flows in minutes instead of hours
- Product team — Business-readable diagrams for discussing workflow changes and new courier integrations
- Code reviewers — See the full flow impact of a PR, not just the diff
- On-call engineers — Quickly trace where a stuck workflow sits in its lifecycle
- The codebase itself — Documentation that can't go stale because it's generated from source