# XWUIWorkflow

An interactive node-and-connection workflow canvas (n8n / automation-builder style) drawn on a dotted-grid SVG: typed nodes (each with an icon, colored ports, border/background style) connected by bezier edges with arrowheads. Nodes are draggable, ports can be dragged out to create connections (dropping on empty canvas spawns a "New Node" placeholder), and right-click context menus delete nodes or connections. A header with `View` / `Data` tabs (toggled by `conf_comp.showTabs`, starting on `conf_comp.defaultTab`) lets users edit the live `{ schema, data }` workflow as JSON in a textarea; pass it through `data.workflow`, read it back with `getWorkflow()`, or replace it via `setWorkflow()`. A built-in default schema (trigger / slack / placeholder node types) renders when no workflow is supplied.

## Basic Usage

Builds a three-step workflow - Receive request → Approve → Fulfill - wired by two connections, rendered on the draggable canvas.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A three-node flow (Receive request → Approve → Fulfill) with two connecting edges on the interactive workflow canvas.
```

## Approval Branches

A review step that forks into approve and reject paths, with the reject path looping back.

```example
file: examples/ApprovalBranches.ts
html: examples/ApprovalBranches.html
title: Approval Branches
description: An expense workflow that branches at manager review into reimburse and return-to-filer paths.
```

## Release Pipeline

A longer linear CI/CD pipeline wired end to end from commit to production.

```example
file: examples/ReleasePipeline.ts
html: examples/ReleasePipeline.html
title: Release Pipeline
description: A six-stage commit-to-prod delivery pipeline rendered as a single left-to-right flow.
```

```api
```