Design Flight Simulator

Execute your architectural diagrams before writing code to identify logic gaps and validate request paths.

What is the Design Flight Simulator?

The Design Flight Simulator allows you to simulate request flows through your Flow and Architecture views, identifying potential issues during the design phase rather than during implementation.

Key Benefits:

• Catch circular paths and infinite loops before coding
• Validate decision logic with mock data
• Identify unreachable nodes and dead ends
• Test different scenarios with configurable payloads
• Visual execution highlighting on the canvas

Getting Started

1. Create a Flow

Start by creating a flow in either Unified View or Planning Graph view:

1. Add a START node as your entry point
2. Connect nodes with edges to create execution paths
3. Add DECISION nodes for conditional branching
4. End with END nodes

2. Configure Your Simulation

Before running:

1. Select a START node on the canvas
2. In the Properties panel, click "Run Simulation"
3. Or open the Simulation tab in the sidebar

3. Set Up Mock Data

In the Payload tab, define JSON data to test your flow:

Tip: The Simulation tab uses the currently selected START node. If no START node is selected, use the START node Properties panel Run Simulation button.

{
  "userId": "123",
  "isGuest": true,
  "orderTotal": 150.0,
  "items": ["item1", "item2"]
}

This payload is used when evaluating DECISION node conditions.

Using the Simulator

Playback Controls

The simulation toolbar provides:

• Play ▶️ - Start automatic execution
• Pause ⏸️ - Pause execution
• Step ⏭️ - Execute one step at a time
• Reset 🔄 - Clear and start over
• Speed ⚡ - Adjust playback (Slow/Normal/Fast)

Understanding the Console

The Console tab shows:

• Step-by-step log of each node visited
• Timestamps for each execution step
• Node type icons (START, STEP, DECISION, etc.)
• Error messages highlighted in red

Visual Feedback

While simulating, watch the canvas:

• Primary glow + full-node tint - Currently executing node
• Subtle full-node tint - Already visited nodes (persists until reset)
• Animated arrow - Active execution path

Decision Logic

DECISION nodes evaluate conditions against your mock payload:

Supported Operators

• equals - Exact match: payload.user.isGuest === true
• notEquals - Not equal: payload.status !== "error"
• greaterThan - Numeric: payload.orderTotal > 100
• lessThan - Numeric: payload.count < 10
• contains - String/array: payload.items contains "premium"
• exists - Property exists: payload.userId exists

Nested Properties

Access nested data using dot notation:

payload.user.profile.settings.theme
equals "dark"

Multiple Branches

DECISION nodes can have multiple outgoing edges:

1. Each edge can have a condition
2. The first matching condition is followed
3. If no conditions match, the default path (no condition) is used

Example:

DECISION: "Check User Type"
├─ Guest (isGuest === true) ──> Guest Flow
├─ Premium (tier === "premium") ──> Premium Flow
└─ Default ──> Standard Flow

Error Detection

The simulator automatically catches:

Circular Paths

If the simulator detects it's revisiting a node, it stops and reports:

Error: Circular path detected at node "step-3"

Fix: Add an END node or DECISION to exit the loop.

Unreachable Nodes

Nodes not connected to the START node are flagged:

Warning: 2 unreachable nodes detected

Fix: Connect nodes to the main flow or remove them.

Missing Handlers

Nodes without outgoing edges (except END nodes):

Warning: Node "process-1" has no outgoing edges

Fix: Add edges or change to an END node.

Design Validation

Before running a simulation, validate your design:

1. Select your START node
2. Look for validation warnings in the Properties panel
3. Address any issues:
   • Unreachable nodes
   • Circular paths
   • Missing END nodes
   • Orphaned nodes

Supported Node Types

The simulator handles these node types:

Examples

E-commerce Checkout

START (User Checkout)
  ↓
STEP (Validate Cart)
  ↓
DECISION (Cart Value > $100?)
  ├─ Yes ──> STEP (Apply Discount)
  └─ No  ──> STEP (Calculate Total)
  ↓
SERVICE_CALL (Payment API)
  ↓
DECISION (Payment Success?)
  ├─ Yes ──> STEP (Send Confirmation)
  └─ No  ──> STEP (Show Error)
  ↓
END (Complete)

User Registration

START (Register User)
  ↓
STEP (Validate Email)
  ↓
DECISION (Email Valid?)
  ├─ No  ──> STEP (Show Error) ──> END (Failed)
  └─ Yes ──> STEP (Check Existing)
            ↓
            DECISION (User Exists?)
              ├─ Yes ──> STEP (Show Login) ──> END (Redirect)
              └─ No  ──> STEP (Create Account)
                        ↓
                        STEP (Send Welcome Email)
                          ↓
                          END (Success)

Tips & Best Practices

1. Start Simple - Build basic flows first, then add complexity
2. Test Edge Cases - Use different payloads to test error paths
3. Validate Often - Run design validation after major changes
4. Use Meaningful Names - Node names appear in console logs
5. Add END Nodes - Every path should terminate
6. Check for Loops - Ensure DECISION nodes have exit conditions

Keyboard Shortcuts

• Space - Play/Pause simulation
• → - Step forward
• Esc - Reset simulation

Troubleshooting

Simulation won't start:

• Ensure a START node is selected
• Check that nodes are connected with edges
• Verify your mock payload is valid JSON

Circular path detected:

• Review edges for unintended loops
• Add END nodes or DECISION nodes to create exits

Decision not working:

• Check condition syntax
• Verify payload property names
• Ensure correct operator for data type

Related Features

• Views Overview - Learn about different view modes
• Node Types Reference - Complete node type documentation
• Collaboration Features - Work together in real-time

Next Steps

1. Create your first flow with START and END nodes
2. Add a DECISION node with conditions
3. Configure a mock payload
4. Run your first simulation!