Created on 30 July 2025, 17 days ago

Building a Visual Workflow Editor for Drupal

The ultimate objective of FlowDrop is to create a robust visual workflow editor similar to Langflow, n8n, and Flowise, fully integrated with Drupal's plugin and entity systems. The following roadmap outlines key milestones, prioritizing the drag-and-drop workflow editor, node definitions, and execution engine.

Phase 1: Foundational Setup (Backend Infrastructure)

Goal: Establish a stable backend foundation to support future UI and execution features.

  1. Module Structure Finalization

    • Create contrib-ready structure:
      flowdrop_workflow, flowdrop_node_type, flowdrop_runner, flowdrop_ui.
    • Define clear boundaries between UI, workflow definition, and execution modules.
  2. Entity & Config Architecture

    • Define Workflow, Node Type, and Pipeline as Drupal entities.
    • Store node definitions as Config Entities for easy import/export.
    • Implement revision support for workflows for audit and rollback.
  3. Plugin System for Node Definitions

    • Use attribute-based plugin discovery under Plugin/FlowDropNodeProcessor.
    • Include base traits for:

      • Input/Output schema definition.
      • Execution method signature.
      • Node category assignment.
  4. Basic Execution Engine (Proof of Concept)

    • Implement a simple synchronous executor in flowdrop_runner:

      • Load workflow from entity.
      • Resolve nodes and their dependencies.
      • Execute sequentially with basic logging.

Phase 2: Visual Workflow Editor (Primary UI Focus)

Goal: Deliver the first iteration of a drag-and-drop visual editor using Svelte with Drupal integration.

  1. Svelte-Based Workflow Editor

    • Integrate with Drupal via flowdrop_ui module.
    • Features:

      • Drag-and-drop node placement.
      • Connect nodes with directional edges.
      • Define node inputs/outputs visually.
      • Inline editing of node parameters.
  2. REST/JSON\:API for Editor-Backend Communication

    • Expose workflow load/save endpoints.
    • Auto-persist changes as draft/revision to workflow entity.
    • Provide endpoint to "Execute Workflow" and return job status.
  3. Real-Time UX Enhancements

    • Add interactive edge validation (ensure compatible input/output types).
    • Highlight incomplete or invalid nodes.
    • Auto-layout or manual snapping grid for clarity.
  4. Integration with Node Definition Plugins

    • UI automatically discovers available node types from FlowDropNodeProcessor plugins.
    • Support categorization (Data, AI, Drupal Integration, Utility, External API).

Phase 3: Execution Engine & Job System

Goal: Move from proof-of-concept execution to a robust asynchronous job system.

  1. Job-Based Executor

    • Implement job entity (flowdrop_job) to track workflow runs.
    • Allow long-running or async processing using Drupal Queue API / Cron.
    • Support real-time execution logs and result storage.
  2. Node Runtime Enhancements

    • Support branching logic (conditional nodes).
    • Parallel execution for independent branches.
    • Error handling and retry support at the node level.
  3. Execution Tracing & Debugging

    • Node-level logs stored as JSON in job entity.
    • Visual representation of success/failure states in UI.
    • Optional data persistence for each node output for replays.

Phase 4: Advanced Features & Ecosystem Expansion

Goal: Make FlowDrop a production-ready workflow editor in the Drupal ecosystem.

  1. Node Type Expansion

    • AI Nodes (OpenAI, LangChain, LLM calls).
    • Drupal Nodes (Content creation, entity queries, user management).
    • External Integration Nodes (Webhook triggers, HTTP requests, third-party APIs).
  2. Workflow Triggering

    • Trigger workflows via:

      • Manual UI execution.
      • Webhooks.
      • Scheduled/cron-based triggers.
      • Drupal events (Entity create/update/delete).
  3. Versioning & Export

    • Full workflow versioning using Drupal’s revision API.
    • Import/export workflows as YAML configs for deployment between environments.
  4. UI Polishing & Usability

    • Minimap navigation for large workflows.
    • Collapsible groups/sub-flows for complexity management.
    • In-place node duplication and templating.

Phase 5: Production Hardening

Goal: Ensure FlowDrop can be adopted in enterprise-grade environments.

  1. Performance Optimization

    • Cache compiled workflow graphs for faster execution.
    • Lazy load node definitions in UI for large catalogs.
  2. Security

    • Permission-based workflow execution and editing.
    • CSRF and permission checks for all API endpoints.
  3. Testing & QA

    • Behat tests for UI interactions.
    • Kernel tests for workflow execution.
    • Stress test with 100+ node workflows.
🌱 Plan
Status

Active

Component

Miscellaneous

Created by

πŸ‡©πŸ‡ͺGermany D34dMan Hamburg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024