Workflow Engine
Visual No-Code Automation Builder
51K+ line visual workflow system with a dual execution engine — an SVG-based React canvas for local testing and a Cloudflare Workers backend for production. 28 node types spanning AI, voice calls, WhatsApp, FHIR/HL7, SQL, ML, sub-workflows, and more. Real-time execution visualization via Durable Objects + WebSocket, CRON scheduling with timezone support, and 20 dedicated node editor UIs.
Year
2023 — Present
Role
Full-Stack Developer
Tech Stack
6 technologies
The Challenge
Non-technical users need to build complex multi-step automations — but traditional workflow tools stop at simple if/then chains.
- Real workflows need AI agents, phone calls, WhatsApp, medical data (FHIR), SQL databases, ML predictions, and sub-workflows — all in one canvas
- Workflows must run both in-browser for testing and server-side for production with scheduled triggers, webhooks, and retry logic
- Debugging opaque automations requires real-time visibility into which node is executing, what data flows between steps, and where errors occur
The Approach
Dual execution engine with a shared visual canvas:
- Frontend engine (6,875 lines) — iteration-based execution via setInterval with configurable playback speed (0.1x–4x), topological DAG traversal, step-by-step debug mode, and 1,000-iteration safety limit
- Backend engine (4,601 lines) — recursive traversal on Cloudflare Workers with D1 persistence, exponential-backoff retry (3 attempts + jitter), heartbeat-based stale detection, and per-step cost/token tracking
- SVG-based canvas (2,935 lines) — React + SVG with foreignObject for HTML-in-SVG, Bezier curve edges, focal-point zoom (0.25x–3x), touch pinch-to-zoom, 60fps throttled drag, and React.memo with custom equality checks
- 20 node editor UIs — dedicated configuration modals per node type, each with its own validation and variable interpolation
The Solution
28 executable node types across 7 categories:
- AI — AI Agent (multi-model LLM), AI Image Generator, TTS Generator, AI Voice Agent (ElevenLabs + Twilio)
- Communication — WhatsApp Agent, WhatsApp Media Sender, Email (Resend)
- Data — Data Query (internal tables), SQL Query (MySQL/PostgreSQL/SQL Server/D1), Variable Mapper, Google Drive
- Control — Condition (JS expression evaluation), Loop (array iteration with auto-reset of downstream nodes), Trigger (8 event types), Scheduled Start (CRON + timezone)
- Integration — Integration (HTTP/API), Web Scraper, Local Scraper, Browser Automation, Sub-Workflow execution
- Medical — FHIR Resource (Patient, Observation, Appointment), Conversation Log
- ML — ML Predict, ML Classify, ML Anomaly Detection
Real-time execution via Durable Object WebSocket — live node status (running/completed/failed), variable updates, and log streaming broadcast to all connected clients.
Key Results
- 51K+ lines across 75+ files — dual execution engine (11.4K lines), SVG canvas, 20 node editors
- 28 executable node types: AI, voice, WhatsApp, FHIR, SQL, ML, sub-workflows
- Dual engine: in-browser (iteration-based, debug mode) + Cloudflare Workers (recursive, production)
- Real-time visualization via Durable Object WebSocket — live node status and log streaming
- CRON scheduling with timezone, priority queue, distributed locking
- Exponential-backoff retry with jitter, per-step cost/token tracking
- 3 edge types (on_true, on_false, always) for conditional graph traversal
- 7 D1 tables + 3 views for execution persistence and analytics