> ## Documentation Index
> Fetch the complete documentation index at: https://docs.quixa.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas Frames & Domain Grouping

> Organize visual workflows into domain boundaries with Canvas Frames, synchronized multi-node dragging, and architecture responsibility mapping.

As enterprise workflows scale to dozens of nodes across multiple microservices, visual readability and ownership clarity become paramount.

**Canvas Frames** (`CanvasGroupFrame`) allow teams to group related nodes into visual domain clusters with colored boundary frames, custom titles, and synchronized multi-node movement.

```
┌────────────────────────────────────────────────────────┐
│  🟣 Identity & Auth Domain                             │
│   [POST /login] ──> [POST /verify-otp] ──> [GET /me]   │
└────────────────────────────────────────────────────────┘
                           │
                           ▼
┌────────────────────────────────────────────────────────┐
│  🔵 Payment & Checkout Domain                          │
│   [POST /cart/checkout] ──> [POST /process-payment]    │
└────────────────────────────────────────────────────────┘
```

***

## 1. Architectural Responsibility Matrix

In an end-to-end integration workflow spanning multiple squads, Canvas Frames establish an immediate **Live Responsibility Matrix**:

* **Domain Ownership**: Clearly delimits which squad owns each segment (e.g., Core Platform, Checkout Squad, Billing Squad, Compliance).
* **Instant Bottleneck Diagnosis**: When execution results highlight latency spikes or test failures, engineering teams immediately identify the responsible squad:
  > *"The regression bottleneck is located inside the Payment Domain's 3D Secure verification node—let's focus the investigation there."*
* **Visual Documentation**: Serves as self-documenting architectural documentation for developers, analysts, and leadership without needing secondary diagrams.

***

## 2. Key Frame Capabilities

### Synchronized Multi-Node Movement

Dragging a Canvas Frame by its header or boundary moves the frame **and all enclosed nodes synchronously**:

* Node coordinate offsets remain fixed relative to the frame.
* Connection wires, anchor ports, and bezier curves update smoothly in real time without layout distortion.

### Visual Styling & Color Coding

* **Palette Selection**: Assign distinct color themes (Purple, Blue, Emerald, Amber, Rose, Slate) to represent different services or lifecycle environments.
* **Inline Renaming**: Double-click the frame title bar to update the domain label directly on the canvas.
* **Child Event Isolation**: Clicking child nodes, ports, or action buttons inside a frame preserves individual node focus without triggering unintended frame drags.

### Persistence & Export

Canvas Frames are fully serialized into the flow definition schema (`Flow.FlowData.canvasGroups`), ensuring consistent layouts when sharing flows across teams or exporting definitions to Git.

***

## 3. Best Practices for Enterprise Canvases

1. **Group by Microservice or Squad**: Frame nodes according to backend service boundaries to facilitate cross-functional debugging.
2. **Isolate Error & Recovery Paths**: Use distinct red/amber frames to visually group fallback branches, circuit breakers, and compensatory actions.
3. **Annotate with Text Labels**: Pair frames with **Free-Format Canvas Text** annotations to document SLAs, environment dependencies, or API rate limits.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.