Flow Weaver for Visual Studio Code

Visual workflow editor for VS Code with seamless integration for .fw.yaml workflow files.

Features

• Visual Workflow Editor: Edit Flow Weaver workflows with an intuitive visual interface
• Single Panel Architecture: One unified Flow Weaver panel manages multiple workflow tabs
• WebSocket Integration: Real-time synchronization between VS Code and Flow Weaver
• Context Menu Actions: Quick access to workflow operations via right-click
• Custom File Icons: Optional Flow Weaver icon theme for .fw.yaml files
• Keyboard Shortcuts: Fast workflow access with keyboard commands
• External Browser Support: Open workflows in external browser when needed
• Workflow Management: Create, rename, and delete workflows directly from VS Code

Installation

From VSIX Package (Beta)

1. Download the latest .vsix file from the releases
2. Open VS Code
3. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
4. Type "Install from VSIX" and select the downloaded file
5. Reload VS Code when prompted

From Marketplace (Coming Soon)

Search for "Flow Weaver" in the VS Code Extensions marketplace.

Usage

Opening Workflows

Method 1: Context Menu (Recommended)

1. Right-click any .fw.yaml file in the Explorer
2. Select "Open in Flow Weaver (VS Code Panel)"
3. The visual editor opens in a new tab

Method 2: Keyboard Shortcut

1. Select a .fw.yaml file
2. Press Ctrl+Alt+F (or Cmd+Alt+F on Mac)

Method 3: Status Bar Button

• Click the "Flow Weaver" button in the bottom status bar to open the panel

Editing YAML Directly

To edit the .fw.yaml file as text:

1. Right-click the file
2. Select "Open as Text"

Creating New Workflows

1. Right-click in the Explorer or on a folder
2. Select "New Flow Weaver Workflow"
3. Enter a workflow name
4. The workflow files are created and ready to edit

Managing Workflows

Rename Workflow:

• Right-click .fw.yaml file → "Rename Workflow"
• All associated files (.fw.yaml, .fw.ts, .fw.js, .fw.d.ts) are renamed together

Delete Workflow:

• Right-click .fw.yaml file → "Delete Workflow"
• All associated files are moved to trash

Available Commands

Access these via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

• Flow Weaver: Open Flow Weaver - Open the Flow Weaver panel
• Flow Weaver: New Flow Weaver Workflow - Create a new workflow
• Flow Weaver: Open in Flow Weaver (VS Code Panel) - Open selected workflow
• Flow Weaver: Open as Text - Open workflow file in text editor
• Flow Weaver: Open Flow Weaver in External Browser - Open in system browser
• Flow Weaver: Rename Workflow - Rename a workflow and its files
• Flow Weaver: Delete Workflow - Delete a workflow and its files
• Flow Weaver: Show Server Status - Display server health information
• Flow Weaver: Open Developer Tools - Open webview developer tools

Keyboard Shortcuts

• Ctrl+Alt+F (Windows/Linux) / Cmd+Alt+F (Mac) - Open selected .fw.yaml file in Flow Weaver

File Icon Theme

Flow Weaver includes a custom file icon theme to display the Flow Weaver icon next to .fw.yaml files.

Enabling the Icon Theme

1. Press Cmd+K then Cmd+T (or go to File > Preferences > File Icon Theme)
2. Select "Flow Weaver File Icons"
3. Your .fw.yaml files will now display the Flow Weaver icon

Architecture

Flow Weaver runs two local servers:

• Main Server (port 3513): Handles workflow execution and file operations
• SPA Server (port 3512): Serves the visual editor interface

The extension automatically starts these servers when VS Code loads and manages their lifecycle.

Requirements

• Visual Studio Code 1.104.0 or higher
• Node.js (bundled with extension)
• Workspace must be open (Flow Weaver requires a workspace folder)

Known Limitations

• Flow Weaver requires an open workspace folder to function
• The file icon theme must be manually enabled
• Servers run on fixed ports (3512, 3513) - conflicts may occur if these ports are in use
• Single workspace support (multiple workspace folders use the first one)

Troubleshooting

Servers Won't Start

1. Check if ports 3512 and 3513 are available
2. Try restarting VS Code
3. Check the output panel (View > Output > Flow Weaver) for error messages

Workflow Won't Open

1. Ensure the Flow Weaver panel is open (click status bar button)
2. Check server status via Command Palette > "Show Server Status"
3. Try opening in external browser as fallback

File Icons Not Showing

Make sure you've enabled the "Flow Weaver File Icons" theme:

1. Cmd+K then Cmd+T
2. Select "Flow Weaver File Icons"

License

FLOW WEAVER BETA LICENSE - Proprietary Software

Copyright (c) 2024-2025 Ricardo José Horta Morais, Portugal. ALL RIGHTS RESERVED.

This is proprietary beta software licensed for evaluation and testing purposes only. See LICENSE file for complete terms and conditions.

Enjoy building workflows with Flow Weaver! 🎨