🚀 Visual Workflow Builder

A powerful, intuitive visual workflow builder for creating interactive questionnaires, business processes, and guided experiences with conditional logic and multimedia support.

Live Demo • Documentation • Getting Started • Features

✨ Features

🎯 Core Capabilities

• 🖱️ Drag & Drop Interface - Intuitive node-based workflow creation
• 🔄 Automatic Layout - Smart positioning with Dagre algorithm
• 💾 Import/Export - Save and load workflows as JSON
• 👻 Ghost Nodes - Visual feedback during drag operations
• 🔌 Extensible Architecture - Easy to add custom node types

📝 Workflow Components

• 🚀 Trigger Nodes - Define workflow entry points
• ⚡ Action Nodes - Execute business logic and tasks
• ❓ Question Nodes - Interactive forms with multiple input types
• 🔊 Audio Nodes - Integrate guided audio experiences
• 🔀 Condition Nodes - Branch workflows based on logic
• 🏁 End Nodes - Define workflow completion points
• 🎯 Smart Edge Management - Automatic reconnection on node deletion

🎨 Advanced Features

• 📊 Conditional Branching - Create complex decision trees
• 📱 Responsive Design - Works on desktop and mobile devices
• 🔍 Real-time Preview - Test workflows as you build

🖼️ Screenshots

Main Workflow Builder

Questionnaire Builder

Complexe Workflow

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/workflow-builder.git
   cd workflow-builder

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

# Start production server
npm run start

📚 Documentation

Creating Your First Workflow

1. Start with a Trigger Node - Every workflow begins with a trigger
2. Add Action Nodes - Click the "+" button on edges to add nodes
3. Configure Nodes - Click any node to open its configuration modal
4. Connect Nodes - Drag from output handles to input handles
5. Test Your Workflow - Use the preview feature to test

Node Types

🚀 Trigger Node

The entry point of your workflow. Configure when and how the workflow starts.

⚡ Action Node

General-purpose nodes for executing tasks and operations.

❓ Question Node

Interactive input nodes supporting:

• Text input
• Number input
• Radio buttons
• Checkboxes
• Scale/rating
• Custom validation

🔊 Audio Node

Play audio files with configurable:

• Autoplay settings
• Playback controls
• Duration tracking

🔀 Condition Node

Create branching logic with:

• Multiple branches (not limited to true/false)
• Dynamic handle creation
• Visual branch labels
• Automatic layout adjustment

🏁 End Node

Mark the completion of a workflow path.

Working with Conditions

// Example condition configuration
{
  type: 'condition',
  data: {
    branches: [
      { id: 'branch1', label: 'Age < 18', condition: 'age < 18' },
      { id: 'branch2', label: 'Age >= 18', condition: 'age >= 18' }
    ]
  }
}

Questionnaire Builder

The specialized questionnaire builder provides:

• Question Types: Text, number, radio, checkbox, scale
• Validation: Required fields, custom rules
• Conditional Logic: Show/hide questions based on answers
• Progress Tracking: Visual progress indicators
• Response Collection: Export responses as JSON/CSV

Keyboard Shortcuts

Shortcut	Action
Delete	Delete selected node/edge
Ctrl+S	Save workflow
Ctrl+O	Load workflow
Ctrl+Z	Undo (coming soon)
Escape	Cancel current operation

🛠️ Development

Project Structure

workflow-builder/
├── components/          # Vue components
│   ├── nodes/          # Node type components
│   └── ...             # UI components
├── pages/              # Nuxt pages
├── composables/        # Vue composables
├── assets/             # Styles and images
├── plugins/            # Vue plugins
└── public/             # Static files

Creating Custom Nodes

1. Create a new component in components/nodes/:

<template>
  <div class="custom-node">
    <Handle type="target" :position="Position.Top" />
    <div class="node-content">
      {{ data.label }}
    </div>
    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>

<script setup>
import { Handle, Position } from '@vue-flow/core'

defineProps(['data'])
</script>

2. Register your node type:

const nodeTypes = {
  custom: CustomNode,
  // ... other node types
}

API Reference

Workflow Data Structure

interface Workflow {
  nodes: Node[]
  edges: Edge[]
  viewport: Viewport
}

interface Node {
  id: string
  type: string
  position: { x: number; y: number }
  data: Record<string, any>
}

interface Edge {
  id: string
  source: string
  target: string
  sourceHandle?: string
  targetHandle?: string
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Vue.js and Nuxt 3
• Flow visualization powered by Vue Flow
• Graph layout by Dagre
• UI components from Naive UI and Vuetify

📞 Support

• 💬 Discord: @phinolex

---

Made with ❤️ by Phinolex