Story Editor - Visual Examples

Example 1: Simple Order Processing Flow

Traditional View (Edges)

Edge 1: Customer --[submits]--> Order
Edge 2: Order --[sends to]--> Order Management System
Edge 3: Order Management System --[validates]--> Order
Edge 4: Order --[forwards to]--> Warehouse

Story View

┌─────────────────────────────────────────────────────────────────────┐
│ Story Editor - Order Processing                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  ⋮⋮  [10] Story starting from Customer                              │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Customer submits Order then sends to Order Management System│   │
│  │ ✏️ Edit  🗑️ Delete  ⬆️ Insert Before  ⬇️ Insert After        │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  ⋮⋮  [20] Story starting from Order Management System               │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Order Management System validates Order then forwards to    │   │
│  │ Warehouse                                                    │   │
│  │ ✏️ Edit  🗑️ Delete  ⬆️ Insert Before  ⬇️ Insert After        │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
└─────────────────────────────────────────────────────────────────────┘

Example 2: Parallel Flows (Meanwhile)

Traditional View

Step 10: Customer --[submits]--> Order --[sends to]--> OMS
Step 10: Customer --[checks]--> Status --[views from]--> Tracking
Step 20: OMS --[validates]--> Order --[forwards to]--> Warehouse

Story View

┌─────────────────────────────────────────────────────────────────────┐
│ ⚠️ Parallel Activities Detected                                     │
│                                                                       │
│  ⋮⋮  [10] Story starting from Customer                              │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Customer submits Order then sends to Order Management System│   │
│  └─────────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Meanwhile: Customer checks Status then views from Tracking  │   │
│  │ System                                                       │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  ⋮⋮  [20] Story starting from Order Management System               │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Order Management System validates Order then forwards to    │   │
│  │ Warehouse                                                    │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
└─────────────────────────────────────────────────────────────────────┘

Example 3: Complex Process with Multiple Parallel Flows

Story View

┌─────────────────────────────────────────────────────────────────────┐
│  ⋮⋮  [10] Customer Order Submission                                 │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Customer submits Order then sends to Order Management System│   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  ⋮⋮  [20] Order Validation & Notifications                          │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Order Management System validates Order then forwards to    │   │
│  │ Warehouse                                                    │   │
│  └─────────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Meanwhile: Order Management System creates Notification     │   │
│  │ then sends to Email Service                                  │   │
│  └─────────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Meanwhile: Order Management System logs Event then stores in│   │
│  │ Audit System                                                 │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  ⋮⋮  [30] Warehouse Processing                                      │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Warehouse picks Order then updates to Inventory System      │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  ⋮⋮  [40] Shipment & Customer Notification                          │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Warehouse creates Shipment then sends to Shipping Provider  │   │
│  └─────────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Meanwhile: Shipping Provider generates Tracking Number then │   │
│  │ sends to Customer                                            │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                       │
└─────────────────────────────────────────────────────────────────────┘

Color Coding (In Actual UI)

Elements are color-coded for clarity:

• 🔵 Source (blue): Customer, Order Management System, Warehouse
• 🟢 Action (green): submits, validates, picks
• 🟡 Data Object (yellow): Order, Notification, Shipment
• 🟣 Target (purple): Order Management System, Email Service, Customer

Example with Colors:

[Customer] submits [Order] then sends to [Order Management System]
  🔵       🟢       🟡              🟢          🟣

Drag & Drop Interaction

Before Drag

│  ⋮⋮  [10] Customer Order Submission
│  ⋮⋮  [20] Order Validation
│  ⋮⋮  [30] Warehouse Processing

During Drag (dragging step 30 up)

│  ⋮⋮  [10] Customer Order Submission
│  ╔══════════════════════════════╗
│  ║ [30] Warehouse Processing    ║  ← Being dragged
│  ╚══════════════════════════════╝
│  ⋮⋮  [20] Order Validation       ← Drop zone highlighted

After Drop & Renumber

│  ⋮⋮  [10] Customer Order Submission
│  ⋮⋮  [20] Warehouse Processing     ← Moved up, renumbered
│  ⋮⋮  [30] Order Validation         ← Renumbered

Toolbar Actions

┌─────────────────────────────────────────────────────────────┐
│ [🔗 Merge Selected] [✂️ Split Story] [🔢 Renumber All]      │
└─────────────────────────────────────────────────────────────┘

Merge Example

Select stories with same logical flow:

Before:
  [10] Customer submits Order
  [30] Customer checks Status

After Merge:
  [10] Customer submits Order
  Meanwhile: Customer checks Status

Split Example

Break a complex story into separate flows:

Before:
  [10] OMS validates Order
  Meanwhile: OMS creates Notification
  Meanwhile: OMS logs Event

After Split:
  [10] OMS validates Order
  [15] OMS creates Notification
  [16] OMS logs Event

Empty State

When no stories exist:

┌─────────────────────────────────────────────────────────────┐
│                                                               │
│                          📖                                  │
│                                                               │
│              No stories yet.                                  │
│     Create process steps to see them here.                   │
│                                                               │
└─────────────────────────────────────────────────────────────┘

Mobile/Responsive View

On smaller screens, stories stack vertically with simplified controls:

┌────────────────────────────┐
│ [10] Customer Submission   │
│ ⋮⋮                         │
│ Customer submits Order     │
│ then sends to OMS          │
│ [Edit] [Delete]            │
└────────────────────────────┘

┌────────────────────────────┐
│ [20] Order Validation      │
│ ⋮⋮                         │
│ OMS validates Order        │
│ then forwards to Warehouse │
│ [Edit] [Delete]            │
└────────────────────────────┘

Benefits of Story View

1. Natural Language: Easy to read and understand
2. Logical Grouping: Parallel flows clearly marked
3. Step Relationships: Visual connection between N and N+1
4. Process Overview: Quick scan of entire flow
5. Easy Editing: Drag, drop, split, merge
6. Documentation Ready: Export-friendly format

Use Case: Process Review Meeting

Stakeholder: "What happens when a customer places an order?"

Story View Shows:
┌─────────────────────────────────────────────────────────────┐
│ Step 10: Customer submits Order then sends to Order         │
│          Management System                                   │
│                                                              │
│ Step 20: Order Management System validates Order then       │
│          forwards to Warehouse                               │
│          Meanwhile: Order Management System creates          │
│          Notification then sends to Email Service            │
│                                                              │
│ Step 30: Warehouse picks Order then updates to Inventory    │
│          System                                              │
└─────────────────────────────────────────────────────────────┘

Clear, readable, stakeholder-friendly! ✅