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.